Skip to content
/ CORE Public

Core is a modular, scalable and concise frontend framework.

License

Notifications You must be signed in to change notification settings

harry-sm/CORE

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CORE

Core is a modular, scalable and concise frontend framework. It's main purpose is to manage modules, plugins and extensions. It ensures loose coupling of components and allows for the use whatever communication system you want; however, one is provide in the extras folder.

Advance Usage

Fetch the project via git:

git clone https://github.com/harry-sm/CORE.git

Include in your project

<script src="<path>/core.js"></script>
<script src="<path>/extensions.js"></script>

This library uses a variant of the naming convention known as Hungarian Notation for variable names. Simply put the variable name is prefixed with the first letter of the data type that the variable is.

Prefix Data Type Example
s string sData
n number nData
a array aData
o object oData
$ DOM object $element

Browser Support

  • IE9+
  • Chrome
  • Firefox

The parameter $ used in the factory functions contains the DOM element that corresponds with the module ID and other module data along with the methods for any extensions and plugins specified. All dependencies are injected into each component when they are instantiated.

**NOTE: ** All modules are connected to a DOM element.

Parameter(object) Defaults Type Description
$ domEl [HTMLCollection] The corresponding DOM element of the module name.
find(sEl) function Gets the descendants of the module DOM element that matches the query.
length number The number of elements that was returned from the DOM query.
moduleIdentifier string The name of the module.
plugin( sPluginID, oData) function Initialize any the plugin specified.

$.find(sEl)

Parameter Type Example Description
sEl string '#id' of '.classname' The selector string that will be queried against the DOM elements.

$.plugin( sPluginID, oData)

Parameter Type Example Description
sPluginID string 'accordion' The name of the plugin.
oData object {data} The data should be provided upon initialization of the plugin.

Module Methods

CORE.module.create(sModuleID, aExtensions, fFn, aPlugins)

This factory function registers a new module to CORE module management system.

Parameters

Parameter Type Example Description
sModuleID string '#foo' The module name which is use to query the DOM for corresponding element with an ID with the same name.
aExtensions [string] ['dom'] An array containing the extension IDs of the module's dependencies.
fFn function function ($) { ... } The function that contains the implementation details of the module.
aPlugins [string] ['myPlugin'] An array containing the plugin IDs of the module's dependencies.

Return Type

void

Example

CORE.module.create('#foo', ['dom'], function ($) {
	var $childElement = $.find('#foo-child');
  
    return {
        init: function() {
            $.plugin('plugin', $);
        },
        destroy: function () {
          //body
        }
    };
}, ['plugin']);
<div id="foo">
  ...
</div>

CORE.module.start( sModuleID, oData )

Starts the module by creating a new instance of it.

Parameters

Parameter Type Example Description
sModuleID string '#foo' The name of the module that should be instantiated.
oData object {
name: 'Harry'
}
Any data that should be consumes upon the module instantiation. The data is passed to the init() function of the module and is optional.

Return Type

void

Example

CORE.module.start('#foo');

CORE.module.stop( sModuleID )

Stops the module by calling the destroy method and removing the instance from CORE.

Parameters

Parameter Type Example Description
sModuleID string '#foo' The name of the module instance that should be destroyed.

Return Type

void

Example

CORE.module.stop('#foo');

CORE.module.startAll( aExcept )

Start all modules except the ones specified.

Parameters

Parameter Type Example Description
aExcept [string] ['#bar'] An array containing all the module IDs that should be instantiated.

Return Type

void

Example

CORE.module.startAll();

CORE.module.stopAll( aExcept )

Stop all modules except the ones specified.

Parameters

Parameter Type Example Description
aExcept [string] ['#foo'] An array containing all the module IDs that should not be instantiated.

Return Type

void

Example

CORE.module.stopAll(['#foo']);

CORE.module.restart( aModuleID )

Stops and then starts modules.

Parameters

Parameter Type Example Description
aModuleID [string] ['#foo'] The name of the module that should be restarted.

Return Type

void

Example

CORE.module.restart(['#foo']);

Plugins

