CjsBaseClass
DRY Javascript Class with inheritance and embedded jQuery 2.2.4.
Install
> bower install cjsbaseclass --save> node bower_components/cjsbaseclass/dist/install-sublime-snippets.node.js
Sublime Snippets
- base_js_main_class.sublime-snippet
- cjsbaseclass.sublime-completions
Embedded libraries
Usage
Options
data-jquery-exclusive
: If false, expose internal jQuery to global environment;data-silent-host
: All debug off on production environment.
Command reference
Cookies
selfcookie; selfcookie; // => 'value' selfcookie; // => undefined selfcookie; selfcookie; selfcookie; // => { foo: 'bar' }
waitReady('ClassName', callback)
// Waits another class (CjsBaseClass based) on ready and call a callbackselfwaitReady 'Tother' { self; };
waitStarted('ClassName', callback)
// Waits another class (CjsBaseClass based) on start and call a callbackselfwaitStarted 'Tother' { self; };
trigger(trigger_name, trigger_args)
// Fire a jQuery triggerself;
onTrigger(trigger_name, trigger_args)
// Listen a jQuery triggerselfonTrigger 'fire-trigger' { console; };
onTrigger(trigger_name_1, trigger_args_1, trigger_name_2, trigger_args_2, ...)
selfonTrigger 'fire-trigger-1' { console; } 'fire-trigger-2' { console; } 'fire-trigger-3' { console; };
waitTrigger(trigger_name, callback, miliseconds)
// Waits a trigger fire with trigger_name param, if this already fired, callback is called immediatelyselfwaitTrigger 'fire-trigger' { console; };
browser
// Returns browser nameselflog; // Returns 'chrome' or 'firefox' or 'safari' or 'ie' or 'other'
embbedded properties
// Returns all options on create classselfoptions;Object debug: 1 highlighted: "purple" custom_option: "custom_value"
pre defined variables
// Returns in case browser (ex: chrome)selfischrome; // returns trueselfisfirefox; // returns falseselfissafari; // returns falseselfisie; // returns falseselfisie9; // returns false
is
// Returns is browser defined// options: self.is.chrome, self.is.firefox, self.is.safari, self.is.ie, self.is.ie9var myvar = selfisie9 ? 'IS IE9 :(' : 'IS NOT IE9 :D';
print(string)
// Log to console - only if a debug is trueselflog;
alert(string)
// Log to console with alert iconselflog;
info(string)
// Log to console with info iconselflog;
danger(string)
// Log to console with error iconselflog;
lock(string)
// Add dynamic locker variableself;self;
isLocked(string)
// Return if dynamic variable is lockedself; // trueself; // trueself; // falseself; // false
unlock(string)
// Remove dynamic locker variableself;self;
setDebug(boolean)
// Enable/disble debug modeself; // Debug mode on: print logs on consoleself; // Debug mode off: self.log.print does not print console logs
setDebugMode(integer)
// Set debug modeself; // debug is false, none on console log is printedself; // debug is true, console log is printedself; // debug is true, console log is printed (developer's log include)
Constants
// Debug modesvar CJS_DEBUG_MODE_0 = 0;var CJS_DEBUG_MODE_1 = 1;var CJS_DEBUG_MODE_2 = 2;
Set/unset global debug mode
// Set/unset global debug modecjsbaseclass_nsdev;cjsbaseclass_nsdev;
Dynamic load script with callback
selfutilsloadScript 'https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.2/taffy-min.js' { var cities = ; cities; console; };// TaffyDB: http://taffydb.com
Control individual debug messages
MyNameSpacemyclassutils; // Only class intro has debug messages;MyNameSpacemyclassutils; // All classes has debug messages;
Set scroll to top
selfutilswaitScrollTop { console; };// On first time fires a trigger: "site-scroll-on-top"
Scroll Animate
selfui;selfui;selfui;selfuianimateScroll document 1000 'easeInOutCubic' { console; };
Form Utils
Serialize a form to Json
check-1 check-2 check-3 check-4 radio-1 radio-2 radio-3 radio-4 Select Option 1} Option 2} Option 3} Text Area Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
selfform;// returns: "frName": "Person Name" "frCheck": "check-2" "check-3" "frRadio": "radio-2" "frSelect": "2" "frText": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\r\nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\r\nconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\r\ncillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\r\nproident, sunt in culpa qui officia deserunt mollit anim id est laborum."
PHPJS Functions
- base64_decode
- base64_encode
- chr
- compact
- empty
- extract
- get_defined_vars
- html_entity_decode
- htmlentities
- htmlspecialchars
- htmlspecialchars_decode
- isset
- md5
- nl2br
- number_format
- parse_str
- parse_url
- sprintf
- str_ireplace
- str_pad
- str_replace
- strip_tags
- stripos
- strpos
- strtr
- trim
- uniqid
- urldecode
- urlencode
- utf8_decode
- utf8_encode
JavaScript Native Class Ajax structure
// COMPLETE selfajax 'options': slug : 'slug-name' exclusive: false url : 'test.json' type : 'POST' dataType : 'json' { selflog; } { selflog; } { selflog; } { selflog; } { selflog; } ; // BASIC USE // BASIC RESULT JSON STRUCTURE "result": true "message": "Your request processed successfully." "id": 125316 selfajax 'options': slug : 'slug-name' exclusive: false url : 'result_true.json' type : 'GET' dataType : 'json' { selflog; } { selflog; } ; // ONLY REQUEST ONDONE selfajax 'options': slug : 'another-name' url : 'test.json' type : 'POST' dataType : 'json' { selflog; } ; // ONLY REQUEST selfajax 'options': slug : 'only-json' exclusive: true url : 'test.json' type : 'POST' dataType : 'json' ; // WITH AUTO OVERLAY selfajax 'options': slug : 'overlay' autowait : 'auto' url : 'test.json' type : 'POST' dataType : 'json' ; // TRIGGERS selfonAjaxTriggers 'slug-name' { } { } { } { } { } ;
JavaScript app class structure
/* global CjsBaseClass,CJS_DEBUG_MODE_0,CJS_DEBUG_MODE_1,CJS_DEBUG_MODE_2 */var MyNameSpace = MyNameSpace || {};MyNameSpace{ 'use strict'; var self = this; this { selfvar_name = 'var_value'; selfevents; }; this { selfevents; }; this { selfevents; }; this { }; this { }; this { // AUTO STARTED CODE ON CLASS READY AND STARTED }; CjsBaseClass;}; MyNameSpacemyclass = windowcjsbaseclass_jquery 'myclass' 'debug' : CJS_DEBUG_MODE_1 'highlighted' : 'auto' 'another_opt' : 'custom_value' ;