angle-reactjs-seed

app/App.jsx

@@ -0,0 +1,69 @@
+/*!
+ *
+ * Angle - Bootstrap Admin App + ReactJS
+ *
+ * Version: 3.7
+ * Author: @themicon_co
+ * Website: http://themicon.co
+ * License: https://wrapbootstrap.com/help/licenses
+ *
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, Link, hashHistory, useRouterHistory, IndexRoute } from 'react-router';
+import { createHistory } from 'history';
+
+import initTranslation from './components/Common/localize';
+import initLoadThemes from './components/Common/load-themes';
+
+import Base from './components/Layout/Base';
+import BasePage from './components/Layout/BasePage';
+import BaseHorizontal from './components/Layout/BaseHorizontal';
+
+import SingleView from './components/SingleView/SingleView';
+import SubMenu from './components/SubMenu/SubMenu';
+
+// Application Styles
+import './styles/bootstrap.scss';
+import './styles/app.scss'
+
+
+// Init translation system
+initTranslation();
+// Init css loader (for themes)
+initLoadThemes();
+
+// Disable warning "Synchronous XMLHttpRequest on the main thread is deprecated.."
+$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
+    options.async = true;
+});
+
+// specify basename below if running in a subdirectory or set as "/" if app runs in root
+const appHistory = useRouterHistory(createHistory)({
+  basename: WP_BASE_HREF
+})
+
+ReactDOM.render(
+    <Router history={appHistory}>
+        <Route path="/" component={Base}>
+
+            {/* Default route*/}
+            <IndexRoute component={SingleView} />
+
+            <Route path="singleview" component={SingleView}/>
+            <Route path="submenu" component={SubMenu}/>
+
+        </Route>
+
+        {/* Not found handler */}
+        {/*<Route path="*" component={NotFound}/>*/}
+
+    </Router>,
+    document.getElementById('app')
+);
+
+// Auto close sidebar on route changes
+appHistory.listen(function(ev) {
+    $('body').removeClass('aside-toggled');
+});

app/Vendor.jsx

@@ -0,0 +1,20 @@
+// Modernizr
+import '../bower_components/modernizr/modernizr.custom.js';
+// jQuery
+import '../bower_components/jquery/dist/jquery.js';
+// jQuery-Storage-API
+import '../bower_components/jQuery-Storage-API/jquery.storageapi.js';
+// jquery.easing
+import '../bower_components/jquery.easing/js/jquery.easing.js';
+// Whirl
+import '../bower_components/whirl/dist/whirl.css';
+// Animo
+import '../bower_components/animo.js/animo.js';
+// Font Awesome
+import '../bower_components/fontawesome/css/font-awesome.min.css';
+// Animate.CSS
+import '../bower_components/animate.css/animate.min.css';
+// Simple line icons
+import '../bower_components/simple-line-icons/css/simple-line-icons.css';
+// Localization
+import '../bower_components/jquery-localize-i18n/dist/jquery.localize.js';

app/components/Common/constants.js

@@ -0,0 +1,28 @@
+// GLOBAL CONSTANTS
+// -----------------------------------
+
+export const APP_COLORS = {
+    'primary':                '#5d9cec',
+    'success':                '#27c24c',
+    'info':                   '#23b7e5',
+    'warning':                '#ff902b',
+    'danger':                 '#f05050',
+    'inverse':                '#131e26',
+    'green':                  '#37bc9b',
+    'pink':                   '#f532e5',
+    'purple':                 '#7266ba',
+    'dark':                   '#3a3f51',
+    'yellow':                 '#fad732',
+    'gray-darker':            '#232735',
+    'gray-dark':              '#3a3f51',
+    'gray':                   '#dde6e9',
+    'gray-light':             '#e4eaec',
+    'gray-lighter':           '#edf1f2'
+};
+
+export const APP_MEDIAQUERY = {
+    'desktopLG':             1200,
+    'desktop':                992,
+    'tablet':                 768,
+    'mobile':                 480
+};