Plugins are reuseable behaviours that are used within the app, such as sliders, accordion and carousels.

CORE.plugin.create( sPluginID, aExtensions, fFn )

Registers plugins to CORE.

Parameters

Parameter Type Example Description
sPluginID string 'accordion' The name of the plugin. This should be unique.
aExtensions [string] ['dom', 'events'] An array containing the extension IDs of the module's dependencies.
fFn function function ($) { ... } The function that contains the implementation details of the plugin.

Return Type

void

Example

CORE.plugin.create('accordion', ['dom', 'events'], function( $ ) {
	var
		nPrev,
		nIdx,
		_$elem,
		$accordionBtns
	;

	function selectAccordionContent (){
		nIdx = $.dom.index(this, $accordionBtns);

		if(nPrev === nIdx){
			$.dom.removeClass('current', $accordionBtns[nIdx]);
			nPrev = null;
			return;
		}
		$.dom.removeClass('current', $accordionBtns);
		$.dom.addClass('current', $accordionBtns[nIdx]);

		nPrev = nIdx;
	}
	return {
		init: function ($elem){
			_$elem = $elem;
			$accordionBtns = _$elem.find('.accordion-btn');

			$.events.on(_$elem, 'click', '.accordion-btn', selectAccordionContent);
		},
		destroy: function (){
			$.events.off(_$elem, 'click', '.accordion-btn', selectAccordionContent);
		}
	};
});

Usage

<div id="accordian-element" class="accordion">
    <div class="accordion-btn">Accordian 1</div>
    <div class="accordion-content">
        <div>
            Content 1
        </div>
    </div>
    <div class="accordion-btn">Accordian 2</div>
    <div class="accordion-content">
        <div>
            Content 2
        </div>
    </div>
</div>
CORE.module.create('#accordian-element', ['dom'], function ($) {	
	return {
		init: function() {
			$.plugin('accordion', $);
		},
		destroy: function () {
			this.plugin = null;
		}
	};

}, ['accordion']);

Extensions

Extensions are third party functionality you want to inject into the module, such as DOM manipulation, DOM events and a messaging system like a mediator.

CORE.extension.create( sExtensionID, fFn )

Registers extensions to CORE.

Parameters

Parameter Type Example Description
sExtensionID string 'dom' The name of the extension. This should be unique.
fFn function function ($) { ... } The function that contains the implementation details of the extension.

Return Type

void

Example

CORE.extension.create('dom', function ( oData ){
	return {
		addClass: function (sClassName, $el) {
            // body
		},
		removeClass: function (sClassName, $el) {
			// body
		},
		toggleClass: function (sClassName, $el) {
			// body
		},
		hasClass: function (sClassName, $el) {
			// body
		},
		...
	};
});

Usage

CORE.module.create('#elem', ['dom'], function ($) {
	return {
		init: function() {
            // adds css class hide to it's dom element.
			$.dom.addClass('.hide', $);
		},
		destroy: function () {
		}
	};

});

CORE

CORE.debug( bOption )

Logs warnings and errors about CORE's internal operations to the console. Default value: true

Parameters

Parameter Type Example Description
bOption boolean true Enable or disable debug mode.

Return Type

void

Example

CORE.debug(true)

CORE.log( nSeverity, sMsg )

Prints message to the console.

Parameters

Parameter Type Example Description
nSeverity number 2 Specifies the type of message that will be logged to the console. Options:
1: INFO
2: WARNING
3: ERROR
sMsg string 'This is a warning' The message that should be logged to the console.

Return Type

void

Example

CORE.log(1, 'Normal message');
CORE.log(2, 'Warning message');
CORE.log(1, 'Error message');

CORE.extend( sExtensionID, fFn )

Extend adds additional functionality you want to the CORE object.

Parameters

Parameter Type Example Description
sExtensionID string 'dom' The name of the extension. This should be unique.
fFn function function ($) { ... } The function that contains the implementation details of the extension.

Return Type

void

Example

CORE.extend('anything', function (){
		return {
			method: function (arg){
				// body
			}
		};
	});

Usage

CORE.anything.method(data);