tonyair/silverstripe-webpack
1
1
Fork 0
mirror of https://github.com/a2nt/silverstripe-webpack.git synced 2024-10-22 17:05:31 +02:00
Code Issues Projects Releases Wiki Activity

Spinner update

Browse Source
This commit is contained in:
Tony Air 2019-07-18 13:09:58 +07:00
parent 969847d47c
commit ecd0ab6749
20 changed files with 194 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/dist/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
app/client/dist/icons/.cache vendored
View File

@ -1 +1 @@
{"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"]}} {"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-192x192.png","/icons/android-chrome-256x256.png","/icons/android-chrome-384x384.png","/icons/android-chrome-96x96.png","/icons/android-chrome-512x512.png","/icons/apple-touch-icon-57x57.png","/icons/apple-touch-icon-72x72.png","/icons/apple-touch-icon-60x60.png","/icons/apple-touch-icon-114x114.png","/icons/apple-touch-icon-120x120.png","/icons/apple-touch-icon-76x76.png","/icons/apple-touch-icon-144x144.png","/icons/apple-touch-icon-167x167.png","/icons/apple-touch-icon-152x152.png","/icons/apple-touch-icon-180x180.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-750x1294.png","/icons/apple-touch-startup-image-768x1004.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_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"]}}

31
app/client/dist/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

3
app/client/src/js/_components/_ui.carousel.js
View File

