İlk temizlik tamamlandı bir önceki projeden
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,73 @@
|
||||
/*
|
||||
* Document : app.js
|
||||
* Author : pixelcave
|
||||
* Description: Main entry point
|
||||
*
|
||||
*/
|
||||
|
||||
// Import global dependencies
|
||||
import './bootstrap.js';
|
||||
|
||||
// Import required modules
|
||||
import Tools from './modules/tools';
|
||||
import Helpers from './modules/helpers';
|
||||
import Template from './modules/template';
|
||||
|
||||
// App extends Template
|
||||
export default class App extends Template {
|
||||
/*
|
||||
* Auto called when creating a new instance
|
||||
*
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
/*
|
||||
* Here you can override or extend any function you want from Template class
|
||||
* if you would like to change/extend/remove the default functionality.
|
||||
*
|
||||
* This way it will be easier for you to update the module files if a new update
|
||||
* is released since all your changes will be in here overriding the original ones.
|
||||
*
|
||||
* Let's have a look at the _uiInit() function, the one that runs the first time
|
||||
* we create an instance of Template class or App class which extends it. This function
|
||||
* inits all vital functionality but you can change it to fit your own needs.
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* EXAMPLE #1 - Removing default functionality by making it empty
|
||||
*
|
||||
*/
|
||||
|
||||
// _uiInit() {}
|
||||
|
||||
|
||||
/*
|
||||
* EXAMPLE #2 - Extending default functionality with additional code
|
||||
*
|
||||
*/
|
||||
|
||||
// _uiInit() {
|
||||
// // Call original function
|
||||
// super._uiInit();
|
||||
//
|
||||
// // Your extra JS code afterwards
|
||||
// }
|
||||
|
||||
/*
|
||||
* EXAMPLE #3 - Replacing default functionality by writing your own code
|
||||
*
|
||||
*/
|
||||
|
||||
// _uiInit() {
|
||||
// // Your own JS code without ever calling the original function's code
|
||||
// }
|
||||
}
|
||||
|
||||
// Once everything is loaded
|
||||
jQuery(() => {
|
||||
// Create a new instance of App
|
||||
window.Codebase = new App();
|
||||
});
|
||||
Vendored
+33
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
* Document : bootstrap.js
|
||||
* Author : pixelcave
|
||||
* Description: Import global dependencies
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
********************************************************************************************
|
||||
*
|
||||
* If you would like to use webpack to handle all required core JS files, you can uncomment
|
||||
* the following imports and window assignments to have them included in the compiled
|
||||
* codebase.app.min.js as well.
|
||||
*
|
||||
* After that change, you won't have to include codebase.core.min.js in your pages any more
|
||||
*
|
||||
*********************************************************************************************
|
||||
*/
|
||||
|
||||
// Import all vital core JS files..
|
||||
//import jQuery from 'jquery';
|
||||
//import SimpleBar from 'simplebar';
|
||||
//import Cookies from 'js-cookie';
|
||||
//import 'bootstrap';
|
||||
//import 'popper.js';
|
||||
//import 'jquery.appear';
|
||||
//import 'jquery-scroll-lock';
|
||||
//import 'jquery-countto';
|
||||
|
||||
// ..and assign to window the ones that need it
|
||||
//window.$ = window.jQuery = jQuery;
|
||||
//window.SimpleBar = SimpleBar;
|
||||
//window.Cookies = Cookies;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,791 @@
|
||||
/*
|
||||
* Document : template.js
|
||||
* Author : pixelcave
|
||||
* Description: UI Framework custom functionality
|
||||
*
|
||||
*/
|
||||
|
||||
// Import global dependencies
|
||||
import './../bootstrap.js';
|
||||
|
||||
// Import required modules
|
||||
import Tools from './tools';
|
||||
import Helpers from './helpers';
|
||||
|
||||
// Template
|
||||
export default class Template {
|
||||
/*
|
||||
* Auto called when creating a new instance
|
||||
*
|
||||
*/
|
||||
constructor() {
|
||||
this._uiInit();
|
||||
}
|
||||
|
||||
/*
|
||||
* Init all vital functionality
|
||||
*
|
||||
*/
|
||||
_uiInit() {
|
||||
// Layout variables
|
||||
this._lHtml = jQuery('html');
|
||||
this._lBody = jQuery('body');
|
||||
this._lpageLoader = jQuery('#page-loader');
|
||||
this._lPage = jQuery('#page-container');
|
||||
this._lSidebar = jQuery('#sidebar');
|
||||
this._lSideOverlay = jQuery('#side-overlay');
|
||||
this._lHeader = jQuery('#page-header');
|
||||
this._lHeaderSearch = jQuery('#page-header-search');
|
||||
this._lHeaderSearchInput = jQuery('#page-header-search-input');
|
||||
this._lHeaderLoader = jQuery('#page-header-loader');
|
||||
this._lMain = jQuery('#main-container');
|
||||
this._lFooter = jQuery('#page-footer');
|
||||
|
||||
// Helper variables
|
||||
this._lSidebarScroll = false;
|
||||
this._lSideOverlayScroll = false;
|
||||
this._windowW = Tools.getWidth();
|
||||
|
||||
// Base UI Init
|
||||
this._uiHandleScroll('init');
|
||||
this._uiHandleMain();
|
||||
this._uiHandleHeader();
|
||||
this._uiHandleNav();
|
||||
this._uiHandleForms();
|
||||
this._uiHandleTheme();
|
||||
|
||||
// API Init
|
||||
this._uiApiLayout();
|
||||
this._uiApiBlocks();
|
||||
|
||||
// Core Helpers Init
|
||||
this.helpers([
|
||||
'core-tooltip',
|
||||
'core-popover',
|
||||
'core-tab',
|
||||
'core-custom-file-input',
|
||||
'core-toggle-class',
|
||||
'core-scrollTo',
|
||||
'core-year-copy',
|
||||
'core-appear',
|
||||
'core-appear-countTo',
|
||||
'core-ripple'
|
||||
]);
|
||||
|
||||
// Page Loader (hide it)
|
||||
this._uiHandlePageLoader();
|
||||
}
|
||||
|
||||
/*
|
||||
* Handles sidebar and side overlay scrolling functionality/styles
|
||||
*
|
||||
*/
|
||||
_uiHandleScroll() {
|
||||
let self = this;
|
||||
|
||||
// If .side-scroll is added to #page-container enable custom scrolling
|
||||
if (self._lPage.hasClass('side-scroll')) {
|
||||
// Init custom scrolling on Sidebar
|
||||
if ((self._lSidebar.length > 0) && !self._lSidebarScroll) {
|
||||
self._lSidebarScroll = new SimpleBar(self._lSidebar[0]);
|
||||
|
||||
// Enable scrolling lock
|
||||
jQuery('.simplebar-scroll-content', self._lSidebar).scrollLock('enable');
|
||||
}
|
||||
|
||||
// Init custom scrolling on Side Overlay
|
||||
if ((self._lSideOverlay.length > 0) && !self._lSideOverlayScroll) {
|
||||
self._lSideOverlayScroll = new SimpleBar(self._lSideOverlay[0]);
|
||||
|
||||
// Enable scrolling lock
|
||||
jQuery('.simplebar-scroll-content', self._lSideOverlay).scrollLock('enable');
|
||||
}
|
||||
} else {
|
||||
// If custom scrolling exists on Sidebar remove it
|
||||
if (self._lSidebar && self._lSidebarScroll) {
|
||||
// Disable scrolling lock
|
||||
jQuery('.simplebar-scroll-content', self._lSidebar).scrollLock('disable');
|
||||
|
||||
// Unmount Simplebar
|
||||
self._lSidebarScroll.unMount();
|
||||
self._lSidebarScroll = null;
|
||||
|
||||
// Remove Simplebar leftovers
|
||||
self._lSidebar.removeAttr('data-simplebar')
|
||||
.html(jQuery('.simplebar-content', self._lSidebar).html());
|
||||
}
|
||||
|
||||
// If custom scrolling exists on Side Overlay remove it
|
||||
if (self._lSideOverlay && self._lSideOverlayScroll) {
|
||||
// Disable scrolling lock
|
||||
jQuery('.simplebar-scroll-content', self._lSideOverlay).scrollLock('disable');
|
||||
|
||||
// Unmount Simplebar
|
||||
self._lSideOverlayScroll.unMount();
|
||||
self._lSideOverlayScroll = null;
|
||||
|
||||
// Remove Simplebar leftovers
|
||||
self._lSideOverlay.removeAttr('data-simplebar')
|
||||
.html(jQuery('.simplebar-content', self._lSideOverlay).html());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Resizes #main-container to fill empty space if exists (pushes footer to the bottom) + Adds transition to sidebar (small fix for IE)
|
||||
*
|
||||
*/
|
||||
_uiHandleMain() {
|
||||
let self = this;
|
||||
let resizeTimeout;
|
||||
|
||||
// Unbind events in case they are already binded
|
||||
jQuery(window).off('resize.cb.main orientationchange.cb.main');
|
||||
|
||||
// If #main-container element exists
|
||||
if (self._lMain.length) {
|
||||
jQuery(window).on('resize.cb.main orientationchange.cb.main', e => {
|
||||
clearTimeout(resizeTimeout);
|
||||
|
||||
resizeTimeout = setTimeout(e => {
|
||||
let hWindow = jQuery(window).height();
|
||||
let hHeader = self._lHeader.outerHeight() || 0;
|
||||
let hFooter = self._lFooter.outerHeight() || 0;
|
||||
|
||||
// Set #main-container min height accordingly
|
||||
if (self._lPage.hasClass('page-header-fixed') || self._lPage.hasClass('page-header-glass')) {
|
||||
self._lMain.css('min-height', hWindow - hFooter);
|
||||
} else {
|
||||
self._lMain.css('min-height', hWindow - hHeader - hFooter);
|
||||
}
|
||||
|
||||
// Show footer's content
|
||||
self._lFooter.fadeTo(1000, 1);
|
||||
}, 150);
|
||||
}).triggerHandler('resize.cb.main');
|
||||
}
|
||||
|
||||
// Add 'side-trans-enabled' class to #page-container (enables sidebar and side overlay transition on open/close)
|
||||
// Fixes IE10, IE11 and Edge bug in which animation was executed on each page load - really annoying!
|
||||
self._lPage.addClass('side-trans-enabled');
|
||||
}
|
||||
|
||||
/*
|
||||
* Handles header related classes
|
||||
*
|
||||
*/
|
||||
_uiHandleHeader() {
|
||||
let self = this;
|
||||
|
||||
// Unbind event in case it is already enabled
|
||||
jQuery(window).off('scroll.cb.header');
|
||||
|
||||
// If the header is fixed and has the glass style, add the related class on scrolling to add a background color to the header
|
||||
if (self._lPage.hasClass('page-header-glass') && self._lPage.hasClass('page-header-fixed')) {
|
||||
jQuery(window).on('scroll.cb.header', e => {
|
||||
if (jQuery(e.currentTarget).scrollTop() > 60) {
|
||||
self._lPage.addClass('page-header-scroll');
|
||||
} else {
|
||||
self._lPage.removeClass('page-header-scroll');
|
||||
}
|
||||
}).trigger('scroll.cb.header');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Toggle Submenu functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleNav() {
|
||||
let self = this;
|
||||
|
||||
// Unbind event in case it is already enabled
|
||||
self._lPage.off('click.cb.menu');
|
||||
|
||||
// When a submenu link is clicked
|
||||
self._lPage.on('click.cb.menu', '[data-toggle="nav-submenu"]', e => {
|
||||
// Get link
|
||||
let link = jQuery(e.currentTarget);
|
||||
|
||||
// Get link's parent
|
||||
let parentLi = link.parent('li');
|
||||
|
||||
if (parentLi.hasClass('open')) { // If submenu is open, close it..
|
||||
parentLi.removeClass('open');
|
||||
} else { // .. else if submenu is closed, close all other (same level) submenus first before open it
|
||||
link.closest('ul').children('li').removeClass('open');
|
||||
parentLi.addClass('open');
|
||||
}
|
||||
|
||||
// Remove focus from submenu link
|
||||
if (self._lHtml.hasClass('no-focus')) {
|
||||
link.blur();
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Page loading screen functionality
|
||||
*
|
||||
*/
|
||||
_uiHandlePageLoader(mode = 'hide', colorClass) {
|
||||
if (mode === 'show') {
|
||||
if (this._lpageLoader.length) {
|
||||
if (colorClass) {
|
||||
this._lpageLoader.removeClass().addClass(colorClass);
|
||||
}
|
||||
|
||||
this._lpageLoader.addClass('show');
|
||||
} else {
|
||||
this._lBody.prepend(`<div id="page-loader" class="show${colorClass ? ' ' + colorClass : ''}"></div>`);
|
||||
}
|
||||
} else if (mode === 'hide') {
|
||||
if (this._lpageLoader.length) {
|
||||
this._lpageLoader.removeClass('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Material form inputs functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleForms() {
|
||||
jQuery('.form-material.floating > .form-control').each((index, element) => {
|
||||
let input = jQuery(element);
|
||||
let parent = input.parent('.form-material');
|
||||
|
||||
setTimeout(e => {
|
||||
if (input.val() ) {
|
||||
parent.addClass('open');
|
||||
}
|
||||
}, 150);
|
||||
|
||||
input.off('change.cb.inputs').on('change.cb.inputs', e => {
|
||||
if (input.val()) {
|
||||
parent.addClass('open');
|
||||
} else {
|
||||
parent.removeClass('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Set active color theme functionality
|
||||
*
|
||||
*/
|
||||
_uiHandleTheme() {
|
||||
let themeEl = jQuery('#css-theme');
|
||||
let cookies = this._lPage.hasClass('enable-cookies') ? true : false;
|
||||
|
||||
// If cookies are enabled
|
||||
if (cookies) {
|
||||
let themeName = Cookies.get('cbThemeName') || false;
|
||||
|
||||
// Update color theme
|
||||
if (themeName) {
|
||||
Tools.updateTheme(themeEl, themeName);
|
||||
}
|
||||
|
||||
// Update theme element
|
||||
themeEl = jQuery('#css-theme');
|
||||
}
|
||||
|
||||
// Set the active color theme link as active
|
||||
jQuery('[data-toggle="theme"][data-theme="' + (themeEl.length ? themeEl.attr('href') : 'default') + '"]').parent('li').addClass('active');
|
||||
|
||||
// Unbind event in case it is already enabled
|
||||
this._lPage.off('click.cb.themes');
|
||||
|
||||
// When a color theme link is clicked
|
||||
this._lPage.on('click.cb.themes', '[data-toggle="theme"]', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get element and data
|
||||
let el = jQuery(e.currentTarget);
|
||||
let themeName = el.data('theme');
|
||||
|
||||
// Set this color theme link as active
|
||||
jQuery('[data-toggle="theme"]').parent('li').removeClass('active');
|
||||
jQuery('[data-toggle="theme"][data-theme="' + themeName + '"]').parent('li').addClass('active');
|
||||
|
||||
// Update color theme
|
||||
Tools.updateTheme(themeEl, themeName);
|
||||
|
||||
// Update theme element
|
||||
themeEl = jQuery('#css-theme');
|
||||
|
||||
// If cookies are enabled, save the new active color theme
|
||||
if (cookies) {
|
||||
Cookies.set('cbThemeName', themeName, { expires: 7 });
|
||||
}
|
||||
|
||||
// Blur the link/button
|
||||
el.blur();
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout API
|
||||
*
|
||||
*/
|
||||
_uiApiLayout(mode = 'init') {
|
||||
let self = this;
|
||||
|
||||
// Get current window width
|
||||
self._windowW = Tools.getWidth();
|
||||
|
||||
// API with object literals
|
||||
let layoutAPI = {
|
||||
init: () => {
|
||||
// Unbind events in case they are already enabled
|
||||
self._lPage.off('click.cb.layout');
|
||||
self._lPage.off('click.cb.overlay');
|
||||
|
||||
// Call layout API on button click
|
||||
self._lPage.on('click.cb.layout', '[data-toggle="layout"]', e => {
|
||||
let el = jQuery(e.currentTarget);
|
||||
|
||||
self._uiApiLayout(el.data('action'));
|
||||
|
||||
el.blur();
|
||||
});
|
||||
|
||||
// Prepend Page Overlay div if enabled (used when Side Overlay opens)
|
||||
if (self._lPage.hasClass('enable-page-overlay')) {
|
||||
self._lPage.prepend('<div id="page-overlay"></div>');
|
||||
|
||||
jQuery('#page-overlay').on('click.cb.overlay', e => {
|
||||
self._uiApiLayout('side_overlay_close');
|
||||
});
|
||||
}
|
||||
},
|
||||
sidebar_pos_toggle: () => {
|
||||
self._lPage.toggleClass('sidebar-r');
|
||||
},
|
||||
sidebar_pos_left: () => {
|
||||
self._lPage.removeClass('sidebar-r');
|
||||
},
|
||||
sidebar_pos_right: () => {
|
||||
self._lPage.addClass('sidebar-r');
|
||||
},
|
||||
sidebar_toggle: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.toggleClass('sidebar-o');
|
||||
} else {
|
||||
self._lPage.toggleClass('sidebar-o-xs');
|
||||
}
|
||||
},
|
||||
sidebar_open: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.addClass('sidebar-o');
|
||||
} else {
|
||||
self._lPage.addClass('sidebar-o-xs');
|
||||
}
|
||||
},
|
||||
sidebar_close: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.removeClass('sidebar-o');
|
||||
} else {
|
||||
self._lPage.removeClass('sidebar-o-xs');
|
||||
}
|
||||
},
|
||||
sidebar_mini_toggle: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.toggleClass('sidebar-mini');
|
||||
}
|
||||
},
|
||||
sidebar_mini_on: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.addClass('sidebar-mini');
|
||||
}
|
||||
},
|
||||
sidebar_mini_off: () => {
|
||||
if (self._windowW > 991) {
|
||||
self._lPage.removeClass('sidebar-mini');
|
||||
}
|
||||
},
|
||||
sidebar_style_inverse_toggle: () => {
|
||||
self._lPage.toggleClass('sidebar-inverse');
|
||||
},
|
||||
sidebar_style_inverse_on: () => {
|
||||
self._lPage.addClass('sidebar-inverse');
|
||||
},
|
||||
sidebar_style_inverse_off: () => {
|
||||
self._lPage.removeClass('sidebar-inverse');
|
||||
},
|
||||
side_overlay_toggle: () => {
|
||||
if (self._lPage.hasClass('side-overlay-o')) {
|
||||
self._uiApiLayout('side_overlay_close');
|
||||
} else {
|
||||
self._uiApiLayout('side_overlay_open');
|
||||
}
|
||||
},
|
||||
side_overlay_open: () => {
|
||||
self._lPage.addClass('side-overlay-o');
|
||||
|
||||
// When ESCAPE key is hit close the side overlay
|
||||
jQuery(document).on('keydown.cb.sideOverlay', e => {
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
self._uiApiLayout('side_overlay_close');
|
||||
}
|
||||
});
|
||||
},
|
||||
side_overlay_close: () => {
|
||||
self._lPage.removeClass('side-overlay-o');
|
||||
|
||||
// Unbind ESCAPE key
|
||||
jQuery(document).off('keydown.cb.sideOverlay');
|
||||
},
|
||||
side_overlay_hoverable_toggle: () => {
|
||||
self._lPage.toggleClass('side-overlay-hover');
|
||||
},
|
||||
side_overlay_hoverable_on: () => {
|
||||
self._lPage.addClass('side-overlay-hover');
|
||||
},
|
||||
side_overlay_hoverable_off: () => {
|
||||
self._lPage.removeClass('side-overlay-hover');
|
||||
},
|
||||
header_fixed_toggle: () => {
|
||||
self._lPage.toggleClass('page-header-fixed');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_fixed_on: () => {
|
||||
self._lPage.addClass('page-header-fixed');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_fixed_off: () => {
|
||||
self._lPage.removeClass('page-header-fixed');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_style_modern: () => {
|
||||
self._lPage.removeClass('page-header-glass page-header-inverse').addClass('page-header-modern');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_style_classic: () => {
|
||||
self._lPage.removeClass('page-header-glass page-header-modern');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_style_glass: () => {
|
||||
self._lPage.removeClass('page-header-modern').addClass('page-header-glass');
|
||||
self._uiHandleHeader();
|
||||
self._uiHandleMain();
|
||||
},
|
||||
header_style_inverse_toggle: () => {
|
||||
if (!self._lPage.hasClass('page-header-modern')) {
|
||||
self._lPage.toggleClass('page-header-inverse');
|
||||
}
|
||||
},
|
||||
header_style_inverse_on: () => {
|
||||
if (!self._lPage.hasClass('page-header-modern')) {
|
||||
self._lPage.addClass('page-header-inverse');
|
||||
}
|
||||
},
|
||||
header_style_inverse_off: () => {
|
||||
if (!self._lPage.hasClass('page-header-modern')) {
|
||||
self._lPage.removeClass('page-header-inverse');
|
||||
}
|
||||
},
|
||||
header_search_on: () => {
|
||||
self._lHeaderSearch.addClass('show');
|
||||
self._lHeaderSearchInput.focus();
|
||||
|
||||
// When ESCAPE key is hit close the search section
|
||||
jQuery(document).on('keydown.cb.header.search', e => {
|
||||
if (e.which === 27) {
|
||||
e.preventDefault();
|
||||
self._uiApiLayout('header_search_off');
|
||||
}
|
||||
});
|
||||
},
|
||||
header_search_off: () => {
|
||||
self._lHeaderSearch.removeClass('show');
|
||||
self._lHeaderSearchInput.blur();
|
||||
|
||||
// Unbind ESCAPE key
|
||||
jQuery(document).off('keydown.cb.header.search');
|
||||
},
|
||||
header_loader_on: () => {
|
||||
self._lHeaderLoader.addClass('show');
|
||||
},
|
||||
header_loader_off: () => {
|
||||
self._lHeaderLoader.removeClass('show');
|
||||
},
|
||||
side_scroll_toggle: () => {
|
||||
self._lPage.toggleClass('side-scroll');
|
||||
self._uiHandleScroll();
|
||||
},
|
||||
side_scroll_on: () => {
|
||||
self._lPage.addClass('side-scroll');
|
||||
self._uiHandleScroll();
|
||||
},
|
||||
side_scroll_off: () => {
|
||||
self._lPage.removeClass('side-scroll');
|
||||
self._uiHandleScroll();
|
||||
},
|
||||
content_layout_toggle: () => {
|
||||
if (self._lPage.hasClass('main-content-boxed')) {
|
||||
self._uiApiLayout('content_layout_narrow');
|
||||
} else if (self._lPage.hasClass('main-content-narrow')) {
|
||||
self._uiApiLayout('content_layout_full_width');
|
||||
} else {
|
||||
self._uiApiLayout('content_layout_boxed');
|
||||
}
|
||||
},
|
||||
content_layout_boxed: () => {
|
||||
self._lPage.removeClass('main-content-narrow').addClass('main-content-boxed');
|
||||
},
|
||||
content_layout_narrow: () => {
|
||||
self._lPage.removeClass('main-content-boxed').addClass('main-content-narrow');
|
||||
},
|
||||
content_layout_full_width: () => {
|
||||
self._lPage.removeClass('main-content-boxed main-content-narrow');
|
||||
}
|
||||
};
|
||||
|
||||
// Call layout API
|
||||
if (layoutAPI[mode]) {
|
||||
layoutAPI[mode]();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Blocks API
|
||||
*
|
||||
*/
|
||||
_uiApiBlocks(block = false, mode = 'init') {
|
||||
let self = this;
|
||||
|
||||
// Helper variables
|
||||
let elBlock, btnFullscreen, btnContentToggle;
|
||||
|
||||
// Set default icons for fullscreen and content toggle buttons
|
||||
let iconFullscreen = 'si si-size-fullscreen';
|
||||
let iconFullscreenActive = 'si si-size-actual';
|
||||
let iconContent = 'si si-arrow-up';
|
||||
let iconContentActive = 'si si-arrow-down';
|
||||
|
||||
// API with object literals
|
||||
let blockAPI = {
|
||||
init: () => {
|
||||
// Auto add the default toggle icons to fullscreen and content toggle buttons
|
||||
jQuery('[data-toggle="block-option"][data-action="fullscreen_toggle"]').each((index, element) => {
|
||||
let el = jQuery(element);
|
||||
|
||||
el.html('<i class="' + (jQuery(el).closest('.block').hasClass('block-mode-fullscreen') ? iconFullscreenActive : iconFullscreen) + '"></i>');
|
||||
});
|
||||
|
||||
jQuery('[data-toggle="block-option"][data-action="content_toggle"]').each((index, element) => {
|
||||
let el = jQuery(element);
|
||||
|
||||
el.html('<i class="' + (el.closest('.block').hasClass('block-mode-hidden') ? iconContentActive : iconContent) + '"></i>');
|
||||
});
|
||||
|
||||
// Unbind event in case it is already enabled
|
||||
self._lPage.off('click.cb.blocks');
|
||||
|
||||
// Call blocks API on option button click
|
||||
self._lPage.on('click.cb.blocks', '[data-toggle="block-option"]', e => {
|
||||
this._uiApiBlocks(jQuery(e.currentTarget).closest('.block'), jQuery(e.currentTarget).data('action'));
|
||||
});
|
||||
},
|
||||
fullscreen_toggle: () => {
|
||||
elBlock.removeClass('block-mode-pinned').toggleClass('block-mode-fullscreen');
|
||||
|
||||
// Enable/disable scroll lock to block
|
||||
if (elBlock.hasClass('block-mode-fullscreen')) {
|
||||
jQuery(elBlock).scrollLock('enable');
|
||||
} else {
|
||||
jQuery(elBlock).scrollLock('disable');
|
||||
}
|
||||
|
||||
// Update block option icon
|
||||
if (btnFullscreen.length) {
|
||||
if (elBlock.hasClass('block-mode-fullscreen')) {
|
||||
jQuery('i', btnFullscreen)
|
||||
.removeClass(iconFullscreen)
|
||||
.addClass(iconFullscreenActive);
|
||||
} else {
|
||||
jQuery('i', btnFullscreen)
|
||||
.removeClass(iconFullscreenActive)
|
||||
.addClass(iconFullscreen);
|
||||
}
|
||||
}
|
||||
},
|
||||
fullscreen_on: () => {
|
||||
elBlock.removeClass('block-mode-pinned').addClass('block-mode-fullscreen');
|
||||
|
||||
// Enable scroll lock to block
|
||||
jQuery(elBlock).scrollLock('enable');
|
||||
|
||||
// Update block option icon
|
||||
if (btnFullscreen.length) {
|
||||
jQuery('i', btnFullscreen)
|
||||
.removeClass(iconFullscreen)
|
||||
.addClass(iconFullscreenActive);
|
||||
}
|
||||
},
|
||||
fullscreen_off: () => {
|
||||
elBlock.removeClass('block-mode-fullscreen');
|
||||
|
||||
// Disable scroll lock to block
|
||||
jQuery(elBlock).scrollLock('disable');
|
||||
|
||||
// Update block option icon
|
||||
if (btnFullscreen.length) {
|
||||
jQuery('i', btnFullscreen)
|
||||
.removeClass(iconFullscreenActive)
|
||||
.addClass(iconFullscreen);
|
||||
}
|
||||
},
|
||||
content_toggle: () => {
|
||||
elBlock.toggleClass('block-mode-hidden');
|
||||
|
||||
// Update block option icon
|
||||
if (btnContentToggle.length) {
|
||||
if (elBlock.hasClass('block-mode-hidden')) {
|
||||
jQuery('i', btnContentToggle)
|
||||
.removeClass(iconContent)
|
||||
.addClass(iconContentActive);
|
||||
} else {
|
||||
jQuery('i', btnContentToggle)
|
||||
.removeClass(iconContentActive)
|
||||
.addClass(iconContent);
|
||||
}
|
||||
}
|
||||
},
|
||||
content_hide: () => {
|
||||
elBlock.addClass('block-mode-hidden');
|
||||
|
||||
// Update block option icon
|
||||
if (btnContentToggle.length) {
|
||||
jQuery('i', btnContentToggle)
|
||||
.removeClass(iconContent)
|
||||
.addClass(iconContentActive);
|
||||
}
|
||||
},
|
||||
content_show: () => {
|
||||
elBlock.removeClass('block-mode-hidden');
|
||||
|
||||
// Update block option icon
|
||||
if (btnContentToggle.length) {
|
||||
jQuery('i', btnContentToggle)
|
||||
.removeClass(iconContentActive)
|
||||
.addClass(iconContent);
|
||||
}
|
||||
},
|
||||
state_toggle: () => {
|
||||
elBlock.toggleClass('block-mode-loading');
|
||||
|
||||
// Return block to normal state if the demostration mode is on in the refresh option button - data-action-mode="demo"
|
||||
if (jQuery('[data-toggle="block-option"][data-action="state_toggle"][data-action-mode="demo"]', elBlock).length) {
|
||||
setTimeout(() => {
|
||||
elBlock.removeClass('block-mode-loading');
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
state_loading: () => {
|
||||
elBlock.addClass('block-mode-loading');
|
||||
},
|
||||
state_normal: () => {
|
||||
elBlock.removeClass('block-mode-loading');
|
||||
},
|
||||
pinned_toggle: () => {
|
||||
elBlock.removeClass('block-mode-fullscreen').toggleClass('block-mode-pinned');
|
||||
},
|
||||
pinned_on: () => {
|
||||
elBlock.removeClass('block-mode-fullscreen').addClass('block-mode-pinned');
|
||||
},
|
||||
pinned_off: () => {
|
||||
elBlock.removeClass('block-mode-pinned');
|
||||
},
|
||||
close: () => {
|
||||
elBlock.addClass('d-none');
|
||||
},
|
||||
open: () => {
|
||||
elBlock.removeClass('d-none');
|
||||
}
|
||||
};
|
||||
|
||||
if (mode === 'init') {
|
||||
// Call Block API
|
||||
blockAPI[mode]();
|
||||
} else {
|
||||
// Get block element
|
||||
elBlock = (block instanceof jQuery) ? block : jQuery(block);
|
||||
|
||||
// If element exists, procceed with block functionality
|
||||
if (elBlock.length) {
|
||||
// Get block option buttons if exist (need them to update their icons)
|
||||
btnFullscreen = jQuery('[data-toggle="block-option"][data-action="fullscreen_toggle"]', elBlock);
|
||||
btnContentToggle = jQuery('[data-toggle="block-option"][data-action="content_toggle"]', elBlock);
|
||||
|
||||
// Call Block API
|
||||
if (blockAPI[mode]) {
|
||||
blockAPI[mode]();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
********************************************************************************************
|
||||
*
|
||||
* Create aliases for easier/quicker access to vital methods
|
||||
*
|
||||
*********************************************************************************************
|
||||
*/
|
||||
|
||||
/*
|
||||
* Init base functionality
|
||||
*
|
||||
*/
|
||||
init() {
|
||||
this._uiInit();
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout API
|
||||
*
|
||||
*/
|
||||
layout(mode) {
|
||||
this._uiApiLayout(mode);
|
||||
}
|
||||
|
||||
/*
|
||||
* Blocks API
|
||||
*
|
||||
*/
|
||||
blocks(block, mode) {
|
||||
this._uiApiBlocks(block, mode);
|
||||
}
|
||||
|
||||
/*
|
||||
* Handle Page Loader
|
||||
*
|
||||
*/
|
||||
loader(mode, colorClass) {
|
||||
this._uiHandlePageLoader(mode, colorClass);
|
||||
}
|
||||
|
||||
/*
|
||||
* Run Helpers
|
||||
*
|
||||
*/
|
||||
helpers(helpers, options = {}) {
|
||||
Helpers.run(helpers, options);
|
||||
}
|
||||
|
||||
helper(helper, options = {}) {
|
||||
Helpers.run(helper, options);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
* Document : tools.js
|
||||
* Author : pixelcave
|
||||
* Description: Various small tools
|
||||
*
|
||||
*/
|
||||
|
||||
// Import global dependencies
|
||||
import './../bootstrap.js';
|
||||
|
||||
// Tools
|
||||
export default class Tools {
|
||||
/*
|
||||
* Updates the color theme
|
||||
*
|
||||
*/
|
||||
static updateTheme(themeEl, themeName) {
|
||||
if (themeName === 'default') {
|
||||
if (themeEl.length) {
|
||||
themeEl.remove();
|
||||
}
|
||||
} else {
|
||||
if (themeEl.length) {
|
||||
themeEl.attr('href', themeName);
|
||||
} else {
|
||||
jQuery('#css-main')
|
||||
.after('<link rel="stylesheet" id="css-theme" href="' + themeName + '">');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Returns current browser's window width
|
||||
*
|
||||
*/
|
||||
static getWidth() {
|
||||
return window.innerWidth
|
||||
|| document.documentElement.clientWidth
|
||||
|| document.body.clientWidth;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/*
|
||||
* Document : be_blocks_widgets_stats.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Widgets Stats Page
|
||||
*/
|
||||
|
||||
class BeBlocksWidgetsStats {
|
||||
/*
|
||||
* Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
*
|
||||
*/
|
||||
static initWidgetsChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#555555';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.scale.ticks.suggestedMax = 11;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartWidgetLinesCon = jQuery('.js-chartjs-widget-lines');
|
||||
let chartWidgetLinesCon2 = jQuery('.js-chartjs-widget-lines2');
|
||||
let chartWidgetLinesCon3 = jQuery('.js-chartjs-widget-lines3');
|
||||
let chartWidgetLinesCon4 = jQuery('.js-chartjs-widget-lines4');
|
||||
|
||||
// Charts letiables
|
||||
let chartWidgetLines, chartWidgetLines2, chartWidgetLines3, chartWidgetLines4;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartWidgetLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(66,165,245,.25)',
|
||||
borderColor: 'rgba(66,165,245,1)',
|
||||
pointBackgroundColor: 'rgba(66,165,245,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(66,165,245,1)',
|
||||
data: [5, 7, 4, 5, 6, 8, 4]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartWidgetLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255,202,40,.25)',
|
||||
borderColor: 'rgba(255,202,40,1)',
|
||||
pointBackgroundColor: 'rgba(255,202,40,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,202,40,1)',
|
||||
data: [6, 9, 5, 6, 9, 7, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartWidgetLinesData3 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(1,229,148,.25)',
|
||||
borderColor: 'rgba(1,229,148,1)',
|
||||
pointBackgroundColor: 'rgba(1,229,148,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(1,229,148,1)',
|
||||
data: [6, 9, 5, 6, 9, 7, 10]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartWidgetLinesData4 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(237,83,80,.25)',
|
||||
borderColor: 'rgba(237,83,80,1)',
|
||||
pointBackgroundColor: 'rgba(237,83,80,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(237,83,80,1)',
|
||||
data: [5, 7, 4, 5, 6, 8, 4]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartWidgetLinesCon.length ) {
|
||||
chartWidgetLines = new Chart(chartWidgetLinesCon, { type: 'line', data: chartWidgetLinesData });
|
||||
}
|
||||
|
||||
if (chartWidgetLinesCon2.length ) {
|
||||
chartWidgetLines2 = new Chart(chartWidgetLinesCon2, { type: 'line', data: chartWidgetLinesData2 });
|
||||
}
|
||||
|
||||
if (chartWidgetLinesCon3.length ) {
|
||||
chartWidgetLines3 = new Chart(chartWidgetLinesCon3, { type: 'line', data: chartWidgetLinesData3 });
|
||||
}
|
||||
|
||||
if (chartWidgetLinesCon4.length ) {
|
||||
chartWidgetLines4 = new Chart(chartWidgetLinesCon4, { type: 'line', data: chartWidgetLinesData4 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initWidgetsChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeBlocksWidgetsStats.init(); });
|
||||
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
* Document : be_comp_calendar.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Calendar Page
|
||||
*/
|
||||
|
||||
// Full Calendar, for more examples you can check out http://fullcalendar.io/
|
||||
class BeCompCalendar {
|
||||
/*
|
||||
* Add new event in the event list
|
||||
*
|
||||
*/
|
||||
static addEvent() {
|
||||
let eventInput = jQuery('.js-add-event');
|
||||
let eventInputVal = '';
|
||||
|
||||
// When the add event form is submitted
|
||||
jQuery('.js-form-add-event').on('submit', e => {
|
||||
eventInputVal = eventInput.prop('value'); // Get input value
|
||||
|
||||
// Check if the user entered something
|
||||
if ( eventInputVal ) {
|
||||
// Add it to the events list
|
||||
jQuery('.js-events')
|
||||
.prepend('<li>' +
|
||||
jQuery('<div />').text(eventInputVal).html() +
|
||||
'</li>');
|
||||
|
||||
// Clear input field
|
||||
eventInput.prop('value', '');
|
||||
|
||||
// Re-Init Events
|
||||
this.initEvents();
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init drag and drop event functionality
|
||||
*
|
||||
*/
|
||||
static initEvents() {
|
||||
jQuery('.js-events')
|
||||
.find('li')
|
||||
.each((index, element) => {
|
||||
let event = jQuery(element);
|
||||
|
||||
// create an Event Object
|
||||
let eventObject = {
|
||||
title: jQuery.trim(event.text()),
|
||||
color: event.css('background-color')
|
||||
};
|
||||
|
||||
// store the Event Object in the DOM element so we can get to it later
|
||||
event.data('eventObject', eventObject);
|
||||
|
||||
// make the event draggable using jQuery UI
|
||||
event.draggable({
|
||||
zIndex: 999,
|
||||
revert: true,
|
||||
revertDuration: 0
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init calendar demo functionality
|
||||
*
|
||||
*/
|
||||
static initCalendar() {
|
||||
let date = new Date();
|
||||
let d = date.getDate();
|
||||
let m = date.getMonth();
|
||||
let y = date.getFullYear();
|
||||
|
||||
jQuery('.js-calendar').fullCalendar({
|
||||
firstDay: 1,
|
||||
editable: true,
|
||||
droppable: true,
|
||||
header: {
|
||||
left: 'title',
|
||||
right: 'prev,next today month,agendaWeek,agendaDay,listWeek'
|
||||
},
|
||||
drop: (date, jsEvent, ui, resourceId) => { // this function is called when something is dropped
|
||||
let event = jQuery(ui.helper);
|
||||
|
||||
// retrieve the dropped element's stored Event Object
|
||||
let originalEventObject = event.data('eventObject');
|
||||
|
||||
// we need to copy it, so that multiple events don't have a reference to the same object
|
||||
let copiedEventObject = jQuery.extend({}, originalEventObject);
|
||||
|
||||
// assign it the date that was reported
|
||||
copiedEventObject.start = date;
|
||||
|
||||
// render the event on the calendar
|
||||
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
|
||||
jQuery('.js-calendar').fullCalendar('renderEvent', copiedEventObject, true);
|
||||
|
||||
// remove the element from the "Draggable Events" list
|
||||
event.remove();
|
||||
},
|
||||
events: [
|
||||
{
|
||||
title: 'Gaming Day',
|
||||
start: new Date(y, m, 1),
|
||||
allDay: true,
|
||||
color: '#fcf7e6'
|
||||
},
|
||||
{
|
||||
title: 'Skype Meeting',
|
||||
start: new Date(y, m, 3)
|
||||
},
|
||||
{
|
||||
title: 'Project X',
|
||||
start: new Date(y, m, 9),
|
||||
end: new Date(y, m, 12),
|
||||
allDay: true,
|
||||
color: '#fae9e8'
|
||||
},
|
||||
{
|
||||
title: 'Work',
|
||||
start: new Date(y, m, 17),
|
||||
end: new Date(y, m, 19),
|
||||
allDay: true,
|
||||
color: '#fae9e8'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Hiking (repeated)',
|
||||
start: new Date(y, m, d - 1, 15, 0)
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Hiking (repeated)',
|
||||
start: new Date(y, m, d + 3, 15, 0)
|
||||
},
|
||||
{
|
||||
title: 'Landing Template',
|
||||
start: new Date(y, m, d - 3),
|
||||
end: new Date(y, m, d - 3),
|
||||
allDay: true,
|
||||
color: '#fcf7e6'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: new Date(y, m, d + 7, 15, 0),
|
||||
color: '#ebf5df'
|
||||
},
|
||||
{
|
||||
title: 'Coding',
|
||||
start: new Date(y, m, d, 8, 0),
|
||||
end: new Date(y, m, d, 14, 0),
|
||||
color: '#fcf7e6'
|
||||
},
|
||||
{
|
||||
title: 'Trip',
|
||||
start: new Date(y, m, 25),
|
||||
end: new Date(y, m, 27),
|
||||
allDay: true,
|
||||
color: '#fcf7e6'
|
||||
},
|
||||
{
|
||||
title: 'Reading',
|
||||
start: new Date(y, m, d + 8, 20, 0),
|
||||
end: new Date(y, m, d + 8, 22, 0)
|
||||
},
|
||||
{
|
||||
title: 'Follow me on Twitter',
|
||||
start: new Date(y, m, 22),
|
||||
allDay: true,
|
||||
url: 'http://twitter.com/pixelcave'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.addEvent();
|
||||
this.initEvents();
|
||||
this.initCalendar();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompCalendar.init(); });
|
||||
@@ -0,0 +1,607 @@
|
||||
/*
|
||||
* Document : be_comp_charts.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Charts Page
|
||||
*/
|
||||
|
||||
class BeCompCharts {
|
||||
/*
|
||||
* Randomize Easy Pie Chart values
|
||||
*
|
||||
*/
|
||||
static initRandomEasyPieChart() {
|
||||
jQuery('.js-pie-randomize').on('click', e => {
|
||||
jQuery(e.currentTarget)
|
||||
.parents('.block')
|
||||
.find('.pie-chart')
|
||||
.each((index, element) => {
|
||||
jQuery(element).data('easyPieChart').update(Math.floor((Math.random() * 100) + 1));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* jQuery Sparkline Charts, for more examples you can check out http://omnipotent.net/jquery.sparkline/#s-docs
|
||||
*
|
||||
*/
|
||||
static initChartsSparkline() {
|
||||
// Chart Containers
|
||||
let slcLine1 = jQuery('.js-slc-line1');
|
||||
let slcLine2 = jQuery('.js-slc-line2');
|
||||
let slcLine3 = jQuery('.js-slc-line3');
|
||||
let slcBar1 = jQuery('.js-slc-bar1');
|
||||
let slcBar2 = jQuery('.js-slc-bar2');
|
||||
let slcBar3 = jQuery('.js-slc-bar3');
|
||||
let slcPie1 = jQuery('.js-slc-pie1');
|
||||
let slcPie2 = jQuery('.js-slc-pie2');
|
||||
let slcPie3 = jQuery('.js-slc-pie3');
|
||||
let slcTristate1 = jQuery('.js-slc-tristate1');
|
||||
let slcTristate2 = jQuery('.js-slc-tristate2');
|
||||
let slcTristate3 = jQuery('.js-slc-tristate3');
|
||||
|
||||
|
||||
// Line Charts
|
||||
let lineOptions = {
|
||||
type: 'line',
|
||||
width: '120px',
|
||||
height: '80px',
|
||||
tooltipOffsetX: -25,
|
||||
tooltipOffsetY: 20,
|
||||
lineColor: '#ffca28',
|
||||
fillColor: '#ffca28',
|
||||
spotColor: '#555',
|
||||
minSpotColor: '#555',
|
||||
maxSpotColor: '#555',
|
||||
highlightSpotColor: '#555',
|
||||
highlightLineColor: '#555',
|
||||
spotRadius: 2,
|
||||
tooltipPrefix: '',
|
||||
tooltipSuffix: ' Tickets',
|
||||
tooltipFormat: '{{prefix}}{{y}}{{suffix}}'
|
||||
};
|
||||
|
||||
if (slcLine1.length) {
|
||||
slcLine1.sparkline('html', lineOptions);
|
||||
}
|
||||
|
||||
lineOptions['lineColor'] = '#9ccc65';
|
||||
lineOptions['fillColor'] = '#9ccc65';
|
||||
lineOptions['tooltipPrefix'] = '$ ';
|
||||
lineOptions['tooltipSuffix'] = '';
|
||||
|
||||
if (slcLine2.length) {
|
||||
slcLine2.sparkline('html', lineOptions);
|
||||
}
|
||||
|
||||
lineOptions['lineColor'] = '#42a5f5';
|
||||
lineOptions['fillColor'] = '#42a5f5';
|
||||
lineOptions['tooltipPrefix'] = '';
|
||||
lineOptions['tooltipSuffix'] = ' Sales';
|
||||
|
||||
if (slcLine3.length) {
|
||||
slcLine3.sparkline('html', lineOptions);
|
||||
}
|
||||
|
||||
// Bar Charts
|
||||
let barOptions = {
|
||||
type: 'bar',
|
||||
barWidth: 8,
|
||||
barSpacing: 6,
|
||||
height: '80px',
|
||||
barColor: '#ffca28',
|
||||
tooltipPrefix: '',
|
||||
tooltipSuffix: ' Tickets',
|
||||
tooltipFormat: '{{prefix}}{{value}}{{suffix}}'
|
||||
};
|
||||
|
||||
if (slcBar1.length) {
|
||||
slcBar1.sparkline('html', barOptions);
|
||||
}
|
||||
|
||||
barOptions['barColor'] = '#9ccc65';
|
||||
barOptions['tooltipPrefix'] = '$ ';
|
||||
barOptions['tooltipSuffix'] = '';
|
||||
|
||||
if (slcBar2.length) {
|
||||
slcBar2.sparkline('html', barOptions);
|
||||
}
|
||||
|
||||
barOptions['barColor'] = '#42a5f5';
|
||||
barOptions['tooltipPrefix'] = '';
|
||||
barOptions['tooltipSuffix'] = ' Sales';
|
||||
|
||||
if (slcBar3.length) {
|
||||
slcBar3.sparkline('html', barOptions);
|
||||
}
|
||||
|
||||
// Pie Charts
|
||||
let pieCharts = {
|
||||
type: 'pie',
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
sliceColors: ['#ffca28','#9ccc65', '#42a5f5','#ef5350'],
|
||||
highlightLighten: 1.1,
|
||||
tooltipPrefix: '',
|
||||
tooltipSuffix: ' Tickets',
|
||||
tooltipFormat: '{{prefix}}{{value}}{{suffix}}'
|
||||
};
|
||||
|
||||
if (slcPie1.length) {
|
||||
slcPie1.sparkline('html', pieCharts);
|
||||
}
|
||||
|
||||
pieCharts['tooltipPrefix'] = '$ ';
|
||||
pieCharts['tooltipSuffix'] = '';
|
||||
|
||||
if (slcPie2.length) {
|
||||
slcPie2.sparkline('html', pieCharts);
|
||||
}
|
||||
|
||||
pieCharts['tooltipPrefix'] = '';
|
||||
pieCharts['tooltipSuffix'] = ' Sales';
|
||||
|
||||
if (slcPie3.length) {
|
||||
slcPie3.sparkline('html', pieCharts);
|
||||
}
|
||||
|
||||
// Tristate Charts
|
||||
let tristateOptions = {
|
||||
type: 'tristate',
|
||||
barWidth: 8,
|
||||
barSpacing: 6,
|
||||
height: '110px',
|
||||
posBarColor: '#9ccc65',
|
||||
negBarColor: '#ef5350'
|
||||
};
|
||||
|
||||
if (slcTristate1.length) {
|
||||
slcTristate1.sparkline('html', tristateOptions);
|
||||
}
|
||||
|
||||
if (slcTristate2.length) {
|
||||
slcTristate2.sparkline('html', tristateOptions);
|
||||
}
|
||||
|
||||
if (slcTristate3.length) {
|
||||
slcTristate3.sparkline('html', tristateOptions);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
*
|
||||
*/
|
||||
static initChartsChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#555555';
|
||||
Chart.defaults.scale.gridLines.color = "rgba(0,0,0,.04)";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "rgba(0,0,0,.1)";
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.labels.boxWidth = 12;
|
||||
|
||||
// Get Chart Containers
|
||||
let chartLinesCon = jQuery('.js-chartjs-lines');
|
||||
let chartBarsCon = jQuery('.js-chartjs-bars');
|
||||
let chartRadarCon = jQuery('.js-chartjs-radar');
|
||||
let chartPolarCon = jQuery('.js-chartjs-polar');
|
||||
let chartPieCon = jQuery('.js-chartjs-pie');
|
||||
let chartDonutCon = jQuery('.js-chartjs-donut');
|
||||
|
||||
// Lines/Bar/Radar Chart Data
|
||||
let chartLinesBarsRadarData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(66,165,245,.75)',
|
||||
borderColor: 'rgba(66,165,245,1)',
|
||||
pointBackgroundColor: 'rgba(66,165,245,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(66,165,245,1)',
|
||||
data: [25, 38, 62, 45, 90, 115, 130]
|
||||
},
|
||||
{
|
||||
label: 'Last Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(66,165,245,.25)',
|
||||
borderColor: 'rgba(66,165,245,1)',
|
||||
pointBackgroundColor: 'rgba(66,165,245,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(66,165,245,1)',
|
||||
data: [112, 90, 142, 130, 170, 188, 196]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Polar/Pie/Donut Data
|
||||
let chartPolarPieDonutData = {
|
||||
labels: [
|
||||
'Earnings',
|
||||
'Sales',
|
||||
'Tickets'
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
50,
|
||||
25,
|
||||
25
|
||||
],
|
||||
backgroundColor: [
|
||||
'rgba(156,204,101,1)',
|
||||
'rgba(255,202,40,1)',
|
||||
'rgba(239,83,80,1)'
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
'rgba(156,204,101,.5)',
|
||||
'rgba(255,202,40,.5)',
|
||||
'rgba(239,83,80,.5)'
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
let chartLines, chartBars, chartRadar, chartPolar, chartPie, chartDonut;
|
||||
|
||||
if (chartLinesCon.length) {
|
||||
chartLines = new Chart(chartLinesCon, { type: 'line', data: chartLinesBarsRadarData });
|
||||
}
|
||||
|
||||
if (chartBarsCon.length) {
|
||||
chartBars = new Chart(chartBarsCon, { type: 'bar', data: chartLinesBarsRadarData });
|
||||
}
|
||||
|
||||
if (chartRadarCon.length) {
|
||||
chartRadar = new Chart(chartRadarCon, { type: 'radar', data: chartLinesBarsRadarData });
|
||||
}
|
||||
|
||||
if (chartPolarCon.length) {
|
||||
chartPolar = new Chart(chartPolarCon, { type: 'polarArea', data: chartPolarPieDonutData });
|
||||
}
|
||||
|
||||
if (chartPieCon.length) {
|
||||
chartPie = new Chart(chartPieCon, { type: 'pie', data: chartPolarPieDonutData });
|
||||
}
|
||||
|
||||
if (chartDonutCon.length) {
|
||||
chartDonut = new Chart(chartDonutCon, { type: 'doughnut', data: chartPolarPieDonutData });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Flot charts, for more examples you can check out http://www.flotcharts.org/flot/examples/
|
||||
*
|
||||
*/
|
||||
static initChartsFlot() {
|
||||
// Get the elements where we will attach the charts
|
||||
let flotLive = jQuery('.js-flot-live');
|
||||
let flotLines = jQuery('.js-flot-lines');
|
||||
let flotStacked = jQuery('.js-flot-stacked');
|
||||
let flotPie = jQuery('.js-flot-pie');
|
||||
let flotBars = jQuery('.js-flot-bars');
|
||||
|
||||
// Demo Data
|
||||
let dataEarnings = [[1, 1500], [2, 1700], [3, 1400], [4, 1900], [5, 2500], [6, 2300], [7, 2700], [8, 3200], [9, 3500], [10, 3260], [11, 4100], [12, 4600]];
|
||||
let dataSales = [[1, 500], [2, 600], [3, 400], [4, 750], [5, 1150], [6, 950], [7, 1400], [8, 1700], [9, 1800], [10, 1300], [11, 1750], [12, 2900]];
|
||||
|
||||
let dataSalesBefore = [[1, 500], [4, 600], [7, 1000], [10, 600], [13, 800], [16, 1200], [19, 1500], [22, 1600], [25, 2500], [28, 2700], [31, 3500], [34, 4500]];
|
||||
let dataSalesAfter = [[2, 900], [5, 1200], [8, 2000], [11, 1200], [14, 1600], [17, 2400], [20, 3000], [23, 3200], [26, 5000], [29, 5400], [32, 7000], [35, 9000]];
|
||||
|
||||
let dataMonths = [[1, 'Jan'], [2, 'Feb'], [3, 'Mar'], [4, 'Apr'], [5, 'May'], [6, 'Jun'], [7, 'Jul'], [8, 'Aug'], [9, 'Sep'], [10, 'Oct'], [11, 'Nov'], [12, 'Dec']];
|
||||
let dataMonthsBars = [[2, 'Jan'], [5, 'Feb'], [8, 'Mar'], [11, 'Apr'], [14, 'May'], [17, 'Jun'], [20, 'Jul'], [23, 'Aug'], [26, 'Sep'], [29, 'Oct'], [32, 'Nov'], [35, 'Dec']];
|
||||
|
||||
// Live Chart
|
||||
let dataLive = [], y = 0, chartLive;
|
||||
|
||||
function getRandomData() { // Random data generator
|
||||
if (dataLive.length > 0)
|
||||
dataLive = dataLive.slice(1);
|
||||
|
||||
while (dataLive.length < 300) {
|
||||
let prev = dataLive.length > 0 ? dataLive[dataLive.length - 1] : 50;
|
||||
let y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0)
|
||||
y = 0;
|
||||
if (y > 100)
|
||||
y = 100;
|
||||
dataLive.push(y);
|
||||
}
|
||||
|
||||
let res = [];
|
||||
for (let i = 0; i < dataLive.length; ++i) {
|
||||
res.push([i, dataLive[i]]);
|
||||
}
|
||||
|
||||
jQuery('.js-flot-live-info').html(y.toFixed(0) + '%'); // Show live chart info
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
function updateChartLive() { // Update live chart
|
||||
chartLive.setData([getRandomData()]);
|
||||
chartLive.draw();
|
||||
setTimeout(updateChartLive, 100);
|
||||
}
|
||||
|
||||
if (flotLive.length) {
|
||||
chartLive = jQuery.plot(flotLive, // Init live chart
|
||||
[{ data: getRandomData() }],
|
||||
{
|
||||
series: {
|
||||
shadowSize: 0
|
||||
},
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{opacity: 1}, {opacity: .5}]
|
||||
}
|
||||
},
|
||||
colors: ['#42a5f5'],
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
color: '#cccccc'
|
||||
},
|
||||
yaxis: {
|
||||
show: true,
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
xaxis: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
updateChartLive(); // Start getting new data
|
||||
}
|
||||
|
||||
// Init lines chart
|
||||
if (flotLines.length) {
|
||||
jQuery.plot(flotLines,
|
||||
[
|
||||
{
|
||||
label: 'Earnings',
|
||||
data: dataEarnings,
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{opacity: .7}, {opacity: .7}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
radius: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Sales',
|
||||
data: dataSales,
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{opacity: .5}, {opacity: .5}]
|
||||
}
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
radius: 5
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
colors: ['#ffca28', '#555555'],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'nw',
|
||||
backgroundOpacity: 0
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: '#ffffff',
|
||||
ticks: 3
|
||||
},
|
||||
xaxis: {
|
||||
ticks: dataMonths,
|
||||
tickColor: '#f5f5f5'
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Creating and attaching a tooltip to the classic chart
|
||||
let previousPoint = null, ttlabel = null;
|
||||
flotLines.bind('plothover', (event, pos, item) => {
|
||||
if (item) {
|
||||
if (previousPoint !== item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
jQuery('.js-flot-tooltip').remove();
|
||||
let x = item.datapoint[0], y = item.datapoint[1];
|
||||
|
||||
if (item.seriesIndex === 0) {
|
||||
ttlabel = '$ <strong>' + y + '</strong>';
|
||||
} else if (item.seriesIndex === 1) {
|
||||
ttlabel = '<strong>' + y + '</strong> sales';
|
||||
} else {
|
||||
ttlabel = '<strong>' + y + '</strong> tickets';
|
||||
}
|
||||
|
||||
jQuery('<div class="js-flot-tooltip flot-tooltip">' + ttlabel + '</div>')
|
||||
.css({top: item.pageY - 45, left: item.pageX + 5}).appendTo("body").show();
|
||||
}
|
||||
}
|
||||
else {
|
||||
jQuery('.js-flot-tooltip').remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Stacked Chart
|
||||
if (flotStacked.length) {
|
||||
jQuery.plot(flotStacked,
|
||||
[
|
||||
{
|
||||
label: 'Sales',
|
||||
data: dataSales
|
||||
},
|
||||
{
|
||||
label: 'Earnings',
|
||||
data: dataEarnings
|
||||
}
|
||||
],
|
||||
{
|
||||
colors: ['#555555', '#26c6da'],
|
||||
series: {
|
||||
stack: true,
|
||||
lines: {
|
||||
show: true,
|
||||
fill: true
|
||||
}
|
||||
},
|
||||
lines: {show: true,
|
||||
lineWidth: 0,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{opacity: 1}, {opacity: 1}]
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'nw',
|
||||
sorted: true,
|
||||
backgroundOpacity: 0
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: '#ffffff',
|
||||
ticks: 3
|
||||
},
|
||||
xaxis: {
|
||||
ticks: dataMonths,
|
||||
tickColor: '#f5f5f5'
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Bars Chart
|
||||
if (flotBars.length) {
|
||||
jQuery.plot(flotBars,
|
||||
[
|
||||
{
|
||||
label: 'Sales Before Release',
|
||||
data: dataSalesBefore,
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: {
|
||||
colors: [{opacity: .75}, {opacity: .75}]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Sales After Release',
|
||||
data: dataSalesAfter,
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: {
|
||||
colors: [{opacity: .75}, {opacity: .75}]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
{
|
||||
colors: ['#ef5350', '#9ccc65'],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'nw',
|
||||
backgroundOpacity: 0
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0
|
||||
},
|
||||
yaxis: {
|
||||
ticks: 3,
|
||||
tickColor: '#f5f5f5'
|
||||
},
|
||||
xaxis: {
|
||||
ticks: dataMonthsBars,
|
||||
tickColor: '#f5f5f5'
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Pie Chart
|
||||
if (flotPie.length) {
|
||||
jQuery.plot(flotPie,
|
||||
[
|
||||
{
|
||||
label: 'Sales',
|
||||
data: 15
|
||||
},
|
||||
{
|
||||
label: 'Tickets',
|
||||
data: 12
|
||||
},
|
||||
{
|
||||
label: 'Earnings',
|
||||
data: 73
|
||||
}
|
||||
],
|
||||
{
|
||||
colors: ['#26c6da', '#ffca28', '#9ccc65'],
|
||||
legend: {show: false},
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: (label, pieSeries) => {
|
||||
return '<div class="flot-pie-label">' + label + '<br>' + Math.round(pieSeries.percent) + '%</div>';
|
||||
},
|
||||
background: {
|
||||
opacity: .75,
|
||||
color: '#000000'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initRandomEasyPieChart();
|
||||
this.initChartsSparkline();
|
||||
this.initChartsChartJS();
|
||||
this.initChartsFlot();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompCharts.init(); });
|
||||
@@ -0,0 +1,177 @@
|
||||
/*
|
||||
* Document : be_comp_chat.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Chat Page
|
||||
*/
|
||||
|
||||
// Helper variables
|
||||
let lWindow, lHeader, lFooter, cContainer, cHeight, cHead, cTalk, cPeople, cform, cTimeout;
|
||||
|
||||
// Message Classes
|
||||
let classesMsgBase = 'rounded font-w600 p-10 mb-10 animated fadeIn',
|
||||
classesMsgSelf = 'ml-50 bg-primary-lighter text-primary-darker',
|
||||
classesMsgOther = 'mr-50 bg-body-light',
|
||||
classesMsgHeader = 'font-size-sm font-italic text-muted text-center mt-20 mb-10';
|
||||
|
||||
class BeCompChat {
|
||||
/*
|
||||
* Init chat
|
||||
*
|
||||
*/
|
||||
static initChat() {
|
||||
let self = this;
|
||||
|
||||
// Set variables
|
||||
lWindow = jQuery(window);
|
||||
lHeader = jQuery('#page-header');
|
||||
lFooter = jQuery('#page-footer');
|
||||
cContainer = jQuery('.js-chat-container');
|
||||
cHeight = cContainer.data('chat-height');
|
||||
cHead = jQuery('.js-chat-head');
|
||||
cTalk = jQuery('.js-chat-talk');
|
||||
cPeople = jQuery('.js-chat-people');
|
||||
cform = jQuery('.js-chat-form');
|
||||
|
||||
// Chat height mode ('auto' for full height, number for specific height in pixels)
|
||||
switch (cHeight) {
|
||||
case 'auto':
|
||||
// Init chat windows' height to full available (also on browser resize or orientation change)
|
||||
jQuery(window).on('resize.cb.chat orientationchange.cb.chat', e => {
|
||||
clearTimeout(cTimeout);
|
||||
|
||||
cTimeout = setTimeout(e => {
|
||||
self.initChatWindows();
|
||||
}, 150);
|
||||
}).triggerHandler('resize.cb.chat');
|
||||
break;
|
||||
default:
|
||||
// Init chat windows' height with a specific height
|
||||
self.initChatWindows(cHeight);
|
||||
}
|
||||
|
||||
// Enable scroll lock to chat talk and people window
|
||||
cTalk.scrollLock('enable');
|
||||
|
||||
if (cPeople.length) {
|
||||
cPeople.scrollLock('enable');
|
||||
}
|
||||
|
||||
// Init form submission
|
||||
jQuery('form', cform).on('submit', e => {
|
||||
// Stop form submission
|
||||
e.preventDefault();
|
||||
|
||||
// Get chat input
|
||||
let chatInput = jQuery('.js-chat-input', jQuery(e.currentTarget));
|
||||
|
||||
// Add message
|
||||
self.chatAddMessage(chatInput.data('target-chat-id'), chatInput.val(), 'self', chatInput);
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init chat windows' height
|
||||
*
|
||||
*/
|
||||
static initChatWindows(customHeight) {
|
||||
let cHeightFinal;
|
||||
|
||||
// If height is specified
|
||||
if (customHeight) {
|
||||
cHeightFinal = parseInt(customHeight);
|
||||
} else {
|
||||
// Calculate height
|
||||
cHeightFinal = lWindow.height() -
|
||||
(lHeader.length ? lHeader.outerHeight() : 0) -
|
||||
(lFooter.length ? lFooter.outerHeight() : 0) -
|
||||
(parseInt(cContainer.css('padding-top')) + parseInt(cContainer.css('padding-bottom'))) -
|
||||
cHead.outerHeight();
|
||||
}
|
||||
|
||||
// Add a minimum height
|
||||
if (cHeightFinal < 200) {
|
||||
cHeightFinal = 200;
|
||||
}
|
||||
|
||||
// Set height to chat windows (+ people window if exists)
|
||||
cTalk.css('height', cHeightFinal - cform.outerHeight());
|
||||
|
||||
if (cPeople.length) {
|
||||
cPeople.css('height', cHeightFinal);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Add a header message to a chat window
|
||||
*
|
||||
*/
|
||||
static chatAddHeader(chatId, chatMsg) {
|
||||
// Get chat window
|
||||
let chatWindow = jQuery('.js-chat-talk[data-chat-id="' + chatId + '"]');
|
||||
|
||||
// If time header and chat window exists
|
||||
if (chatMsg && chatWindow.length) {
|
||||
chatWindow.append('<div class="' + classesMsgHeader + '">'
|
||||
+ jQuery('<div />').text(chatMsg).html()
|
||||
+ '</div>');
|
||||
|
||||
// Scroll the message list to the bottom
|
||||
chatWindow.animate({ scrollTop: chatWindow[0].scrollHeight }, 150);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Add a message to a chat window
|
||||
*
|
||||
*/
|
||||
static chatAddMessage(chatId, chatMsg, chatMsgLevel, chatInput) {
|
||||
// Get chat window
|
||||
let chatWindow = jQuery('.js-chat-talk[data-chat-id="' + chatId + '"]');
|
||||
|
||||
// If message and chat window exists
|
||||
if (chatMsg && chatWindow.length) {
|
||||
// Post it to its related window (if message level is 'self', make it stand out)
|
||||
chatWindow.append('<div class="' + classesMsgBase + ' ' + ((chatMsgLevel === 'self') ? classesMsgSelf : classesMsgOther) + '">'
|
||||
+ jQuery('<div />').text(chatMsg).html()
|
||||
+ '</div>');
|
||||
|
||||
// Scroll the message list to the bottom
|
||||
chatWindow.animate({ scrollTop: chatWindow[0].scrollHeight }, 150);
|
||||
|
||||
// If input is set, reset it
|
||||
if (chatInput) {
|
||||
chatInput.val('');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initChat();
|
||||
}
|
||||
|
||||
/*
|
||||
* Add time header
|
||||
*
|
||||
*/
|
||||
static addHeader(chatId, chatMsg) {
|
||||
this.chatAddHeader(chatId, chatMsg);
|
||||
}
|
||||
|
||||
/*
|
||||
* Add message
|
||||
*
|
||||
*/
|
||||
static addMessage(chatId, chatMsg, chatMsgLevel) {
|
||||
this.chatAddMessage(chatId, chatMsg, chatMsgLevel, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => {
|
||||
BeCompChat.init();
|
||||
window.BeCompChat = BeCompChat;
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
* Document : be_comp_image_cropper.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Image Cropper Page
|
||||
*/
|
||||
|
||||
// Image Cropper, for more examples you can check out https://fengyuanchen.github.io/cropperjs/
|
||||
class BeCompImageCropper {
|
||||
/*
|
||||
* Init image cropper demo functionality
|
||||
*
|
||||
*/
|
||||
static initImageCropper() {
|
||||
// Get Image Container
|
||||
let image = document.getElementById('js-img-cropper');
|
||||
|
||||
// Set Options
|
||||
Cropper.setDefaults({
|
||||
aspectRatio: 4 / 3,
|
||||
preview: '.js-img-cropper-preview'
|
||||
});
|
||||
|
||||
// Init Image Cropper
|
||||
let cropper = new Cropper(image, {
|
||||
crop: function (e) {
|
||||
// e.detail contains all data required to crop the image server side
|
||||
// You will have to send it to your custom server side script and crop the image there
|
||||
// Since this event is fired each time you set the crop section, you could also use getData()
|
||||
// method on demand. Please check out https://fengyuanchen.github.io/cropperjs/ for more info
|
||||
// console.log(e.detail);
|
||||
}
|
||||
});
|
||||
|
||||
// Mini Cropper API
|
||||
jQuery('[data-toggle="cropper"]').on('click', e => {
|
||||
let btn = jQuery(e.currentTarget);
|
||||
let method = btn.data('method') || false;
|
||||
let option = btn.data('option') || false;
|
||||
|
||||
// Method selection with object literals
|
||||
let cropperAPI = {
|
||||
zoom: () => {
|
||||
cropper.zoom(option);
|
||||
},
|
||||
setDragMode: () => {
|
||||
cropper.setDragMode(option);
|
||||
},
|
||||
rotate: () => {
|
||||
cropper.rotate(option);
|
||||
},
|
||||
scaleX: () => {
|
||||
cropper.scaleX(option);
|
||||
btn.data('option', -(option));
|
||||
},
|
||||
scaleY: () => {
|
||||
cropper.scaleY(option);
|
||||
btn.data('option', -(option));
|
||||
},
|
||||
setAspectRatio: () => {
|
||||
cropper.setAspectRatio(option);
|
||||
},
|
||||
crop: () => {
|
||||
cropper.crop();
|
||||
},
|
||||
clear: () => {
|
||||
cropper.clear();
|
||||
}
|
||||
};
|
||||
|
||||
// If method exists, execute it
|
||||
if (cropperAPI[method]) {
|
||||
cropperAPI[method]();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initImageCropper();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompImageCropper.init(); });
|
||||
@@ -0,0 +1,138 @@
|
||||
/*
|
||||
* Document : be_comp_maps_google.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Google Maps Page
|
||||
*/
|
||||
|
||||
// Gmaps.js, for more examples you can check out https://hpneo.github.io/gmaps/
|
||||
class BeCompMapsGoogle {
|
||||
/*
|
||||
* Init Search Map functionality
|
||||
*
|
||||
*/
|
||||
static initMapSearch() {
|
||||
if (jQuery('#js-map-search').length) {
|
||||
// Init Map
|
||||
let mapSearch = new GMaps({
|
||||
div: '#js-map-search',
|
||||
lat: 20,
|
||||
lng: 0,
|
||||
zoom: 2,
|
||||
scrollwheel: false
|
||||
});
|
||||
|
||||
// When the search form is submitted
|
||||
jQuery('.js-form-search').on('submit', (e) => {
|
||||
let inputGroup = jQuery('.js-search-address').parent('.input-group');
|
||||
|
||||
GMaps.geocode({
|
||||
address: jQuery('.js-search-address').val().trim(),
|
||||
callback: (results, status) => {
|
||||
if ((status === 'OK') && results) {
|
||||
let latlng = results[0].geometry.location;
|
||||
|
||||
mapSearch.removeMarkers();
|
||||
mapSearch.addMarker({ lat: latlng.lat(), lng: latlng.lng() });
|
||||
mapSearch.fitBounds(results[0].geometry.viewport);
|
||||
|
||||
inputGroup.siblings('.form-text').remove();
|
||||
} else {
|
||||
inputGroup.after('<div class="font-text text-danger text-center animated fadeInDown">Address not found!</div>')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Satellite Map
|
||||
*
|
||||
*/
|
||||
static initMapSat() {
|
||||
if (jQuery('#js-map-sat').length) {
|
||||
new GMaps({
|
||||
div: '#js-map-sat',
|
||||
lat: 20,
|
||||
lng: 0,
|
||||
zoom: 2,
|
||||
scrollwheel: false
|
||||
}).setMapTypeId(google.maps.MapTypeId.SATELLITE);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Terrain Map
|
||||
*
|
||||
*/
|
||||
static initMapTer() {
|
||||
if (jQuery('#js-map-ter').length) {
|
||||
new GMaps({
|
||||
div: '#js-map-ter',
|
||||
lat: 20,
|
||||
lng: 0,
|
||||
zoom: 2,
|
||||
scrollwheel: false
|
||||
}).setMapTypeId(google.maps.MapTypeId.TERRAIN);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Overlay Map
|
||||
*
|
||||
*/
|
||||
static initMapOverlay() {
|
||||
if (jQuery('#js-map-overlay').length) {
|
||||
new GMaps({
|
||||
div: '#js-map-overlay',
|
||||
lat: 35,
|
||||
lng: 139,
|
||||
zoom: 6,
|
||||
scrollwheel: false
|
||||
}).drawOverlay({
|
||||
lat: 35,
|
||||
lng: 139,
|
||||
content: '<div class="alert alert-info text-xs-center"><h4 class="alert-heading mt-5 mb-15">Message</h4><p class="font-size-h5 mb-0">You can overlay messages on your maps!</p></div>'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Markers Map
|
||||
*
|
||||
*/
|
||||
static initMapMarkers() {
|
||||
if (jQuery('#js-map-markers').length) {
|
||||
new GMaps({
|
||||
div: '#js-map-markers',
|
||||
lat: 35.652832,
|
||||
lng: 139.839478,
|
||||
zoom: 11,
|
||||
scrollwheel: false
|
||||
}).addMarkers([
|
||||
{lat: 35.65, lng: 139.83, title: 'Map Marker #1', animation: google.maps.Animation.DROP, infoWindow: {content: 'Map Marker #1'}},
|
||||
{lat: 35.71, lng: 139.89, title: 'Map Marker #2', animation: google.maps.Animation.DROP, infoWindow: {content: 'Map Marker #2'}},
|
||||
{lat: 35.68, lng: 139.80, title: 'Map Marker #3', animation: google.maps.Animation.DROP, infoWindow: {content: 'Map Marker #3'}},
|
||||
{lat: 35.63, lng: 139.88, title: 'Map Marker #4', animation: google.maps.Animation.DROP, infoWindow: {content: 'Map Marker #4'}},
|
||||
{lat: 35.70, lng: 139.85, title: 'Map Marker #5', animation: google.maps.Animation.DROP, infoWindow: {content: 'Map Marker #5'}}
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initMapSearch();
|
||||
this.initMapSat();
|
||||
this.initMapTer();
|
||||
this.initMapOverlay();
|
||||
this.initMapMarkers();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompMapsGoogle.init(); });
|
||||
@@ -0,0 +1,154 @@
|
||||
/*
|
||||
* Document : be_comp_maps_vector.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Vector Maps Page
|
||||
*/
|
||||
|
||||
// Set default options for all maps
|
||||
let mapOptions = {
|
||||
map: '',
|
||||
backgroundColor: '#ffffff',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#42a5f5',
|
||||
'fill-opacity': 1,
|
||||
stroke: 'none',
|
||||
'stroke-width': 0,
|
||||
'stroke-opacity': 1
|
||||
},
|
||||
hover: {
|
||||
'fill-opacity': .8,
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// jVectorMap, for more examples you can check out http://jvectormap.com/documentation/
|
||||
class BeCompMapsVector {
|
||||
/*
|
||||
* Init World Map
|
||||
*
|
||||
*/
|
||||
static initMapWorld() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'world_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-world').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Europe Map
|
||||
*
|
||||
*/
|
||||
static initMapEurope() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'europe_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-europe').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init USA Map
|
||||
*
|
||||
*/
|
||||
static initMapUsa() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'us_aea_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-usa').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init India Map
|
||||
*
|
||||
*/
|
||||
static initMapIndia() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'in_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-india').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init China Map
|
||||
*
|
||||
*/
|
||||
static initMapChina() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'cn_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-china').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Australia Map
|
||||
*
|
||||
*/
|
||||
static initMapAustralia() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'au_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-australia').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init South Africa Map
|
||||
*
|
||||
*/
|
||||
static initMapSouthAfrica() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'za_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-south-africa').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init France Map
|
||||
*
|
||||
*/
|
||||
static initMapFrance() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'fr_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-france').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Germany Map
|
||||
*
|
||||
*/
|
||||
static initMapGermany() {
|
||||
// Set Active Map
|
||||
mapOptions['map'] = 'de_mill_en';
|
||||
|
||||
// Init Map
|
||||
jQuery('.js-vector-map-germany').vectorMap(mapOptions);
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initMapWorld();
|
||||
this.initMapEurope();
|
||||
this.initMapUsa();
|
||||
this.initMapIndia();
|
||||
this.initMapChina();
|
||||
this.initMapAustralia();
|
||||
this.initMapSouthAfrica();
|
||||
this.initMapFrance();
|
||||
this.initMapGermany();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompMapsVector.init(); });
|
||||
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
* Document : be_comp_rating.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Rating Page
|
||||
*/
|
||||
|
||||
// jQuery Raty, for more examples you can check out https://github.com/wbotelhos/raty
|
||||
class BeCompRating {
|
||||
/*
|
||||
* Init demo rating functionality
|
||||
*
|
||||
*/
|
||||
static initRating() {
|
||||
// Set Default options
|
||||
jQuery.fn.raty.defaults.starType = 'i';
|
||||
jQuery.fn.raty.defaults.hints = ['Just Bad!', 'Almost There!', 'It’s ok!', 'That’s nice!', 'Incredible!'];
|
||||
|
||||
// Init Raty on .js-rating class
|
||||
jQuery('.js-rating').each((index, element) => {
|
||||
let el = jQuery(element);
|
||||
|
||||
el.raty({
|
||||
score: el.data('score') || 0,
|
||||
number: el.data('number') || 5,
|
||||
cancel: el.data('cancel') || false,
|
||||
target: el.data('target') || false,
|
||||
targetScore: el.data('target-score') || false,
|
||||
precision: el.data('precision') || false,
|
||||
cancelOff: el.data('cancel-off') || 'fa fa-fw fa-times-circle text-danger',
|
||||
cancelOn: el.data('cancel-on') || 'fa fa-fw fa-times-circle',
|
||||
starHalf: el.data('star-half') || 'fa fa-fw fa-star-half text-warning',
|
||||
starOff: el.data('star-off') || 'fa fa-fw fa-star text-muted',
|
||||
starOn: el.data('star-on') || 'fa fa-fw fa-star text-warning',
|
||||
click: function(score, evt) {
|
||||
// Here you could add your logic on rating click
|
||||
// console.log('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initRating();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeCompRating.init(); });
|
||||
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* Document : be_forms_plugins.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Form Page
|
||||
*/
|
||||
|
||||
class BeFormPlugins {
|
||||
/*
|
||||
* Init jQuery AutoComplete example, for more examples you can check out https://github.com/Pixabay/jQuery-autoComplete
|
||||
*
|
||||
*/
|
||||
static initAutoComplete() {
|
||||
// Init autocomplete functionality
|
||||
jQuery('.js-autocomplete').autoComplete({
|
||||
minChars: 1,
|
||||
source: function(term, suggest){
|
||||
term = term.toLowerCase();
|
||||
|
||||
let countriesList = ['Afghanistan','Albania','Algeria','Andorra','Angola','Anguilla','Antigua & Barbuda','Argentina','Armenia','Aruba','Australia','Austria','Azerbaijan','Bahamas','Bahrain','Bangladesh','Barbados','Belarus','Belgium','Belize','Benin','Bermuda','Bhutan','Bolivia','Bosnia & Herzegovina','Botswana','Brazil','British Virgin Islands','Brunei','Bulgaria','Burkina Faso','Burundi','Cambodia','Cameroon','Cape Verde','Cayman Islands','Chad','Chile','China','Colombia','Congo','Cook Islands','Costa Rica','Cote D Ivoire','Croatia','Cruise Ship','Cuba','Cyprus','Czech Republic','Denmark','Djibouti','Dominica','Dominican Republic','Ecuador','Egypt','El Salvador','Equatorial Guinea','Estonia','Ethiopia','Falkland Islands','Faroe Islands','Fiji','Finland','France','French Polynesia','French West Indies','Gabon','Gambia','Georgia','Germany','Ghana','Gibraltar','Greece','Greenland','Grenada','Guam','Guatemala','Guernsey','Guinea','Guinea Bissau','Guyana','Haiti','Honduras','Hong Kong','Hungary','Iceland','India','Indonesia','Iran','Iraq','Ireland','Isle of Man','Israel','Italy','Jamaica','Japan','Jersey','Jordan','Kazakhstan','Kenya','Kuwait','Kyrgyz Republic','Laos','Latvia','Lebanon','Lesotho','Liberia','Libya','Liechtenstein','Lithuania','Luxembourg','Macau','Macedonia','Madagascar','Malawi','Malaysia','Maldives','Mali','Malta','Mauritania','Mauritius','Mexico','Moldova','Monaco','Mongolia','Montenegro','Montserrat','Morocco','Mozambique','Namibia','Nepal','Netherlands','Netherlands Antilles','New Caledonia','New Zealand','Nicaragua','Niger','Nigeria','Norway','Oman','Pakistan','Palestine','Panama','Papua New Guinea','Paraguay','Peru','Philippines','Poland','Portugal','Puerto Rico','Qatar','Reunion','Romania','Russia','Rwanda','Saint Pierre & Miquelon','Samoa','San Marino','Satellite','Saudi Arabia','Senegal','Serbia','Seychelles','Sierra Leone','Singapore','Slovakia','Slovenia','South Africa','South Korea','Spain','Sri Lanka','St Kitts & Nevis','St Lucia','St Vincent','St. Lucia','Sudan','Suriname','Swaziland','Sweden','Switzerland','Syria','Taiwan','Tajikistan','Tanzania','Thailand','Timor L\'Este','Togo','Tonga','Trinidad & Tobago','Tunisia','Turkey','Turkmenistan','Turks & Caicos','Uganda','Ukraine','United Arab Emirates','United Kingdom','United States','Uruguay','Uzbekistan','Venezuela','Vietnam','Virgin Islands (US)','Yemen','Zambia','Zimbabwe'];
|
||||
let suggestions = [];
|
||||
|
||||
for (i = 0; i < countriesList.length; i++) {
|
||||
if (~ countriesList[i].toLowerCase().indexOf(term)) suggestions.push(countriesList[i]);
|
||||
}
|
||||
|
||||
suggest(suggestions);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Password Strength, for more examples you can check out https://github.com/ablanco/jquery.pwstrength.bootstrap
|
||||
*
|
||||
*/
|
||||
static initPwStrength() {
|
||||
// Bootstrap Form
|
||||
jQuery('.js-pw-strength1').pwstrength({
|
||||
ui: {
|
||||
container: "#js-pw-strength1-container",
|
||||
viewports: {
|
||||
progress: ".js-pw-strength1-progress",
|
||||
verdict: ".js-pw-strength1-feedback"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Material Form
|
||||
jQuery('.js-pw-strength2').pwstrength({
|
||||
ui: {
|
||||
container: "#js-pw-strength2-container",
|
||||
viewports: {
|
||||
progress: ".js-pw-strength2-progress",
|
||||
verdict: ".js-pw-strength2-feedback"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initAutoComplete();
|
||||
this.initPwStrength();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeFormPlugins.init(); });
|
||||
@@ -0,0 +1,241 @@
|
||||
/*
|
||||
* Document : be_forms_validation.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Form Validation Page
|
||||
*/
|
||||
|
||||
// jQuery Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
class BeFormValidation {
|
||||
/*
|
||||
* Init Bootstrap Forms Validation
|
||||
*
|
||||
*/
|
||||
static initValidationBootstrap() {
|
||||
jQuery('.js-validation-bootstrap').validate({
|
||||
ignore: [],
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group > div').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'val-username': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
'val-email': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'val-password': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'val-confirm-password': {
|
||||
required: true,
|
||||
equalTo: '#val-password'
|
||||
},
|
||||
'val-select2': {
|
||||
required: true
|
||||
},
|
||||
'val-select2-multiple': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'val-suggestions': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'val-skill': {
|
||||
required: true
|
||||
},
|
||||
'val-currency': {
|
||||
required: true,
|
||||
currency: ['$', true]
|
||||
},
|
||||
'val-website': {
|
||||
required: true,
|
||||
url: true
|
||||
},
|
||||
'val-phoneus': {
|
||||
required: true,
|
||||
phoneUS: true
|
||||
},
|
||||
'val-digits': {
|
||||
required: true,
|
||||
digits: true
|
||||
},
|
||||
'val-number': {
|
||||
required: true,
|
||||
number: true
|
||||
},
|
||||
'val-range': {
|
||||
required: true,
|
||||
range: [1, 5]
|
||||
},
|
||||
'val-terms': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'val-username': {
|
||||
required: 'Please enter a username',
|
||||
minlength: 'Your username must consist of at least 3 characters'
|
||||
},
|
||||
'val-email': 'Please enter a valid email address',
|
||||
'val-password': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long'
|
||||
},
|
||||
'val-confirm-password': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long',
|
||||
equalTo: 'Please enter the same password as above'
|
||||
},
|
||||
'val-select2': 'Please select a value!',
|
||||
'val-select2-multiple': 'Please select at least 2 values!',
|
||||
'val-suggestions': 'What can we do to become better?',
|
||||
'val-skill': 'Please select a skill!',
|
||||
'val-currency': 'Please enter a price!',
|
||||
'val-website': 'Please enter your website!',
|
||||
'val-phoneus': 'Please enter a US phone!',
|
||||
'val-digits': 'Please enter only digits!',
|
||||
'val-number': 'Please enter a number!',
|
||||
'val-range': 'Please enter a number between 1 and 5!',
|
||||
'val-terms': 'You must agree to the service terms!'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Material Forms Validation
|
||||
*
|
||||
*/
|
||||
static initValidationMaterial() {
|
||||
jQuery('.js-validation-material').validate({
|
||||
ignore: [],
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'val-username2': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
'val-email2': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'val-password2': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'val-confirm-password2': {
|
||||
required: true,
|
||||
equalTo: '#val-password2'
|
||||
},
|
||||
'val-select22': {
|
||||
required: true
|
||||
},
|
||||
'val-select2-multiple2': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'val-suggestions2': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'val-skill2': {
|
||||
required: true
|
||||
},
|
||||
'val-currency2': {
|
||||
required: true,
|
||||
currency: ['$', true]
|
||||
},
|
||||
'val-website2': {
|
||||
required: true,
|
||||
url: true
|
||||
},
|
||||
'val-phoneus2': {
|
||||
required: true,
|
||||
phoneUS: true
|
||||
},
|
||||
'val-digits2': {
|
||||
required: true,
|
||||
digits: true
|
||||
},
|
||||
'val-number2': {
|
||||
required: true,
|
||||
number: true
|
||||
},
|
||||
'val-range2': {
|
||||
required: true,
|
||||
range: [1, 5]
|
||||
},
|
||||
'val-terms2': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'val-username2': {
|
||||
required: 'Please enter a username',
|
||||
minlength: 'Your username must consist of at least 3 characters'
|
||||
},
|
||||
'val-email2': 'Please enter a valid email address',
|
||||
'val-password2': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long'
|
||||
},
|
||||
'val-confirm-password2': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long',
|
||||
equalTo: 'Please enter the same password as above'
|
||||
},
|
||||
'val-select22': 'Please select a value!',
|
||||
'val-select2-multiple2': 'Please select at least 2 values!',
|
||||
'val-suggestions2': 'What can we do to become better?',
|
||||
'val-skill2': 'Please select a skill!',
|
||||
'val-currency2': 'Please enter a price!',
|
||||
'val-website2': 'Please enter your website!',
|
||||
'val-phoneus2': 'Please enter a US phone!',
|
||||
'val-digits2': 'Please enter only digits!',
|
||||
'val-number2': 'Please enter a number!',
|
||||
'val-range2': 'Please enter a number between 1 and 5!',
|
||||
'val-terms2': 'You must agree to the service terms!'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationBootstrap();
|
||||
this.initValidationMaterial();
|
||||
|
||||
// Init Validation on Select2 change
|
||||
jQuery('.js-select2').on('change', e => {
|
||||
jQuery(e.currentTarget).valid();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeFormValidation.init(); });
|
||||
@@ -0,0 +1,241 @@
|
||||
/*
|
||||
* Document : be_forms_wizard.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Form Wizard Page
|
||||
*/
|
||||
|
||||
class BeFormWizard {
|
||||
/*
|
||||
* Init Wizard defaults
|
||||
*
|
||||
*/
|
||||
static initWizardDefaults() {
|
||||
jQuery.fn.bootstrapWizard.defaults.tabClass = 'nav nav-tabs';
|
||||
jQuery.fn.bootstrapWizard.defaults.nextSelector = '[data-wizard="next"]';
|
||||
jQuery.fn.bootstrapWizard.defaults.previousSelector = '[data-wizard="prev"]';
|
||||
jQuery.fn.bootstrapWizard.defaults.firstSelector = '[data-wizard="first"]';
|
||||
jQuery.fn.bootstrapWizard.defaults.lastSelector = '[data-wizard="lsat"]';
|
||||
jQuery.fn.bootstrapWizard.defaults.finishSelector = '[data-wizard="finish"]';
|
||||
jQuery.fn.bootstrapWizard.defaults.backSelector = '[data-wizard="back"]';
|
||||
}
|
||||
|
||||
/*
|
||||
* Init simple wizard, for more examples you can check out https://github.com/VinceG/twitter-bootstrap-wizard
|
||||
*
|
||||
*/
|
||||
static initWizardSimple() {
|
||||
jQuery('.js-wizard-simple').bootstrapWizard({
|
||||
onTabShow: (tab, navigation, index) => {
|
||||
let percent = ((index + 1) / navigation.find('li').length) * 100;
|
||||
|
||||
// Get progress bar
|
||||
let progress = navigation.parents('.block').find('[data-wizard="progress"] > .progress-bar');
|
||||
|
||||
// Update progress bar if there is one
|
||||
if (progress.length) {
|
||||
progress.css({ width: percent + 1 + '%' });
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init wizards with validation, for more examples you can check out
|
||||
* https://github.com/VinceG/twitter-bootstrap-wizard and https://github.com/jzaefferer/jquery-validation
|
||||
*
|
||||
*/
|
||||
static initWizardValidation() {
|
||||
// Get forms
|
||||
let formClassic = jQuery('.js-wizard-validation-classic-form');
|
||||
let formMaterial = jQuery('.js-wizard-validation-material-form');
|
||||
|
||||
// Prevent forms from submitting on enter key press
|
||||
formClassic.add(formMaterial).on('keyup keypress', e => {
|
||||
let code = e.keyCode || e.which;
|
||||
|
||||
if (code === 13) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Init form validation on classic wizard form
|
||||
let validatorClassic = formClassic.validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'wizard-validation-classic-firstname': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'wizard-validation-classic-lastname': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'wizard-validation-classic-email': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'wizard-validation-classic-bio': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'wizard-validation-classic-location': {
|
||||
required: true
|
||||
},
|
||||
'wizard-validation-classic-skills': {
|
||||
required: true
|
||||
},
|
||||
'wizard-validation-classic-terms': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'wizard-validation-classic-firstname': {
|
||||
required: 'Please enter a firstname',
|
||||
minlength: 'Your firtname must consist of at least 2 characters'
|
||||
},
|
||||
'wizard-validation-classic-lastname': {
|
||||
required: 'Please enter a lastname',
|
||||
minlength: 'Your lastname must consist of at least 2 characters'
|
||||
},
|
||||
'wizard-validation-classic-email': 'Please enter a valid email address',
|
||||
'wizard-validation-classic-bio': 'Let us know a few thing about yourself',
|
||||
'wizard-validation-classic-skills': 'Please select a skill!',
|
||||
'wizard-validation-classic-terms': 'You must agree to the service terms!'
|
||||
}
|
||||
});
|
||||
|
||||
// Init form validation on material wizard form
|
||||
let validatorMaterial = formMaterial.validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'wizard-validation-material-firstname': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'wizard-validation-material-lastname': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'wizard-validation-material-email': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'wizard-validation-material-bio': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'wizard-validation-material-location': {
|
||||
required: true
|
||||
},
|
||||
'wizard-validation-material-skills': {
|
||||
required: true
|
||||
},
|
||||
'wizard-validation-material-terms': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'wizard-validation-material-firstname': {
|
||||
required: 'Please enter a firstname',
|
||||
minlength: 'Your firtname must consist of at least 2 characters'
|
||||
},
|
||||
'wizard-validation-material-lastname': {
|
||||
required: 'Please enter a lastname',
|
||||
minlength: 'Your lastname must consist of at least 2 characters'
|
||||
},
|
||||
'wizard-validation-material-email': 'Please enter a valid email address',
|
||||
'wizard-validation-material-bio': 'Let us know a few thing about yourself',
|
||||
'wizard-validation-material-skills': 'Please select a skill!',
|
||||
'wizard-validation-material-terms': 'You must agree to the service terms!'
|
||||
}
|
||||
});
|
||||
|
||||
// Init classic wizard with validation
|
||||
jQuery('.js-wizard-validation-classic').bootstrapWizard({
|
||||
tabClass: '',
|
||||
onTabShow: (tab, navigation, index) => {
|
||||
let percent = ((index + 1) / navigation.find('li').length) * 100;
|
||||
|
||||
// Get progress bar
|
||||
let progress = navigation.parents('.block').find('[data-wizard="progress"] > .progress-bar');
|
||||
|
||||
// Update progress bar if there is one
|
||||
if (progress.length) {
|
||||
progress.css({ width: percent + 1 + '%' });
|
||||
}
|
||||
},
|
||||
onNext: (tab, navigation, index) => {
|
||||
if(!formClassic.valid()) {
|
||||
validatorClassic.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: (tab, navigation, index) => {
|
||||
jQuery('a', navigation).blur();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Init wizard with validation
|
||||
jQuery('.js-wizard-validation-material').bootstrapWizard({
|
||||
tabClass: '',
|
||||
onTabShow: (tab, navigation, index) => {
|
||||
let percent = ((index + 1) / navigation.find('li').length) * 100;
|
||||
|
||||
// Get progress bar
|
||||
let progress = navigation.parents('.block').find('[data-wizard="progress"] > .progress-bar');
|
||||
|
||||
// Update progress bar if there is one
|
||||
if (progress.length) {
|
||||
progress.css({ width: percent + 1 + '%' });
|
||||
}
|
||||
},
|
||||
onNext: (tab, navigation, index) => {
|
||||
if(!formMaterial.valid()) {
|
||||
validatorMaterial.focusInvalid();
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onTabClick: (tab, navigation, index) => {
|
||||
jQuery('a', navigation).blur();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initWizardDefaults();
|
||||
this.initWizardSimple();
|
||||
this.initWizardValidation();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeFormWizard.init(); });
|
||||
@@ -0,0 +1,199 @@
|
||||
/*
|
||||
* Document : be_pages_crypto_dashboard.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Crypto Dashboard Page
|
||||
*/
|
||||
|
||||
class BePagesCryptoDashboard {
|
||||
/*
|
||||
* Crypto Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
*
|
||||
*/
|
||||
static initChartsCrypto() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#555555';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.labels.boxWidth = 15;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Get Chart Containers
|
||||
let chartBitcoinCon = jQuery('.js-chartjs-bitcoin');
|
||||
let chartEthereumCon = jQuery('.js-chartjs-ethereum');
|
||||
let chartLitecoinCon = jQuery('.js-chartjs-litecoin');
|
||||
|
||||
// Helper Classes
|
||||
let chartBitcoin, chartEthereum, chartLitecoin;
|
||||
|
||||
// Set up labels
|
||||
let chartCryptolabels = [];
|
||||
for (i = 0; i < 30; i++) {
|
||||
chartCryptolabels[i] = (i === 29) ? '1 day ago' : (30 - i) + ' days ago';
|
||||
}
|
||||
|
||||
// Cryto Data
|
||||
let chartBitcoinData = [10500, 10400, 9500, 8268, 10218, 8250, 8707, 9284, 9718, 9950, 9879, 10147, 10883, 11071, 11332, 11584, 11878, 13540, 16501, 16007, 15142, 14869, 16762, 17276, 16808, 16678, 16771, 12900, 13100, 14000];
|
||||
let chartEthereumData = [500, 525, 584, 485, 470, 320, 380, 580, 620, 785, 795, 801, 799, 750, 900, 920, 930, 1300, 1250, 1150, 1365, 1258, 980, 870, 860, 925, 999, 1050, 1090, 1100];
|
||||
let chartLitecoinData = [300, 320, 330, 331, 335, 340, 358, 310, 220, 180, 190, 195, 203, 187, 198, 258, 270, 340, 356, 309, 218, 230, 242, 243, 250, 210, 205, 226, 214, 250];
|
||||
|
||||
// Init Bitcoin Chart on Tab Shown
|
||||
jQuery('a[href="#crypto-coins-btc"]', 'ul#crypto-tabs').on('shown.bs.tab', e => {
|
||||
// if already exists destroy it
|
||||
if (chartBitcoin) {
|
||||
chartBitcoin.destroy();
|
||||
}
|
||||
|
||||
// Init Chart
|
||||
chartBitcoin = new Chart(chartBitcoinCon, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartCryptolabels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Bitcoin Price',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255,193,7,.25)',
|
||||
borderColor: 'rgba(255,193,7,1)',
|
||||
pointBackgroundColor: 'rgba(255,193,7,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,193,7,1)',
|
||||
data: chartBitcoinData
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMin: 6000,
|
||||
suggestedMax: 20000
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return ' $' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Init Ethereum Chart on Tab Shown
|
||||
jQuery('a[href="#crypto-coins-eth"]', 'ul#crypto-tabs').on('shown.bs.tab', e => {
|
||||
// if already exists destroy it
|
||||
if (chartEthereum) {
|
||||
chartEthereum.destroy();
|
||||
}
|
||||
|
||||
// Init Chart
|
||||
chartEthereum = new Chart(chartEthereumCon, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartCryptolabels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Ethereum Price',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(111,124,186, .25)',
|
||||
borderColor: 'rgba(111,124,186, 1)',
|
||||
pointBackgroundColor: 'rgba(111,124,186, 1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(111,124,186, 1)',
|
||||
data: chartEthereumData
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 1500
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return ' $' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Init Litecoin Chart on Tab Shown
|
||||
jQuery('a[href="#crypto-coins-ltc"]', 'ul#crypto-tabs').on('shown.bs.tab', e => {
|
||||
// if already exists destroy it
|
||||
if (chartLitecoin) {
|
||||
chartLitecoin.destroy();
|
||||
}
|
||||
|
||||
// Init Chart
|
||||
chartLitecoin = new Chart(chartLitecoinCon, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartCryptolabels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Litecoin Price',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(181,181,181,.25)',
|
||||
borderColor: 'rgba(181,181,181,1)',
|
||||
pointBackgroundColor: 'rgba(181,181,181,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(181,181,181,1)',
|
||||
data: chartLitecoinData
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 400
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return ' $' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Shown Bitcoin Tab which will trigger the first init of the chart
|
||||
jQuery('a[href="#crypto-coins-btc"]', 'ul#crypto-tabs').tab('show');
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initChartsCrypto();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BePagesCryptoDashboard.init(); });
|
||||
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* Document : be_pages_dashboard.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Dashboard Page
|
||||
*/
|
||||
|
||||
class BePagesDashboard {
|
||||
/*
|
||||
* Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
*
|
||||
*/
|
||||
static initDashboardChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#555555';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartDashboardLinesCon = jQuery('.js-chartjs-dashboard-lines');
|
||||
let chartDashboardLinesCon2 = jQuery('.js-chartjs-dashboard-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartDashboardLines, chartDashboardLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartDashboardLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(66,165,245,.45)',
|
||||
borderColor: 'rgba(66,165,245,1)',
|
||||
pointBackgroundColor: 'rgba(66,165,245,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(66,165,245,1)',
|
||||
data: [25, 21, 23, 38, 36, 35, 39]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartDashboardLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartDashboardLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(156,204,101,.45)',
|
||||
borderColor: 'rgba(156,204,101,1)',
|
||||
pointBackgroundColor: 'rgba(156,204,101,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(156,204,101,1)',
|
||||
data: [190, 219, 235, 320, 360, 354, 390]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartDashboardLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 480
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartDashboardLinesCon.length) {
|
||||
chartDashboardLines = new Chart(chartDashboardLinesCon, { type: 'line', data: chartDashboardLinesData, options: chartDashboardLinesOptions });
|
||||
}
|
||||
|
||||
if (chartDashboardLinesCon2.length) {
|
||||
chartDashboardLines2 = new Chart(chartDashboardLinesCon2, { type: 'line', data: chartDashboardLinesData2, options: chartDashboardLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Onboarding modal
|
||||
*
|
||||
*/
|
||||
static initOnboardingModal() {
|
||||
// Show Onboarding Modal by default
|
||||
jQuery('#modal-onboarding').modal('show');
|
||||
|
||||
// Re-init Slick Slider every time the modal is shown
|
||||
jQuery('#modal-onboarding').on('shown.bs.modal', e => {
|
||||
// Remove enabled class added by the helper to prevent re-init
|
||||
jQuery('js-slider', '#modal-onboarding').removeClass('js-slider-enabled');
|
||||
|
||||
// Re-init Slick Slider
|
||||
Codebase.helpers('slick');
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initDashboardChartJS();
|
||||
this.initOnboardingModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BePagesDashboard.init(); });
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* Document : be_pages_ecom_dashboard.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in e-Commerce Dashboard Page
|
||||
*/
|
||||
|
||||
class BePagesEcomDashboard {
|
||||
/*
|
||||
* Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
*
|
||||
*/
|
||||
static initEcomChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#555555';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.scale.ticks.suggestedMax = 4300;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartEcomEarningsCon = jQuery('.js-chartjs-ecom-dashboard-earnings');
|
||||
let chartEcomOrdersCon = jQuery('.js-chartjs-ecom-dashboard-orders');
|
||||
|
||||
// Charts Variables
|
||||
let chartEcomOrders, chartEcomEarnings;
|
||||
|
||||
// Charts Data
|
||||
let chartEcomEarningsData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Earnings',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(188,38,211,.25)',
|
||||
borderColor: 'rgba(188,38,211,1)',
|
||||
pointBackgroundColor: 'rgba(188,38,211,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(188,38,211,1)',
|
||||
data: [1780, 2440, 3252, 2109, 1892, 3890, 1820]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartEcomOrdersData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Orders',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(112,178,156,.25)',
|
||||
borderColor: 'rgba(112,178,156,1)',
|
||||
pointBackgroundColor: 'rgba(112,178,156,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(112,178,156,1)',
|
||||
data: [20, 27, 40, 19, 23, 38, 16]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartEcomEarningsCon.length) {
|
||||
chartEcomEarnings = new Chart(chartEcomEarningsCon, {type: 'line', data: chartEcomEarningsData, options: {
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return data.datasets[tooltipItems.datasetIndex].label +': $' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}});
|
||||
}
|
||||
|
||||
if (chartEcomOrdersCon.length) {
|
||||
Chart.defaults.scale.ticks.suggestedMax = 60;
|
||||
|
||||
chartEcomOrders = new Chart(chartEcomOrdersCon, {type: 'line', data: chartEcomOrdersData});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initEcomChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BePagesEcomDashboard.init(); });
|
||||
@@ -0,0 +1,82 @@
|
||||
/*
|
||||
* Document : be_pages_generic_contact.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Contact Page
|
||||
*/
|
||||
|
||||
class page {
|
||||
/*
|
||||
* Init Contact Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
*
|
||||
*/
|
||||
static initValidationContact() {
|
||||
jQuery('.js-validation-be-contact').validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).after(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).prev().removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'be-contact-name': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
'be-contact-email': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'be-contact-subject': {
|
||||
required: true
|
||||
},
|
||||
'be-contact-message': {
|
||||
required: true,
|
||||
minlength: 2
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'be-contact-name': 'Please provide at least your first name',
|
||||
'be-contact-email': 'Please enter your valid email address to be able to reach you back',
|
||||
'be-contact-subject': 'Please select where woul you like to send your message',
|
||||
'be-contact-message': 'What would you like to say?'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init Contact Map, for more examples you can check out https://hpneo.github.io/gmaps/
|
||||
*
|
||||
*/
|
||||
static initMapContact() {
|
||||
if (jQuery('#js-map-be-contact').length) {
|
||||
new GMaps({
|
||||
div: '#js-map-be-contact',
|
||||
lat: 37.840,
|
||||
lng: -122.500,
|
||||
zoom: 13,
|
||||
disableDefaultUI: true,
|
||||
scrollwheel: false
|
||||
}).addMarkers([
|
||||
{lat: 37.840, lng: -122.500, title: 'Marker #1', animation: google.maps.Animation.DROP, infoWindow: {content: 'Company LTD'}}
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationContact();
|
||||
this.initMapContact();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { page.init(); });
|
||||
@@ -0,0 +1,180 @@
|
||||
/*
|
||||
* Document : be_pages_generic_scrumboard.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Scrum Board Page
|
||||
*/
|
||||
|
||||
// Helper variables
|
||||
let scrumBoard, itemList, itemInput, itemInputVal, cardInput, cardInputVal;
|
||||
|
||||
class BeScrumBoard {
|
||||
/*
|
||||
* Description
|
||||
*
|
||||
*/
|
||||
static initScrumBoard() {
|
||||
scrumBoard = jQuery('.js-scrumboard');
|
||||
|
||||
// Make the main container a flex container
|
||||
jQuery('#main-container').addClass('d-flex align-items-stretch');
|
||||
|
||||
// Fade in the main scrumboard content
|
||||
scrumBoard.fadeTo(1000, 1);
|
||||
}
|
||||
|
||||
/*
|
||||
* Description
|
||||
*
|
||||
*/
|
||||
static cardAdd() {
|
||||
scrumBoard.on('submit.cb.sb.card.add', 'form[data-toggle="sb-card-add"]', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get input value
|
||||
cardInput = jQuery(e.currentTarget).find('input');
|
||||
cardInputVal = cardInput.prop('value');
|
||||
|
||||
// Check if the user entered something
|
||||
if (cardInputVal) {
|
||||
// Add Card
|
||||
cardInput.parents('.scrumboard-col').before(
|
||||
'<div class="scrumboard-col block block-themed">' +
|
||||
'<div class="block-header bg-primary">' +
|
||||
'<h3 class="block-title font-w600">' +
|
||||
jQuery('<span />').text(cardInputVal).html() +
|
||||
'</h3>' +
|
||||
'<div class="block-options">' +
|
||||
'<div class="dropdown">' +
|
||||
'<button type="button" class="btn-block-option" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
|
||||
'<i class="fa fa-fw fa-ellipsis-v"></i>' +
|
||||
'</button>' +
|
||||
'<div class="dropdown-menu dropdown-menu-right">' +
|
||||
'<a class="dropdown-item" href="javascript:void(0)">' +
|
||||
'<i class="fa fa-fw fa-pencil mr-5"></i>Edit' +
|
||||
'</a>' +
|
||||
'<div class="dropdown-divider"></div>' +
|
||||
'<a class="dropdown-item" href="javascript:void(0)" data-toggle="block-option" data-action="close">' +
|
||||
'<i class="fa fa-fw fa-times text-danger mr-5"></i>Delete' +
|
||||
'</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="block-content block-content-full bg-body-light">' +
|
||||
'<form class="w-100" method="post" data-toggle="sb-item-add">' +
|
||||
'<div class="input-group">' +
|
||||
'<div class="input-group-prepend">' +
|
||||
'<span class="input-group-text">' +
|
||||
'<i class="fa fa-lightbulb-o"></i>' +
|
||||
'</span>' +
|
||||
'</div>' +
|
||||
'<input type="text" class="form-control" placeholder="New Idea..">' +
|
||||
'</div>' +
|
||||
'</form>' +
|
||||
'</div>' +
|
||||
'<div class="scrumboard-items block-content"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Clear and focus input field
|
||||
cardInput.prop('value', '');
|
||||
|
||||
// Refresh sortable
|
||||
this.initDraggableItems('refresh');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Description
|
||||
*
|
||||
*/
|
||||
static itemAdd() {
|
||||
scrumBoard.on('submit.cb.sb.item.add', 'form[data-toggle="sb-item-add"]', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get input value
|
||||
itemList = jQuery(e.currentTarget).parents('.scrumboard-col').find('.scrumboard-items');
|
||||
itemInput = jQuery(e.currentTarget).find('input');
|
||||
itemInputVal = itemInput.prop('value');
|
||||
|
||||
// Check if the user entered something
|
||||
if (itemInputVal) {
|
||||
// Add Item
|
||||
itemList.prepend(
|
||||
'<div class="scrumboard-item">' +
|
||||
'<div class="scrumboard-item-options">' +
|
||||
'<a class="scrumboard-item-handler btn btn-sm btn-alt-warning" href="javascript:void(0)">' +
|
||||
'<i class="fa fa-hand-grab-o"></i>' +
|
||||
'</a> ' +
|
||||
'<button class="btn btn-sm btn-alt-warning" data-toggle="sb-item-remove">' +
|
||||
'<i class="fa fa-close"></i>' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<div class="scrumboard-item-content">' +
|
||||
jQuery('<span />').text(itemInputVal).html() +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Clear and focus input field
|
||||
itemInput.prop('value', '').focus();
|
||||
|
||||
// Refresh sortable
|
||||
this.initDraggableItems('refresh');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Description
|
||||
*
|
||||
*/
|
||||
static itemRemove() {
|
||||
scrumBoard.on('click.cb.sb.item.remove', 'button[data-toggle="sb-item-remove"]', e => {
|
||||
jQuery(e.currentTarget).parents('.scrumboard-item').remove();
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Description
|
||||
*
|
||||
*/
|
||||
static initDraggableItems(mode) {
|
||||
if (mode === 'refresh') {
|
||||
jQuery('.scrumboard-items.js-draggable-enabled').sortable('destroy');
|
||||
this.initDraggableItems();
|
||||
} else {
|
||||
jQuery('.scrumboard-items').addClass('js-draggable-enabled').sortable({
|
||||
connectWith: '.scrumboard-items',
|
||||
items: '.scrumboard-item',
|
||||
dropOnEmpty: true,
|
||||
opacity: .75,
|
||||
handle: '.scrumboard-item-handler',
|
||||
placeholder: 'scrumboard-item-placeholder',
|
||||
tolerance: 'pointer',
|
||||
start: (e, ui) => {
|
||||
ui.placeholder.css({
|
||||
height: ui.item.outerHeight(),
|
||||
'margin-bottom': ui.item.css('margin-bottom')
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initScrumBoard();
|
||||
this.cardAdd();
|
||||
this.itemAdd();
|
||||
this.itemRemove();
|
||||
this.initDraggableItems();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeScrumBoard.init(); });
|
||||
@@ -0,0 +1,274 @@
|
||||
/*
|
||||
* Document : be_pages_generic_todo.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Todo Page
|
||||
*/
|
||||
|
||||
// Helper variables
|
||||
let taskIdNext, tasks, taskForm, taskInput, taskInputVal,
|
||||
taskList, taskListStarred, taskListCompleted,
|
||||
taskBadge, taskBadgeStarred, taskBadgeCompleted;
|
||||
|
||||
class BeTasks {
|
||||
/*
|
||||
* Set variables and default functionality
|
||||
*
|
||||
*/
|
||||
static initTasks() {
|
||||
let self = this;
|
||||
|
||||
tasks = jQuery('.js-tasks');
|
||||
taskForm = jQuery('#js-task-form');
|
||||
taskInput = jQuery('#js-task-input');
|
||||
|
||||
taskList = jQuery('.js-task-list');
|
||||
taskListStarred = jQuery('.js-task-list-starred');
|
||||
taskListCompleted = jQuery('.js-task-list-completed');
|
||||
|
||||
taskBadge = jQuery('.js-task-badge');
|
||||
taskBadgeStarred = jQuery('.js-task-badge-starred');
|
||||
taskBadgeCompleted = jQuery('.js-task-badge-completed');
|
||||
|
||||
// Set your own next new task id based on your database setup
|
||||
taskIdNext = 10;
|
||||
|
||||
// Update badges
|
||||
self.badgesUpdate();
|
||||
|
||||
// New task form submission
|
||||
taskForm.on('submit', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get input value
|
||||
taskInputVal = taskInput.prop('value');
|
||||
|
||||
// Check if the user entered something
|
||||
if (taskInputVal) {
|
||||
// Add Task
|
||||
self.taskAdd(taskInputVal);
|
||||
|
||||
// Clear and focus input field
|
||||
taskInput.prop('value', '').focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Task status update on checkbox click
|
||||
let stask, staskId;
|
||||
|
||||
tasks.on('click', '.js-task-status', e => {
|
||||
e.preventDefault();
|
||||
|
||||
stask = jQuery(e.currentTarget).closest('.js-task');
|
||||
staskId = stask.attr('data-task-id');
|
||||
|
||||
// Check task status and toggle it
|
||||
if (stask.attr('data-task-completed') === 'true') {
|
||||
self.taskSetActive( staskId );
|
||||
} else {
|
||||
self.taskSetCompleted( staskId );
|
||||
}
|
||||
});
|
||||
|
||||
// Task starred status update on star click
|
||||
let ftask, ftaskId;
|
||||
|
||||
tasks.on('click', '.js-task-star', e => {
|
||||
ftask = jQuery(e.currentTarget).closest('.js-task');
|
||||
ftaskId = ftask.attr('data-task-id');
|
||||
|
||||
// Check task starred status and toggle it
|
||||
if (ftask.attr('data-task-starred') === 'true') {
|
||||
self.taskStarRemove( ftaskId );
|
||||
} else {
|
||||
self.taskStarAdd( ftaskId );
|
||||
}
|
||||
});
|
||||
|
||||
// Remove task on remove button click
|
||||
tasks.on('click', '.js-task-remove', e => {
|
||||
ftask = jQuery(e.currentTarget).closest('.js-task');
|
||||
ftaskId = ftask.attr('data-task-id');
|
||||
|
||||
// Remove task
|
||||
self.taskRemove( ftaskId );
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Update badges
|
||||
*
|
||||
*/
|
||||
static badgesUpdate() {
|
||||
taskBadge.text( taskList.children().length || '' );
|
||||
taskBadgeStarred.text( taskListStarred.children().length || '' );
|
||||
taskBadgeCompleted.text( taskListCompleted.children().length || '' );
|
||||
}
|
||||
|
||||
/*
|
||||
* Add a task
|
||||
*
|
||||
*/
|
||||
static taskAdd(taskContent) {
|
||||
// Add it to the task list
|
||||
taskList.prepend(
|
||||
'<div class="js-task block block-rounded mb-5 animated fadeIn" data-task-id="' +
|
||||
taskIdNext +
|
||||
'" data-task-completed="false" data-task-starred="false">' +
|
||||
'<table class="table table-borderless table-vcenter mb-0">' +
|
||||
'<tr>' +
|
||||
'<td class="text-center" style="width: 50px;">' +
|
||||
'<label class="js-task-status css-control css-control-primary css-checkbox py-0">' +
|
||||
'<input type="checkbox" class="css-control-input">' +
|
||||
'<span class="css-control-indicator"></span>' +
|
||||
'</label>' +
|
||||
'</td>' +
|
||||
'<td class="js-task-content font-w600">' +
|
||||
jQuery('<span />').text(taskContent).html() +
|
||||
'</td>' +
|
||||
'<td class="text-right" style="width: 100px;">' +
|
||||
'<button class="js-task-star btn btn-sm btn-alt-warning" type="button">' +
|
||||
'<i class="fa fa-star-o"></i>' +
|
||||
'</button> ' +
|
||||
'<button class="js-task-remove btn btn-sm btn-alt-danger" type="button">' +
|
||||
'<i class="fa fa-times"></i>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Save the task based on your database setup
|
||||
// ..
|
||||
|
||||
// Update task next id
|
||||
taskIdNext++;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove a task
|
||||
*
|
||||
*/
|
||||
static taskRemove(taskId) {
|
||||
jQuery('.js-task[data-task-id="' + taskId + '"]').remove();
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Remove the task based on your database setup
|
||||
// ..
|
||||
}
|
||||
|
||||
/*
|
||||
* Star a task
|
||||
*
|
||||
*/
|
||||
static taskStarAdd(taskId) {
|
||||
let task = jQuery('.js-task[data-task-id="' + taskId + '"]');
|
||||
|
||||
// Check if exists and update accordignly the markup
|
||||
if (task.length > 0) {
|
||||
task.attr('data-task-starred', true);
|
||||
task.find('.js-task-star > i').toggleClass('fa-star fa-star-o');
|
||||
|
||||
if (task.attr('data-task-completed') === 'false') {
|
||||
task.prependTo(taskListStarred);
|
||||
}
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Star the task based on your database setup
|
||||
// ..
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Unstar a task
|
||||
*
|
||||
*/
|
||||
static taskStarRemove(taskId) {
|
||||
let task = jQuery('.js-task[data-task-id="' + taskId + '"]');
|
||||
|
||||
// Check if exists and update accordignly the markup
|
||||
if (task.length > 0) {
|
||||
task.attr('data-task-starred', false);
|
||||
task.find('.js-task-star > i').toggleClass('fa-star fa-star-o');
|
||||
|
||||
if (task.attr('data-task-completed') === 'false') {
|
||||
task.prependTo(taskList);
|
||||
}
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Unstar the task based on your database setup
|
||||
// ..
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Set a task to active
|
||||
*
|
||||
*/
|
||||
static taskSetActive(taskId) {
|
||||
let task = jQuery('.js-task[data-task-id="' + taskId + '"]');
|
||||
|
||||
// Check if exists and update accordignly
|
||||
if (task.length > 0) {
|
||||
task.attr('data-task-completed', false);
|
||||
task.find('.table').toggleClass('bg-body-light');
|
||||
task.find('.js-task-status > input').prop('checked', false);
|
||||
task.find('.js-task-content > del').contents().unwrap();
|
||||
|
||||
if (task.attr('data-task-starred') === 'true') {
|
||||
task.prependTo(taskListStarred);
|
||||
} else {
|
||||
task.prependTo(taskList);
|
||||
}
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Update task status based on your database setup
|
||||
// ..
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Set a task to completed
|
||||
*
|
||||
*/
|
||||
static taskSetCompleted(taskId) {
|
||||
let task = jQuery('.js-task[data-task-id="' + taskId + '"]');
|
||||
|
||||
// Check if exists and update accordignly
|
||||
if (task.length > 0) {
|
||||
task.attr('data-task-completed', true);
|
||||
task.find('.table').toggleClass('bg-body-light');
|
||||
task.find('.js-task-status > input').prop('checked', true);
|
||||
task.find('.js-task-content').wrapInner('<del></del>');
|
||||
task.prependTo(taskListCompleted);
|
||||
|
||||
// Update badges
|
||||
this.badgesUpdate();
|
||||
|
||||
// Update task status based on your database setup
|
||||
// ..
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initTasks();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeTasks.init(); });
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
* Document : be_tables_datatables.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Tables Datatables Page
|
||||
*/
|
||||
|
||||
// DataTables, for more examples you can check out https://www.datatables.net/
|
||||
class BeTableDatatables {
|
||||
/*
|
||||
* Override a few DataTable defaults
|
||||
*
|
||||
*/
|
||||
static exDataTable() {
|
||||
jQuery.extend( jQuery.fn.dataTable.ext.classes, {
|
||||
sWrapper: "dataTables_wrapper dt-bootstrap4"
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init full DataTable
|
||||
*
|
||||
*/
|
||||
static initDataTableFull() {
|
||||
jQuery('.js-dataTable-full').dataTable({
|
||||
columnDefs: [ { orderable: false, targets: [ 4 ] } ],
|
||||
pageLength: 8,
|
||||
lengthMenu: [[5, 8, 15, 20], [5, 8, 15, 20]],
|
||||
autoWidth: false
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init full extra DataTable
|
||||
*
|
||||
*/
|
||||
static initDataTableFullPagination() {
|
||||
jQuery('.js-dataTable-full-pagination').dataTable({
|
||||
pagingType: "full_numbers",
|
||||
columnDefs: [ { orderable: false, targets: [ 4 ] } ],
|
||||
pageLength: 8,
|
||||
lengthMenu: [[5, 8, 15, 20], [5, 8, 15, 20]],
|
||||
autoWidth: false
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init simple DataTable
|
||||
*
|
||||
*/
|
||||
static initDataTableSimple() {
|
||||
jQuery('.js-dataTable-simple').dataTable({
|
||||
columnDefs: [ { orderable: false, targets: [ 4 ] } ],
|
||||
pageLength: 8,
|
||||
lengthMenu: [[5, 8, 15, 20], [5, 8, 15, 20]],
|
||||
autoWidth: false,
|
||||
searching: false,
|
||||
oLanguage: {
|
||||
sLengthMenu: ""
|
||||
},
|
||||
dom: "<'row'<'col-sm-12'tr>>" +
|
||||
"<'row'<'col-sm-6'i><'col-sm-6'p>>"
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.exDataTable();
|
||||
this.initDataTableSimple();
|
||||
this.initDataTableFull();
|
||||
this.initDataTableFullPagination();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeTableDatatables.init(); });
|
||||
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
* Document : be_ui_activity.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Activity Page
|
||||
*/
|
||||
|
||||
class BeUIActivity {
|
||||
/*
|
||||
* Randomize progress bars values
|
||||
*
|
||||
*/
|
||||
static barsRandomize() {
|
||||
jQuery('.js-bar-randomize').on('click', e => {
|
||||
jQuery(e.currentTarget)
|
||||
.parents('.block')
|
||||
.find('.progress-bar')
|
||||
.each((index, element) => {
|
||||
let el = jQuery(element);
|
||||
let random = Math.floor((Math.random() * 91) + 10);
|
||||
|
||||
// Update progress width
|
||||
el.css('width', random + '%');
|
||||
|
||||
// Update progress label
|
||||
jQuery('.progress-bar-label', el).html(random + '%');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* SweetAlert2, for more examples you can check out https://github.com/limonte/sweetalert2
|
||||
*
|
||||
*/
|
||||
static sweetAlert2() {
|
||||
// Set default properties
|
||||
let toast = swal.mixin({
|
||||
buttonsStyling: false,
|
||||
confirmButtonClass: 'btn btn-lg btn-alt-success m-5',
|
||||
cancelButtonClass: 'btn btn-lg btn-alt-danger m-5',
|
||||
inputClass: 'form-control'
|
||||
});
|
||||
|
||||
// Init a simple alert on button click
|
||||
jQuery('.js-swal-alert').on('click', e => {
|
||||
toast('Hi, this is a simple alert!');
|
||||
});
|
||||
|
||||
// Init an success alert on button click
|
||||
jQuery('.js-swal-success').on('click', e => {
|
||||
toast('Success', 'Everything updated perfectly!', 'success');
|
||||
});
|
||||
|
||||
// Init an info alert on button click
|
||||
jQuery('.js-swal-info').on('click', e => {
|
||||
toast('Info', 'Just an informational modal!', 'info');
|
||||
});
|
||||
|
||||
// Init an warning alert on button click
|
||||
jQuery('.js-swal-warning').on('click', e => {
|
||||
toast('Warning', 'Something needs your attention!', 'warning');
|
||||
});
|
||||
|
||||
// Init an error alert on button click
|
||||
jQuery('.js-swal-error').on('click', e => {
|
||||
toast('Oops...', 'Something went wrong!', 'error');
|
||||
});
|
||||
|
||||
// Init an question alert on button click
|
||||
jQuery('.js-swal-question').on('click', e => {
|
||||
toast('Question', 'Are you sure?', 'question');
|
||||
});
|
||||
|
||||
// Init an example confirm alert on button click
|
||||
jQuery('.js-swal-confirm').on('click', e => {
|
||||
toast({
|
||||
title: 'Are you sure?',
|
||||
text: 'You will not be able to recover this imaginary file!',
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#d26a5c',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
html: false,
|
||||
preConfirm: e => {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
}).then(result => {
|
||||
if (result.value) {
|
||||
toast('Deleted!', 'Your imaginary file has been deleted.', 'success');
|
||||
// result.dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
toast('Cancelled', 'Your imaginary file is safe :)', 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.barsRandomize();
|
||||
this.sweetAlert2();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeUIActivity.init(); });
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
* Document : be_ui_animations.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Animations Page
|
||||
*/
|
||||
|
||||
class BeUIAnimations {
|
||||
/*
|
||||
* Animation toggle functionality
|
||||
*
|
||||
*/
|
||||
static animationsToggle() {
|
||||
let animationClass, animationButton, currentSection;
|
||||
|
||||
// On button click
|
||||
jQuery('.js-animation-section button').on('click', e => {
|
||||
animationButton = jQuery(e.currentTarget);
|
||||
animationClass = animationButton.data('animation-class');
|
||||
currentSection = animationButton.parents('.js-animation-section');
|
||||
|
||||
// Update class preview
|
||||
jQuery('.js-animation-preview', currentSection).html(animationClass);
|
||||
|
||||
// Update animation object classes
|
||||
jQuery('.js-animation-object', currentSection)
|
||||
.removeClass()
|
||||
.addClass('js-animation-object animated ' + animationClass);
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.animationsToggle();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeUIAnimations.init(); });
|
||||
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* Document : be_ui_icons.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Icons Page
|
||||
*/
|
||||
|
||||
class BeUIIcons {
|
||||
/*
|
||||
* Icon Search functionality
|
||||
*
|
||||
*/
|
||||
static iconSearch() {
|
||||
let searchItems = jQuery('.js-icon-list > div');
|
||||
let searchValue = '', el;
|
||||
|
||||
// Disable form submission
|
||||
jQuery('.js-form-icon-search').on('submit', () => false);
|
||||
|
||||
// When user types
|
||||
jQuery('.js-icon-search').on('keyup', (e) => {
|
||||
searchValue = jQuery(e.currentTarget).val().toLowerCase();
|
||||
|
||||
if (searchValue.length > 2) { // If ore than 2 characters, search the icons
|
||||
searchItems.hide();
|
||||
|
||||
jQuery('code', searchItems).each((index, element) => {
|
||||
el = jQuery(element);
|
||||
|
||||
if (el.text().match(searchValue)) {
|
||||
el.parent('div').fadeIn(250);
|
||||
}
|
||||
});
|
||||
} else if (searchValue.length === 0) { // If text was deleted, show all icons
|
||||
searchItems.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.iconSearch();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { BeUIIcons.init(); });
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Document : db_classic.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Classic Dashboard Page
|
||||
*/
|
||||
|
||||
// Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
class DbClassic {
|
||||
/*
|
||||
* Init Charts
|
||||
*
|
||||
*/
|
||||
static initClassicChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#7c7c7c';
|
||||
Chart.defaults.scale.gridLines.color = "#f5f5f5";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "#f5f5f5";
|
||||
Chart.defaults.scale.display = true;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartClassicLinesCon = jQuery('.js-chartjs-classic-lines');
|
||||
let chartClassicLinesCon2 = jQuery('.js-chartjs-classic-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartClassicLines, chartClassicLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartClassicLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(114,102,186,.15)',
|
||||
borderColor: 'rgba(114,102,186,.5)',
|
||||
pointBackgroundColor: 'rgba(114,102,186,.5)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(114,102,186,.5)',
|
||||
data: [39, 27, 23, 34, 42, 46, 31]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartClassicLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartClassicLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(247,93,129,.15)',
|
||||
borderColor: 'rgba(247,93,129,.5)',
|
||||
pointBackgroundColor: 'rgba(247,93,129,.5)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(247,93,129,.5)',
|
||||
data: [325, 290, 209, 290, 410, 384, 425]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartClassicLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 480
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartClassicLinesCon.length) {
|
||||
chartClassicLines = new Chart(chartClassicLinesCon, { type: 'line', data: chartClassicLinesData, options: chartClassicLinesOptions });
|
||||
}
|
||||
|
||||
if (chartClassicLinesCon2.length) {
|
||||
chartClassicLines2 = new Chart(chartClassicLinesCon2, { type: 'line', data: chartClassicLinesData2, options: chartClassicLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initClassicChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { DbClassic.init(); });
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Document : db_corporate.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Corporate Dashboard Page
|
||||
*/
|
||||
|
||||
// Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
class DbCorporate {
|
||||
/*
|
||||
* Init Charts
|
||||
*
|
||||
*/
|
||||
static initCorporateChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#7c7c7c';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 5;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 7;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartCorporateLinesCon = jQuery('.js-chartjs-corporate-lines');
|
||||
let chartCorporateLinesCon2 = jQuery('.js-chartjs-corporate-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartCorporateLines, chartCorporateLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartCorporateLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(38,198,218,.1)',
|
||||
borderColor: 'rgba(38,198,218,.5)',
|
||||
pointBackgroundColor: 'rgba(38,198,218,.5)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(38,198,218,.5)',
|
||||
data: [39, 27, 23, 34, 42, 46, 31]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartCorporateLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartCorporateLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(156,204,101,.1)',
|
||||
borderColor: 'rgba(156,204,101,.5)',
|
||||
pointBackgroundColor: 'rgba(156,204,101,.5)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(156,204,101,.5)',
|
||||
data: [325, 290, 209, 290, 410, 384, 425]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartCorporateLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 480
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartCorporateLinesCon.length) {
|
||||
chartCorporateLines = new Chart(chartCorporateLinesCon, { type: 'line', data: chartCorporateLinesData, options: chartCorporateLinesOptions });
|
||||
}
|
||||
|
||||
if (chartCorporateLinesCon2.length) {
|
||||
chartCorporateLines2 = new Chart(chartCorporateLinesCon2, { type: 'line', data: chartCorporateLinesData2, options: chartCorporateLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initCorporateChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { DbCorporate.init(); });
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Document : db_dark.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Dark Dashboard Page
|
||||
*/
|
||||
|
||||
// Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
class DbDark {
|
||||
/*
|
||||
* Init Charts
|
||||
*
|
||||
*/
|
||||
static initDarkChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#ccc';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 3;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 5;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartDarkLinesCon = jQuery('.js-chartjs-dark-lines');
|
||||
let chartDarkLinesCon2 = jQuery('.js-chartjs-dark-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartDarkLines, chartDarkLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartDarkLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.4)',
|
||||
pointBackgroundColor: 'rgba(255,255,255,.4)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,255,255,.4)',
|
||||
data: [39, 15, 25, 32, 38, 10, 45]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartDarkLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartDarkLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(255,255,255,.1)',
|
||||
borderColor: 'rgba(255,255,255,.4)',
|
||||
pointBackgroundColor: 'rgba(255,255,255,.4)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,255,255,.4)',
|
||||
data: [345, 190, 220, 290, 380, 230, 455]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartDarkLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 480
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartDarkLinesCon.length) {
|
||||
chartDarkLines = new Chart(chartDarkLinesCon, { type: 'line', data: chartDarkLinesData, options: chartDarkLinesOptions });
|
||||
}
|
||||
|
||||
if (chartDarkLinesCon2.length) {
|
||||
chartDarkLines2 = new Chart(chartDarkLinesCon2, { type: 'line', data: chartDarkLinesData2, options: chartDarkLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initDarkChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { DbDark.init(); });
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Document : db_minimal.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Minimal Dashboard Page
|
||||
*/
|
||||
|
||||
// Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
class DbMinimal {
|
||||
/*
|
||||
* Init Charts
|
||||
*
|
||||
*/
|
||||
static initMinimalChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#7c7c7c';
|
||||
Chart.defaults.scale.gridLines.color = "transparent";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
||||
Chart.defaults.scale.display = false;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 3;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 5;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 3;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartMinimalLinesCon = jQuery('.js-chartjs-minimal-lines');
|
||||
let chartMinimalLinesCon2 = jQuery('.js-chartjs-minimal-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartMinimalLines, chartMinimalLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartMinimalLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(92,85,75,.1)',
|
||||
borderColor: 'rgba(92,85,75,.4)',
|
||||
pointBackgroundColor: 'rgba(92,85,75,.4)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(92,85,75,.4)',
|
||||
data: [39, 15, 25, 32, 38, 10, 45]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartMinimalLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 50
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartMinimalLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(146,170,90,.1)',
|
||||
borderColor: 'rgba(146,170,90,.4)',
|
||||
pointBackgroundColor: 'rgba(146,170,90,.4)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(146,170,90,.4)',
|
||||
data: [345, 190, 220, 290, 380, 230, 455]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartMinimalLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 480
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartMinimalLinesCon.length) {
|
||||
chartMinimalLines = new Chart(chartMinimalLinesCon, { type: 'line', data: chartMinimalLinesData, options: chartMinimalLinesOptions });
|
||||
}
|
||||
|
||||
if (chartMinimalLinesCon2.length) {
|
||||
chartMinimalLines2 = new Chart(chartMinimalLinesCon2, { type: 'line', data: chartMinimalLinesData2, options: chartMinimalLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initMinimalChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { DbMinimal.init(); });
|
||||
@@ -0,0 +1,122 @@
|
||||
/*
|
||||
* Document : db_pop.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Pop Dashboard Page
|
||||
*/
|
||||
|
||||
// Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
||||
class DbPop {
|
||||
/*
|
||||
* Init Charts
|
||||
*
|
||||
*/
|
||||
static initPopChartJS() {
|
||||
// Set Global Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#7c7c7c';
|
||||
Chart.defaults.scale.gridLines.color = "#f1f1f1";
|
||||
Chart.defaults.scale.gridLines.zeroLineColor = "#f1f1f1";
|
||||
Chart.defaults.scale.display = true;
|
||||
Chart.defaults.scale.ticks.beginAtZero = true;
|
||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
||||
Chart.defaults.global.elements.point.radius = 6;
|
||||
Chart.defaults.global.elements.point.hoverRadius = 12;
|
||||
Chart.defaults.global.tooltips.cornerRadius = 2;
|
||||
Chart.defaults.global.legend.display = false;
|
||||
|
||||
// Chart Containers
|
||||
let chartPopLinesCon = jQuery('.js-chartjs-pop-lines');
|
||||
let chartPopLinesCon2 = jQuery('.js-chartjs-pop-lines2');
|
||||
|
||||
// Chart Variables
|
||||
let chartPopLines, chartPopLines2;
|
||||
|
||||
// Lines Charts Data
|
||||
let chartPopLinesData = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(56,56,56,.4)',
|
||||
borderColor: 'rgba(56,56,56,.9)',
|
||||
pointBackgroundColor: 'rgba(56,56,56,.9)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(56,56,56,.9)',
|
||||
data: [75, 88, 34, 49, 52, 89, 96]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartPopLinesOptions = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 100
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' ' + tooltipItems.yLabel + ' Sales';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let chartPopLinesData2 = {
|
||||
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'This Week',
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(230,76,60,.4)',
|
||||
borderColor: 'rgba(230,76,60,.9)',
|
||||
pointBackgroundColor: 'rgba(230,76,60,.9)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(230,76,60,.9)',
|
||||
data: [750, 880, 398, 420, 590, 630, 930]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartPopLinesOptions2 = {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
suggestedMax: 1000
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItems, data) => {
|
||||
return ' $ ' + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Init Charts
|
||||
if (chartPopLinesCon.length) {
|
||||
chartPopLines = new Chart(chartPopLinesCon, { type: 'line', data: chartPopLinesData, options: chartPopLinesOptions });
|
||||
}
|
||||
|
||||
if (chartPopLinesCon2.length) {
|
||||
chartPopLines2 = new Chart(chartPopLinesCon2, { type: 'line', data: chartPopLinesData2, options: chartPopLinesOptions2 });
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initPopChartJS();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { DbPop.init(); });
|
||||
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
* Document : op_auth_lock.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Lock Page
|
||||
*/
|
||||
|
||||
// Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
class OpAuthLock {
|
||||
/*
|
||||
* Init Lock Form Validation
|
||||
*
|
||||
*/
|
||||
static initValidationLock() {
|
||||
jQuery('.js-validation-lock').validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group > div').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'lock-password': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'lock-password': {
|
||||
required: 'Please enter your valid password'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationLock();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { OpAuthLock.init(); });
|
||||
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
* Document : op_auth_reminder.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Password Reminder Page
|
||||
*/
|
||||
|
||||
// Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
class OpAuthReminder {
|
||||
/*
|
||||
* Init Password Reminder Form Validation
|
||||
*
|
||||
*/
|
||||
static initValidationReminder() {
|
||||
jQuery('.js-validation-reminder').validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group > div').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'reminder-credential': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'reminder-credential': {
|
||||
required: 'Please enter a valid credential'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationReminder();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { OpAuthReminder.init(); });
|
||||
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* Document : op_auth_signin.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Sign In Page
|
||||
*/
|
||||
|
||||
// Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
class OpAuthSignIn {
|
||||
/*
|
||||
* Init Sign In Form Validation
|
||||
*
|
||||
*/
|
||||
static initValidationSignIn() {
|
||||
jQuery('.js-validation-signin').validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group > div').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'login-username': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
'login-password': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'login-username': {
|
||||
required: 'Please enter a username',
|
||||
minlength: 'Your username must consist of at least 3 characters'
|
||||
},
|
||||
'login-password': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationSignIn();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { OpAuthSignIn.init(); });
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
* Document : op_auth_signup.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Sign Up Page
|
||||
*/
|
||||
|
||||
// Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
|
||||
class OpAuthSignUp {
|
||||
/*
|
||||
* Init Sign Up Form Validation
|
||||
*
|
||||
*/
|
||||
static initValidationSignUp() {
|
||||
jQuery('.js-validation-signup').validate({
|
||||
errorClass: 'invalid-feedback animated fadeInDown',
|
||||
errorElement: 'div',
|
||||
errorPlacement: (error, e) => {
|
||||
jQuery(e).parents('.form-group > div').append(error);
|
||||
},
|
||||
highlight: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
|
||||
},
|
||||
success: e => {
|
||||
jQuery(e).closest('.form-group').removeClass('is-invalid');
|
||||
jQuery(e).remove();
|
||||
},
|
||||
rules: {
|
||||
'signup-username': {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
'signup-email': {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
'signup-password': {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
'signup-password-confirm': {
|
||||
required: true,
|
||||
equalTo: '#signup-password'
|
||||
},
|
||||
'signup-terms': {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
'signup-username': {
|
||||
required: 'Please enter a username',
|
||||
minlength: 'Your username must consist of at least 3 characters'
|
||||
},
|
||||
'signup-email': 'Please enter a valid email address',
|
||||
'signup-password': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long'
|
||||
},
|
||||
'signup-password-confirm': {
|
||||
required: 'Please provide a password',
|
||||
minlength: 'Your password must be at least 5 characters long',
|
||||
equalTo: 'Please enter the same password as above'
|
||||
},
|
||||
'signup-terms': 'You must agree to the service terms!'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initValidationSignUp();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { OpAuthSignUp.init(); });
|
||||
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
* Document : op_coming_soon.js
|
||||
* Author : pixelcave
|
||||
* Description: Custom JS code used in Coming Soon Page
|
||||
*/
|
||||
|
||||
// Countdown.js, for more examples you can check out https://github.com/hilios/jQuery.countdown
|
||||
class OpComingSoon {
|
||||
/*
|
||||
* Init Countdown
|
||||
*
|
||||
*/
|
||||
static initCounter() {
|
||||
jQuery('.js-countdown').countdown((new Date().getFullYear() + 1) + '/02/01', e => {
|
||||
jQuery(e.currentTarget).html(e.strftime('<div class="row items-push text-center">'
|
||||
+ '<div class="col-6 col-sm-3"><div class="font-size-h1 font-w700 text-white">%-D</div><div class="font-size-xs font-w700 text-white-op">DAYS</div></div>'
|
||||
+ '<div class="col-6 col-sm-3"><div class="font-size-h1 font-w700 text-white">%H</div><div class="font-size-xs font-w700 text-white-op">HOURS</div></div>'
|
||||
+ '<div class="col-6 col-sm-3"><div class="font-size-h1 font-w700 text-white">%M</div><div class="font-size-xs font-w700 text-white-op">MINUTES</div></div>'
|
||||
+ '<div class="col-6 col-sm-3"><div class="font-size-h1 font-w700 text-white">%S</div><div class="font-size-xs font-w700 text-white-op">SECONDS</div></div>'
|
||||
+ '</div>'
|
||||
));
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Init functionality
|
||||
*
|
||||
*/
|
||||
static init() {
|
||||
this.initCounter();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize when page loads
|
||||
jQuery(() => { OpComingSoon.init(); });
|
||||
Reference in New Issue
Block a user