app/components/Common/fullscreen.js

@@ -0,0 +1,53 @@
+// FULLSCREEN
+// -----------------------------------
+
+function initScreenfull() {
+
+    if (typeof screenfull === 'undefined') return;
+
+    var $doc = $(document);
+    var $fsToggler = $(this);
+
+    // Not supported under IE
+    var ua = window.navigator.userAgent;
+    if (ua.indexOf("MSIE ") > 0 || !!ua.match(/Trident.*rv\:11\./)) {
+        $fsToggler.addClass('hide');
+    }
+
+    if (!$fsToggler.is(':visible')) // hidden on mobiles or IE
+        return;
+
+    $fsToggler.on('click', function(e) {
+        e.preventDefault();
+
+        if (screenfull.enabled) {
+
+            screenfull.toggle();
+
+            // Switch icon indicator
+            toggleFSIcon($fsToggler);
+
+        } else {
+            console.log('Fullscreen not enabled');
+        }
+    });
+
+    if (screenfull.raw && screenfull.raw.fullscreenchange)
+        $doc.on(screenfull.raw.fullscreenchange, function() {
+            toggleFSIcon($fsToggler);
+        });
+
+    function toggleFSIcon($element) {
+        if (screenfull.isFullscreen)
+            $element.children('em').removeClass('fa-expand').addClass('fa-compress');
+        else
+            $element.children('em').removeClass('fa-compress').addClass('fa-expand');
+    }
+
+}
+
+export default () => {
+
+    $('[data-toggle-fullscreen]').each(initScreenfull);
+
+}

app/components/Common/load-themes.js

@@ -0,0 +1,68 @@
+// LOAD THEMES
+// -----------------------------------
+
+const themeA = require('!raw!sass!../../styles/themes/theme-a.scss');
+const themeB = require('!raw!sass!../../styles/themes/theme-b.scss');
+const themeC = require('!raw!sass!../../styles/themes/theme-c.scss');
+const themeD = require('!raw!sass!../../styles/themes/theme-d.scss');
+const themeE = require('!raw!sass!../../styles/themes/theme-e.scss');
+const themeF = require('!raw!sass!../../styles/themes/theme-f.scss');
+const themeG = require('!raw!sass!../../styles/themes/theme-g.scss');
+const themeH = require('!raw!sass!../../styles/themes/theme-h.scss');
+
+export default () => {
+
+    let styleTag;
+    let defaultTheme = 'A';
+
+    $(document).on('click', '[data-load-theme]', function(e) {
+        createStyle();
+        setTheme($(this).data('loadTheme'));
+    });
+
+    function setTheme(name) {
+        switch (name) {
+            case 'A':
+                injectStylesheet(themeA);
+                break;
+            case 'B':
+                injectStylesheet(themeB);
+                break;
+            case 'C':
+                injectStylesheet(themeC);
+                break;
+            case 'D':
+                injectStylesheet(themeD);
+                break;
+            case 'E':
+                injectStylesheet(themeE);
+                break;
+            case 'F':
+                injectStylesheet(themeF);
+                break;
+            case 'G':
+                injectStylesheet(themeG);
+                break;
+            case 'H':
+                injectStylesheet(themeH);
+                break;
+        }
+    }
+
+    function createStyle() {
+        // remove if exists
+        var el = document.getElementById('appthemes');
+        if (el) el.parentNode.removeChild(el);
+        // create
+        const head = document.head || document.getElementsByTagName('head')[0];
+        styleTag = document.createElement('style');
+        styleTag.type = 'text/css';
+        styleTag.id = 'appthemes';
+        head.appendChild(styleTag);
+    }
+
+    function injectStylesheet(css) {
+        styleTag.innerHTML = css;
+    }
+
+}

app/components/Common/localize.js

