Skip to content

Create a Custom Module

UIUX Lab edited this page Apr 1, 2020 · 5 revisions

Assuming you are in your application's root directory and want to create components inside src/components/ES6/ as you show above. You can create a new directory and name it demo-module.

πŸ‘‡πŸ‘‡πŸ‘‡

Here’s a sample custom module directory structure, I’ve included some examples of files that would sit inside of each folder:

uix-kit/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   └── ES6/
β”‚   β”‚       β”œβ”€β”€ _app-load.js
β”‚   β”‚       β”œβ”€β”€ _app-load-rtl.js
β”‚   β”‚       └── demo-module/
β”‚   β”‚                β”œβ”€β”€ scss/*.scss
β”‚   β”‚                β”œβ”€β”€ scss-rtl/*.scss
β”‚   β”‚                β”œβ”€β”€ js/*.js
β”‚   β”‚                └── *.html
└──

Step 1. Inside that folder create two sub folders: /scss and /js. If you need to support RTL, create another /scss-rtl.

Step 2. Create a SASS/SCSS file. Go into the src/components/ES6/demo-module/scss/ folder and create a file called: _style.scss. Please import global variables or functions. Here's an example:

/* ====================================================== 
   <!-- Demo Module Stylesheets --> 
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';

.app-demo {
	font-size: $basic-font-size;
    text-align: left;
}

Step 2-2 (Optional). Alright, so if you need to support RTL. You need create a new SASS/SCSS file. Go into the src/components/ES6/demo-module/scss-rtl/ folder and create a file called: _style.scss. Like this:

/* ====================================================== 
   <!-- Demo Module Stylesheets --> 
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';

.app-demo {
    text-align: right;
}

Step 3. Create a JS file. Go into the src/components/ES6/demo-module/js/ folder and create a file called: index.js. In order to make it work we need to import the global variables or functions in file index.js.

Simultaneously, Now you’re ready to import your Stylesheets to use with this component. Import SASS/SCSS file in src/components/ES6/demo-module/js/index.js.

Like this:.

/* 
 *************************************
 * <!-- Demo Module Scripts  -->
 *************************************
 */
import {
    templateUrl,
    homeUrl,
    ajaxUrl,
    browser,
    UixModuleInstance,
    UixGUID,
    UixMath,
    UixCssProperty
} from '@uixkit/core/_global/js';

import '../scss/_style.scss';

export const DEMO_MODULE = ( ( module, $, window, document ) => {
	if ( window.DEMO_MODULE === null ) return false;

    module.DEMO_MODULE               = module.DEMO_MODULE || {};
    module.DEMO_MODULE.version       = '0.0.1';
    
    
    // executes when HTML-Document is loaded and DOM is ready
    module.DEMO_MODULE.documentReady = function( $ ) {
		/* 
		 ---------------------------
		 Function Name
		 ---------------------------
		 */ 
		// your code here...
	
    };
    module.components.documentReady.push( module.DEMO_MODULE.documentReady );
	
    
    
    // executes when complete page is fully loaded, including all frames, objects and images
    module.DEMO_MODULE.pageLoaded    = function() {
		/* 
		 ---------------------------
		 Function Name
		 ---------------------------
		 */ 
		 // your code here...
		
    };
    module.components.pageLoaded.push( module.DEMO_MODULE.pageLoaded );	


	return class DEMO_MODULE {
		constructor() {
			this.module = module;
		}
	};
})( UixModuleInstance, jQuery, window, document );

Step 4. So far, to dynamically import the module you just created in src/components/ES6/_app-load.js. The simplest version directly imports the default:

import DEMO_MODULE from '@uixkit/core/demo-module/js';

Step 4-2 (Optional). If you need to support RTL, in src/components/ES6/_app-load-rtl.js. like this:

import '@uixkit/core/demo-module/scss-rtl/_style.scss';

These RTL modules do not need JavaScript.

Step 5 (Optional). You could also create an HTML file to run the demo of this module separately, all HTML files will be automatically exported into the directory examples/. The demo code of the HTML file is as follows:

<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
	<meta charset="@@{website_charset}" />
	<title>Demo Module - @@{website_title}</title>	
	@@include('./src/components/ES6/_global/include-header.html')
</head>  
<body class="page">
     
    @@include('./src/components/ES6/_global/include-loader.html')
    @@include('./src/components/ES6/_global/include-toggle-trigger.html')
 
    <div class="uix-wrapper">
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
             <div class="uix-header">
                 <div class="container">
                        @@include('./src/components/ES6/_global/include-brand.html')
                        @@include('./src/components/ES6/_global/include-menu.html')
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
    
		<main id="uix-maincontent">
			<!-- Content   
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Demo Module</h3>
							<hr>
						</div>
					</div>
				</div>
			</section>
			
		   <!-- Content  
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container uix-t-c">
                    <div class="row">
                        <div class="col-12">
                            ...
                        </div>
                    </div>
				</div>
			</section>   
		</main> 
        
        @@include('./src/components/ES6/_global/include-copyright.html')
        
    </div>
    <!-- .uix-wrapper end -->
        
    @@include('./src/components/ES6/_global/include-footer.html')

Note πŸ’‘: You could call a specified module script which is commonly used for callbacks of AJAX Response from Asynchronous method. The demo code is here:

import { UixModuleInstance } from '@uixkit/core/_global/js';

if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.pageLoaded();
if ( UixModuleInstance.DEMO_MODULE ) UixModuleInstance.DEMO_MODULE.documentReady($);

Since Uix Kit is not a JavaScript framework, you could use any third-party libraries to build your custom module styles and animation scripts in the most intuitive way.

Clone this wiki locally