mirror of
https://github.com/flextype/flextype.git
synced 2025-08-16 10:04:21 +02:00
feat(form-plugin): add ability to render forms with tabs sections and without tabs sections. #412
next round of total refactoring
This commit is contained in:
Awilum
5
site/plugins/form/assets/src/flatpickr/flatpickr.js
Normal file
5
site/plugins/form/assets/src/flatpickr/flatpickr.js
Normal file
@@ -0,0 +1,5 @@
|
||||
flatpickr(".js-datetimepicker", {
|
||||
enableTime: true,
|
||||
dateFormat: $('input[name=flatpickr-date-format]').val(),
|
||||
locale: $('input[name=flatpickr-locale]').val()
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
$('.js-select-media').select2();
|
||||
@@ -0,0 +1 @@
|
||||
$('.js-select-routable').select2();
|
||||
7
site/plugins/form/assets/src/select-tags/select-tags.js
Normal file
7
site/plugins/form/assets/src/select-tags/select-tags.js
Normal file
@@ -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());
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
$('.js-select-template').select2();
|
||||
@@ -0,0 +1 @@
|
||||
$('.js-select-visibility').select2();
|
||||
1
site/plugins/form/assets/src/select/select.js
Normal file
1
site/plugins/form/assets/src/select/select.js
Normal file
@@ -0,0 +1 @@
|
||||
$('.js-select').select2();
|
||||
4
site/plugins/form/assets/src/tabs/tabs.js
Normal file
4
site/plugins/form/assets/src/tabs/tabs.js
Normal file
@@ -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");
|
||||
});
|
||||
36
site/plugins/form/assets/src/trumbowyg/trumbowyg.js
Normal file
36
site/plugins/form/assets/src/trumbowyg/trumbowyg.js
Normal file
@@ -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
|
||||
});
|
||||
185
site/plugins/form/gulpfile.js
Normal file
185
site/plugins/form/gulpfile.js
Normal file
@@ -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-/:]+(?<!:)/g) || [];
|
||||
},
|
||||
extensions: ["html"]
|
||||
}
|
||||
]
|
||||
})
|
||||
)
|
||||
.pipe(autoprefixer({
|
||||
overrideBrowserslist: [
|
||||
"last 1 version"
|
||||
],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(csso())
|
||||
.pipe(concat('admin-panel-build.min.css'))
|
||||
.pipe(gulp.dest("assets/dist/css/"));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp vendor-js
|
||||
*/
|
||||
gulp.task('vendor-js', function(){
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const concat = require('gulp-concat');
|
||||
|
||||
return gulp.src([ // jQuery
|
||||
'node_modules/jquery/dist/jquery.min.js',
|
||||
|
||||
// Select2
|
||||
'node_modules/select2/dist/js/select2.min.js',
|
||||
|
||||
// Swal2
|
||||
'node_modules/sweetalert2/dist/sweetalert2.min.js',
|
||||
|
||||
// ParsleyJS Form Validatator
|
||||
'node_modules/parsleyjs/dist/parsley.min.js',
|
||||
|
||||
// SpeakingURL
|
||||
'node_modules/speakingurl/speakingurl.min.js',
|
||||
|
||||
// Popper
|
||||
'node_modules/popper.js/dist/umd/popper.min.js',
|
||||
|
||||
// Tippy
|
||||
'node_modules/tippy.js/dist/tippy-bundle.iife.min.js',
|
||||
|
||||
// Clipboard
|
||||
'node_modules/clipboard/dist/clipboard.min.js',
|
||||
|
||||
// Flatpickr
|
||||
'node_modules/flatpickr/dist/flatpickr.min.js',
|
||||
|
||||
// Trumbowyg
|
||||
'node_modules/trumbowyg/dist/trumbowyg.min.js',
|
||||
'node_modules/trumbowyg/dist/plugins/noembed/trumbowyg.noembed.min.js',
|
||||
'node_modules/trumbowyg/dist/plugins/table/trumbowyg.table.min.js',
|
||||
|
||||
// CodeMirror
|
||||
'node_modules/codemirror/lib/codemirror.js',
|
||||
'node_modules/codemirror/mode/htmlmixed/htmlmixed.js',
|
||||
'node_modules/codemirror/mode/xml/xml.js',
|
||||
'node_modules/codemirror/mode/javascript/javascript.js',
|
||||
'node_modules/codemirror/mode/php/php.js',
|
||||
'node_modules/codemirror/mode/clike/clike.js',
|
||||
'node_modules/codemirror/mode/yaml/yaml.js'
|
||||
])
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(concat('admin-panel-build.min.js'))
|
||||
.pipe(sourcemaps.write())
|
||||
.pipe(gulp.dest('assets/dist/js/'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp trumbowyg-fonts
|
||||
*/
|
||||
gulp.task('trumbowyg-fonts', function(){
|
||||
return gulp.src(['node_modules/trumbowyg/dist/ui/icons.svg'])
|
||||
.pipe(gulp.dest('assets/dist/fonts/trumbowyg'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp trumbowyg-langs
|
||||
*/
|
||||
gulp.task('trumbowyg-langs', function(){
|
||||
return gulp.src(['node_modules/trumbowyg/dist/*langs/**/*'])
|
||||
.pipe(gulp.dest('assets/dist/lang/trumbowyg'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp flatpickr-langs
|
||||
*/
|
||||
gulp.task('flatpickr-langs', function(){
|
||||
return gulp.src(['node_modules/flatpickr/dist/*l10n/**/*'])
|
||||
.pipe(gulp.dest('assets/dist/lang/flatpickr'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp fontawesome-icons
|
||||
*/
|
||||
gulp.task('fontawesome-icons', function(){
|
||||
return gulp.src(['node_modules/@fortawesome/fontawesome-free/svgs/**/*'])
|
||||
.pipe(gulp.dest('assets/dist/fontawesome/svgs'));
|
||||
});
|
||||
|
||||
/**
|
||||
* Task: gulp default
|
||||
*/
|
||||
gulp.task('default', gulp.series(
|
||||
'fontawesome-icons', 'trumbowyg-fonts', 'trumbowyg-langs', 'flatpickr-langs', 'vendor-css', 'admin-panel-css', 'vendor-js'
|
||||
));
|
||||
|
||||
/**
|
||||
* Task: gulp watch
|
||||
*/
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch(["../form/templates/**/*.html", "templates/**/*.html", "assets/src/"], gulp.series('vendor-css', 'admin-panel-css'));
|
||||
});
|
||||
42
site/plugins/form/package.json
Normal file
42
site/plugins/form/package.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "Form",
|
||||
"version": "0.9.7",
|
||||
"description": "Form plugin for Flextype",
|
||||
"homepage": "http://flextype.org",
|
||||
"author": "Sergey Romanenko",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"flextype",
|
||||
"cms",
|
||||
"flat cms",
|
||||
"flatfile cms",
|
||||
"css",
|
||||
"html"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/flextype/flextype/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fullhuman/postcss-purgecss": "^2.0.6",
|
||||
"animate.css": "^3.7.2",
|
||||
"codemirror": "~5.51.0",
|
||||
"flatpickr": "^4.6.3",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-csso": "^4.0.1",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-purgecss": "^2.0.6",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"jquery": "^3.4.1",
|
||||
"parsleyjs": "^2.9.2",
|
||||
"postcss-import": "^12.0.1",
|
||||
"select2": "^4.0.13",
|
||||
"speakingurl": "^14.0.1",
|
||||
"sweetalert2": "^9.7.2",
|
||||
"tailwindcss": "^1.2.0",
|
||||
"tippy.js": "^5.2.1",
|
||||
"clipboard": "~2.0.4",
|
||||
"trumbowyg": "~2.21.0"
|
||||
}
|
||||
}
|
||||
@@ -5,3 +5,20 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% 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) %}
|
||||
|
||||
<input type="hidden" name="flatpickr-date-format" value="{{ registry.flextype.date_format }}">
|
||||
<input type="hidden" name="flatpickr-locale" value="{{ flatpickr_locale }}">
|
||||
|
||||
@@ -5,3 +5,19 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% 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) %}
|
||||
|
||||
<input type="hidden" name="trumbowyg-icons-path" value="{{ url() }}/site/plugins/admin/assets/dist/fonts/trumbowyg/icons.svg">
|
||||
<input type="hidden" name="trumbowyg-locale" value="{{ trumbowyg_locale }}">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set media_files = filesystem_list_contents(PATH_UPLOADS ~ '/entries/' ~ query.id ~ '/') %}
|
||||
<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
|
||||
<label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
|
||||
<select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
|
||||
<select class="form-control {{ properties.class }} js-select-media" name="{{ field_name }}">
|
||||
{% for media_file in media_files %}
|
||||
{% if media_file.extension in registry.plugins.admin.settings.entries.media.accept_file_types %}
|
||||
<option value="{{ template.basename }}" {% if media_file.basename == field_value %} selected="selected" {% endif %}>{{ media_file.basename }}</option>
|
||||
@@ -12,3 +12,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_media_js = url() ~ '/site/plugins/form/assets/src/select-media/select-media.js' %}
|
||||
{% do assets.add('js', select_media_js, 'admin', 2) %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set options = {1: tr('admin_yes'), 0: tr('admin_no')} %}
|
||||
<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
|
||||
<label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
|
||||
<select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
|
||||
<select class="form-control {{ properties.class }} js-select-routable" name="{{ field_name }}">
|
||||
{% for key, value in options %}
|
||||
<option value="{{ key }}" {% if key == field_value %} selected="selected" {% endif %}>{{ value }}</option>
|
||||
{% endfor %}
|
||||
@@ -10,3 +10,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_routable_js = url() ~ '/site/plugins/form/assets/src/select-routable/select-routable.js' %}
|
||||
{% do assets.add('js', select_routable_js, 'admin', 2) %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set templates = filesystem_list_contents(PATH_THEMES ~ '/' ~ registry.flextype.theme ~ '/templates/') %}
|
||||
<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
|
||||
<label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
|
||||
<select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
|
||||
<select class="form-control {{ properties.class }} js-select-template" name="{{ field_name }}">
|
||||
{% for template in templates %}
|
||||
{% if template.extension == 'html'%}
|
||||
<option value="{{ template.basename }}" {% if template.basename == field_value %} selected="selected" {% endif %}>{{ template.basename }}</option>
|
||||
@@ -12,3 +12,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_template_js = url() ~ '/site/plugins/form/assets/src/select-template/select-template.js' %}
|
||||
{% do assets.add('js', select_template_js, 'admin', 2) %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set options = {'draft': tr('admin_entries_draft'), 'visible': tr('admin_entries_visible'), 'hidden': tr('admin_entries_hidden')} %}
|
||||
<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
|
||||
<label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
|
||||
<select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
|
||||
<select class="form-control {{ properties.class }} js-select-visibility" name="{{ field_name }}">
|
||||
{% for key, value in options %}
|
||||
<option value="{{ key }}" {% if key == field_value %} selected="selected" {% endif %}>{{ value }}</option>
|
||||
{% endfor %}
|
||||
@@ -10,3 +10,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_visibility_js = url() ~ '/site/plugins/form/assets/src/select-visibility/select-visibility.js' %}
|
||||
{% do assets.add('js', select_visibility_js, 'admin', 2) %}
|
||||
|
||||
@@ -9,3 +9,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_js = url() ~ '/site/plugins/form/assets/src/select/select.js' %}
|
||||
{% do assets.add('js', select_js, 'admin', 2) %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% set field_value = field_value|split(',') %}
|
||||
<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
|
||||
<label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
|
||||
<select class="form-control js-tags {{ properties.class }}" data-name="{{ field_name }}" multiple="multiple">
|
||||
<select class="form-control js-select-tags {{ properties.class }}" data-name="{{ field_name }}" multiple="multiple">
|
||||
{% for key, value in field_value %}
|
||||
<option value="{{ value|trim }}" selected="selected">{{ value|trim }}</option>
|
||||
{% endfor %}
|
||||
@@ -11,3 +11,6 @@
|
||||
<small>{{ properties.help }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% set select_tags_js = url() ~ '/site/plugins/form/assets/src/select-tags/select-tags.js' %}
|
||||
{% do assets.add('js', select_tags_js, 'admin', 2) %}
|
||||
|
||||
@@ -3,6 +3,10 @@
|
||||
<input type="hidden" id="action" name="action" value="save-form">
|
||||
|
||||
{% if fieldset.sections %}
|
||||
|
||||
{% set tabs_js = url() ~ '/site/plugins/form/assets/src/tabs/tabs.js' %}
|
||||
{% do assets.add('js', tabs_js, 'admin', 2) %}
|
||||
|
||||
<nav class="tabs__nav w-full">
|
||||
<div class="flex bg-dark text-white">
|
||||
{% for key, section in fieldset.sections %}
|
||||
|
||||
Reference in New Issue
Block a user