1. SmartAdmin
  2. Core Plugins
  3. App.Core

App.core.js CORE The heart and soul of SmartAdmin - Responsive WebApp

Debugging console.log

view the app.core.js debugger in realtime; assists in the detection and correction of errors
Toggle Settings Clear Log

App API

Control options for the app API
Usage Returns Description
null Pushes selected classes from the body tag to localstorage/database
- Remove classes from body & saves to localstorage/database
- Clears your localStorage effectively removing all settings and panel configs
- Indicator for Save Settings (mostly aesthetics)
- Push array to body tag. See saving to database for more details
string Fetch class names from body and convert them to JSON string. See saving to database for more details
string Detects webkit and chrome browsers
string Detects whether device is desktop or mobile
- Saves app settings to localstorage
- Saves app settings to localstorage
string Saves app settings to localstorage
bool Saves app settings to localstorage
- Saves app settings to localstorage
- Fires a series of events, see "Initialization shell" to your left, for more details.

Action buttons

Allows you to add action to any HTML element on 'mouseUp' event
Action Type Description
toggle Push data-class to body element
data-action="toggle" data-class="class-a class-b" data-target="#ID"
toggle-swap data-action="toggle-swap" data-class="class-a class-b" data-target="#ID"
toggle-replace data-action="toggle-replace" data-replaceclass="classesToReplace" data-class="replaceWithClass" data-target="body"
data-panel-* Push array to body tag. See saving to database for more details
theme-update data-action="theme-update" data-theme="path_to_css/css.css"
app-reset data-action="app-reset"
factory-reset data-action="factory-reset"
app-print Print page (similar to pressing CTRL/CMD + P) data-action="app-print"
app-fullscreen Activates broswer's fullscreen command (may not work in all browsers) data-action="app-fullscreen"
app-loadscript Load scripts on demand data-action="app-fullscreen" data-loadurl="script.js" data-loadfunction="functionName()" or you can also use initApp.loadScript("js/my_lovely_script.js", myFunction)
playsound Play sounds using data-action="playsound" data-soundpath="https://new2.websingles.at/assets/media/sound/" data-soundfile="filename" (no file extensions)

Config settings

Define preferred application behaviors or configuration options; can modify some functionality of the app 
var myapp_config = {
    root_: $('body'),
    root_logo: $('.page-sidebar > .page-logo')
    throttleDelay: 450,
    filterDelay: 150,
    thisDevice: null, 
    isMobile: (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())), 
    mobileMenuTrigger: null,
    mobileResolutionTrigger: 992,
    isWebkit: ((!!window.chrome && !!window.chrome.webstore) === true || Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 === true),
    isChrome: (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())),
    isIE: ( (window.navigator.userAgent.indexOf('Trident/') ) > 0 === true ),
    debugState: true, 
    rippleEffect: true, 
    mythemeAnchor: '#mytheme',
    navAnchor: '#js-primary-nav',
    navHooks: '#js-primary-nav > ul.navigation'
    navClosedSign: 'ni ni-chevron-down',
    navOpenedSign: 'ni ni-chevron-up',
    navAccordion: true,
    navInitalized: 'js-nav-built',
    navFilterInput: $('#nav_filter_input'),
    navHorizontalWrapperId: 'js-nav-menu-wrapper',
    navSpeed: 500, 
    navClosedSign: 'fal fa-angle-down',
    navOpenedSign: 'fal fa-angle-up',
    appDateHook: $('.js-get-date'),
    storeLocally: true,
    jsArray : []
};

Initilization shell

Showcasing app JS skeleton 
/* App initialize */
var initApp = (function(app) {
    app.saveSettings = function () { ... }
    app.resetSettings = function () { ... }
    app.accessIndicator = function () { ... }
    app.pushSettings = function (DB_string) { ... }
    app.getSettings = function () { ... }
    app.detectBrowserType = function () { ... }
    app.addDeviceType = function() { ... }
    app.windowScrollEvents = function () { ... }
    app.checkNavigationOrientation = function() { ... }
    app.buildNavigation = function() { ... }
    app.mobileCheckActivation = function(){ ... }
    app.toggleVisibility = function (id) { ... }
    app.domReadyMisc = function() { 
       /* get app date */
       /* activate last tab used */
       /* activate/destroy slimscroll */
       /* activates tooltip */
       /* activates image lazyload mechanic */
       /* enable dropdown */
       /* enable ripple effect */
       /* attach action buttons */
       /* menu tap actions (for mobile) */
       /* initialize windows mobile 8 fix for BS4 */
       ...
    }
    return app;
})({});

/* Bind the throttled handler to the resize event */
$(window).resize(
    $.throttle( myapp_config.throttleDelay, function (e) {
        /* (1a) ADD CLASS WHEN BELOW CERTAIN WIDTH (MOBILE MENU) */
        initApp.mobileCheckActivation(); 
    })
); 

/* Bind the throttled handler to the scroll event */
$(window).scroll(
    $.throttle( myapp_config.throttleDelay, function (e) {
        /* EVENTS */
        ...
    })
);

/* Initiate scroll events */
$(window).on('scroll', initApp.windowScrollEvents);

/* Document loaded event */
jQuery(document).ready(function() {
    /* detect desktop or mobile */
    initApp.addDeviceType();
    /* detect Webkit Browser */
    initApp.detectBrowserType();
    /* a. check for mobile view width and add class .mobile-view-activated */
    initApp.mobileCheckActivation();
    /* b. build navigation */
    initApp.buildNavigation(myapp_config.navHooks);
    /* c. run DOM misc functions */
    initApp.domReadyMisc();
});