diff --git a/site/plugins/form/assets/src/flatpickr/flatpickr.js b/site/plugins/form/assets/src/flatpickr/flatpickr.js new file mode 100644 index 00000000..68e48e20 --- /dev/null +++ b/site/plugins/form/assets/src/flatpickr/flatpickr.js @@ -0,0 +1,5 @@ +flatpickr(".js-datetimepicker", { + enableTime: true, + dateFormat: $('input[name=flatpickr-date-format]').val(), + locale: $('input[name=flatpickr-locale]').val() +}); diff --git a/site/plugins/form/assets/src/select-media/select-media.js b/site/plugins/form/assets/src/select-media/select-media.js new file mode 100644 index 00000000..05aa3dce --- /dev/null +++ b/site/plugins/form/assets/src/select-media/select-media.js @@ -0,0 +1 @@ +$('.js-select-media').select2(); diff --git a/site/plugins/form/assets/src/select-routable/select-routable.js b/site/plugins/form/assets/src/select-routable/select-routable.js new file mode 100644 index 00000000..d2c98974 --- /dev/null +++ b/site/plugins/form/assets/src/select-routable/select-routable.js @@ -0,0 +1 @@ +$('.js-select-routable').select2(); diff --git a/site/plugins/form/assets/src/select-tags/select-tags.js b/site/plugins/form/assets/src/select-tags/select-tags.js new file mode 100644 index 00000000..98394097 --- /dev/null +++ b/site/plugins/form/assets/src/select-tags/select-tags.js @@ -0,0 +1,7 @@ +$('.js-select-tags').select2({tags: true, multiple: true, tokenSeparators: [',', ' ']}); +$('.js-select-tags').on('change', function (e) { + $('.js-select-tags').each(function() { + var name = $(this).attr('data-name'); + $('input[name='+name+']').val($(this).val().toString()); + }); +}); diff --git a/site/plugins/form/assets/src/select-template/select-template.js b/site/plugins/form/assets/src/select-template/select-template.js new file mode 100644 index 00000000..c427f129 --- /dev/null +++ b/site/plugins/form/assets/src/select-template/select-template.js @@ -0,0 +1 @@ +$('.js-select-template').select2(); diff --git a/site/plugins/form/assets/src/select-visibility/select-visibility.js b/site/plugins/form/assets/src/select-visibility/select-visibility.js new file mode 100644 index 00000000..956bdb08 --- /dev/null +++ b/site/plugins/form/assets/src/select-visibility/select-visibility.js @@ -0,0 +1 @@ +$('.js-select-visibility').select2(); diff --git a/site/plugins/form/assets/src/select/select.js b/site/plugins/form/assets/src/select/select.js new file mode 100644 index 00000000..0e840ba5 --- /dev/null +++ b/site/plugins/form/assets/src/select/select.js @@ -0,0 +1 @@ +$('.js-select').select2(); diff --git a/site/plugins/form/assets/src/tabs/tabs.js b/site/plugins/form/assets/src/tabs/tabs.js new file mode 100644 index 00000000..19cd4f18 --- /dev/null +++ b/site/plugins/form/assets/src/tabs/tabs.js @@ -0,0 +1,4 @@ +$(".tabs__nav").on("click", ".tabs__nav__link:not(.tabs__nav__link--active)", function () { + $(this).addClass("tabs__nav__link--active").siblings().removeClass("tabs__nav__link--active"); + $("div.tabs__content").removeClass("tabs__content--active").eq($(this).index()).addClass("tabs__content--active"); +}); diff --git a/site/plugins/form/assets/src/trumbowyg/trumbowyg.js b/site/plugins/form/assets/src/trumbowyg/trumbowyg.js new file mode 100644 index 00000000..7e0d084b --- /dev/null +++ b/site/plugins/form/assets/src/trumbowyg/trumbowyg.js @@ -0,0 +1,36 @@ +$.trumbowyg.svgPath = $('input[name=trumbowyg-icons-path]').val(); +$('.js-html-editor').trumbowyg({ + btnsDef: { + // Customizables dropdowns + image: { + dropdown: [ + 'insertImage', 'noembed' + ], + ico: 'insertImage' + } + }, + btns: [ + [ + 'undo', 'redo' + ], // Only supported in Blink browsers + ['formatting'], + [ + 'strong', 'em', 'del' + ], + ['link'], + ['image'], + [ + 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull' + ], + [ + 'unorderedList', 'orderedList' + ], + ['table'], + ['removeformat'], + ['fullscreen'], + ['viewHTML'] + ], + lang: $('input[name=trumbowyg-locale]').val(), + autogrow: false, + removeformatPasted: true +}); diff --git a/site/plugins/form/gulpfile.js b/site/plugins/form/gulpfile.js new file mode 100644 index 00000000..0a040e1f --- /dev/null +++ b/site/plugins/form/gulpfile.js @@ -0,0 +1,185 @@ +const gulp = require('gulp'); +const tailwindConfig = "tailwind.config.js"; + +/** + * Task: gulp vendor-css + */ + gulp.task("vendor-css", function() { + const concat = require('gulp-concat'); + const csso = require('gulp-csso'); + const autoprefixer = require('gulp-autoprefixer'); + + return gulp + .src([ + // Select2 + 'node_modules/select2/dist/css/select2.min.css', + + // Swal2 + 'node_modules/sweetalert2/dist/sweetalert2.min.css', + + // AnimateCSS + 'node_modules/animate.css/animate.min.css', + + // Flatpickr + 'node_modules/flatpickr/dist/flatpickr.min.css', + + // Trumbowyg + 'node_modules/trumbowyg/dist/ui/trumbowyg.min.css', + 'node_modules/trumbowyg/dist/plugins/table/ui/trumbowyg.table.css', + + // CodeMirror + 'node_modules/codemirror/lib/codemirror.css', + 'node_modules/codemirror/theme/elegant.css']) + .pipe(autoprefixer({ + overrideBrowserslist: [ + "last 1 version" + ], + cascade: false + })) + .pipe(csso()) + .pipe(concat('vendor-build.min.css')) + .pipe(gulp.dest("assets/dist/css/")); + }); + + +/** + * Task: gulp admin-panel-css + */ +gulp.task("admin-panel-css", function() { + const atimport = require("postcss-import"); + const postcss = require("gulp-postcss"); + const tailwindcss = require("tailwindcss"); + const purgecss = require("gulp-purgecss"); + const concat = require('gulp-concat'); + const csso = require('gulp-csso'); + const sourcemaps = require('gulp-sourcemaps'); + const autoprefixer = require('gulp-autoprefixer'); + + return gulp + .src([ + // Admin Panel CSS + 'assets/src/admin-panel.css']) + .pipe(postcss([atimport(), tailwindcss(tailwindConfig)])) + .pipe( + purgecss({ + content: ["../form/templates/**/*.html", "templates/**/*.html"], + extractors: [ + { + extractor: TailwindExtractor = (content) => { + return content.match(/[\w-/:]+(?{{ properties.help }} {% endif %} + +{% if registry.flextype.locale == 'en_US' %} + {% set flatpickr_locale = 'en' %} +{% else %} + {% set flatpickr_locale = registry.flextype.locale|lower|slice(0, 2) %} +{% endif %} + +{% if flatpickr_locale != 'en' %} + {% set flatpickr_locale_js = url() ~ '/site/plugins/admin/assets/dist/lang/flatpickr/l10n/' ~ flatpickr_locale ~ '.js' %} + {% do assets.add('js', flatpickr_locale_js, 'admin', 2) %} +{% endif %} + +{% set flatpickr_js = url() ~ '/site/plugins/form/assets/src/flatpickr/flatpickr.js' %} +{% do assets.add('js', flatpickr_js, 'admin', 3) %} + + + diff --git a/site/plugins/form/templates/fields/html/field.html b/site/plugins/form/templates/fields/html/field.html index 94965145..99e45d2a 100644 --- a/site/plugins/form/templates/fields/html/field.html +++ b/site/plugins/form/templates/fields/html/field.html @@ -5,3 +5,19 @@ {{ properties.help }} {% endif %} + +{% if registry.flextype.locale == 'en_US' %} + {% set trumbowyg_locale = 'en' %} +{% else %} + {% set trumbowyg_locale = registry.flextype.locale|lower|slice(0, 2) %} +{% endif %} +{% if trumbowyg_locale != 'en' %} + {% set trumbowyg_locale_js = url() ~ '/site/plugins/admin/assets/dist/lang/trumbowyg/langs/' ~ trumbowyg_locale ~ '.min.js' %} + {% do assets.add('js', trumbowyg_locale_js, 'admin', 2) %} +{% endif %} + +{% set trumbowyg_js = url() ~ '/site/plugins/form/assets/src/trumbowyg/trumbowyg.js' %} +{% do assets.add('js', trumbowyg_js, 'admin', 2) %} + + + diff --git a/site/plugins/form/templates/fields/select-media/field.html b/site/plugins/form/templates/fields/select-media/field.html index 55f1e5a1..f03fa826 100644 --- a/site/plugins/form/templates/fields/select-media/field.html +++ b/site/plugins/form/templates/fields/select-media/field.html @@ -1,7 +1,7 @@ {% set media_files = filesystem_list_contents(PATH_UPLOADS ~ '/entries/' ~ query.id ~ '/') %}
- {% for media_file in media_files %} {% if media_file.extension in registry.plugins.admin.settings.entries.media.accept_file_types %} @@ -12,3 +12,6 @@ {{ properties.help }} {% endif %}
+ +{% set select_media_js = url() ~ '/site/plugins/form/assets/src/select-media/select-media.js' %} +{% do assets.add('js', select_media_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/fields/select-routable/field.html b/site/plugins/form/templates/fields/select-routable/field.html index 1cb3ddab..5ba17d0b 100644 --- a/site/plugins/form/templates/fields/select-routable/field.html +++ b/site/plugins/form/templates/fields/select-routable/field.html @@ -1,7 +1,7 @@ {% set options = {1: tr('admin_yes'), 0: tr('admin_no')} %}
- {% for key, value in options %} {% endfor %} @@ -10,3 +10,6 @@ {{ properties.help }} {% endif %}
+ +{% set select_routable_js = url() ~ '/site/plugins/form/assets/src/select-routable/select-routable.js' %} +{% do assets.add('js', select_routable_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/fields/select-template/field.html b/site/plugins/form/templates/fields/select-template/field.html index ca2ec091..17ec1f38 100644 --- a/site/plugins/form/templates/fields/select-template/field.html +++ b/site/plugins/form/templates/fields/select-template/field.html @@ -1,7 +1,7 @@ {% set templates = filesystem_list_contents(PATH_THEMES ~ '/' ~ registry.flextype.theme ~ '/templates/') %}
- {% for template in templates %} {% if template.extension == 'html'%} @@ -12,3 +12,6 @@ {{ properties.help }} {% endif %}
+ +{% set select_template_js = url() ~ '/site/plugins/form/assets/src/select-template/select-template.js' %} +{% do assets.add('js', select_template_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/fields/select-visibility/field.html b/site/plugins/form/templates/fields/select-visibility/field.html index 3a536a97..81334a08 100644 --- a/site/plugins/form/templates/fields/select-visibility/field.html +++ b/site/plugins/form/templates/fields/select-visibility/field.html @@ -1,7 +1,7 @@ {% set options = {'draft': tr('admin_entries_draft'), 'visible': tr('admin_entries_visible'), 'hidden': tr('admin_entries_hidden')} %}
- {% for key, value in options %} {% endfor %} @@ -10,3 +10,6 @@ {{ properties.help }} {% endif %}
+ +{% set select_visibility_js = url() ~ '/site/plugins/form/assets/src/select-visibility/select-visibility.js' %} +{% do assets.add('js', select_visibility_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/fields/select/field.html b/site/plugins/form/templates/fields/select/field.html index 62d2998f..ac92fa67 100644 --- a/site/plugins/form/templates/fields/select/field.html +++ b/site/plugins/form/templates/fields/select/field.html @@ -9,3 +9,6 @@ {{ properties.help }} {% endif %} + +{% set select_js = url() ~ '/site/plugins/form/assets/src/select/select.js' %} +{% do assets.add('js', select_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/fields/tags/field.html b/site/plugins/form/templates/fields/tags/field.html index 435cf80d..617c9305 100644 --- a/site/plugins/form/templates/fields/tags/field.html +++ b/site/plugins/form/templates/fields/tags/field.html @@ -1,7 +1,7 @@ {% set field_value = field_value|split(',') %}
- {% for key, value in field_value %} {% endfor %} @@ -11,3 +11,6 @@ {{ properties.help }} {% endif %}
+ +{% set select_tags_js = url() ~ '/site/plugins/form/assets/src/select-tags/select-tags.js' %} +{% do assets.add('js', select_tags_js, 'admin', 2) %} diff --git a/site/plugins/form/templates/form.html b/site/plugins/form/templates/form.html index e2a58348..c23e45d3 100644 --- a/site/plugins/form/templates/form.html +++ b/site/plugins/form/templates/form.html @@ -3,6 +3,10 @@ {% if fieldset.sections %} + + {% set tabs_js = url() ~ '/site/plugins/form/assets/src/tabs/tabs.js' %} + {% do assets.add('js', tabs_js, 'admin', 2) %} +