Implement disabled support for some form widgets

Recompile assets Fixes #2749 (Media Finder) Fixes #2750 (File upload) Fixes #2751 (Rich Editor) Refs #2724
2017-03-14 07:38:02 +11:00 · 2017-03-14 07:38:02 +11:00 · 5f91c45f79
parent e7fa4b832a
commit 5f91c45f79
16 changed files with 98 additions and 20 deletions
--- a/modules/backend/formwidgets/CodeEditor.php
+++ b/modules/backend/formwidgets/CodeEditor.php
@ -118,6 +118,10 @@ class CodeEditor extends FormWidgetBase
    {
        $this->applyEditorPreferences();

+        if ($this->formField->disabled) {
+            $this->readOnly = true;
+        }
+
        $this->fillFromConfig([
            'language',
            'showGutter',
--- a/modules/backend/formwidgets/FileUpload.php
+++ b/modules/backend/formwidgets/FileUpload.php
@ -96,6 +96,10 @@ class FileUpload extends FormWidgetBase
            'useCaption'
        ]);

+        if ($this->formField->disabled) {
+            $this->previewMode = true;
+        }
+
        $this->checkUploadPostback();
    }

--- a/modules/backend/formwidgets/RichEditor.php
+++ b/modules/backend/formwidgets/RichEditor.php
@ -31,6 +31,11 @@ class RichEditor extends FormWidgetBase
     */
    public $toolbarButtons = null;

+    /**
+     * @var boolean If true, the editor is set to read-only mode
+     */
+    public $readOnly = false;
+
    //
    // Object properties
    //
@ -45,8 +50,13 @@ class RichEditor extends FormWidgetBase
     */
    public function init()
    {
+        if ($this->formField->disabled) {
+            $this->readOnly = true;
+        }
+
        $this->fillFromConfig([
            'fullPage',
+            'readOnly',
            'toolbarButtons',
        ]);
    }
@ -70,6 +80,7 @@ class RichEditor extends FormWidgetBase
        $this->vars['fullPage'] = $this->fullPage;
        $this->vars['stretch'] = $this->formField->stretch;
        $this->vars['size'] = $this->formField->size;
+        $this->vars['readOnly'] = $this->readOnly;
        $this->vars['name'] = $this->getFieldName();
        $this->vars['value'] = $this->getLoadValue();
        $this->vars['toolbarButtons'] = $this->evalToolbarButtons();
--- a/modules/backend/formwidgets/richeditor/assets/js/build-min.js
+++ b/modules/backend/formwidgets/richeditor/assets/js/build-min.js
@ -606,7 +606,7 @@ Base.call(this)
 this.init()}
 RichEditor.prototype=Object.create(BaseProto)
 RichEditor.prototype.constructor=RichEditor
-RichEditor.DEFAULTS={linksHandler:null,stylesheet:null,fullpage:false,editorLang:'en',toolbarButtons:null,allowEmptyTags:null,allowTags:null,noWrapTags:null,removeTags:null,imageStyles:null,linkStyles:null,paragraphStyles:null,tableStyles:null,tableCellStyles:null,aceVendorPath:'/'}
+RichEditor.DEFAULTS={linksHandler:null,stylesheet:null,fullpage:false,editorLang:'en',toolbarButtons:null,allowEmptyTags:null,allowTags:null,noWrapTags:null,removeTags:null,imageStyles:null,linkStyles:null,paragraphStyles:null,tableStyles:null,tableCellStyles:null,aceVendorPath:'/',readOnly:false}
 RichEditor.prototype.init=function(){var self=this;this.$el.one('dispose-control',this.proxy(this.dispose))
 if(!this.$textarea.attr('id')){this.$textarea.attr('id','element-'+Math.random().toString(36).substring(7))}
 this.initFroala()}
@ -642,6 +642,7 @@ this.$textarea.on('froalaEditor.html.set',this.proxy(this.onSetContent))
 this.$form.on('oc.beforeRequest',this.proxy(this.onFormBeforeRequest))
 this.$textarea.froalaEditor(froalaOptions)
 this.editor=this.$textarea.data('froala.editor')