@@ -0,0 +1,58 @@
+// TRANSLATION
+// -----------------------------------
+
+const preferredLang = 'en';
+const pathPrefix    = 'server/i18n'; // folder of json files
+const packName      = 'site';
+const storageKey    = 'jq-appLang';
+
+export default () => {
+
+    if (!$.fn.localize) return;
+
+    // detect saved language or use default
+    var currLang = $.localStorage.get(storageKey) || preferredLang;
+    // set initial options
+    var opts = {
+        language: currLang,
+        pathPrefix: pathPrefix,
+        callback: function(data, defaultCallback) {
+            $.localStorage.set(storageKey, currLang); // save the language
+            defaultCallback(data);
+        }
+    };
+
+    // Set initial language
+    setLanguage(opts);
+
+    // Listen for changes
+    $(document).on('click', '[data-set-lang]', function() {
+
+        currLang = $(this).data('setLang');
+
+        if (currLang) {
+
+            opts.language = currLang;
+
+            setLanguage(opts);
+
+            activateDropdown($(this));
+        }
+
+    });
+
+
+    function setLanguage(options) {
+        $("[data-localize]").localize(packName, options);
+    }
+
+    // Set the current clicked text as the active dropdown text
+    function activateDropdown(elem) {
+        var menu = elem.parents('.dropdown-menu');
+        if (menu.length) {
+            var toggle = menu.prev('button, a');
+            toggle.text(elem.text());
+        }
+    }
+
+}

app/components/Common/maps-google.js

@@ -0,0 +1,66 @@
+// Google Maps
+// -----------------------------------
+
+export default function() {
+
+    if (!$.fn.gMap) return;
+
+    // Custom core styles
+    // Get more styles from http://snazzymaps.com/style/29/light-monochrome
+    // - Just replace and assign to 'MapStyles' the new style array
+    var MapStyles = [{featureType:'water',stylers:[{visibility:'on'},{color:'#bdd1f9'}]},{featureType:'all',elementType:'labels.text.fill',stylers:[{color:'#334165'}]},{featureType:'landscape',stylers:[{color:'#e9ebf1'}]},{featureType:'road.highway',elementType:'geometry',stylers:[{color:'#c5c6c6'}]},{featureType:'road.arterial',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#fff'}]},{featureType:'transit',elementType:'geometry',stylers:[{color:'#d8dbe0'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#cfd5e0'}]},{featureType:'administrative',stylers:[{visibility:'on'},{lightness:33}]},{featureType:'poi.park',elementType:'labels',stylers:[{visibility:'on'},{lightness:20}]},{featureType:'road',stylers:[{color:'#d8dbe0',lightness:20}]}];
+
+    var gMapRefs = [];
+
+    var $this = $(this),
+        addresses = $this.data('address') && $this.data('address').split(
+            ';'),
+        titles = $this.data('title') && $this.data('title').split(';'),
+        zoom = $this.data('zoom') || 14,
+        maptype = $this.data('maptype') || 'ROADMAP', // or 'TERRAIN'
+        markers = [];
+
+    if (addresses) {
+        for (var a in addresses) {
+            if (typeof addresses[a] == 'string') {
+                markers.push({
+                    address: addresses[a],
+                    html: (titles && titles[a]) || '',
+                    popup: true /* Always popup */
+                });
+            }
+        }
+
+        var options = {
+            controls: {
+                panControl: true,
+                zoomControl: true,
+                mapTypeControl: true,
+                scaleControl: true,
+                streetViewControl: true,
+                overviewMapControl: true
+            },
+            scrollwheel: false,
+            maptype: maptype,
+            markers: markers,
+            zoom: zoom
+                // More options https://github.com/marioestrada/jQuery-gMap
+        };
+
+        var gMap = $this.gMap(options);
+
+        var ref = gMap.data('gMap.reference');
+        // save in the map references list
+        gMapRefs.push(ref);
+
+        // set the styles
+        if ($this.data('styled') !== undefined) {
+
+            ref.setOptions({
+                styles: MapStyles
+            });
+
+        }
+    }
+
+} //initGmap