@ -1,5 +1,8 @@
import $ from 'jquery'; import $ from 'jquery';
import 'hammerjs/hammer';
import 'jquery-hammerjs/jquery.hammer';
import Events from '../_events'; import Events from '../_events';
const CarouselUI = (($) => { const CarouselUI = (($) => {

72
app/client/src/js/_components/_ui.form.basics.js
View File

@ -1,6 +1,8 @@
import $ from 'jquery'; import $ from 'jquery';
import 'bootstrap-select/js/bootstrap-select'; import 'bootstrap-select/dist/js/bootstrap-select';
$.fn.selectpicker.Constructor.BootstrapVersion = '4';
import 'jquery.inputmask/dist/jquery.inputmask.bundle'; import 'jquery.inputmask/dist/jquery.inputmask.bundle';
import Events from "../_events"; import Events from "../_events";
@ -12,6 +14,8 @@ const FormBasics = (($) => {
const NAME = 'jsFormBasics'; const NAME = 'jsFormBasics';
const DATA_KEY = NAME; const DATA_KEY = NAME;
const $Html = $('html, body'); const $Html = $('html, body');
const W = window;
const D = document;
class FormBasics { class FormBasics {
@ -27,6 +31,7 @@ const FormBasics = (($) => {
const $fields = $element.find(Events.FORM_FIELDS); const $fields = $element.find(Events.FORM_FIELDS);
// init fields ui // init fields ui
$fields.each((i, el) => { $fields.each((i, el) => {
// skip some fields here
new FormFieldUI(el); new FormFieldUI(el);
}); });
@ -51,12 +56,12 @@ const FormBasics = (($) => {
// wrap options // wrap options
if (maxOptions > 1) { if (maxOptions > 1) {
$el.on('rendered.bs.select,changed.bs.select,refreshed.bs.select,loaded.bs.select', () => { const wrapOptions = () => {
if (!$el.val().length) { if (!$el.val().length) {
return true; return true;
} }
const $container = $el.parent().find('.filter-option-inner-inner'); const $container = $el.parent().find('.dropdown-toggle .filter-option');
const val = $container.text(); const val = $container.text();
const vals = val.split(separator); const vals = val.split(separator);
let html = ''; let html = '';
@ -67,7 +72,7 @@ const FormBasics = (($) => {
}); });
html += `<span class="option" data-val=${ $opt.attr('value') }>${ opt 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>`;
}); });
@ -87,26 +92,25 @@ const FormBasics = (($) => {
vals.splice(i, 1); vals.splice(i, 1);
$el.selectpicker('val', vals); $el.selectpicker('val', vals);
} }
wrapOptions();
}); });
}); };
$el.on('rendered.bs.select changed.bs.select refreshed.bs.select loaded.bs.select change', wrapOptions);
wrapOptions();
} }
// FIX: hidden picker
$el.selectpicker('render');
$el.selectpicker('refresh');
$el.selectpicker('toggle');
document.activeElement.blur();
window.scroll(0, 0);
//$el.selectpicker('show');
//$el.selectpicker('hide');
/*$el.parents('.field.dropdown').find('.dropdown-toggle').click();
$el.parents('.field.dropdown').find('.dropdown-toggle').click();
$el.parents('.field.dropdown').find('.dropdown-toggle').blur();*/
}); });
// FIX: missing conflicting 'bootstrap/js/dist/dropdown' with bootstrap-select/dist/js/bootstrap-select
$('[data-toggle="dropdown"]').on('click', (e) => {
$(e.currentTarget).siblings('.dropdown-menu').toggleClass('show');
});
$('.dropdown-menu a').on('click', (e) => {
$(e.currentTarget).parents('.dropdown-menu').removeClass('show');
});
// /FIX
$fields.each((e, el) => { $fields.each((e, el) => {
const $el = $(el); const $el = $(el);
@ -128,7 +132,14 @@ const FormBasics = (($) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
const $parent = $el.parents('.radio'); const $parent = $el.parents('.radio');
$parent.siblings('.radio').removeClass('checked'); $parent.siblings('.radio').each((i, el) => {
const $el = $(el);
if (!$el.find('input').is(':checked')) {
$el.removeClass('checked');
}
});
if ($el.is(':checked')) { if ($el.is(':checked')) {
$parent.addClass('checked'); $parent.addClass('checked');
} }
@ -152,7 +163,7 @@ const FormBasics = (($) => {
} }
static _jQueryInterface() { static _jQueryInterface() {
return this.each(function() { return this.each(() => {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this);
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY);
@ -173,18 +184,13 @@ const FormBasics = (($) => {
return FormBasics._jQueryInterface; return FormBasics._jQueryInterface;
}; };
const init = () => {
$('form').jsFormBasics();
};
// auto-apply // auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
$('form').each((i, el) => { init();
const $el = $(el);
// skip some forms
if ($el.hasClass('no-validation')) {
return true;
}
$el.jsFormBasics();
});
}); });
return FormBasics; return FormBasics;

10
app/client/src/js/_components/_ui.form.croppie.js
View File

@ -45,7 +45,7 @@ const CroppieUI = (($) => {
$el.append( $el.append(
'<div class="cropper-wrap"><div class="cropper-container"></div>' + '<div class="cropper-wrap"><div class="cropper-container"></div>' +
'<a href="#" class="btn-remove"><i class="fas fa-times"></i> Remove</a></div>' '<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
); );
//$el.append(ui.inputData); //$el.append(ui.inputData);
@ -68,7 +68,8 @@ const CroppieUI = (($) => {
this.readFile(e.currentTarget); this.readFile(e.currentTarget);
}); });
$el.find('.btn-remove').on('click', (e) => { ui.$btnRemove = $el.find('.btn-remove');
ui.$btnRemove.on('click', (e) => {
e.preventDefault(); e.preventDefault();
ui.uploadCrop.removeClass('ready'); ui.uploadCrop.removeClass('ready');
@ -79,6 +80,10 @@ const CroppieUI = (($) => {
ui.uploadCropWrap.hide(); ui.uploadCropWrap.hide();
}); });
if (ui.$el.find('img.croppie-image').length) {
ui.$btnRemove.show();
}
} }
readFile(input) { readFile(input) {
@ -97,6 +102,7 @@ const CroppieUI = (($) => {
ui.uploadCrop.show(); ui.uploadCrop.show();
ui.uploadCropWrap.show(); ui.uploadCropWrap.show();
ui.$btnRemove.show();
} }
reader.readAsDataURL(input.files[0]); reader.readAsDataURL(input.files[0]);

8
app/client/src/js/_components/_ui.form.datetime.js
View File

@ -46,7 +46,7 @@ const DatetimeUI = (($) => {
if ($el.hasClass('time') || $el.attr('type') === 'time') { if ($el.hasClass('time') || $el.attr('type') === 'time') {
$el.attr('readonly', 'true'); $el.attr('readonly', 'true');
$el.timepicker($.extend({ $el.timepicker($.extend({
defaultTime: $el.data('default-time'), snapToStep: true,
icons: { icons: {
up: 'fas fa-chevron-up', up: 'fas fa-chevron-up',
down: 'fas fa-chevron-down', down: 'fas fa-chevron-down',
@ -54,7 +54,11 @@ const DatetimeUI = (($) => {
}, $el.data())).on('show.timepicker', (e) => { }, $el.data())).on('show.timepicker', (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget);
const $dropdown = $Body.find('.bootstrap-timepicker-widget'); const $dropdown = $Body.find('.bootstrap-timepicker-widget');
$dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
if (!$dropdown.find('[data-action="clear"]').length) {
$dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
}
const $clearBtn = $dropdown.find('[data-action="clear"]'); const $clearBtn = $dropdown.find('[data-action="clear"]');
$clearBtn.on('click', (e) => { $clearBtn.on('click', (e) => {
e.preventDefault(); e.preventDefault();

2
app/client/src/js/_components/_ui.form.storage.js
View File

@ -83,7 +83,7 @@ const FormStorage = (($) => {
$element.data(DATA_KEY).clear(); $element.data(DATA_KEY).clear();
}); });
$element.find('button,[type="submit"],[type="clear"]').on('click', () => { $element.find('.btn-toolbar,.form-actions').children('button,[type="submit"],[type="clear"]').on('click', () => {
$element.data(DATA_KEY).clear(); $element.data(DATA_KEY).clear();
}); });

32
app/client/src/js/_components/_ui.form.validate.field.js
View File

@ -20,7 +20,7 @@ const FormValidateField = (($) => {
// prevent browsers checks (will do it using JS) // prevent browsers checks (will do it using JS)
$element.attr('novalidate', 'novalidate'); $element.attr('novalidate', 'novalidate');
$element.on('change', (e) => { $element.on('change focusout', (e) => {
ui.validate(false); ui.validate(false);
}); });
@ -45,19 +45,25 @@ const FormValidateField = (($) => {
let valid = true; let valid = true;
let msg = null; let msg = null;
const val = $el.val();
// browser checks + required // browser checks + required
if (!ui._element.checkValidity() || if (!ui._element.checkValidity() ||
($el.hasClass('required') && !$el.val().trim().length) ($el.hasClass('required') && (!val.length || !val.trim().length ||
ui.isHtml(val) && !$(val).text().length
))
) { ) {
valid = false; valid = false;
} }
// validate URL // validate URL
if ($el.hasClass('url') && $el.val().trim().length && !this.valideURL($el.val())) { if ($el.hasClass('url') && val.length && !this.valideURL(val)) {
valid = false; valid = false;
msg = 'URL must start with http:// or https://. For example: https://your-domain.com/'; msg = 'URL must start with http:// or https://. For example: https://your-domain.com/';
} }
this.removeError();
// extra checks // extra checks
if (extraChecks) { if (extraChecks) {
extraChecks.forEach((check) => { extraChecks.forEach((check) => {
@ -65,25 +71,27 @@ const FormValidateField = (($) => {
}); });
} }
this.removeError();
if (valid) { if (valid) {
return true; return true;
} }
setTimeout(() => { this.setError(scrollTo, msg);
this.setError(scrollTo, msg);
}, 500);
return false; return false;
} }
isHtml(str) {
const doc = new DOMParser().parseFromString(str, "text/html");
return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
}
valideURL(str) { valideURL(str) {
const pattern = new RegExp('^(https?:\\/\\/){1}' + // protocol const pattern = new RegExp('^(https?:\\/\\/){1}' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
return pattern.test(str); return pattern.test(str);
} }

5
app/client/src/js/_components/_ui.form.validate.js
View File

@ -31,6 +31,11 @@ const FormValidate = (($) => {
// init fields validation // init fields validation
$fields.each((i, el) => { $fields.each((i, el) => {
// skip some fields here
if ($(el).attr('role') === 'combobox') {
return;
}
new FormValidateField(el); new FormValidateField(el);
}); });

13
app/client/src/js/_components/_ui.video.preview.js
View File

@ -25,16 +25,19 @@ const VideoPreviewUI = (($) => {
ui.$_el.data(DATA_KEY, this); ui.$_el.data(DATA_KEY, this);
const href = ui.$_el.attr('href') || ui.$_el.data('href'); const href = ui.$_el.attr('href') || ui.$_el.data('href');
const YouTubeGetID = (url) => {
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
};
let video; let video;
if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) { if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
let video_id; let video_id;
if (video[1] === 'youtube' || video[1] === 'youtube-nocookie') { if (video[1] === 'youtube' || video[1] === 'youtube-nocookie' || video[1] === 'youtu') {
video_id = video[4]; video_id = YouTubeGetID(href);
}
if (video[1] === 'youtu') {
video_id = video[3];
} }
if (video[1] == 'vimeo') { if (video[1] == 'vimeo') {

19
app/client/src/js/_main.js
View File

@ -5,6 +5,9 @@ import $ from 'jquery';
import 'hammerjs/hammer'; import 'hammerjs/hammer';
import 'jquery-hammerjs/jquery.hammer'; import 'jquery-hammerjs/jquery.hammer';
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
//import Table from 'bootstrap-table/dist/bootstrap-table';
// Routie // Routie
import 'pouchdb/dist/pouchdb'; import 'pouchdb/dist/pouchdb';
import './_components/routes/index'; import './_components/routes/index';
@ -12,17 +15,21 @@ import './_components/routes/index';
import Events from './_events'; import Events from './_events';
import Spinner from './_components/_ui.spinner'; import Spinner from './_components/_ui.spinner';
import './_components/_ui.video.preview';
import './_components/_ui.carousel'; import './_components/_ui.carousel';
import './_components/_ui.menu'; import './_components/_ui.menu';
import FormBasics from './_components/_ui.form.basics'; import FormBasics from './_components/_ui.form.basics';
import FormDatetime from './_components/_ui.form.datetime'; //import FormToggleUI from './_components/_ui.form.fields.toggle';
//import FormDatetime from './_components/_ui.form.datetime';
import FormStepped from './_components/_ui.form.stepped'; import FormStepped from './_components/_ui.form.stepped';
import FormValidate from './_components/_ui.form.validate'; import FormValidate from './_components/_ui.form.validate';
import FormStorage from './_components/_ui.form.storage'; import FormStorage from './_components/_ui.form.storage';
//import FormCroppie from './_components/_ui.form.croppie'; //import FormCroppie from './_components/_ui.form.croppie';
import AjaxUI from './_components/_ui.ajax'; import AjaxUI from './_components/_ui.ajax';
import NoCaptcha from './_components/_ui.nocaptcha';
import SmoothScroll from 'smooth-scroll'; import SmoothScroll from 'smooth-scroll';
const smoothScroll = SmoothScroll(); const smoothScroll = SmoothScroll();
@ -145,7 +152,9 @@ const MainUI = (($) => {
$('a.offline').addClass('offline-available'); $('a.offline').addClass('offline-available');
} }
this.loadImages(); if (typeof AjaxUI !== 'undefined') {
this.loadImages();
}
// mark external links // mark external links
$('a.external,a[rel="external"]').attr('target', '_blank'); $('a.external,a[rel="external"]').attr('target', '_blank');
@ -340,6 +349,12 @@ const MainUI = (($) => {
MainUI.init(); MainUI.init();
}); });
$(W).on('beforeunload', () => {
Spinner.show(() => {
$Body.removeClass('loaded');
});
});
W.MainUI = MainUI; W.MainUI = MainUI;
return MainUI; return MainUI;

5
app/client/src/js/app.js
View File

@ -7,7 +7,10 @@ import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button'; import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/carousel'; import 'bootstrap/js/dist/carousel';
import 'bootstrap/js/dist/collapse'; import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
// conflicting with bootstrap-select/dist/js/bootstrap-select
//import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal'; import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip'; import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover'; import 'bootstrap/js/dist/popover';

8
app/client/src/scss/_components/_ui.carousel.scss
View File

@ -2,6 +2,14 @@
* Bootstrap carousel improvement * Bootstrap carousel improvement
*/ */
.carousel-item {
&.active {
display: flex !important;
justify-content: center;
align-items: flex-start;
}
}
.carousel-control-prev, .carousel-control-prev,
.carousel-control-next { .carousel-control-next {
z-index: 2; z-index: 2;

3
app/client/src/scss/_variables.scss
View File

@ -2,6 +2,9 @@
* Your custom variables * Your custom variables
*/ */
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1390px, xxxl: 1590px);
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px, xxxl: 1560px);
$font-family-base: "Lato", sans-serif; $font-family-base: "Lato", sans-serif;
$grid-gutter-height: 8rem; $grid-gutter-height: 8rem;

17
app/templates/Includes/First.ss Normal file
View File

@ -0,0 +1,17 @@
<%-- Upgrade your Browser notice --%>
<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
<%-- No JS enabled notice --%>
<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
<%-- Loading Spinner --%>
<div id="PageLoading">
<div class="loading-spinner">
<img src="favicon.ico" alt="{$SiteConfig.Title}" /><br/>
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
<br/><%t Page.LOADINGTEXT 'LOADING ..' %>
</div>
</div>
<%-- Site Wide Alert Message --%>
<% include SiteWideMessage %>

22
app/templates/Includes/MetaHead.ss
View File

@ -7,6 +7,28 @@ $MetaTags
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" />
<%-- OpenGraph --%>
<meta property="og:url" content="{$AbsoluteBaseURL}" />
<meta property="og:site_name" content="{$SiteConfig.Title}" />
<meta property="og:locale" content="$ContentLocale.ATT" />
<% if $MetaTitle %>
<meta property="og:title" content="{$SiteConfig.Title} - {$MetaTitle}" />
<meta property="og:image:alt" content="{$MetaTitle}" />
<% end_if %>
<% if $MetaDescription %>
<meta property="og:description" content="{$MetaDescription}" />
<% end_if %>
<% if $MetaImage %>
<meta property="og:image" content="{$MetaImage.Link}" />
<% end_if %>
<% if $FacebookAppID %>
<meta property="fb:app_id" content="{$FacebookAppID}" />
<% end_if %>
<meta property="og:type" content="<% if $OgType %>$OgType<% else %>article<% end_if %>" />
<%-- /OpenGraph --%>
<link rel="canonical" href="{$AbsoluteLink}" />
<link rel="author" type="text/plain" href="{$AbsoluteBaseURL}humans.txt" /> <link rel="author" type="text/plain" href="{$AbsoluteBaseURL}humans.txt" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="{$AbsoluteBaseURL}sitemap.xml" /> <link rel="sitemap" type="application/xml" title="Sitemap" href="{$AbsoluteBaseURL}sitemap.xml" />

5
app/templates/Includes/Prestyling.ss
View File

@ -1 +1,4 @@
<style>html,body{font-size:14px;margin:0;padding:0;background:#fff;color:#333}.bubblingG{width:78px;height:49px;margin:auto}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;background:rgba(255,255,255,.9);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.bubblingG span{display:inline-block;vertical-align:middle;width:10px;height:10px;margin:24px auto;background:#000;border-radius:49px;animation:bubblingG 1.5s infinite alternate}#bubblingG_1{animation-delay:0s}#bubblingG_2{animation-delay:.45s}#bubblingG_3{animation-delay:.9s}@keyframes bubblingG{0%{width:10px;height:10px;background-color:#000;transform:translateY(0)}100%{width:23px;height:23px;background-color:#fff;transform:translateY(-20px)}}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:9999;padding:.5rem 1rem;text-align:center;color:#fff;background:#FF0000}</style> <style>
body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;background:rgba(255,255,255,.9);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:9999}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:0.5rem 1rem;text-align:center;color:#fff;background:#FF0000}.loading-spinner{text-align:center}
.lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 0.6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 0.6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 0.6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0, 0)}100%{transform:translate(19px, 0)}}
</style>

12
app/templates/Page.ss
View File

@ -6,17 +6,7 @@
</head> </head>
<body oncontextmenu="return false;"<% with $SiteConfig %> data-default-lng="$Longitude" data-default-lat="$Latitude"<% end_with %>> <body oncontextmenu="return false;"<% with $SiteConfig %> data-default-lng="$Longitude" data-default-lat="$Latitude"<% end_with %>>
<%-- Upgrade your Browser notice --%> <% include First %>
<!--[if lt IE 10]><div class="main-bn"><a href="https://www.google.com/chrome/browser/desktop/" title="<%t Page.UPGRADEBROWSER 'Upgrade your browser' %>"><%t Page.OUTDATEDBROWSER 'You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.' %></a></div><![endif]-->
<%-- No JS enabled notice --%>
<noscript><div class="main-bn"><%t Page.JAVASCRIPTREQUIRED 'Please, enable javascript.' %></div></noscript>
<%-- Loading Spinner --%>
<div id="PageLoading"><div class="loading-spinner"><div class="bubblingG"><i id="bubblingG_1"></i><i id="bubblingG_2"></i><i id="bubblingG_3"></i></div><br/><%t Page.LOADINGTEXT 'LOADING ..' %></div></div>
<%-- Site Wide Alert Message --%>
<% include SiteWideMessage %>
<div class="wrapper"> <div class="wrapper">
<header id="Header" class="container"> <header id="Header" class="container">

10
composer.json
View File

@ -38,10 +38,12 @@
"phpunit/phpunit": "^5.7", "phpunit/phpunit": "^5.7",
"lekoala/silverstripe-debugbar": "dev-master" "lekoala/silverstripe-debugbar": "dev-master"
}, },
"repositories": [{ "repositories": [
"type": "vcs", {
"url": "https://github.com/a2nt/silverstripe-font-awesome" "type": "vcs",
}], "url": "https://github.com/a2nt/silverstripe-font-awesome"
}
],
"extra": { "extra": {
"expose": [ "expose": [
"app/client/dist" "app/client/dist"