+if(this.options.readOnly){this.editor.edit.off()}
 this.$el.on('keydown','.fr-view figure',this.proxy(this.onFigureKeydown))}
 RichEditor.prototype.dispose=function(){this.unregisterHandlers()
 this.$textarea.froalaEditor('destroy')
--- a/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
+++ b/modules/backend/formwidgets/richeditor/assets/js/richeditor.js
@ -49,7 +49,8 @@
        paragraphStyles: null,
        tableStyles: null,
        tableCellStyles: null,
-        aceVendorPath: '/'
+        aceVendorPath: '/',
+        readOnly: false
    }

    RichEditor.prototype.init = function() {
@ -176,6 +177,10 @@

        this.editor = this.$textarea.data('froala.editor')

+        if (this.options.readOnly) {
+            this.editor.edit.off()
+        }
+
        this.$el.on('keydown', '.fr-view figure', this.proxy(this.onFigureKeydown))
    }

--- a/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
+++ b/modules/backend/formwidgets/richeditor/partials/_richeditor.htm
@ -6,6 +6,7 @@
        id="<?= $this->getId() ?>"
        class="field-richeditor size-<?= $size ?> <?= $stretch?'layout-relative stretch':'' ?>"
        <?php if ($fullPage): ?>data-fullpage="true"<?php endif ?>
+        <?php if ($readOnly): ?>data-read-only="true"<?php endif ?>
        <?php if ($editorLang): ?>data-editor-lang="<?= $editorLang ?>"<?php endif ?>
        <?php if ($toolbarButtons): ?>data-toolbar-buttons="<?= implode(',', $toolbarButtons) ?>"<?php endif ?>
        <?php if ($allowEmptyTags): ?>data-allow-empty-tags="<?= e($allowEmptyTags) ?>"<?php endif ?>
--- a/modules/backend/lang/en/lang.php
+++ b/modules/backend/lang/en/lang.php
@ -242,6 +242,7 @@ return [
        'confirm_tab_close' => 'Close the tab? Unsaved changes will be lost.',
        'behavior_not_ready' => 'Form behavior has not been initialized, check that you have called initForm() in your controller.',
        'preview_no_files_message' => 'There are no files uploaded.',
+        'preview_no_media_message' => 'There is no media selected.',
        'preview_no_record_message' => 'There is no record selected.',
        'select' => 'Select',
        'select_all' => 'all',
--- a/modules/backend/widgets/Form.php
+++ b/modules/backend/widgets/Form.php
@ -216,10 +216,12 @@ class Form extends WidgetBase
        $this->prepareVars();

        /*
-         * Apply preview mode to widgets
+         * Force preview mode on all widgets
         */
-        foreach ($this->formWidgets as $widget) {
-            $widget->previewMode = $this->previewMode;
+        if ($this->previewMode) {
+            foreach ($this->formWidgets as $widget) {
+                $widget->previewMode = $this->previewMode;
+            }
        }

        return $this->makePartial($targetPartial, $extraVars);
--- a/modules/cms/formwidgets/MediaFinder.php
+++ b/modules/cms/formwidgets/MediaFinder.php
@ -3,6 +3,7 @@
 use Lang;
 use ApplicationException;
 use Cms\Classes\MediaLibrary;
+use Backend\Classes\FormField;
 use Backend\Classes\FormWidgetBase;

 /**
@ -51,6 +52,10 @@ class MediaFinder extends FormWidgetBase
            'mode',
            'prompt'
        ]);
+
+        if ($this->formField->disabled) {
+            $this->previewMode = true;
+        }
    }

    /**
@ -75,6 +80,18 @@ class MediaFinder extends FormWidgetBase
        $this->vars['mode'] = $this->mode;
    }

+    /**
+     * {@inheritDoc}
+     */
+    public function getSaveValue($value)
+    {
+        if ($this->formField->disabled || $this->formField->hidden) {
+            return FormField::NO_SAVE_DATA;
+        }
+
+        return $value;
+    }
+
    /**
     * {@inheritDoc}
     */
@ -83,4 +100,4 @@ class MediaFinder extends FormWidgetBase
        $this->addJs('js/mediafinder.js', 'core');
        $this->addCss('css/mediafinder.css', 'core');
    }
-}
+}
--- a/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
+++ b/modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
@ -50,6 +50,10 @@
 .field-mediafinder.is-populated .find-object:hover .meta .find-remove-button {
  display: block;
 }
