mirror of
https://github.com/a2nt/silverstripe-webpack.git
synced 2024-10-22 17:05:31 +02:00
Made separate repository for UI kit
This commit is contained in:
parent
f62361099c
commit
bf563b25a2
3
.gitignore
vendored
3
.gitignore
vendored
@ -9,4 +9,5 @@
|
||||
/site/client/dist
|
||||
/silverstripe-cache
|
||||
yarn-error\.log
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
/app/client
|
59
README.md
59
README.md
@ -3,6 +3,37 @@
|
||||
## Simple WebPack boiler plate for SilverStripe
|
||||
|
||||
Checkout files at /app/ folder for details
|
||||
Take a look to https://github.com/a2nt/webpack-bootstrap-ui-kit.git for UI Kit details
|
||||
|
||||
### Requirements:
|
||||
|
||||
+ composer
|
||||
+ node
|
||||
+ yarn
|
||||
|
||||
### Installation:
|
||||
|
||||
```
|
||||
git clone https://github.com/a2nt/silverstripe-webpack.git
|
||||
cd silverstripe-webpack
|
||||
composer install
|
||||
npm install
|
||||
cd app
|
||||
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit.git ./client
|
||||
cd ..
|
||||
```
|
||||
|
||||
+ edit .env, robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
|
||||
|
||||
## Installing composer at some cpanel hostings
|
||||
```
|
||||
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
|
||||
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
|
||||
php composer-setup.php
|
||||
php -r "unlink('composer-setup.php');"
|
||||
|
||||
php -d memory_limit=-1 composer.phar update --ignore-platform-reqs
|
||||
```
|
||||
|
||||
### Features:
|
||||
+ You can use /app/_config/webpack.yml to setup webpack server parameters which will be used by webpack server and by SilverStripe to serve static content
|
||||
@ -47,35 +78,13 @@ Checkout files at /app/ folder for details
|
||||
+ /app/clent/src/scss (Your styling to be compiled)
|
||||
+ /app/clent/src/scss/_components (Your custom SCSS components)
|
||||
+ /app/clent/src/scss/app.scss (main application file to include site-wide components)
|
||||
+ /app/clent/src/scss/_variables.sccs (your custom variables, ex. bootstrap)
|
||||
+ /app/clent/src/scss/_variables.sccs (your custom and bootstrap variables)
|
||||
+ /app/clent/src/scss/_layout.sccs (Your site-wide styling)
|
||||
|
||||
|
||||
### Requirements:
|
||||
|
||||
+ composer
|
||||
+ yarn
|
||||
|
||||
### Instalation:
|
||||
|
||||
Install composer:
|
||||
```
|
||||
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
|
||||
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
|
||||
php composer-setup.php
|
||||
php -r "unlink('composer-setup.php');"
|
||||
|
||||
php -d memory_limit=-1 composer.phar update --ignore-platform-reqs
|
||||
```
|
||||
|
||||
```
|
||||
git clone https://github.com/a2nt/silverstripe-webpack.git
|
||||
cd silverstripe-webpack
|
||||
composer install
|
||||
npm install
|
||||
```
|
||||
|
||||
+ edit robots.txt, humans.txt, cache.appcache, manifest.json and package.json to setup your own project
|
||||
+ /app/client/src/index.html UI demo page
|
||||
+ /app/client/src/html HTML templates to build UI demo
|
||||
|
||||
### Commands:
|
||||
|
||||
|
0
app/client/dist/css/HomePage.css
vendored
0
app/client/dist/css/HomePage.css
vendored
18
app/client/dist/css/app.css
vendored
18
app/client/dist/css/app.css
vendored
File diff suppressed because one or more lines are too long
0
app/client/dist/css/editor.css
vendored
0
app/client/dist/css/editor.css
vendored
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.eot";
|
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.svg";
|
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.ttf";
|
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.woff";
|
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.woff2";
|
2
app/client/dist/icons/.cache
vendored
2
app/client/dist/icons/.cache
vendored
@ -1 +1 @@
|
||||
{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"48da8109542971737c0c3794682790d4","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"ss-webpack-boilerplate\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"ss-webpack-boilerplate\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-192x192.png","/icons/android-chrome-96x96.png","/icons/android-chrome-384x384.png","/icons/android-chrome-256x256.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-precomposed.png","/icons/apple-touch-icon.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/firefox_app_128x128.png","/icons/firefox_app_60x60.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}
|
||||
{"hash":"3deb17371acdc75398d81da38fad464c","version":"0.0.9","optionHash":"c067d9b2d6a96a86192ece0162f1b1ac","result":{"outputFilePrefix":"/icons/","html":["<meta name=\"mobile-web-app-capable\" content=\"yes\">","<meta name=\"theme-color\" content=\"#fff\">","<meta name=\"application-name\" content=\"Webpack App\">","<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"app/client/dist//icons/apple-touch-icon-57x57.png\">","<link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"app/client/dist//icons/apple-touch-icon-60x60.png\">","<link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"app/client/dist//icons/apple-touch-icon-72x72.png\">","<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"app/client/dist//icons/apple-touch-icon-76x76.png\">","<link rel=\"apple-touch-icon\" sizes=\"114x114\" href=\"app/client/dist//icons/apple-touch-icon-114x114.png\">","<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"app/client/dist//icons/apple-touch-icon-120x120.png\">","<link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"app/client/dist//icons/apple-touch-icon-144x144.png\">","<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"app/client/dist//icons/apple-touch-icon-152x152.png\">","<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"app/client/dist//icons/apple-touch-icon-180x180.png\">","<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">","<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">","<meta name=\"apple-mobile-web-app-title\" content=\"Webpack App\">","<link rel=\"icon\" type=\"image/png\" sizes=\"228x228\" href=\"app/client/dist//icons/coast-228x228.png\">","<meta name=\"msapplication-TileColor\" content=\"#fff\">","<meta name=\"msapplication-TileImage\" content=\"mstile-144x144.png\">","<meta name=\"msapplication-config\" content=\"browserconfig.xml\">","<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"app/client/dist//icons/favicon-32x32.png\">","<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"app/client/dist//icons/favicon-16x16.png\">","<link rel=\"shortcut icon\" href=\"app/client/dist//icons/favicon.ico\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-320x460.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x920.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-640x1096.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-750x1294.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1182x2208.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)\" href=\"app/client/dist//icons/apple-touch-startup-image-1242x2148.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-748x1024.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)\" href=\"app/client/dist//icons/apple-touch-startup-image-768x1004.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1496x2048.png\">","<link rel=\"apple-touch-startup-image\" media=\"(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)\" href=\"app/client/dist//icons/apple-touch-startup-image-1536x2008.png\">"],"files":["/icons/android-chrome-36x36.png","/icons/android-chrome-48x48.png","/icons/android-chrome-72x72.png","/icons/android-chrome-144x144.png","/icons/android-chrome-96x96.png","/icons/android-chrome-192x192.png","/icons/android-chrome-384x384.png","/icons/android-chrome-256x256.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-180x180.png","/icons/apple-touch-icon.png","/icons/apple-touch-icon-precomposed.png","/icons/coast-228x228.png","/icons/yandex-browser-50x50.png","/icons/mstile-70x70.png","/icons/mstile-144x144.png","/icons/mstile-150x150.png","/icons/mstile-310x150.png","/icons/mstile-310x310.png","/icons/favicon-16x16.png","/icons/favicon-32x32.png","/icons/favicon.ico","/icons/apple-touch-startup-image-320x460.png","/icons/apple-touch-startup-image-640x920.png","/icons/apple-touch-startup-image-640x1096.png","/icons/apple-touch-startup-image-750x1294.png","/icons/apple-touch-startup-image-768x1004.png","/icons/apple-touch-startup-image-748x1024.png","/icons/apple-touch-startup-image-1242x2148.png","/icons/apple-touch-startup-image-1182x2208.png","/icons/apple-touch-startup-image-1496x2048.png","/icons/apple-touch-startup-image-1536x2008.png","/icons/firefox_app_60x60.png","/icons/firefox_app_128x128.png","/icons/firefox_app_512x512.png","/icons/manifest.json","/icons/yandex-browser-manifest.json","/icons/browserconfig.xml","/icons/manifest.webapp"]}}
|
4
app/client/dist/icons/manifest.json
vendored
4
app/client/dist/icons/manifest.json
vendored
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ss-webpack-boilerplate",
|
||||
"short_name": "ss-webpack-boilerplate",
|
||||
"name": "Webpack App",
|
||||
"short_name": "Webpack App",
|
||||
"description": null,
|
||||
"dir": "auto",
|
||||
"lang": "en-US",
|
||||
|
2
app/client/dist/icons/manifest.webapp
vendored
2
app/client/dist/icons/manifest.webapp
vendored
@ -1,6 +1,6 @@
|
||||
{
|
||||
"version": "1.0",
|
||||
"name": "ss-webpack-boilerplate",
|
||||
"name": "Webpack App",
|
||||
"description": null,
|
||||
"icons": {
|
||||
"60": "firefox_app_60x60.png",
|
||||
|
1
app/client/dist/img/fontawesome-webfont.svg
vendored
1
app/client/dist/img/fontawesome-webfont.svg
vendored
@ -1 +0,0 @@
|
||||
module.exports = "../fonts/fontawesome-webfont.svg";
|
BIN
app/client/dist/img/logo.png
vendored
BIN
app/client/dist/img/logo.png
vendored
Binary file not shown.
Before Width: | Height: | Size: 9.0 KiB |
1
app/client/dist/js/HomePage.js
vendored
1
app/client/dist/js/HomePage.js
vendored
@ -1 +0,0 @@
|
||||
!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="app/client/dist/",n(n.s=32)}({32:function(t,n){}});
|
134
app/client/dist/js/app.js
vendored
134
app/client/dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
1
app/client/dist/js/editor.js
vendored
1
app/client/dist/js/editor.js
vendored
@ -1 +0,0 @@
|
||||
!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="app/client/dist/",n(n.s=33)}({33:function(t,n){}});
|
Binary file not shown.
Before Width: | Height: | Size: 9.0 KiB |
@ -5,6 +5,7 @@ import 'jquery.inputmask/dist/jquery.inputmask.bundle';
|
||||
|
||||
import Events from "../_events";
|
||||
import SpinnerUI from './_ui.spinner';
|
||||
import FormFieldUI from './_ui.form.fields';
|
||||
|
||||
const FormBasics = (($) => {
|
||||
// Constants
|
||||
@ -23,7 +24,12 @@ const FormBasics = (($) => {
|
||||
|
||||
$('[data-inputmask]').inputmask();
|
||||
|
||||
const $fields = $element.find('input,textarea,select');
|
||||
const $fields = $element.find(Events.FORM_FIELDS);
|
||||
// init fields ui
|
||||
$fields.each((i, el) => {
|
||||
new FormFieldUI(el);
|
||||
});
|
||||
|
||||
const $selectFields = $element.find('select:not([readonly])');
|
||||
const $radioOptions = $element.find('input[type="radio"]');
|
||||
const separator = '::;::';
|
||||
@ -61,7 +67,7 @@ const FormBasics = (($) => {
|
||||
});
|
||||
|
||||
html += `<span class="option" data-val=${ $opt.attr('value') }>${ opt
|
||||
} <i class="fas fa-times btn-remove"></i></span>`;
|
||||
} <i class="fas fa-times btn-remove"></i></span>`;
|
||||
|
||||
});
|
||||
|
||||
|
@ -79,7 +79,9 @@ const FormValidate = (($) => {
|
||||
badCallback();
|
||||
}
|
||||
|
||||
console.log('Invalid form data');
|
||||
console.log('Invalid form data:');
|
||||
console.log($el);
|
||||
|
||||
SpinnerUI.hide();
|
||||
valid = false;
|
||||
return false;
|
||||
|
@ -2,12 +2,12 @@ import Events from '../../_events';
|
||||
import Routie from "routie";
|
||||
|
||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
Routie({
|
||||
'navigation': function() {
|
||||
$('#NavbarCollapse').addClass('in');
|
||||
},
|
||||
'carousel:id:num': function(id, num) {
|
||||
$(`#Carousel${ id}`).carousel(num);
|
||||
},
|
||||
});
|
||||
Routie({
|
||||
'navigation': function() {
|
||||
$('#NavbarCollapse').addClass('in');
|
||||
},
|
||||
'carousel:id:num': function(id, num) {
|
||||
$(`#Carousel${ id}`).carousel(num);
|
||||
},
|
||||
});
|
||||
});
|
@ -3,17 +3,18 @@
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
AJAX: 'ajax-load',
|
||||
LOADED: 'load',
|
||||
SET_TARGET_UPDATE: 'set-target-update',
|
||||
RESTORE_FIELD: 'restore-field',
|
||||
FORM_INIT_BASICS: 'form-basics',
|
||||
FORM_INIT_STEPPED: 'form-init-stepped',
|
||||
FORM_INIT_VALIDATE: 'form-init-validate',
|
||||
FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
|
||||
FORM_INIT_STORAGE: 'form-init-storage',
|
||||
FORM_VALIDATION_FAILED: 'form-validation-failed',
|
||||
FORM_STEPPED_NEW_STEP: 'form-new-step',
|
||||
FORM_STEPPED_FIRST_STEP: 'form-first-step',
|
||||
FORM_STEPPED_LAST_STEP: 'form-last-step',
|
||||
AJAX: 'ajax-load',
|
||||
LOADED: 'load',
|
||||
SET_TARGET_UPDATE: 'set-target-update',
|
||||
RESTORE_FIELD: 'restore-field',
|
||||
FORM_INIT_BASICS: 'form-basics',
|
||||
FORM_INIT_STEPPED: 'form-init-stepped',
|
||||
FORM_INIT_VALIDATE: 'form-init-validate',
|
||||
FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
|
||||
FORM_INIT_STORAGE: 'form-init-storage',
|
||||
FORM_VALIDATION_FAILED: 'form-validation-failed',
|
||||
FORM_STEPPED_NEW_STEP: 'form-new-step',
|
||||
FORM_STEPPED_FIRST_STEP: 'form-first-step',
|
||||
FORM_STEPPED_LAST_STEP: 'form-last-step',
|
||||
FORM_FIELDS: 'input,textarea,select',
|
||||
};
|
||||
|
@ -7,43 +7,43 @@ import FormStepped from './_components/_ui.form.stepped';
|
||||
|
||||
|
||||
const LayoutUI = (($) => {
|
||||
// Constants
|
||||
const W = window;
|
||||
const D = document;
|
||||
const $Body = $('body');
|
||||
// Constants
|
||||
const W = window;
|
||||
const D = document;
|
||||
const $Body = $('body');
|
||||
|
||||
const NAME = 'LayoutUI';
|
||||
const NAME = 'LayoutUI';
|
||||
|
||||
const datepickerOptions = {
|
||||
autoclose: true,
|
||||
startDate: 0,
|
||||
//todayBtn: true,
|
||||
todayHighlight: true,
|
||||
clearBtn: true,
|
||||
};
|
||||
const datepickerOptions = {
|
||||
autoclose: true,
|
||||
startDate: 0,
|
||||
//todayBtn: true,
|
||||
todayHighlight: true,
|
||||
clearBtn: true,
|
||||
};
|
||||
|
||||
class LayoutUI {
|
||||
static init() {
|
||||
const ui = this;
|
||||
ui.dispose();
|
||||
class LayoutUI {
|
||||
static init() {
|
||||
const ui = this;
|
||||
ui.dispose();
|
||||
|
||||
console.log(`Initializing: ${NAME}`);
|
||||
// your custom UI
|
||||
console.log(`Initializing: ${NAME}`);
|
||||
// your custom UI
|
||||
|
||||
}
|
||||
|
||||
static dispose() {
|
||||
console.log(`Destroying: ${NAME}`);
|
||||
}
|
||||
}
|
||||
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
LayoutUI.init();
|
||||
});
|
||||
static dispose() {
|
||||
console.log(`Destroying: ${NAME}`);
|
||||
}
|
||||
}
|
||||
|
||||
W.LayoutUI = LayoutUI;
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
LayoutUI.init();
|
||||
});
|
||||
|
||||
return LayoutUI;
|
||||
W.LayoutUI = LayoutUI;
|
||||
|
||||
return LayoutUI;
|
||||
})($);
|
||||
|
||||
export default LayoutUI;
|
||||
|
@ -28,316 +28,321 @@ import SmoothScroll from 'smooth-scroll';
|
||||
const smoothScroll = SmoothScroll();
|
||||
|
||||
const MainUI = (($) => {
|
||||
// Constants
|
||||
const W = window;
|
||||
const D = document;
|
||||
const $Body = $('body');
|
||||
// Constants
|
||||
const W = window;
|
||||
const D = document;
|
||||
const $Body = $('body');
|
||||
|
||||
const NAME = 'MainUI';
|
||||
const NAME = 'MainUI';
|
||||
|
||||
// get browser locale
|
||||
//const Locale = $('html').attr('lang').substring(0, 2);
|
||||
// get browser locale
|
||||
//const Locale = $('html').attr('lang').substring(0, 2);
|
||||
|
||||
const $AlertNotify = $('#AlertNotify');
|
||||
const $SiteWideMessage = $('#SiteWideMessage');
|
||||
const $AlertNotify = $('#AlertNotify');
|
||||
const $SiteWideMessage = $('#SiteWideMessage');
|
||||
|
||||
// get browser window visibility preferences
|
||||
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
||||
const HiddenName = 'hidden';
|
||||
const VisibilityChangeEvent = 'visibilitychange';
|
||||
// get browser window visibility preferences
|
||||
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
||||
const HiddenName = 'hidden';
|
||||
const VisibilityChangeEvent = 'visibilitychange';
|
||||
|
||||
// update visibility state
|
||||
D.addEventListener(VisibilityChangeEvent, () => {
|
||||
if (D.visibilityState === HiddenName) {
|
||||
console.log('Tab: hidden');
|
||||
$Body.addClass('is-hidden');
|
||||
$Body.trigger('tabHidden');
|
||||
} else {
|
||||
console.log('Tab: focused');
|
||||
$Body.removeClass('is-hidden');
|
||||
$Body.trigger('tabFocused');
|
||||
}
|
||||
// update visibility state
|
||||
D.addEventListener(VisibilityChangeEvent, () => {
|
||||
if (D.visibilityState === HiddenName) {
|
||||
console.log('Tab: hidden');
|
||||
$Body.addClass('is-hidden');
|
||||
$Body.trigger('tabHidden');
|
||||
} else {
|
||||
console.log('Tab: focused');
|
||||
$Body.removeClass('is-hidden');
|
||||
$Body.trigger('tabFocused');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// update online/offline state
|
||||
const updateOnlineStatus = function() {
|
||||
if (!navigator.onLine) {
|
||||
console.log('Tab: offline');
|
||||
$Body.addClass('is-offline');
|
||||
$Body.trigger('offline');
|
||||
} else {
|
||||
console.log('Tab: online');
|
||||
$Body.removeClass('is-offline');
|
||||
$Body.trigger('online');
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof navigator.onLine !== 'undefined') {
|
||||
W.addEventListener('offline', () => {
|
||||
updateOnlineStatus();
|
||||
}, false);
|
||||
|
||||
W.addEventListener('online', () => {
|
||||
updateOnlineStatus();
|
||||
}, false);
|
||||
|
||||
W.addEventListener('load', () => {
|
||||
updateOnlineStatus();
|
||||
});
|
||||
}
|
||||
|
||||
// scrollTo
|
||||
const ScrollTo = function(trigger, selector) {
|
||||
smoothScroll.animateScroll(
|
||||
D.querySelector(selector),
|
||||
trigger, {
|
||||
speed: 500,
|
||||
offset: -20,
|
||||
//easing: 'easeInOutCubic',
|
||||
// Callback API
|
||||
//before: function (anchor, toggle) {}, // Callback to run before scroll
|
||||
//`after: function (anchor, toggle) {} // Callback to run after scroll
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// update online/offline state
|
||||
const updateOnlineStatus = function() {
|
||||
if (!navigator.onLine) {
|
||||
console.log('Tab: offline');
|
||||
$Body.addClass('is-offline');
|
||||
$Body.trigger('offline');
|
||||
} else {
|
||||
console.log('Tab: online');
|
||||
$Body.removeClass('is-offline');
|
||||
$Body.trigger('online');
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof navigator.onLine !== 'undefined') {
|
||||
W.addEventListener('offline', () => {
|
||||
updateOnlineStatus();
|
||||
}, false);
|
||||
|
||||
W.addEventListener('online', () => {
|
||||
updateOnlineStatus();
|
||||
}, false);
|
||||
|
||||
W.addEventListener('load', () => {
|
||||
updateOnlineStatus();
|
||||
});
|
||||
// session ping
|
||||
setInterval(() => {
|
||||
if ($Body.hasClass('is-offline')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// scrollTo
|
||||
const ScrollTo = function(trigger, selector) {
|
||||
smoothScroll.animateScroll(
|
||||
D.querySelector(selector),
|
||||
trigger, {
|
||||
speed: 500,
|
||||
offset: -20,
|
||||
//easing: 'easeInOutCubic',
|
||||
// Callback API
|
||||
//before: function (anchor, toggle) {}, // Callback to run before scroll
|
||||
//`after: function (anchor, toggle) {} // Callback to run after scroll
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// session ping
|
||||
setInterval(() => {
|
||||
if ($Body.hasClass('is-offline')) {
|
||||
return;
|
||||
$.ajax({
|
||||
sync: false,
|
||||
async: true,
|
||||
cache: false,
|
||||
url: '/Security/ping',
|
||||
global: false,
|
||||
type: 'POST',
|
||||
complete(data, datastatus) {
|
||||
if (datastatus !== 'success') {
|
||||
W.location.reload(false);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, 300000); // 5 min in ms
|
||||
|
||||
$.ajax({
|
||||
sync: false,
|
||||
async: true,
|
||||
cache: false,
|
||||
url: '/Security/ping',
|
||||
global: false,
|
||||
type: 'POST',
|
||||
complete(data, datastatus) {
|
||||
if (datastatus !== 'success') {
|
||||
W.location.reload(false);
|
||||
}
|
||||
W.URLDetails = {
|
||||
'base': $('base').attr('href'),
|
||||
'relative': '/',
|
||||
'hash': '',
|
||||
};
|
||||
|
||||
class MainUI {
|
||||
// Static methods
|
||||
|
||||
static init() {
|
||||
this.dispose();
|
||||
|
||||
console.log(`Initializing: ${NAME}`);
|
||||
|
||||
// update location details
|
||||
this.updateLocation();
|
||||
|
||||
// mark available offline areas
|
||||
if ('caches' in W) {
|
||||
$('a.offline').addClass('offline-available');
|
||||
}
|
||||
|
||||
this.loadImages();
|
||||
|
||||
// mark external links
|
||||
$('a.external,a[rel="external"]').attr('target', '_blank');
|
||||
|
||||
// show encoded emails
|
||||
/*$(D).find('.obm').each(function () {
|
||||
if ($(this).attr('data-val') !== undefined) {
|
||||
const email = $(this).attr('data-val').split('')
|
||||
.reverse()
|
||||
.join('')
|
||||
.slice(0, -8)
|
||||
.replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26))
|
||||
.replace('#AT#', '@');
|
||||
const attr = $(this).attr('data-val-append');
|
||||
if (attr !== undefined && attr !== false) {
|
||||
$(this).append(email);
|
||||
}
|
||||
if ($(this).find('.sr-only').length > 0) {
|
||||
$(this).find('.sr-only').append(email);
|
||||
}
|
||||
if ($(this).attr('href') !== undefined) {
|
||||
$(this).attr('href', `mailto:${email}`);
|
||||
}
|
||||
}
|
||||
});*/
|
||||
//
|
||||
|
||||
// scroll links
|
||||
$(D).on('click', '.js-scrollTo', (e) => {
|
||||
e.preventDefault();
|
||||
const el = e.currentTarget;
|
||||
const $el = $(e.currentTarget);
|
||||
const target = $el.data('target') || $el.attr('href');
|
||||
|
||||
if ($(target).length) {
|
||||
ScrollTo(el, target);
|
||||
} else {
|
||||
console.log(`[ScrollTo] Undefined target: ${ target}`);
|
||||
}
|
||||
});
|
||||
|
||||
// load external fonts
|
||||
if ($('[data-extfont]').length) {
|
||||
$.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
|
||||
const fonts = [];
|
||||
|
||||
$('[data-extfont]').each((i, el) => {
|
||||
fonts[i] = $(el).attr('data-extfont');
|
||||
});
|
||||
|
||||
W.WebFont.load({
|
||||
google: {
|
||||
families: fonts,
|
||||
},
|
||||
});
|
||||
});
|
||||
}, 300000); // 5 min in ms
|
||||
}
|
||||
|
||||
W.URLDetails = {
|
||||
'base': $('base').attr('href'),
|
||||
'relative': '/',
|
||||
'hash': '',
|
||||
};
|
||||
// data-set links
|
||||
$('[data-set-target]').on('click', (e) => {
|
||||
const $el = $(e.currentTarget);
|
||||
const $target = $($el.data('set-target'));
|
||||
|
||||
class MainUI {
|
||||
// Static methods
|
||||
|
||||
static init() {
|
||||
this.dispose();
|
||||
|
||||
console.log(`Initializing: ${NAME}`);
|
||||
|
||||
// update location details
|
||||
this.updateLocation();
|
||||
|
||||
// mark available offline areas
|
||||
if ('caches' in W) {
|
||||
$('a.offline').addClass('offline-available');
|
||||
}
|
||||
|
||||
this.loadImages();
|
||||
|
||||
// mark external links
|
||||
$('a.external,a[rel="external"]').attr('target', '_blank');
|
||||
|
||||
// show encoded emails
|
||||
/*$(D).find('.obm').each(function () {
|
||||
if ($(this).attr('data-val') !== undefined) {
|
||||
const email = $(this).attr('data-val').split('')
|
||||
.reverse()
|
||||
.join('')
|
||||
.slice(0, -8)
|
||||
.replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26))
|
||||
.replace('#AT#', '@');
|
||||
const attr = $(this).attr('data-val-append');
|
||||
if (attr !== undefined && attr !== false) {
|
||||
$(this).append(email);
|
||||
}
|
||||
if ($(this).find('.sr-only').length > 0) {
|
||||
$(this).find('.sr-only').append(email);
|
||||
}
|
||||
if ($(this).attr('href') !== undefined) {
|
||||
$(this).attr('href', `mailto:${email}`);
|
||||
}
|
||||
}
|
||||
});*/
|
||||
//
|
||||
|
||||
// scroll links
|
||||
$(D).on('click', '.js-scrollTo', (e) => {
|
||||
e.preventDefault();
|
||||
const el = e.currentTarget;
|
||||
const $el = $(e.currentTarget);
|
||||
|
||||
ScrollTo(el, $el.attr('data-target'));
|
||||
});
|
||||
|
||||
// load external fonts
|
||||
if ($('[data-extfont]').length) {
|
||||
$.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => {
|
||||
const fonts = [];
|
||||
|
||||
$('[data-extfont]').each(function(i, el) {
|
||||
fonts[i] = $(el).attr('data-extfont');
|
||||
});
|
||||
|
||||
W.WebFont.load({
|
||||
google: {
|
||||
families: fonts,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// data-set links
|
||||
$('[data-set-target]').on('click', (e) => {
|
||||
const $el = $(e.currentTarget);
|
||||
const $target = $($el.data('set-target'));
|
||||
|
||||
if (!$target.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
$target.each((i, targetEl) => {
|
||||
const $targetEl = $(targetEl);
|
||||
const tag = $targetEl.prop('tagName').toLowerCase();
|
||||
|
||||
if (tag === 'input' || tag === 'select') {
|
||||
$targetEl.val($el.data('set-val'));
|
||||
} else if (!$targetEl.hasClass('field')) {
|
||||
$targetEl.text($el.data('set-val'));
|
||||
}
|
||||
});
|
||||
|
||||
$el.trigger(Events.SET_TARGET_UPDATE);
|
||||
$target.closest('form').trigger(Events.SET_TARGET_UPDATE);
|
||||
});
|
||||
|
||||
// hide spinner
|
||||
Spinner.hide(() => {
|
||||
$Body.addClass('loaded');
|
||||
});
|
||||
|
||||
// fire page printing
|
||||
if (W.URLDetails['hash'].indexOf('printpage') > -1) {
|
||||
W.print();
|
||||
}
|
||||
if (!$target.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
static updateLocation(url) {
|
||||
let location = url || W.location.href;
|
||||
location = location.replace(W.URLDetails['base'], '/');
|
||||
const hash = location.indexOf('#');
|
||||
$target.each((i, targetEl) => {
|
||||
const $targetEl = $(targetEl);
|
||||
const tag = $targetEl.prop('tagName').toLowerCase();
|
||||
|
||||
W.URLDetails.relative = location.split('#')[0];
|
||||
W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : '';
|
||||
}
|
||||
if (tag === 'input' || tag === 'select') {
|
||||
$targetEl.val($el.data('set-val'));
|
||||
} else if (!$targetEl.hasClass('field')) {
|
||||
$targetEl.text($el.data('set-val'));
|
||||
}
|
||||
});
|
||||
|
||||
// show site-wide alert
|
||||
static alert(msg, cls) {
|
||||
$SiteWideMessage.fadeOut('fast');
|
||||
$el.trigger(Events.SET_TARGET_UPDATE);
|
||||
$target.closest('form').trigger(Events.SET_TARGET_UPDATE);
|
||||
});
|
||||
|
||||
$SiteWideMessage.html(`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">×</i>${msg}</div></div>`);
|
||||
$SiteWideMessage.find('.page-alert').alert();
|
||||
// hide spinner
|
||||
Spinner.hide(() => {
|
||||
$Body.addClass('loaded');
|
||||
});
|
||||
|
||||
$SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
|
||||
$SiteWideMessage.fadeOut('slow', () => {
|
||||
$SiteWideMessage.find('.page-alert').alert('close');
|
||||
});
|
||||
});
|
||||
|
||||
$SiteWideMessage.fadeIn('slow');
|
||||
|
||||
if ($AlertNotify.length) {
|
||||
$AlertNotify[0].play();
|
||||
}
|
||||
|
||||
$(W).trigger('alert-appeared');
|
||||
}
|
||||
|
||||
// hide site-wide alert
|
||||
static alertHide() {
|
||||
if ($SiteWideMessage.length !== 0) {
|
||||
$SiteWideMessage.fadeOut('slow', () => {
|
||||
$SiteWideMessage.find('.alert').alert('close');
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
$AlertNotify.length &&
|
||||
typeof $AlertNotify[0].stop !== 'undefined'
|
||||
) {
|
||||
$AlertNotify[0].stop();
|
||||
}
|
||||
|
||||
$(W).trigger('alert-removed');
|
||||
}
|
||||
|
||||
// load all images
|
||||
static loadImages() {
|
||||
const $imgs = $Body.find('img');
|
||||
const $imgUrls = [];
|
||||
const $imgLazyUrls = [];
|
||||
|
||||
// collect image details
|
||||
$imgs.each((i, el) => {
|
||||
const $el = $(el);
|
||||
const src = $el.attr('src');
|
||||
const lazySrc = $el.data('lazy-src');
|
||||
|
||||
if (src && src.length) {
|
||||
$imgUrls.push(src);
|
||||
}
|
||||
if (lazySrc && lazySrc.length) {
|
||||
$imgLazyUrls.push(lazySrc);
|
||||
$el.addClass('loading');
|
||||
|
||||
AjaxUI.preload([lazySrc]).then(() => {
|
||||
$el.attr('src', lazySrc);
|
||||
|
||||
$el.addClass('loaded');
|
||||
$el.removeClass('loading');
|
||||
|
||||
$el.trigger('image-lazy-loaded');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// load defined images
|
||||
AjaxUI.preload($imgUrls).then(() => {
|
||||
$(W).trigger('images-loaded');
|
||||
|
||||
// load lazy images
|
||||
AjaxUI.preload($imgLazyUrls).then(() => {
|
||||
console.log('All images are loaded!');
|
||||
|
||||
$(W).trigger('images-lazy-loaded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
static dispose() {
|
||||
console.log(`Destroying: ${NAME}`);
|
||||
}
|
||||
// fire page printing
|
||||
if (W.URLDetails['hash'].indexOf('printpage') > -1) {
|
||||
W.print();
|
||||
}
|
||||
}
|
||||
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
MainUI.init();
|
||||
});
|
||||
static updateLocation(url) {
|
||||
let location = url || W.location.href;
|
||||
location = location.replace(W.URLDetails['base'], '/');
|
||||
const hash = location.indexOf('#');
|
||||
|
||||
W.MainUI = MainUI;
|
||||
W.URLDetails.relative = location.split('#')[0];
|
||||
W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : '';
|
||||
}
|
||||
|
||||
return MainUI;
|
||||
// show site-wide alert
|
||||
static alert(msg, cls) {
|
||||
$SiteWideMessage.fadeOut('fast');
|
||||
|
||||
$SiteWideMessage.html(`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">×</i>${msg}</div></div>`);
|
||||
$SiteWideMessage.find('.page-alert').alert();
|
||||
|
||||
$SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
|
||||
$SiteWideMessage.fadeOut('slow', () => {
|
||||
$SiteWideMessage.find('.page-alert').alert('close');
|
||||
});
|
||||
});
|
||||
|
||||
$SiteWideMessage.fadeIn('slow');
|
||||
|
||||
if ($AlertNotify.length) {
|
||||
$AlertNotify[0].play();
|
||||
}
|
||||
|
||||
$(W).trigger('alert-appeared');
|
||||
}
|
||||
|
||||
// hide site-wide alert
|
||||
static alertHide() {
|
||||
if ($SiteWideMessage.length !== 0) {
|
||||
$SiteWideMessage.fadeOut('slow', () => {
|
||||
$SiteWideMessage.find('.alert').alert('close');
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
$AlertNotify.length &&
|
||||
typeof $AlertNotify[0].stop !== 'undefined'
|
||||
) {
|
||||
$AlertNotify[0].stop();
|
||||
}
|
||||
|
||||
$(W).trigger('alert-removed');
|
||||
}
|
||||
|
||||
// load all images
|
||||
static loadImages() {
|
||||
const $imgs = $Body.find('img');
|
||||
const $imgUrls = [];
|
||||
const $imgLazyUrls = [];
|
||||
|
||||
// collect image details
|
||||
$imgs.each((i, el) => {
|
||||
const $el = $(el);
|
||||
const src = $el.attr('src');
|
||||
const lazySrc = $el.data('lazy-src');
|
||||
|
||||
if (src && src.length) {
|
||||
$imgUrls.push(src);
|
||||
}
|
||||
if (lazySrc && lazySrc.length) {
|
||||
$imgLazyUrls.push(lazySrc);
|
||||
$el.addClass('loading');
|
||||
|
||||
AjaxUI.preload([lazySrc]).then(() => {
|
||||
$el.attr('src', lazySrc);
|
||||
|
||||
$el.addClass('loaded');
|
||||
$el.removeClass('loading');
|
||||
|
||||
$el.trigger('image-lazy-loaded');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// load defined images
|
||||
AjaxUI.preload($imgUrls).then(() => {
|
||||
$(W).trigger('images-loaded');
|
||||
|
||||
// load lazy images
|
||||
AjaxUI.preload($imgLazyUrls).then(() => {
|
||||
console.log('All images are loaded!');
|
||||
|
||||
$(W).trigger('images-lazy-loaded');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
static dispose() {
|
||||
console.log(`Destroying: ${NAME}`);
|
||||
}
|
||||
}
|
||||
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
MainUI.init();
|
||||
});
|
||||
|
||||
W.MainUI = MainUI;
|
||||
|
||||
return MainUI;
|
||||
})($);
|
||||
|
||||
export default MainUI;
|
||||
|
@ -29,7 +29,7 @@ import './_main';
|
||||
import './_layout';
|
||||
|
||||
function importAll(r) {
|
||||
return r.keys().map(r);
|
||||
return r.keys().map(r);
|
||||
}
|
||||
|
||||
const images = importAll(require.context('../img/', false, /\.(png|jpe?g|svg)$/));
|
||||
|
@ -3,13 +3,13 @@
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
en: {
|
||||
jsSteppedForm: {
|
||||
STEPCOUNTER: '<div class="steps-counter">Step <b class="current-step"></b> of <b class="total-steps"></b></div>',
|
||||
STEPBUTTONS: '<div class="steps-buttons">' +
|
||||
en: {
|
||||
jsSteppedForm: {
|
||||
STEPCOUNTER: '<div class="steps-counter">Step <b class="current-step"></b> of <b class="total-steps"></b></div>',
|
||||
STEPBUTTONS: '<div class="steps-buttons">' +
|
||||
'<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' +
|
||||
' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' +
|
||||
'</div>',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -111,27 +111,29 @@ button, input, optgroup, select, textarea,
|
||||
@extend .alert-danger;
|
||||
}
|
||||
|
||||
// stick navbar to top using mobile layout
|
||||
#Header {
|
||||
position: relative;
|
||||
padding-top: $grid-gutter-height / 2;
|
||||
padding-bottom: 1rem;
|
||||
// element col paddings
|
||||
.col-block {
|
||||
padding: $grid-gutter-height / 4;
|
||||
}
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
// rewrite btn opacity on hover
|
||||
.btn {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
// SS-messages
|
||||
.message {
|
||||
@extend .alert;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@extend .alert-info;
|
||||
}
|
||||
|
||||
.message.required,
|
||||
.message.error {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-danger;
|
||||
}
|
||||
|
@ -4,6 +4,20 @@
|
||||
/**
|
||||
* Your custom style
|
||||
*/
|
||||
|
||||
.bg-alt {
|
||||
@extend .bg-dark;
|
||||
|
||||
background-color: $bg-alt !important;
|
||||
}
|
||||
|
||||
.bootstrap-select .dropdown-toggle .filter-option .option {
|
||||
background: #dedede;
|
||||
padding: .2rem .5rem;
|
||||
margin: .2rem;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
// shrink elements on scroll
|
||||
body.shrink {}
|
||||
|
||||
@ -16,44 +30,23 @@ body.shrink {}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
padding-top: $grid-gutter-height;
|
||||
padding-bottom: 2rem;
|
||||
padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
|
||||
|
||||
//padding-top: $grid-gutter-height;
|
||||
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
height: 2rem;
|
||||
margin-top: -2rem;
|
||||
.footer {
|
||||
height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
|
||||
margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// element col paddings
|
||||
.col-block {
|
||||
padding: $grid-gutter-height / 4;
|
||||
}
|
||||
|
||||
// rewrite btn opacity on hover
|
||||
.btn {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// SS-messages
|
||||
.message {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-info;
|
||||
}
|
||||
|
||||
.message.required,
|
||||
.message.error {
|
||||
@extend .alert;
|
||||
|
||||
@extend .alert-danger;
|
||||
}
|
||||
|
||||
// site blocks (elements)
|
||||
.element {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&.site__elements__sliderelement {
|
||||
.element-container {
|
||||
width: 100%;
|
||||
@ -61,11 +54,89 @@ body.shrink {}
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.site__elements__accordion {
|
||||
.card {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.card-header {
|
||||
@extend .bg-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-select .dropdown-toggle .filter-option .option {
|
||||
background: #dedede;
|
||||
padding: .2rem .5rem;
|
||||
margin: .2rem;
|
||||
color: #212529;
|
||||
// stick navbar to top using mobile layout
|
||||
/*#Header {
|
||||
position: relative;
|
||||
padding-top: $grid-gutter-height / 2;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "lg")) {
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}*/
|
||||
|
||||
#Footer {
|
||||
background-color: $dark;
|
||||
color: darken($white, 5%);
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
padding-top: $grid-gutter-height / 2;
|
||||
padding-bottom: $grid-gutter-height / 2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: darken($dark, 5%);
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: map-get($grid-breakpoints, "sm")) {
|
||||
.wrapper {
|
||||
padding-bottom: $footer-bar-size;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: $footer-bar-size;
|
||||
margin-top: -$footer-bar-size;
|
||||
line-height: $footer-bar-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,15 @@
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: $dark-blue;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6,
|
||||
.typography,
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.typography {
|
||||
|
@ -11,13 +11,18 @@ $white: #fff;
|
||||
$blue: #016cb1;
|
||||
$yellow: #ecac02;
|
||||
|
||||
$dark-blue: #113362;
|
||||
//$dark: #047072;
|
||||
//$primary: $dark;
|
||||
$bg-alt: $yellow;
|
||||
|
||||
$body-color: $gray-900;
|
||||
$navbar-light-active-color: $blue;
|
||||
|
||||
$dropdown-border-color: $white;
|
||||
|
||||
$footer-size: 16rem;
|
||||
$footer-bar-size: 2.5rem;
|
||||
|
||||
/*
|
||||
* bootstrap includes
|
||||
* keep it at the end
|
||||
|
@ -43,6 +43,7 @@
|
||||
"jquery-zoom": "^1.7.21",
|
||||
"jquery.appear": "^1.0.1",
|
||||
"jquery.inputmask": "^3.3.4",
|
||||
"mapbox-gl": "^1.0.0",
|
||||
"meta-lightbox": "^1.0.0",
|
||||
"offcanvas-bootstrap": "^2.5.2",
|
||||
"popper.js": "^1.15.0",
|
||||
|
@ -11,152 +11,153 @@ const filesystem = require('fs');
|
||||
|
||||
const includes = {};
|
||||
const modules = [
|
||||
path.resolve(__dirname, 'public'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'js'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'scss'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'img'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'thirdparty'),
|
||||
path.resolve(__dirname, 'node_modules')
|
||||
path.resolve(__dirname, 'public'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'js'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'scss'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'img'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'src', 'thirdparty'),
|
||||
path.resolve(__dirname, conf.APPDIR, 'client', 'node_modules'),
|
||||
path.resolve(__dirname, 'node_modules')
|
||||
];
|
||||
|
||||
const _addAppFiles = (theme) => {
|
||||
|
||||
const dirPath = path.resolve(__dirname, theme);
|
||||
const themeName = path.basename(theme);
|
||||
const dirPath = path.resolve(__dirname, theme);
|
||||
const themeName = path.basename(theme);
|
||||
|
||||
if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
|
||||
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
|
||||
} else if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))) {
|
||||
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'scss', 'app.scss');
|
||||
}
|
||||
if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
|
||||
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
|
||||
} else if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))) {
|
||||
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'scss', 'app.scss');
|
||||
}
|
||||
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'js'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'scss'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'img'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'thirdparty'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'js'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'scss'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'img'));
|
||||
modules.push(path.join(dirPath, 'client', 'src', 'thirdparty'));
|
||||
|
||||
const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
|
||||
const dirPath = path.resolve(__dirname, dir);
|
||||
let results = [];
|
||||
const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
|
||||
const dirPath = path.resolve(__dirname, dir);
|
||||
let results = [];
|
||||
|
||||
filesystem.readdirSync(dirPath).forEach((file) => {
|
||||
if (file.charAt(0) === '_') {
|
||||
return;
|
||||
}
|
||||
filesystem.readdirSync(dirPath).forEach((file) => {
|
||||
if (file.charAt(0) === '_') {
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = path.join(dirPath, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
const filePath = path.join(dirPath, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
|
||||
if (stat && stat.isDirectory() && includeSubFolders) {
|
||||
results = results.concat(_getAllFilesFromFolder(filePath, includeSubFolders));
|
||||
} else {
|
||||
results.push(filePath);
|
||||
}
|
||||
});
|
||||
if (stat && stat.isDirectory() && includeSubFolders) {
|
||||
results = results.concat(_getAllFilesFromFolder(filePath, includeSubFolders));
|
||||
} else {
|
||||
results.push(filePath);
|
||||
}
|
||||
});
|
||||
|
||||
return results;
|
||||
};
|
||||
return results;
|
||||
};
|
||||
|
||||
// add page specific scripts
|
||||
const typesJSPath = path.join(theme, conf.TYPESJS);
|
||||
if (filesystem.existsSync(typesJSPath)) {
|
||||
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
|
||||
pageScripts.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.js')}`] = file;
|
||||
});
|
||||
}
|
||||
// add page specific scripts
|
||||
const typesJSPath = path.join(theme, conf.TYPESJS);
|
||||
if (filesystem.existsSync(typesJSPath)) {
|
||||
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
|
||||
pageScripts.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.js')}`] = file;
|
||||
});
|
||||
}
|
||||
|
||||
// add page specific scss
|
||||
const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
|
||||
if (filesystem.existsSync(typesSCSSPath)) {
|
||||
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
|
||||
scssIncludes.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
|
||||
});
|
||||
}
|
||||
// add page specific scss
|
||||
const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
|
||||
if (filesystem.existsSync(typesSCSSPath)) {
|
||||
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
|
||||
scssIncludes.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_addAppFiles(conf.APPDIR);
|
||||
|
||||
// add themes
|
||||
commonVariables.themes.forEach((theme) => {
|
||||
_addAppFiles(theme);
|
||||
_addAppFiles(theme);
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
entry: includes,
|
||||
devtool: 'source-map',
|
||||
externals: {
|
||||
'jquery': 'jQuery',
|
||||
},
|
||||
optimization: {
|
||||
namedModules: true, // NamedModulesPlugin()
|
||||
splitChunks: { // CommonsChunkPlugin()
|
||||
name: 'vendor',
|
||||
minChunks: 2
|
||||
},
|
||||
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
|
||||
concatenateModules: true //ModuleConcatenationPlugin
|
||||
entry: includes,
|
||||
devtool: 'source-map',
|
||||
externals: {
|
||||
'jquery': 'jQuery',
|
||||
},
|
||||
optimization: {
|
||||
namedModules: true, // NamedModulesPlugin()
|
||||
splitChunks: { // CommonsChunkPlugin()
|
||||
name: 'vendor',
|
||||
minChunks: 2
|
||||
},
|
||||
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
|
||||
concatenateModules: true //ModuleConcatenationPlugin
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['es2015', {
|
||||
modules: false,
|
||||
}],
|
||||
['stage-2'],
|
||||
],
|
||||
plugins: [
|
||||
['transform-react-jsx'],
|
||||
['react-hot-loader/babel'],
|
||||
],
|
||||
},
|
||||
},
|
||||
}, {
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
}, {
|
||||
test: /\.coffee?$/,
|
||||
use: 'coffee-loader',
|
||||
}, {
|
||||
test: /\.worker\.js$/,
|
||||
use: {
|
||||
loader: 'worker-loader',
|
||||
},
|
||||
}],
|
||||
},
|
||||
resolve: {
|
||||
modules: modules,
|
||||
alias: {
|
||||
'jquery': require.resolve('jquery'),
|
||||
'jQuery': require.resolve('jquery'),
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['es2015', {
|
||||
modules: false,
|
||||
}],
|
||||
['stage-2'],
|
||||
],
|
||||
plugins: [
|
||||
['transform-react-jsx'],
|
||||
['react-hot-loader/babel'],
|
||||
],
|
||||
},
|
||||
},
|
||||
}, {
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
}, {
|
||||
test: /\.coffee?$/,
|
||||
use: 'coffee-loader',
|
||||
}, {
|
||||
test: /\.worker\.js$/,
|
||||
use: {
|
||||
loader: 'worker-loader',
|
||||
},
|
||||
}],
|
||||
},
|
||||
resolve: {
|
||||
modules: modules,
|
||||
alias: {
|
||||
'jquery': require.resolve('jquery'),
|
||||
'jQuery': require.resolve('jquery'),
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
'window.jQuery': 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
|
||||
}),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
'window.jQuery': 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
@ -14,109 +14,109 @@ const IP = process.env.IP || conf.HOSTNAME;
|
||||
const PORT = process.env.PORT || conf.PORT;
|
||||
|
||||
const config = merge.strategy({
|
||||
entry: 'prepend'
|
||||
entry: 'prepend'
|
||||
})(common, {
|
||||
mode: 'development',
|
||||
mode: 'development',
|
||||
|
||||
entry: {
|
||||
app: [
|
||||
'react-hot-loader/patch',
|
||||
'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT,
|
||||
'webpack/hot/only-dev-server',
|
||||
]
|
||||
},
|
||||
entry: {
|
||||
app: [
|
||||
'react-hot-loader/patch',
|
||||
'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT,
|
||||
'webpack/hot/only-dev-server',
|
||||
]
|
||||
},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname),
|
||||
filename: '[name].js',
|
||||
// necessary for HMR to know where to load the hot update chunks
|
||||
publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/'
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname),
|
||||
filename: '[name].js',
|
||||
// necessary for HMR to know where to load the hot update chunks
|
||||
publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/'
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
// If we want to use the same browser list for more tools
|
||||
// this list should be moved to package.json
|
||||
// https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
|
||||
browsers: [
|
||||
'ie >= 11',
|
||||
'ie_mob >= 11',
|
||||
'Safari >= 10',
|
||||
'Android >= 4.4',
|
||||
'Chrome >= 44', // Retail
|
||||
'Samsung >= 4'
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}, {
|
||||
loader: 'resolve-url-loader'
|
||||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, ]
|
||||
}, {
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'url-loader'
|
||||
}]
|
||||
}, {
|
||||
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name(file) {
|
||||
return 'public/[path][name].[ext]';
|
||||
},
|
||||
},
|
||||
}]
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
|
||||
devServer: {
|
||||
host: IP,
|
||||
port: PORT,
|
||||
historyApiFallback: true,
|
||||
hot: false,
|
||||
clientLogLevel: 'info',
|
||||
disableHostCheck: true,
|
||||
contentBase: [
|
||||
path.resolve(__dirname, 'public'),
|
||||
path.resolve(__dirname, 'public', 'resources'),
|
||||
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
|
||||
'node_modules',
|
||||
],
|
||||
//watchContentBase: true,
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true
|
||||
},
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [{
|
||||
loader: 'style-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
// If we want to use the same browser list for more tools
|
||||
// this list should be moved to package.json
|
||||
// https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
|
||||
browsers: [
|
||||
'ie >= 11',
|
||||
'ie_mob >= 11',
|
||||
'Safari >= 10',
|
||||
'Android >= 4.4',
|
||||
'Chrome >= 44', // Retail
|
||||
'Samsung >= 4'
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}, {
|
||||
loader: 'resolve-url-loader'
|
||||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, ]
|
||||
}, {
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'url-loader'
|
||||
}]
|
||||
}, {
|
||||
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name(file) {
|
||||
return 'public/[path][name].[ext]';
|
||||
},
|
||||
},
|
||||
}]
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
|
||||
devServer: {
|
||||
host: IP,
|
||||
port: PORT,
|
||||
historyApiFallback: true,
|
||||
hot: false,
|
||||
clientLogLevel: 'info',
|
||||
disableHostCheck: true,
|
||||
contentBase: [
|
||||
path.resolve(__dirname, 'public'),
|
||||
path.resolve(__dirname, 'public', 'resources'),
|
||||
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
|
||||
'node_modules',
|
||||
],
|
||||
//watchContentBase: true,
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true
|
||||
},
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = config;
|
||||
|
@ -17,174 +17,174 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||
|
||||
let plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('production')
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
debug: false
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('production')
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
debug: false
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
|
||||
prefix: '/icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true
|
||||
}
|
||||
}),
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
|
||||
prefix: '/icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true
|
||||
}
|
||||
}),
|
||||
];
|
||||
|
||||
// add themes favicons
|
||||
commonVariables.themes.forEach((theme) => {
|
||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/' + theme + '-icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true
|
||||
}
|
||||
}));
|
||||
}
|
||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/' + theme + '-icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
optimization: {
|
||||
namedModules: true, // NamedModulesPlugin()
|
||||
splitChunks: { // CommonsChunkPlugin()
|
||||
name: 'vendor',
|
||||
minChunks: 2
|
||||
},
|
||||
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
|
||||
concatenateModules: true, //ModuleConcatenationPlugin
|
||||
minimizer: [
|
||||
new UglifyJSPlugin({
|
||||
uglifyOptions: {
|
||||
sourceMap: false,
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
]
|
||||
mode: 'production',
|
||||
optimization: {
|
||||
namedModules: true, // NamedModulesPlugin()
|
||||
splitChunks: { // CommonsChunkPlugin()
|
||||
name: 'vendor',
|
||||
minChunks: 2
|
||||
},
|
||||
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
|
||||
concatenateModules: true, //ModuleConcatenationPlugin
|
||||
minimizer: [
|
||||
new UglifyJSPlugin({
|
||||
uglifyOptions: {
|
||||
sourceMap: false,
|
||||
comments: false
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
devtool: '',
|
||||
devtool: '',
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
publicPath: path.join(conf.APPDIR, conf.DIST),
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
publicPath: path.join(conf.APPDIR, conf.DIST),
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.s?css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: [{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
minimize: true
|
||||
}
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
// If we want to use the same browser list for more tools
|
||||
// this list should be moved to package.json
|
||||
// https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
|
||||
browsers: [
|
||||
'ie >= 11',
|
||||
'ie_mob >= 11',
|
||||
'Safari >= 10',
|
||||
'Android >= 4.4',
|
||||
'Chrome >= 44', // Retail
|
||||
'Samsung >= 4'
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}, {
|
||||
loader: 'resolve-url-loader'
|
||||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false
|
||||
}
|
||||
}, ]
|
||||
})
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.s?css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: "style-loader",
|
||||
use: [{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
minimize: true
|
||||
}
|
||||
}, {
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/'
|
||||
}
|
||||
}]
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
// If we want to use the same browser list for more tools
|
||||
// this list should be moved to package.json
|
||||
// https://evilmartians.com/chronicles/autoprefixer-7-browserslist-2-released
|
||||
browsers: [
|
||||
'ie >= 11',
|
||||
'ie_mob >= 11',
|
||||
'Safari >= 10',
|
||||
'Android >= 4.4',
|
||||
'Chrome >= 44', // Retail
|
||||
'Samsung >= 4'
|
||||
]
|
||||
})
|
||||
]
|
||||
}
|
||||
}, {
|
||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/'
|
||||
}
|
||||
}]
|
||||
loader: 'resolve-url-loader'
|
||||
}, {
|
||||
test: /\.(png|jpg|jpeg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'img/',
|
||||
publicPath: '../img/'
|
||||
/*,
|
||||
name(file) {
|
||||
//return 'public/[path][name].[ext]';
|
||||
return '[hash].[ext]';
|
||||
},*/
|
||||
},
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false
|
||||
}
|
||||
}, ]
|
||||
},
|
||||
})
|
||||
}, {
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/'
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
test: /\.(png|jpg|jpeg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'img/',
|
||||
publicPath: '../img/'
|
||||
/*,
|
||||
name(file) {
|
||||
//return 'public/[path][name].[ext]';
|
||||
return '[hash].[ext]';
|
||||
},*/
|
||||
},
|
||||
}, ]
|
||||
},
|
||||
|
||||
plugins: plugins,
|
||||
plugins: plugins,
|
||||
});
|
||||
|
@ -12,22 +12,22 @@ const conf = yaml.safeLoad(fs.readFileSync(path.join(__dirname, 'app/_config/web
|
||||
let themes = [];
|
||||
// add themes
|
||||
if (conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR) {
|
||||
const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
|
||||
const dir = path.resolve(__dirname, themeDir);
|
||||
const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
|
||||
const dir = path.resolve(__dirname, themeDir);
|
||||
|
||||
if (filesystem.existsSync(dir)) {
|
||||
filesystem.readdirSync(dir).forEach((file) => {
|
||||
filePath = path.join(themeDir, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
if (filesystem.existsSync(dir)) {
|
||||
filesystem.readdirSync(dir).forEach((file) => {
|
||||
filePath = path.join(themeDir, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
|
||||
if (stat && stat.isDirectory()) {
|
||||
themes.push(filePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (stat && stat.isDirectory()) {
|
||||
themes.push(filePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
|
||||
themes: themes,
|
||||
configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
|
||||
themes: themes,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user