iconpicker extra control and demo type

See /uinversal_editor/controls/iconpicker
and /_types/just_a_big_icon

_types/just_a_big_icon/editor.php

@@ -0,0 +1,85 @@
+<?php 
+
+defined('is_running') or die('Not an entry point...');
+
+$editor = array(
+  'custom_scripts'  => false,
+  'custom_css'      => false,
+  'controls'        => array(
+
+    // value 'icon' --start
+    'icon' => array(
+      'label' => '<i class="fa fa-flag"></i> Icon',
+      'control_type' => 'iconpicker', /* ##### THE NEW CONTROL TYPE #### */
+      'attributes' => array(
+        // 'placeholder' => 'fa fa-flag',
+      ),
+      'on' => array(
+        // 'focus' => 'function(){ $(this).select(); }',
+      ),
+    ), 
+    // value 'icon' --end
+
+    // value 'spin' --start
+    'spin' => array(
+      'label' => 'Spin',
+      'control_type' => 'checkbox',
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'spin' --end
+
+    // value 'pulse' --start
+    'pulse' => array(
+      'label' => 'Pulse',
+      'control_type' => 'checkbox',
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'pulse' --end
+
+    // value 'fixed_width' --start
+    'fixed_width' => array(
+      'label' => 'Fixed Width',
+      'control_type' => 'checkbox',
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'fixed_width' --end
+
+    // value 'flip_horizontal' --start
+    'flip_horizontal' => array(
+      'label' => 'Flip Horzizontal',
+      'control_type' => 'checkbox',
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'flip_horizontal' --end
+
+    // value 'flip_vertical' --start
+    'flip_vertical' => array(
+      'label' => 'Flip Vertical',
+      'control_type' => 'checkbox',
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'flip_vertical' --end
+
+    // value 'rotate' --start
+    'rotate' => array(
+      'label' => '<i class="fa fa-refresh"></i> Rotate',
+      'control_type' => 'select',
+      'options' => array( 
+        // option value => option text
+        '0' => 'none (0 &deg;)',
+        '90' => '90 &deg;',
+        '180' => '180 &deg;',
+        '270' => '270 &deg;',
+      ),
+      'attributes' => array(),
+      'on' => array(),
+    ), 
+    // value 'rotate' --end
+
+  ),
+);

_types/just_a_big_icon/section.php

@@ -0,0 +1,46 @@
+<?php 
+defined('is_running') or die('Not an entry point...');
+
+/* MERELY A DEMO SECTION FOR THE ICONPICKER CONTROL */
+
+$section = array();
+$section['values'] = array_merge(array(
+  'icon'              => 'fa fa-flag',
+  'spin'              => '0',
+  'pulse'             => '0',
+  'fixed_width'       => '0',
+  'flip_horizontal'   => '0',
+  'flip_vertical'     => '0',
+  'rotate'            => '0',
+), $sectionCurrentValues );
+
+$section['attributes'] = array(
+  'class' => 'col-xs-12 col-sm-6 col-md-4',
+);
+
+$icon_class = 'fa ' . $section['values']['icon'];
+$icon_class .= ($section['values']['spin'] == '1' ? ' fa-spin' : '');
+$icon_class .= ($section['values']['pulse'] == '1' ? ' fa-pulse' : '');
+$icon_class .= ($section['values']['fixed_width'] == '1' ? ' fa-fw' : '');
+$icon_class .= ($section['values']['flip_horizontal'] == '1' ? ' fa-flip-horizontal' : '');
+$icon_class .= ($section['values']['flip_vertical'] == '1' ? ' fa-flip-vertical' : '');
+$icon_class .= ($section['values']['rotate'] != '0' ? ' fa-rotate-' . $section['values']['rotate'] : '');
+
+$section['content']  = '<div class="my-square-box">';
+$section['content'] .=   '<div class="my-icon-box">';
+$section['content'] .=     '<i class="' . $icon_class . '"></i>';
+$section['content'] .=   '</div>';
+$section['content'] .= '</div>';
+
+$section['gp_label'] = 'Just a Big Icon';
+$section['gp_color'] = '#1EA076';
+
+$section['always_process_values'] = false;
+
+$components = 'fontawesome';
+
+$css_files = array( 'style.css' );
+// $style = 'body { background:red!important; }';
+// $js_files = array( 'script.js', );
+// $javascript = 'var hello_world = "Hello World!";';
+// $jQueryCode = '$(".hello").on("click", function(){ alert("Click: " + hello_world); });';

_types/just_a_big_icon/style.css

@@ -0,0 +1,37 @@
+.filetype-just_a_big_icon{
+position:relative;
+}
+
+.filetype-just_a_big_icon div.my-square-box{
+position:relative;
+height:0;
+padding-bottom:100%;
+}
+
+.filetype-just_a_big_icon div.my-icon-box{
+position:absolute;
+top:0;
+left:0;
+bottom:0;
+right:0;
+text-align:center;
+vertical-align:middle;
+background-color:#1EA076;
+border-radius:4px;
+}
+
+.filetype-just_a_big_icon div.my-icon-box:before{
+content:"";
+position:relative;
+background:red;
+display:inline-block;
+vertical-align:middle;
+height:100%;
+margin:0;
+}
+
+.filetype-just_a_big_icon i.fa{
+vertical-align:middle;
+font-size:124px;
+color:#fff;
+}

universal_editor/controls/iconpicker/control.php

@@ -0,0 +1,17 @@
+<?php 
+/*
+####################################################################################################################
+Universal Editor Extra Control definition "iconpicker" for Typesetter CMS developer plugin - 'Custom Sections'
+Author: J. Krausz and a2exfr
+Date: 2017-02-04
+Version 1.0b2
+####################################################################################################################
+*/
+
+defined('is_running') or die('Not an entry point...');
+
+$control = array(
+  'scripts' =>      array( 'fontawesome-iconpicker/js/fontawesome-iconpicker.js', 'iconpicker.js' ), // required javascript(s) to extend the 'universal editor'
+  'stylesheets' =>  array( 'fontawesome-iconpicker/css/fontawesome-iconpicker.css', 'iconpicker.css' ), // optional stylesheet(s) to display the editor control
+  'components' =>   array( 'bootstrap3-popover' ), // optional components required for editing 
+);

universal_editor/controls/iconpicker/fontawesome-iconpicker/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Javi Aguilar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

universal_editor/controls/iconpicker/fontawesome-iconpicker/README.md

@@ -0,0 +1,133 @@
+fontawesome-iconpicker
+========================
+
+## Modified Version 1.3.0
+
+Modified for Typesetter CMS Addon '[Custom Sections](https://github.com/juek/CustomSections)' to work with Font Awesome ver. 4.3 (included in Typesetter CMS 5.0.3)
+Here is the original version: [itsjavi/fontawesome-iconpicker](https://github.com/itsjavi/fontawesome-iconpicker)
+
+Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap,
+with a powerful base API, based on [bootstrap-popover-picker](https://itsjavi.com/bootstrap-popover-picker/)
+
+You can use Font Awesome or another font icon set of your choice (icon list is totally customizable).
+
+[View demos](https://itsjavi.com/fontawesome-iconpicker/)
+
+## Instantiation
+
+You can call the plugin in several ways:
+
+```javascript
+// Create instance if not exists (returns a jQuery object)
+$('.my').iconpicker();
+$('.my').iconpicker({ /*options*/ }); // you can also specify options via data-* attributes
+
+// For the first matched element, access to a plugin property value
+$('.my').data('iconpicker').iconpickerProperty;
+
+// For the first matched element, call a plugin instance method with the given args
+$('.my').data('iconpicker').iconpickerMethod('methodArg1', 'methodArg2' /* , other args */);
+
+// Call and apply a plugin method to EACH matched element.
+$.iconpicker.batch('.my', 'iconpickerMethod', 'methodArg1', 'methodArg2' /* , other args */); ->
+```
+
+## Triggered Events
+
+All of them exposes the plugin instance through event.iconpickerInstance
+
+In order of call:
+
+* iconpickerCreate
+* iconpickerCreated
+* iconpickerShow
+* iconpickerShown
+* iconpickerSelect (also exposes event.iconpickerItem and event.iconpickerValue)
+* iconpickerUpdate
+* iconpickerInvalid (also exposes event.iconpickerValue)
+* iconpickerSetValue (also exposes event.iconpickerValue)
+* iconpickerSetSourceValue (also exposes event.iconpickerValue)
+* iconpickerUpdated
+* iconpickerSelected (also exposes event.iconpickerItem and event.iconpickerValue)
+* iconpickerHide
+* iconpickerHidden
+* iconpickerDestroy
+* iconpickerDestroyed
+
+## Popover placement extensions
+
+This plugin comes with more placement options than the original Bootstrap Popover.
+Here are all the possibilities in detail:
+
+            1 2 3 4 5
+            G       6
+            F       7
+            E       8
+            D C B A 9
+            
+    0.      inline (no placement, display as inline-block)
+    1.      topLeftCorner
+    2.      topLeft
+    3.      top (center)
+    4.      topRight
+    5.      topRightCorner
+    6.      rightTop
+    7.      right (center)
+    8.      rightBottom
+    9.      bottomRightCorner
+    A.      bottomRight
+    B.      bottom (center)
+    C.      bottomLeft
+    D.      bottomLeftCorner
+    E.      leftBottom
+    F.      left (center)
+    G.      leftTop
+
+
+## Available options
+
+```javascript
+var defaults = {
+    title: false, // Popover title (optional) only if specified in the template
+    selected: false, // use this value as the current item and ignore the original
+    defaultValue: false, // use this value as the current item if input or element value is empty
+    placement: 'bottom', // (has some issues with auto and CSS). auto, top, bottom, left, right
+    collision: 'none', // If true, the popover will be repositioned to another position when collapses with the window borders
+    animation: true, // fade in/out on show/hide ?
+    //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
+    hideOnSelect: false,
+    showFooter: false,
+    searchInFooter: false, // If true, the search will be added to the footer instead of the title
+    mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
+    selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
+    icons: [], // list of icon classes (declared at the bottom of this script for maintainability)
+    fullClassFormatter: function(val) {
+        return 'fa ' + val;
+    },
+    input: 'input,.iconpicker-input', // children input selector
+    inputSearch: false, // use the input as a search box too?
+    container: false, //  Appends the popover to a specific element. If not set, the selected element or element parent is used
+    component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
+    // Plugin templates:
+    templates: {
+        popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
+            '<div class="popover-title"></div><div class="popover-content"></div></div>',
+        footer: '<div class="popover-footer"></div>',
+        buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' +
+            ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
+        search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
+        iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
+        iconpickerItem: '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
+    }
+};
+```
+
+## TO-DO
+- [x] Support other icon fonts
+- [x] Fix: input marked as error when it is empty
+- [x] Add role=button to each item, for making them tabbable
+- [x] Ability to use the user input as the filter instead of the popover input
+- [x] Fix bottomRight position when using component mode
+- [x] Better dropdown compatibility
+- [x] Ability to mix various class prefixes and use a customizable class formatter function
+- [ ] ~~Ability to select and copy the icon character (the would need to be hardcoded in js)~~ (Use the chrome extension)