From 1c037ec2142d9e612cbcb7d31f45d9620f7d946c Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 28 Oct 2022 20:04:15 +0200 Subject: [PATCH] wip #5468 @2 --- app/Fields/FluidbookLinkEditor/Depth.php | 2 + app/SubForms/Link/Base.php | 16 +++--- resources/linkeditor/js/linkeditor.form.js | 15 ++++-- resources/linkeditor/js/linkeditor.js | 1 + resources/linkeditor/js/linkeditor.links.js | 38 +++++++++++++- resources/linkeditor/style/form.sass | 56 +++++++++++++++++++-- resources/linkeditor/style/style.sass | 3 ++ resources/linkeditor/style/variables.sass | 3 +- 8 files changed, 117 insertions(+), 17 deletions(-) diff --git a/app/Fields/FluidbookLinkEditor/Depth.php b/app/Fields/FluidbookLinkEditor/Depth.php index 852224060..f5459fbc9 100644 --- a/app/Fields/FluidbookLinkEditor/Depth.php +++ b/app/Fields/FluidbookLinkEditor/Depth.php @@ -6,6 +6,8 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class Depth extends SelectFromArray { + protected $_ajax = false; + public function getOptions() { return [ diff --git a/app/SubForms/Link/Base.php b/app/SubForms/Link/Base.php index 5d1a18411..3180d0204 100644 --- a/app/SubForms/Link/Base.php +++ b/app/SubForms/Link/Base.php @@ -174,25 +174,25 @@ class Base extends Form public function addAppearanceFields() { - $this->addField('header_settings', FormSection::class, __('Apparence')); + $this->addField('header_appearance', FormSection::class, __('Apparence')); } public function addPositionFields() { - $this->addField('header_settings', FormSection::class, __('Disposition')); - $this->addField('x', Number::class, 'X'); - $this->addField('y', Number::class, 'Y'); - $this->addField('w', Number::class, 'W', ['min' => 0]); - $this->addField('h', Number::class, 'H', ['min' => 0]); + $this->addField('header_disposition', FormSection::class, __('Disposition')); + $this->addField('x', Text::class, 'X'); + $this->addField('y', Text::class, 'Y'); + $this->addField('w', Text::class, 'W'); + $this->addField('h', Text::class, 'H'); if ($this->_displayedOnFluidbook) { - $this->addField('rot', Number::class, __('Rotation'), ['min' => 0, 'max' => 360, 'suffix' => '°']); + $this->addField('rot', Text::class, __('Rotation'), ['suffix' => '°']); $this->addField('zindex', Depth::class, __('Profondeur')); } } public function addExtraFields() { - $this->addField('header_settings', FormSection::class, __('Autres paramètres')); + $this->addField('header_extra', FormSection::class, __('Autres paramètres')); } public function getType() diff --git a/resources/linkeditor/js/linkeditor.form.js b/resources/linkeditor/js/linkeditor.form.js index bb4d283a9..6e5b744c1 100644 --- a/resources/linkeditor/js/linkeditor.form.js +++ b/resources/linkeditor/js/linkeditor.form.js @@ -1,9 +1,18 @@ function LinkeditorForm(linkeditor) { this.linkeditor = linkeditor; - + this.init(); } LinkeditorForm.prototype = { + init: function () { + $(document).on('focus', "input[type=text],input[type=email],input[type=url],input[type=number],textarea", function () { + var $this = $(this); + setTimeout(function () { + $this.select(); + }, 1); + }); + }, + initSelect2: function () { // trigger select2 for each untriggered select2 box $('#linkeditor-panel-form .select2_from_array:not(.init)').each(function (i, obj) { @@ -12,9 +21,7 @@ LinkeditorForm.prototype = { }; if ($(this).is('[data-ajax]')) { options.ajax = { - url: 'select2/' + $(this).data('ajax'), - dataType: 'json', - delay: 250, + url: 'select2/' + $(this).data('ajax'), dataType: 'json', delay: 250, }; } if ($(this).is('[data-allow-html="1"]')) { diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 6434454ad..fa3d13346 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -231,6 +231,7 @@ LinkEditor.prototype = { }); $(e).css(css).attr('fb-update', '0'); }); + this.links.updateFormData(); }, fluidbookTo: function (dim, name, rect) { diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index d10b48e83..316c64b12 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -305,18 +305,52 @@ LinkeditorLinks.prototype = { var link = $(links).eq(0); var type = $(link).attr('fb-type'); var form = $("#linkeditor-form-template-" + type).clone(false); + $(form).attr('id', null); + $(form).data('link', link); + this.updateFormData(form); container.append(form); // Reset select2 fields $(form).find('select.select2_from_array.init').each(function () { - console.log(this); $(this).removeClass('init'); }); this.linkeditor.form.initSelect2(); }, + updateFormData: function (form) { + try { + if (form === undefined) { + form = $('#linkeditor-panel-form form'); + if (form.length === 0) { + return; + } + } + var link = $(form).data('link'); + if (link === undefined || link === null) { + return; + } + } catch (e) { + return; + } + var types = {x: 'dimension', y: 'dimension', w: 'dimension', h: 'dimension', rot: 'dimension'} + var map = {top: 'y', left: 'x', width: 'w', height: 'h'}; + $.each(this.getLinkData(link), function (k, v) { + if (map[k] !== undefined) { + k = map[k]; + } + var type = 'string'; + if (types[k] !== undefined) { + type = types[k]; + } + if (type === 'dimension') { + v = Math.round(parseFloat(v) * 100000) / 100000; + } + $(form).find('[name=' + k + ']').val(v); + }); + }, + checkLastSelectedLink: function () { if (this.lastSelectedLink === null || $(this.lastSelectedLink).length === 0) { return; @@ -354,6 +388,7 @@ LinkeditorLinks.prototype = { $this.updateLinkData($(this).attr('fb-uid'), data); }); this.linkeditor.updateFBElements(); + this.updateFormData(); }, getLinksOfPage: function (p) { @@ -441,6 +476,7 @@ LinkeditorLinks.prototype = { let link = this.addLink(data); this.deselectAllLinks(); this.selectLink($(link)); + this.updateFormData(); return $(link); }, diff --git a/resources/linkeditor/style/form.sass b/resources/linkeditor/style/form.sass index 4cd6926e2..6d8ac9ea5 100644 --- a/resources/linkeditor/style/form.sass +++ b/resources/linkeditor/style/form.sass @@ -5,10 +5,60 @@ .linkeditor-linktype &::before display: inline-block - width: 20px - height: 20px + width: 12px + height: 12px border-radius: 2px - margin: 0 10px 0 0 + margin: 5px 10px 0 0 content: "" vertical-align: top position: relative + +.select2-container--bootstrap + font-size: 12px + font-weight: 500 + color: #5D5D5D + + hr + border: 0 + height: 1px + background-color: #d5d5d5 + margin: 5px 0 + + &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection + box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) + + +#linkeditor-panel-form + padding: 12px + + h3 + font-size: 16px + color: #5D5D5D + text-transform: uppercase + padding-top: 15px + border-top: 1px solid #5d5d5d + margin-top: 20px + + input, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"] + font-family: $font + height: 34px + padding: 8px + width: 100% + font-weight: 500 + color: #5D5D5D + border: 1px solid #D5D5D5 + border-radius: 3px + font-size: 12px + transition: box-shadow 500ms, border 500ms + appearance: none + + &:focus + border: 1px solid #ccc + box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) + + label + display: block + font-weight: 600 + font-size: 12px + color: #5D5D5D + margin: 8px 0 5px 0 diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass index ccd989981..471eb9a00 100644 --- a/resources/linkeditor/style/style.sass +++ b/resources/linkeditor/style/style.sass @@ -5,6 +5,9 @@ margin: 0 padding: 0 box-sizing: border-box + &:focus + outline: 0 + body font-family: "Montserrat", sans-serif diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass index fdf756262..cfaf64cb3 100644 --- a/resources/linkeditor/style/variables.sass +++ b/resources/linkeditor/style/variables.sass @@ -1,3 +1,4 @@ +$font: Montserrat, sans-serif $font-size: 16px $sidebar-icons-width: 46px $sidebar-handle-width: 3px @@ -8,4 +9,4 @@ $toolbar-height: 40px $toolbar-color: #5d5d5d $toolbar-color-dark: #bbb -$panel-background: #ebecee +$panel-background: #fcfcfc -- 2.39.5