Phenix Query

Learn how to work around Phenix Query JS/TypeScript source code to build fancy and interactive components.

What is Phenix Query

• Phenix Query is JavaScript Objects Query Creator with Prototypes functionality that lets you traverse and manipulate, event handling HTML Elements and create interactive components like slideshow, tabbing panels, etc, kinda like jQuery but with Typescript and Plain JS _(ES-Next).
• Phenix is an Elements Selector you can use to select HTML elements with CSS Selectors or JS Object and play with it, and it will always return itself which is an object _(array) of HTML Elements.
• Phenix has its collection of plugins and modules to create an amazing user interface, it almost has everything you will ever need to build a creative web app.
• Phenix JavaScript can be used individually without the CSS/SASS files as a completely self-independent JavaScript Library.
• Phenix JavaScript can be merged and work side by side with any other javascript framework like vue, react, angular, etc.

Typescript Modules

you can import and use the TypeScript modules into your project typescript by import Phenix from './node_modules/phenix-ts' which will import Phenix plugins for you to use it in your project,

or you can use it as a JavaScript module by import Phenix from "./node_modules/phenix-js" inside your script file or even with HTML script in the example below, for more information about how to use P.D.S TypeScript/JavaScript click here.

<script type="module">
import Phenix from "./node_modules/phenix-js" || "CDN URL";
</script>

Build TypeScript

phenix uses webpack to compile the typescript files to valid javascript files and you can run the build script by command line npm run phenix-ts and it will watch any changes you make to the typescripts files and compile it instantly to js files,

💼-your-project[phenix]
📂-src
📁-...
📁-scripts
📂-dist
📁-...
📁-js

Custom Scripts

in the typescript directory phenix/src/typescript you will find a custom-scripts.ts file for your design script you can use and extend the phenix query object and its modules there.

💼-your-project[phenix]
📂-src/scripts
📄index.ts || Phenix Query
📄custom-scripts.ts⠀|| Custom Script
📁-components
📁-features
📁-integration

DOM Selecting

Phenix can be used as an element selector and will return a collection_[object] of HTML Elements for you to loop through and play with them, and it can accept any DOM & CSS Selector, once you select elements with Phenix you can use any of its Prototypes functions and plugins.

//====> Select Elements [Object] <====//
let element = Phenix('.className');

DOM Ready

The .ready() function in Phenix executes the code only when the DOM _{(Document object model)} is fully loaded, It is an inbuilt function in Phenix. It can fire before loading all images, etc. but only when the DOM is ready, The code inserted between Phenix(document).ready() is executed only when the page is ready for JavaScript code to execute.

//====> Check for Document Loading <====//
Phenix(document).ready((event:any) => {
//====> !Here Goes Your Code <====//
....
});

//====> Check for Document Loading <====//
Phenix(document).ready(event => {
//====> !Here Goes Your Code <====//
....
});

Lazy-Loader

Lazy loading is the practice of delaying the load or initialization of resources or objects until they’re actually needed to improve performance and save system resources. For example, if a web page has an image you can display a placeholder and lazy load the full image only when the user arrives at its location.

and in Phenix, there is a Prototype to Activate lazy-loading on all images, videos, audio, iframe, and any of Phenix’s media features of it with a simple function.

//====> Active LazyLoading for [images, video, audio, iframes] <====//
Phenix(document).lazyLoading();

Media Query

phenix media query is a js alternative for the CSS Media Query which let you execute a js callback depending on the screen size mediaQuery(breakpoint, callback(), mobile_first); the method is designed with presets of breakpoints like the Responsive Breakpoints and you can also create a custom breakpoint by defining a number instead of a preset name.

/*====> Extra Small [480 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('xsmall', callback => { /*-- Your Code --*/ });
/*====> Extra Small [0 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('xsmall', callback => {/*-- Your Code --*/}, true);

/*====> Small [576 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('small', callback => { /*-- Your Code --*/ });
/*====> Small [700 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('small', callback => {/*-- Your Code --*/}, true);

/*====> Medium [768 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('medium', callback => { /*-- Your Code --*/ });
/*====> Medium [1100 => 0] Screens Media Query <====*/
Phenix(document).mediaQuery('medium', callback => {/*-- Your Code --*/}, true);

/*====> Large [1200 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('large', callback => { /*-- Your Code --*/ });
/*====> Large [1366 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('large', callback => {/*-- Your Code --*/}, true);

/*====> xLarge [1400 => infinite] Screens Media Query <====*/
Phenix(document).mediaQuery('xlarge', callback => { /*-- Your Code --*/ });
/*====> xLarge [2560 => 0]px Screens Media Query <====*/
Phenix(document).mediaQuery('xlarge', callback => {/*-- Your Code --*/}, true);

Helpers & Utilities

phenix provides a collection of functions that fixes and improve some stuff like .form-control placeholder show/hide effect or form controls group styling with .px-form and activating the Masonry Grid mechanism with .px-masonry or creating viewport animations with .view-status and much more, by default phenix activates all utilities and you can use the function below to re-activate in case you have/need to.

/*====> Activate |or| Re-Activate Phenix Utilites <====*/
Phenix(document).utilities(type);