+.field-mediafinder.is-preview .find-button,
+.field-mediafinder.is-preview .find-remove-button {
+  display: none !important;
+}
@media (max-width: 1024px) {
  .field-fileupload.is-populated .find-object h4 a,
  .field-fileupload.is-populated .find-object .meta .find-remove-button {
--- a/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
+++ b/modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
@ -33,13 +33,22 @@
            this.options.isMulti = this.$el.hasClass('is-multi')
        }

+        if (this.options.isPreview === null) {
+            this.options.isPreview = this.$el.hasClass('is-preview')
+        }
+
        if (this.options.isImage === null) {
            this.options.isImage = this.$el.hasClass('is-image')
        }

+        this.$el.one('dispose-control', this.proxy(this.dispose))
+
+        // Stop here for preview mode
+        if (this.options.isPreview)
+            return
+
        this.$el.on('click', '.find-button', this.proxy(this.onClickFindButton))
        this.$el.on('click', '.find-remove-button', this.proxy(this.onClickRemoveButton))
-        this.$el.one('dispose-control', this.proxy(this.dispose))

        this.$findValue = $('[data-find-value]', this.$el)
    }
@ -110,6 +119,7 @@

    MediaFinder.DEFAULTS = {
        isMulti: null,
+        isPreview: null,
        isImage: null
    }

--- a/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
+++ b/modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
@ -117,6 +117,16 @@
        }
    }

+    //
+    // Preview mode
+    //
+
+    &.is-preview {
+        .find-button,
+        .find-remove-button {
+            display: none !important;
+        }
+    }
 }

 //
--- a/modules/cms/formwidgets/mediafinder/partials/_file_single.htm
+++ b/modules/cms/formwidgets/mediafinder/partials/_file_single.htm
@ -1,6 +1,6 @@
 <div
    id="<?= $this->getId() ?>"
-    class="field-mediafinder style-file-single <?= $value ? 'is-populated' : '' ?>"
+    class="field-mediafinder style-file-single <?= $value ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
    data-control="mediafinder"
 >

@ -39,4 +39,4 @@
        value="<?= e($value) ?>"
        data-find-value
        />
-</div>
+</div>
--- a/modules/cms/formwidgets/mediafinder/partials/_image_single.htm
+++ b/modules/cms/formwidgets/mediafinder/partials/_image_single.htm
@ -1,6 +1,6 @@
 <div
    id="<?= $this->getId() ?>"
-    class="field-mediafinder style-image-single is-image <?= $value ? 'is-populated' : '' ?>"
+    class="field-mediafinder style-image-single is-image <?= $value ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
    data-control="mediafinder"
 >

@ -32,4 +32,4 @@
        value="<?= e($value) ?>"
        data-find-value
        />
-</div>
+</div>
--- a/modules/cms/formwidgets/mediafinder/partials/_mediafinder.htm
+++ b/modules/cms/formwidgets/mediafinder/partials/_mediafinder.htm
@ -1,11 +1,19 @@
-<?php switch ($mode):
+<?php if ($this->previewMode && !$value): ?>

-    case 'image': ?>
-        <?= $this->makePartial('image_single') ?>
-    <?php break ?>
+    <span class="form-control"><?= e(trans('backend::lang.form.preview_no_media_message')) ?></span>

-    <?php case 'file': ?>
-        <?= $this->makePartial('file_single') ?>
-    <?php break ?>
+<?php else: ?>

-<?php endswitch ?>
+    <?php switch ($mode):
+
+        case 'image': ?>
+            <?= $this->makePartial('image_single') ?>
+        <?php break ?>
+
+        <?php case 'file': ?>
+            <?= $this->makePartial('file_single') ?>
+        <?php break ?>
+
+    <?php endswitch ?>
+
+<?php endif ?>
--- a/modules/system/assets/js/lang/lang.ru.js
+++ b/modules/system/assets/js/lang/lang.ru.js