Build out single file mediafinder form widget

CHANGELOG.md

@@ -1,5 +1,6 @@
 * **Build 26x** (2015-06-xx)
   - Introduced the October Storm client-side library.
+  - Introduced new *MediaFinder* form widget.
   - Improved the back-end administrator permissions and `RelationController` UI.
   - The page setting `hidden` has been renamed to `is_hidden`, this setting may need to be reapplied for some themes.
   - `FileUpload` form widget has been rebuilt from scratch, it now uses an interface similar to the Media Manager (see Backend > Forms docs).

modules/cms/ServiceProvider.php

@@ -195,6 +195,10 @@ class ServiceProvider extends ModuleServiceProvider
     {
         WidgetManager::instance()->registerFormWidgets(function ($manager) {
             $manager->registerFormWidget('Cms\FormWidgets\Components');
+            $manager->registerFormWidget('Cms\FormWidgets\MediaFinder', [
+                'label' => 'Media Finder',
+                'code'  => 'mediafinder'
+            ]);
         });
     }
 

modules/cms/formwidgets/MediaFinder.php

@@ -0,0 +1,83 @@
+<?php namespace Cms\FormWidgets;
+
+use Lang;
+use ApplicationException;
+use Backend\Classes\FormWidgetBase;
+
+/**
+ * Media Finder
+ * Renders a record finder field.
+ *
+ *    image:
+ *        label: Some image
+ *        type: media
+ *        prompt: Click the %s button to find a user
+ * 
+ * @package october\cms
+ * @author Alexey Bobkov, Samuel Georges
+ */
+class MediaFinder extends FormWidgetBase
+{
+    //
+    // Configurable properties
+    //
+
+    /**
+     * @var string Prompt to display if no record is selected.
+     */
+    public $prompt = 'Click the %s button to find a media item';
+
+    /**
+     * @var string Display mode for the selection. Values: file, image.
+     */
+    public $mode = 'file';
+
+    //
+    // Object properties
+    //
+
+    /**
+     * {@inheritDoc}
+     */
+    protected $defaultAlias = 'media';
+
+    /**
+     * {@inheritDoc}
+     */
+    public function init()
+    {
+        $this->fillFromConfig([
+            'mode',
+            'prompt'
+        ]);
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function render()
+    {
+        $this->prepareVars();
+        return $this->makePartial('mediafinder');
+    }
+
+    /**
+     * Prepares the list data
+     */
+    public function prepareVars()
+    {
+        $this->vars['value'] = $this->getLoadValue();
+        $this->vars['field'] = $this->formField;
+        $this->vars['prompt'] = str_replace('%s', '<i class="icon-folder"></i>', $this->prompt);
+        $this->vars['mode'] = $this->mode;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    public function loadAssets()
+    {
+        $this->addJs('js/mediafinder.js', 'core');
+        $this->addCss('css/mediafinder.css', 'core');
+    }
+}

modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css

@@ -0,0 +1,204 @@
+.field-mediafinder .find-object .icon-container i {
+  color: #95a5a6;
+  display: inline-block;
+}
+.field-mediafinder .find-object h4 {
+  font-weight: 600;
+  font-size: 13px;
+  color: #2b3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 150%;
+  margin: 15px 0 5px 0;
+  padding-right: 0;
+  -webkit-transition: padding 0.1s;
+  transition: padding 0.1s;
+  position: relative;
+}
+.field-mediafinder .find-object .info h4 a,
+.field-mediafinder .find-object .meta a.find-remove-button {
+  color: #2b3e50;
+  display: none;
+  font-size: 15px;
+  text-decoration: none;
+}
+.field-mediafinder.is-populated:hover h4 a,
+.field-mediafinder.is-populated:hover .meta .find-remove-button {
+  display: block;
+}
+@media (max-width: 1024px) {
+  .field-fileupload.is-populated .find-object h4 a,
+  .field-fileupload.is-populated .find-object .meta .find-remove-button {
+    display: block !important;
+  }
+}
+.field-mediafinder.style-image-single .find-button {
+  display: block;
+  float: left;
+  border: 2px dotted rgba(0, 0, 0, 0.1);
+  position: relative;
+  outline: none;
+}
+.field-mediafinder.style-image-single .find-button table {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+.field-mediafinder.style-image-single .find-button table td {
+  line-height: 16px;
+  font-size: 11px;
+  vertical-align: middle;
+  height: 100%;
+}
+.field-mediafinder.style-image-single .find-button table td:before {
+  text-align: center;
+  width: 100%;
+  display: block;
+  font-size: 22px;
+  color: rgba(0, 0, 0, 0.1);
+  vertical-align: middle;
+}
+.field-mediafinder.style-image-single .find-button table td span {
+  display: block;
+  padding: 10px;
+  text-align: center;
+}
+.field-mediafinder.style-image-single .find-button:hover {
+  border: 2px dotted rgba(0, 0, 0, 0.2);
+}
+.field-mediafinder.style-image-single .find-button:hover table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
+.field-mediafinder.style-image-single .find-button:focus {
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: transparent;
+}
+.field-mediafinder.style-image-single .find-button:focus table td:before {
+  color: #5cb85c;
+  color: rgba(0, 0, 0, 0.2);
+}
+.field-mediafinder.style-image-single .find-button,
+.field-mediafinder.style-image-single .find-button > table {
+  min-height: 100px;
+  min-width: 100px;
+}
+.field-mediafinder.style-image-single .find-object {
+  display: none;
+  padding-bottom: 66px;
+}
+.field-mediafinder.style-image-single .find-object .icon-container {
+  border: 1px solid #f6f8f9;
+  background: rgba(255, 255, 255, 0.5);
+}
+.field-mediafinder.style-image-single .find-object .icon-container img {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.field-mediafinder.style-image-single .find-object .info {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 66px;
+}
+.field-mediafinder.style-image-single .find-object .meta {
+  position: absolute;
+  bottom: 65px;
+  left: 0;
+  right: 0;
+  margin: 0 15px;
+}
+.field-mediafinder.style-image-single .find-object:hover h4 {
+  padding-right: 20px;
+}
+.field-mediafinder.style-image-single.is-populated .find-button {
+  display: none;
+}
+.field-mediafinder.style-image-single.is-populated .find-object {
+  display: block;
+}
+.field-mediafinder.style-file-single {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  position: relative;
+  padding-right: 30px;
+}
+.field-mediafinder.style-file-single .find-button {
+  position: absolute;
+  top: 50%;
+  margin-top: -44px;
+  height: 88px;
+  background: transparent;
+  right: -2px;
+  color: #595959;
+}
+.field-mediafinder.style-file-single .find-button i {
+  font-size: 14px;
+}
+.field-mediafinder.style-file-single .find-button:hover {
+  color: #333333;
+}
+.field-mediafinder.style-file-single .find-empty-message {
+  padding: 10px 0 10px 11px;
+  font-size: 13px;
+}
+.field-mediafinder.style-file-single .find-object {
+  display: none;
+  width: 100%;
+  padding: 8px 0 10px 0;
+}
+.field-mediafinder.style-file-single .find-object .icon-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 15px;
+  padding: 0 5px;
+  margin: 8px 0 0 7px;
+  text-align: center;
+}
+.field-mediafinder.style-file-single .find-object .icon-container i {
+  line-height: 150%;
+  font-size: 15px;
+}
+.field-mediafinder.style-file-single .find-object .info {
+  margin-left: 34px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.field-mediafinder.style-file-single .find-object .info h4 {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 150%;
+  color: #666666;
+}
+.field-mediafinder.style-file-single .find-object .meta {
+  position: absolute;
+  top: 50%;
+  margin-top: -44px;
+  height: 88px;
+  right: 34px;
+}
+.field-mediafinder.style-file-single .find-object .meta .find-remove-button {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  height: 20px;
+  margin-top: -11px;
+  margin-right: 10px;
+}
+.field-mediafinder.style-file-single.is-populated .find-empty-message {
+  display: none;
+}
+.field-mediafinder.style-file-single.is-populated .find-object {
+  display: block;
+}

modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js

@@ -0,0 +1,144 @@
+/*
+ * MediaFinder plugin
+ *
+ * Data attributes:
+ * - data-control="mediafinder" - enables the plugin on an element
+ * - data-option="value" - an option with a value
+ *
+ * JavaScript API:
+ * $('a#someElement').recordFinder({ option: 'value' })
+ *
+ * Dependences:
+ * - Some other plugin (filename.js)
+ */
+
++function ($) { "use strict";
+    var Base = $.oc.foundation.base,
+        BaseProto = Base.prototype
+
+    var MediaFinder = function (element, options) {
+        this.$el = $(element)
+        this.options = options || {}
+
+        $.oc.foundation.controlUtils.markDisposable(element)
+        Base.call(this)
+        this.init()
+    }
+
+    MediaFinder.prototype = Object.create(BaseProto)
+    MediaFinder.prototype.constructor = MediaFinder
+
+    MediaFinder.prototype.init = function() {
+        if (this.options.isMulti === null) {
+            this.options.isMulti = this.$el.hasClass('is-multi')
+        }
+
+        if (this.options.isImage === null) {
+            this.options.isImage = this.$el.hasClass('is-image')
+        }
+
+        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 = $('input.find-value', this.$el)
+    }
+
+    MediaFinder.prototype.dispose = function() {
+        this.$el.off('click', '.find-button', this.proxy(this.onClickFindButton))
+        this.$el.off('click', '.find-remove-button', this.proxy(this.onClickRemoveButton))
+        this.$el.off('dispose-control', this.proxy(this.dispose))
+        this.$el.removeData('oc.mediaFinder')
+
+        this.$findValue = null
+        this.$el = null
+
+        // In some cases options could contain callbacks, 
+        // so it's better to clean them up too.
+        this.options = null
+
+        BaseProto.dispose.call(this)
+    }
+
+    MediaFinder.prototype.onClickRemoveButton = function() {
+        this.$findValue.val('')
+        this.evalIsPopulated()
+    }
+
+    MediaFinder.prototype.onClickFindButton = function() {
+        var self = this
+
+        new $.oc.mediaManager.popup({
+            alias: 'ocmediamanager',
+            cropAndInsertButton: true,
+            onInsert: function(items) {
+                if (!items.length) {
+                    alert('Please select image(s) to insert.')
+                    return
+                }
+
+                if (items.length > 1) {
+                    alert('Please select a single item.')
+                    return
+                }
+
+                var path, publicUrl
+                for (var i=0, len=items.length; i<len; i++) {
+                    path = items[i].path
+                    publicUrl = items[i].publicUrl
+                }
+
+                self.$findValue.val(path)
+
+                if (self.options.isImage) {
+                    $('[data-find-image]', self.$el).attr('src', publicUrl)
+                }
+
+                self.evalIsPopulated()
+
+                this.hide()
+            }
+        })
+
+    }
+
+    MediaFinder.prototype.evalIsPopulated = function() {
+        var isPopulated = !!this.$findValue.val()
+        this.$el.toggleClass('is-populated', isPopulated)
+        $('[data-find-file-name]', this.$el).text(this.$findValue.val().substring(1))
+    }
+
+    MediaFinder.DEFAULTS = {
+        isMulti: null,
+        isImage: null
+    }
+
+    // PLUGIN DEFINITION
+    // ============================
+
+    var old = $.fn.mediaFinder
+
+    $.fn.mediaFinder = function (option) {
+        var args = arguments;
+
+        return this.each(function () {
+            var $this   = $(this)
+            var data    = $this.data('oc.mediaFinder')
+            var options = $.extend({}, MediaFinder.DEFAULTS, $this.data(), typeof option == 'object' && option)
+            if (!data) $this.data('oc.mediaFinder', (data = new MediaFinder(this, options)))
+            if (typeof option == 'string') data[option].apply(data, args)
+        })
+      }
+
+    $.fn.mediaFinder.Constructor = MediaFinder
+
+    $.fn.mediaFinder.noConflict = function () {
+        $.fn.mediaFinder = old
+        return this
+    }
+
+    $(document).render(function (){
+        $('[data-control="mediafinder"]').mediaFinder()
+    })
+
+}(window.jQuery);

modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less

@@ -0,0 +1,121 @@
+.finder-block-button() {
+    display: block;
+    float: left;
+    border: 2px dotted rgba(0,0,0,.1);
+    position: relative;
+    outline: none;
+    table {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+
+    table td {
+        line-height: 16px;
+        font-size: 11px;
+        vertical-align: middle;
+        height: 100%;
+
+        &:before {
+            text-align: center;
+            width: 100%;
+            display: block;
+            font-size: 22px;
+            color: rgba(0,0,0,.1);
+            vertical-align: middle;
+        }
+
+        span {
+            display: block;
+            padding: 10px;
+            text-align: center;
+        }
+    }
+
+    &:hover {
+        border: 2px dotted rgba(0,0,0,.2);
+
+        table td:before {
+            color: @brand-success;
+            color: rgba(0,0,0,.2);
+        }
+    }
+
+    &:focus {
+        border: 2px solid rgba(0,0,0,.3);
+        background: transparent;
+
+        table td:before {
+            color: @brand-success;
+            color: rgba(0,0,0,.2);
+        }
+    }
+}
+
+.finder-vertical-align() {
+    position: absolute;
+    top: 50%;
+    margin-top: -44px;
+    height: 88px;
+}
+
+//
+// Shared
+//
+
+.field-mediafinder {
+
+    .find-object {
+
+        .icon-container {
+            i {
+                color: #95a5a6;
+                display: inline-block;
+            }
+        }
+
+        h4 {
+            font-weight: 600;
+            font-size: 13px;
+            color: #2b3e50;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 150%;
+            margin: 15px 0 5px 0;
+            padding-right: 0;
+            .transition(padding 0.1s);
+
+            position: relative;
+        }
+
+        .info h4 a,
+        .meta a.find-remove-button {
+            color: #2b3e50;
+            display: none;
+            font-size: 15px;
+            text-decoration: none;
+        }
+    }
+
+    &.is-populated {
+        &:hover {
+            h4 a,
+            .meta .find-remove-button { display: block; }
+        }
+    }
+
+}
+
+//
+// Media
+//
+
+@media (max-width: 1024px) {
+    .field-fileupload {
+        &.is-populated .find-object {
+            h4 a,
+            .meta .find-remove-button { display: block !important; }
+        }
+    }
+}

modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less

@@ -0,0 +1,88 @@
+
+.field-mediafinder.style-file-single {
+    background-color: @color-form-field-bg;
+    border: 1px solid @color-form-field-border;
+    overflow: hidden;
+    position: relative;
+    padding-right: 30px;
+
+    .find-button {
+        .finder-vertical-align();
+        background: transparent;
+        right: -2px;
+
+        color: lighten(@color-form-field-recordfinder-btn, 15%);
+
+        i {
+            font-size: 14px;
+        }
+
+        &:hover {
+            color: @color-form-field-recordfinder-btn;
+        }
+    }
+
+    .find-empty-message {
+        padding: 10px 0 10px 11px;
+        font-size: 13px;
+    }
+
+    .find-object {
+        display: none;
+        width: 100%;
+        padding: 8px 0 10px 0;
+
+        .icon-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 15px;
+            padding: 0 5px;
+            margin: 8px 0 0 7px;
+            text-align: center;
+
+            i {
+                line-height: 150%;
+                font-size: 15px;
+            }
+        }
+
+        .info {
+            margin-left: 34px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            h4 {
+                display: inline;
+                margin: 0;
+                padding: 0;
+                font-size: 12px;
+                line-height: 150%;
+                color: #666666;
+            }
+        }
+
+        .meta {
+            .finder-vertical-align();
+            right: 34px;
+            .find-remove-button {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                height: 20px;
+                margin-top: -11px;
+                margin-right: 10px;
+            }
+        }
+    }
+
+    &.is-populated {
+        .find-empty-message {
+            display: none;
+        }
+        .find-object {
+            display: block;
+        }
+    }
+}

modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less

@@ -0,0 +1,56 @@
+
+.field-mediafinder.style-image-single {
+
+    .find-button {
+        .finder-block-button();
+        &, > table {
+            min-height: 100px;
+            min-width: 100px;
+        }
+    }
+
+    .find-object {
+        display: none;
+        padding-bottom: 66px;
+
+        .icon-container {
+            border: 1px solid #f6f8f9;
+            background: rgba(255,255,255,.5);
+
+            img {
+                .border-radius(3px);
+                .img-responsive();
+            }
+        }
+
+        .info {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 66px;
+        }
+
+        .meta {
+            position: absolute;
+            bottom: 65px;
+            left: 0;
+            right: 0;
+            margin: 0 15px;
+        }
+
+        &:hover {
+            h4 { padding-right: 20px; }
+        }
+    }
+
+    &.is-populated {
+        .find-button {
+            display: none;
+        }
+        .find-object {
+            display: block;
+        }
+    }
+
+}

modules/cms/formwidgets/mediafinder/assets/less/mediafinder.less

@@ -0,0 +1,5 @@
+@import "../../../../../backend/assets/less/core/boot.less";
+
+@import "mediafinder.base.less";
+@import "mediafinder.imagesingle.less";
+@import "mediafinder.filesingle.less";

modules/cms/formwidgets/mediafinder/partials/_file_single.htm

@@ -0,0 +1,42 @@
+<div
+    id="<?= $this->getId() ?>"
+    class="field-mediafinder style-file-single <?= $value ? 'is-populated' : '' ?>"
+    data-control="mediafinder"
+>
+
+    <!-- Find Button -->
+    <button type="button" class="btn btn-default find-button">
+        <i class="icon-folder"></i>
+    </button>
+
+    <!-- Existing value -->
+    <div class="find-object">
+        <div class="icon-container">
+            <i class="icon-file"></i>
+        </div>
+        <div class="info">
+            <h4 class="filename">
+                <span data-find-file-name><?= substr($value, 1) ?></span>
+            </h4>
+        </div>
+        <div class="meta">
+            <a href="javascript:;" class="find-remove-button">
+                <i class="icon-times"></i>
+            </a>
+        </div>
+    </div>
+
+    <!-- Empty message -->
+    <div class="find-empty-message">
+        <span class="text-muted"><?= $prompt ?></span>
+    </div>
+
+    <!-- Data locker -->
+    <input
+        type="hidden"
+        name="<?= $field->getName() ?>"
+        id="<?= $field->getId() ?>"
+        value="<?= e($value) ?>"
+        class="find-value"
+        />
+</div>

modules/cms/formwidgets/mediafinder/partials/_image_single.htm

@@ -0,0 +1,35 @@
+<div
+    id="<?= $this->getId() ?>"
+    class="field-mediafinder style-image-single is-image <?= $value ? 'is-populated' : '' ?>"
+    data-control="mediafinder"
+>
+
+    <!-- Find Button -->
+    <a href="javascript:;" class="find-button">
+        <table><tr><td class="oc-icon-folder"></td></tr></table>
+    </a>
+
+    <!-- Existing value -->
+    <div class="find-object">
+        <div class="icon-container">
+            <img data-find-image src="" alt="" />
+        </div>
+        <div class="info">
+            <h4 class="filename">
+                <span data-find-file-name><?= substr($value, 1) ?></span>
+                <a href="javascript:;" class="find-remove-button">
+                    <i class="icon-times"></i>
+                </a>
+            </h4>
+        </div>
+    </div>
+
+    <!-- Data locker -->
+    <input
+        type="hidden"
+        name="<?= $field->getName() ?>"
+        id="<?= $field->getId() ?>"
+        value="<?= e($value) ?>"
+        class="find-value"
+        />
+</div>

modules/cms/formwidgets/mediafinder/partials/_mediafinder.htm

@@ -0,0 +1,11 @@
+<?php switch ($mode):
+
+    case 'image': ?>
+        <?= $this->makePartial('image_single') ?>
+    <?php break ?>
+
+    <?php case 'file': ?>
+        <?= $this->makePartial('file_single') ?>
+    <?php break ?>
+
+<?php endswitch ?>