Changeset 1536575

Timestamp:

11/18/2016 09:21:24 PM (9 years ago)

Author:

goldenapples

Message:

Bump stable version tag

Location:

shortcode-ui/trunk

Files:

• Gruntfile.js (modified) (3 diffs)
• composer.json (modified) (1 diff)
• css/sass/_field-image.scss (modified) (1 diff)
• css/sass/_select2-fields.scss (added)
• css/sass/shortcode-ui.scss (modified) (1 diff)
• css/shortcode-ui-editor-styles.css (modified) (1 diff)
• css/shortcode-ui-editor-styles.css.map (modified) (1 diff)
• css/shortcode-ui.css (modified) (12 diffs)
• css/shortcode-ui.css.map (modified) (1 diff)
• inc/class-shortcode-ui.php (modified) (5 diffs)
• inc/fields/class-field-attachment.php (modified) (1 diff)
• inc/fields/class-field-color.php (modified) (1 diff)
• inc/fields/class-field-post-select.php (modified) (5 diffs)
• inc/fields/class-field-term-select.php (added)
• inc/fields/class-field-user-select.php (added)
• inc/templates/edit-form.tpl.php (modified) (12 diffs)
• js/build/shortcode-ui.js (modified) (34 diffs)
• js/src/controllers/media-controller.js (modified) (1 diff)
• js/src/models/shortcode.js (modified) (2 diffs)
• js/src/shortcode-ui.js (modified) (1 diff)
• js/src/utils/fetcher.js (modified) (1 diff)
• js/src/utils/shortcode-view-constructor.js (modified) (5 diffs)
• js/src/views/edit-attribute-field-attachment.js (modified) (9 diffs)
• js/src/views/edit-attribute-field-post-select.js (modified) (1 diff)
• js/src/views/edit-attribute-field-term-select.js (added)
• js/src/views/edit-attribute-field-user-select.js (added)
• js/src/views/edit-attribute-field.js (modified) (2 diffs)
• js/src/views/edit-shortcode-form.js (modified) (1 diff)
• js/src/views/media-frame.js (modified) (1 diff)
• js/src/views/select2-field.js (added)
• js/src/views/shortcode-preview.js (deleted)
• js/src/views/shortcode-ui.js (modified) (2 diffs)
• languages/shortcode-ui-fi.mo (added)
• languages/shortcode-ui-fi.po (added)
• languages/shortcode-ui-hu_HU.mo (added)
• languages/shortcode-ui-hu_HU.po (added)
• languages/shortcode-ui-ja.mo (added)
• languages/shortcode-ui-ja.po (added)
• languages/shortcode-ui-sv_SE.mo (added)
• languages/shortcode-ui-sv_SE.po (added)
• languages/shortcode-ui-tr_TR.mo (added)
• languages/shortcode-ui-tr_TR.po (added)
• languages/shortcode-ui.pot (modified) (3 diffs)
• lib/select2/css (added)
• lib/select2/css/select2.css (added)
• lib/select2/css/select2.min.css (added)
• lib/select2/js (added)
• lib/select2/js/i18n (added)
• lib/select2/js/i18n/ar.js (added)
• lib/select2/js/i18n/az.js (added)
• lib/select2/js/i18n/bg.js (added)
• lib/select2/js/i18n/ca.js (added)
• lib/select2/js/i18n/cs.js (added)
• lib/select2/js/i18n/da.js (added)
• lib/select2/js/i18n/de.js (added)
• lib/select2/js/i18n/el.js (added)
• lib/select2/js/i18n/en.js (added)
• lib/select2/js/i18n/es.js (added)
• lib/select2/js/i18n/et.js (added)
• lib/select2/js/i18n/eu.js (added)
• lib/select2/js/i18n/fa.js (added)
• lib/select2/js/i18n/fi.js (added)
• lib/select2/js/i18n/fr.js (added)
• lib/select2/js/i18n/gl.js (added)
• lib/select2/js/i18n/he.js (added)
• lib/select2/js/i18n/hi.js (added)
• lib/select2/js/i18n/hr.js (added)
• lib/select2/js/i18n/hu.js (added)
• lib/select2/js/i18n/id.js (added)
• lib/select2/js/i18n/is.js (added)
• lib/select2/js/i18n/it.js (added)
• lib/select2/js/i18n/ja.js (added)
• lib/select2/js/i18n/km.js (added)
• lib/select2/js/i18n/ko.js (added)
• lib/select2/js/i18n/lt.js (added)
• lib/select2/js/i18n/lv.js (added)
• lib/select2/js/i18n/mk.js (added)
• lib/select2/js/i18n/ms.js (added)
• lib/select2/js/i18n/nb.js (added)
• lib/select2/js/i18n/nl.js (added)
• lib/select2/js/i18n/pl.js (added)
• lib/select2/js/i18n/pt-BR.js (added)
• lib/select2/js/i18n/pt.js (added)
• lib/select2/js/i18n/ro.js (added)
• lib/select2/js/i18n/ru.js (added)
• lib/select2/js/i18n/sk.js (added)
• lib/select2/js/i18n/sr-Cyrl.js (added)
• lib/select2/js/i18n/sr.js (added)
• lib/select2/js/i18n/sv.js (added)
• lib/select2/js/i18n/th.js (added)
• lib/select2/js/i18n/tr.js (added)
• lib/select2/js/i18n/uk.js (added)
• lib/select2/js/i18n/vi.js (added)
• lib/select2/js/i18n/zh-CN.js (added)
• lib/select2/js/i18n/zh-TW.js (added)
• lib/select2/js/select2.full.js (added)
• lib/select2/js/select2.full.min.js (added)
• lib/select2/js/select2.js (added)
• lib/select2/js/select2.min.js (added)
• lib/select2/select2-spinner.gif (deleted)
• lib/select2/select2.css (deleted)
• lib/select2/select2.js (deleted)
• lib/select2/select2.min.js (deleted)
• lib/select2/select2.png (deleted)
• lib/select2/select2x2.png (deleted)
• package.json (modified) (1 diff)
• readme.txt (modified) (3 diffs)
• shortcode-ui.php (modified) (5 diffs)

shortcode-ui/trunk/Gruntfile.js

@@ -3 +3 @@
     'use strict';
     var remapify = require('remapify');
-    var banner = '/**\n * <%= pkg.homepage %>\n * Copyright (c) <%= grunt.template.today("yyyy") %>\n * This file is generated automatically. Do not edit.\n */\n';
+    var banner   = '/**\n * <%= pkg.homepage %>\n * Copyright (c) <%= grunt.template.today("yyyy") %>\n * This file is generated automatically. Do not edit.\n */\n';
+
+    // Scripts from WP Core required by Jasmine tests.
+    var jasmineCoreScripts = [
+        'wp-includes/js/jquery/jquery.js',
+        'wp-includes/js/underscore.min.js',
+        'wp-includes/js/backbone.min.js',
+        'wp-includes/js/wp-util.js',
+        'wp-includes/js/shortcode.js',
+        'wp-admin/js/editor.js',
+    ];
+
     // Project configuration
     grunt.initConfig( {
@@ -136 +147 @@
                     helpers: 'js-tests/build/helpers.js',
                     vendor: [
-                        'js-tests/vendor/jquery.js',
-                        'js-tests/vendor/underscore.js',
-                        'js-tests/vendor/backbone.js',
-                        'js-tests/vendor/wp-shortcode.js',
-                        'js-tests/vendor/wp-util.js',
-                        'js-tests/vendor/wp-editors.js',
-                        'js-tests/vendor/mock-ajax.js',
-                    ],
+                        'js-tests/vendor/mock-ajax.js'
+                    ].concat( jasmineCoreScripts.map( function( script ) {
+                        return 'js-tests/vendor/' + script
+                    } ) ),
                 }
             }
@@ -187 +194 @@
     } );
 
+    /**
+     * Helper task to keep all the scripts from WordPress core that are required by the Jasmine tests up to date.
+     *
+     * Note the list of scripts needs to be kept up to date.
+     *
+     * Pass the location of your WordPress installation using --abspath.
+     */
+    grunt.registerTask( 'updateJasmineCoreScripts', function() {
+
+        var abspath = grunt.option( "abspath" );
+
+        if ( ! grunt.file.exists( abspath + '/wp-includes' ) ) {
+            grunt.fail.fatal( 'WordPress install not found. Currently looking here: ' + abspath );
+        }
+
+        for ( var i = 0; i < jasmineCoreScripts.length; i++ ) {
+            if ( grunt.file.exists( abspath + '/' + jasmineCoreScripts[ i ] ) ) {
+                grunt.file.copy(
+                    abspath + '/' + jasmineCoreScripts[ i ] ,
+                    'js-tests/vendor/' + jasmineCoreScripts[ i ]
+                );
+            } else {
+                grunt.log.error( 'File not found: ' + abspath + '/' + jasmineCoreScripts[i] );
+            }
+        }
+
+    });
+
     grunt.loadNpmTasks( 'grunt-sass' );
     grunt.loadNpmTasks( 'grunt-postcss' );

shortcode-ui/trunk/composer.json

@@ -12 +12 @@
     ],
     "require-dev": {
+        "squizlabs/php_codesniffer": "2.x-dev",
         "wp-coding-standards/wpcs": "dev-develop"
     },

shortcode-ui/trunk/css/sass/_field-image.scss

@@ -1 @@
-.edit-shortcode-form .shortcake-attachment-preview {
+.edit-shortcode-form {
 
-    width: 150px;
-    height: 150px;
-    margin: 0 10px 10px 0;
-    line-height: 150px;
-    text-align: center;
-    padding: 0;
-
-    &:before {
-        display: none;
+    .button.shortcake-attachment-select {
+        display: block;
+        clear: both;
+        margin-bottom: 15px;
     }
 
-    .thumbnail:hover:after { 
-        background: rgba(0,0,0,0.1);
-        transition: all .3s linear;
-     }
-
-    &:not( .has-attachment ) {
-        border: 2px dashed #DDD;
-        border-radius: 2px;
-        background: transparent;
-        box-shadow: none;
+    .shortcake-attachment-preview {
+        float: left;
+        margin: 0 20px 20px 0;
+        width: 150px;
     }
 
-    .button.add {
-        vertical-align: middle;
-        z-index: 1;
+    .shortcode-ui-field-attachment .description {
+        margin: 10px 0;
     }
 
-    .button.remove {
+    .shortcake-attachment-preview-container {
 
-        z-index: 1;
-        display: none;
-        position: absolute;
-        top: 5px;
-        right: 5px;
-        border: 1px solid #aaa;
-        box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
-        text-indent: 100%;
-        whitespace: nowrap;
-        width: 24px;
-        height: 24px;
+        width: 150px !important;
+        height: 150px !important;
+        margin: 0 10px 10px 0;
+        line-height: 150px;
+        text-align: center;
         padding: 0;
-        overflow:hidden;
 
-        &:after {
-            content: "\00d7";
+        &:before {
+            display: none;
+        }
+
+        .button.remove {
+
+            z-index: 1;
+            display: block;
             position: absolute;
-            top: -1px;
-            left: 5px;
-            font-size: 22px;
-            text-indent: 0;
+            top: 5px;
+            right: 5px;
+            border: 1px solid #aaa;
+            box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
+            text-indent: 100%;
+            whitespace: nowrap;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            overflow:hidden;
+
+            &:after {
+                content: "\00d7";
+                position: absolute;
+                top: -1px;
+                left: 5px;
+                font-size: 22px;
+                text-indent: 0;
+            }
         }
-    }
 
-    .loading-indicator,
-    &.loading .button.add {
-        display: none;
-    }
+        .thumbnail img {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+        }
 
-    &.loading .loading-indicator {
-        display: block;
-        position: relative;
-        width: 100%;
-        height: 100%;
-    }
+        .loading-indicator,
+        &.loading .button.add {
+            display: none;
+        }
 
-    .loading-indicator {
-        .dashicons {
-            font-size: 80px;
-            height: 100px;
-            line-height: 100px;
+        &.loading .loading-indicator {
+            display: block;
+            position: relative;
             width: 100%;
-            text-align: center;
-            vertical-align: middle;
+            height: 100%;
         }
-        .attachment-preview-loading {
-            width: 60px;
-            height: 5px;
-            overflow: hidden;
-            background-color: transparent;
-            margin: -30px auto 0;
 
-            ins {
-                background-color: #464646;
-                margin: 0 0 0 -60px;
+        .loading-indicator {
+            .dashicons {
+                font-size: 80px;
+                height: 100px;
+                line-height: 100px;
+                width: 100%;
+                text-align: center;
+                vertical-align: middle;
+            }
+            .attachment-preview-loading {
                 width: 60px;
                 height: 5px;
-                display: block;
-                -webkit-animation: attachment-preview-loading 1.3s infinite 1s linear;
-                animation: attachment-preview-loading 1.3s infinite 1s linear;
+                overflow: hidden;
+                background-color: transparent;
+                margin: -30px auto 0;
+
+                ins {
+                    background-color: #464646;
+                    margin: 0 0 0 -60px;
+                    width: 60px;
+                    height: 5px;
+                    display: block;
+                    -webkit-animation: attachment-preview-loading 1.3s infinite 1s linear;
+                    animation: attachment-preview-loading 1.3s infinite 1s linear;
+                }
             }
         }
-    }
 
-    .filename {
-        line-height: 1.4em
-    }
+        .filename {
+            line-height: 1.4em
+        }
 
-    &.has-attachment  {
-        .button.add {
-            display: none;
-        }
-        .button.remove {
-            display: block;
-        }
     }
 

shortcode-ui/trunk/css/sass/shortcode-ui.scss

@@ -160 +160 @@
 
 @import 'field-image';
+@import 'select2-fields';

shortcode-ui/trunk/css/shortcode-ui-editor-styles.css

@@ -1 +1 @@
 .wpview-wrap.wp-mce-view-show-toolbar .toolbar {
   display: block; }
+
 .wpview-wrap .shortcake-error {
   color: red;
   font-weight: bold; }
+
 .wpview-wrap .shortcake-empty {
   font-family: Consolas, Monaco, monospace;

shortcode-ui/trunk/css/shortcode-ui-editor-styles.css.map

@@ -1 @@
-{"version":3,"sources":["../shortcode-ui-editor-styles.scss"],"names":[],"mappings":"AAGA;EACG,eAAA,EAAA;AAIH;EACE,WAAA;EACA,kBAAA,EAAA;AAGF;EACE,yCAAA;EACA,YAAA;EACA,gBAAA,EAAA;;AAIF;EACC,sBAAA;EACA,YAAA;EACA,iBAAA,EAAA","file":"shortcode-ui-editor-styles.css"}
+{"version":3,"sources":["sass/shortcode-ui-editor-styles.scss"],"names":[],"mappings":"AAAA;EAIG,eAAe,EACf;;AALH;EASE,WAAW;EACX,kBAAkB,EAClB;;AAXF;EAcE,yCAAyC;EACzC,YAAY;EACZ,gBAAgB,EAChB;;AAGF;EACC,sBAAsB;EACtB,YAAY;EACZ,iBAAiB,EACjB","file":"shortcode-ui-editor-styles.css"}

shortcode-ui/trunk/css/shortcode-ui.css

@@ -6 +6 @@
   max-height: 800px;
   margin: auto; }
+
 .shortcode-ui-insert-modal .media-frame-content {
   top: 54px; }
@@ -25 +26 @@
       height: 120px;
       font-size: 64px; }
-      .add-shortcode-list .shortcode-list-item .add-shortcode-list-item-icon .dashicons, .add-shortcode-list .shortcode-list-item .add-shortcode-list-item-icon img {
+      .add-shortcode-list .shortcode-list-item .add-shortcode-list-item-icon .dashicons,
+      .add-shortcode-list .shortcode-list-item .add-shortcode-list-item-icon img {
         position: absolute;
         top: 50%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
-            -ms-transform: translate(-50%, -50%);
                 transform: translate(-50%, -50%);
         font-size: inherit;
@@ -58 +59 @@
   height: 34px;
   padding: 10px 10px 0; }
+
 .shortcode-ui-content .edit-shortcode-tabs-content {
   padding: 10px;
   border-top: 1px solid #ddd; }
+
 .shortcode-ui-content a.wp-color-result {
   border-bottom: 1px solid #ccc; }
+
 .shortcode-ui-content .media-toolbar {
   position: relative;
@@ -72 +76 @@
     display: block;
     clear: both; }
-  .edit-shortcode-form input, .edit-shortcode-form textarea {
+  .edit-shortcode-form input,
+  .edit-shortcode-form textarea {
     border: 1px solid #ddd;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
@@ -105 +110 @@
     clear: both; }
 
+.edit-shortcode-form .button.shortcake-attachment-select {
+  display: block;
+  clear: both;
+  margin-bottom: 15px; }
+
 .edit-shortcode-form .shortcake-attachment-preview {
-  width: 150px;
-  height: 150px;
+  float: left;
+  margin: 0 20px 20px 0;
+  width: 150px; }
+
+.edit-shortcode-form .shortcode-ui-field-attachment .description {
+  margin: 10px 0; }
+
+.edit-shortcode-form .shortcake-attachment-preview-container {
+  width: 150px !important;
+  height: 150px !important;
   margin: 0 10px 10px 0;
   line-height: 150px;
   text-align: center;
   padding: 0; }
-  .edit-shortcode-form .shortcake-attachment-preview:before {
+  .edit-shortcode-form .shortcake-attachment-preview-container:before {
     display: none; }
-  .edit-shortcode-form .shortcake-attachment-preview .thumbnail:hover:after {
-    background: rgba(0, 0, 0, 0.1);
-    -webkit-transition: all .3s linear;
-            transition: all .3s linear; }
-  .edit-shortcode-form .shortcake-attachment-preview:not(.has-attachment) {
-    border: 2px dashed #DDD;
-    border-radius: 2px;
-    background: transparent;
-    box-shadow: none; }
-  .edit-shortcode-form .shortcake-attachment-preview .button.add {
-    vertical-align: middle;
-    z-index: 1; }
-  .edit-shortcode-form .shortcake-attachment-preview .button.remove {
+  .edit-shortcode-form .shortcake-attachment-preview-container .button.remove {
     z-index: 1;
-    display: none;
+    display: block;
     position: absolute;
     top: 5px;
@@ -140 +146 @@
     padding: 0;
     overflow: hidden; }
-    .edit-shortcode-form .shortcake-attachment-preview .button.remove:after {
+    .edit-shortcode-form .shortcake-attachment-preview-container .button.remove:after {
       content: "\00d7";
       position: absolute;
@@ -147 +153 @@
       font-size: 22px;
       text-indent: 0; }
-  .edit-shortcode-form .shortcake-attachment-preview .loading-indicator, .edit-shortcode-form .shortcake-attachment-preview.loading .button.add {
+  .edit-shortcode-form .shortcake-attachment-preview-container .thumbnail img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto; }
+  .edit-shortcode-form .shortcake-attachment-preview-container .loading-indicator,
+  .edit-shortcode-form .shortcake-attachment-preview-container.loading .button.add {
     display: none; }
-  .edit-shortcode-form .shortcake-attachment-preview.loading .loading-indicator {
+  .edit-shortcode-form .shortcake-attachment-preview-container.loading .loading-indicator {
     display: block;
     position: relative;
     width: 100%;
     height: 100%; }
-  .edit-shortcode-form .shortcake-attachment-preview .loading-indicator .dashicons {
+  .edit-shortcode-form .shortcake-attachment-preview-container .loading-indicator .dashicons {
     font-size: 80px;
     height: 100px;
@@ -161 +173 @@
     text-align: center;
     vertical-align: middle; }
-  .edit-shortcode-form .shortcake-attachment-preview .loading-indicator .attachment-preview-loading {
+  .edit-shortcode-form .shortcake-attachment-preview-container .loading-indicator .attachment-preview-loading {
     width: 60px;
     height: 5px;
@@ -167 +179 @@
     background-color: transparent;
     margin: -30px auto 0; }
-    .edit-shortcode-form .shortcake-attachment-preview .loading-indicator .attachment-preview-loading ins {
+    .edit-shortcode-form .shortcake-attachment-preview-container .loading-indicator .attachment-preview-loading ins {
       background-color: #464646;
       margin: 0 0 0 -60px;
@@ -175 +187 @@
       -webkit-animation: attachment-preview-loading 1.3s infinite 1s linear;
       animation: attachment-preview-loading 1.3s infinite 1s linear; }
-  .edit-shortcode-form .shortcake-attachment-preview .filename {
+  .edit-shortcode-form .shortcake-attachment-preview-container .filename {
     line-height: 1.4em; }
-  .edit-shortcode-form .shortcake-attachment-preview.has-attachment .button.add {
-    display: none; }
-  .edit-shortcode-form .shortcake-attachment-preview.has-attachment .button.remove {
-    display: block; }
 
 .edit-shortcode-form .thumbnail-details-container {
@@ -190 +198 @@
   0% {
     margin-left: -60px; }
-
   100% {
     margin-left: 60px; } }
@@ -197 +204 @@
   0% {
     margin-left: -60px; }
-
   100% {
     margin-left: 60px; } }
+
+.edit-shortcode-form .select2-container {
+  min-width: 300px; }
+
+.edit-shortcode-form .select2-container a {
+  transition: none;
+  -webkit-transition: none; }
+
+.edit-shortcode-form .select2-drop {
+  z-index: 160001; }
+
+.edit-shortcode-form .select2 li {
+  margin: 0; }
+
+.edit-shortcode-form .select2-selection__rendered {
+  vertical-align: top; }
+
+.edit-shortcode-form .select2-container .select2-search--inline .select2-search__field {
+  margin-top: 7px; }
+
+.edit-shortcode-form .select2-container--default .select2-selection--multiple {
+  border-radius: 0;
+  border-color: #ddd;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
+  background-color: #fff;
+  color: #333;
+  outline: none; }
+
+.edit-shortcode-form .select2-container--default.select2-container--focus .select2-selection--multiple {
+  border-color: #5b9dd9;
+  box-shadow: 0 0 2px rgba(30, 140, 190, 0.8); }
+
+.select2-container {
+  z-index: 160000;
+  max-width: 300px; }
+
+.select2-results li {
+  margin: 0; }
 /*# sourceMappingURL=shortcode-ui.css.map */

shortcode-ui/trunk/css/shortcode-ui.css.map

@@ -1 @@
-{"version":3,"sources":["../shortcode-ui.scss","../_field-image.scss","shortcode-ui.css"],"names":[],"mappings":"AAAA;EACC,mBAAA,EAAA;;AAKD;EACE,iBAAA;EACA,kBAAA;EACA,aAAA,EAAA;AAGF;EACE,UAAA,EAAA;;AAKF;EACC,gBAAA,EAAA;EAED;IACE,aAAA;IACA,YAAA;IAEA,kFAAA;IACA,iBAAA;IACA,gBAAA;IACA,mBAAA;IACA,mBAAA;IACA,aAAA;IACA,cAAA,EAAA;IAEF;MACG,mBAAA;MACA,cAAA;MACA,gBAAA,EAAA;MAEH;QAEI,mBAAA;QACA,SAAA;QACA,UAAA;QACA,yCAAA;YAAA,qCAAA;gBAAA,iCAAA;QACA,mBAAA;QACA,qBAAA;QACA,YAAA;QACA,aAAA;QACA,eAAA;QACA,gBAAA,EAAA;IAKJ;MACG,uBAAA;MACA,mBAAA;MACA,UAAA;MACA,QAAA;MACA,YAAA;MACA,UAAA;MACA,iBAAA;MACA,aAAA;MACA,iBAAA;MACA,iBAAA;MACA,sBAAA;MACA,mBAAA;MACA,kBAAA;MACA,qCAAA;MAEA,gDAAA,EAAA;;AAOH;EACE,aAAA;EACA,qBAAA,EAAA;AAGF;EACE,cAAA;EACA,2BAAA,EAAA;AAGF;EACE,8BAAA,EAAA;AAGF;EACE,mBAAA;EACA,aAAA,EAAA;;AAIF;EAEC,kBAAA,EAAA;EAED;IACE,eAAA;IACA,YAAA,EAAA;EAGF;IAEE,uBAAA;IAEA,gDAAA;IACA,uBAAA;IACA,YAAA;IACA,cAAA;IACA,mDAAA;IACA,2CAAA;IACA,gBAAA,EAAA;EAGF;IAEE,iBAAA,EAAA;EAGF;IACE,sBAAA;IACA,iBAAA;IACA,oBAAA,EAAA;EAGF;IACE,YAAA;IACA,gBAAA;IACA,kBAAA,EAAA;EAIF;IAAU,oBAAA,EAAA;EAGV;IACE,eAAA,EAAA;IACF;MACG,eAAA;MACA,oBAAA,EAAA;EAIH;IAIE,kBAAA,EAAA;IAHF;MACG,sBAAA,EAAA;EAKH;IACE,YAAA,EAAA;;AC5JF;EAEC,aAAA;EACA,cAAA;EACA,sBAAA;EACA,mBAAA;EACA,mBAAA;EACA,WAAA,EAAA;EAED;IACE,cAAA,EAAA;EAGF;IACE,+BAAA;IACA,mCAAA;YAAA,2BAAA,EAAA;EAGF;IACE,wBAAA;IACA,mBAAA;IACA,wBAAA;IACA,iBAAA,EAAA;EAGF;IACE,uBAAA;IACA,WAAA,EAAA;EAGF;IAEE,WAAA;IACA,cAAA;IACA,mBAAA;IACA,SAAA;IACA,WAAA;IACA,uBAAA;IACA,0CAAA;IACA,kBAAA;IACA,mBAAA;IACA,YAAA;IACA,aAAA;IACA,WAAA;IACA,iBAAA,EAAA;IAEF;MACG,iBAAA;MACA,mBAAA;MACA,UAAA;MACA,UAAA;MACA,gBAAA;MACA,eAAA,EAAA;EAIH;IAEE,cAAA,EAAA;EAGF;IACE,eAAA;IACA,mBAAA;IACA,YAAA;IACA,aAAA,EAAA;EAIF;IACG,gBAAA;IACA,cAAA;IACA,mBAAA;IACA,YAAA;IACA,mBAAA;IACA,uBAAA,EAAA;EAEH;IACG,YAAA;IACA,YAAA;IACA,iBAAA;IACA,8BAAA;IACA,qBAAA,EAAA;IAEH;MACI,0BAAA;MACA,oBAAA;MACA,YAAA;MACA,YAAA;MACA,eAAA;MACA,sEAAA;MACA,8DAAA,EAAA;EAKJ;IACE,mBAAA,EAAA;EAIF;IACG,cAAA,EAAA;EAEH;IACG,eAAA,EAAA;;AAMH;EACC,cAAA,EAAA;EAED;IACE,eAAA,EAAA;;AC0EF;EDrEA;IACE,mBAAA,EAAA;;EAEF;IACE,kBAAA,EAAA,EAAA;;ACwEF;EDnEA;IACE,mBAAA,EAAA;;EAEF;IACE,kBAAA,EAAA,EAAA","file":"shortcode-ui.css"}
+{"version":3,"sources":["sass/shortcode-ui.scss","sass/_field-image.scss","sass/_select2-fields.scss"],"names":[],"mappings":"AAAA;EACC,mBAAmB,EACnB;;AAED;EAGE,iBAAiB;EACjB,kBAAkB;EAClB,aAAa,EACb;;AANF;EASE,UAAU,EACV;;AAIF;EACC,gBAAgB,EAuDhB;EAxDD;IAIE,aAAa;IACb,YAAY;IAEZ,kFAAqE;IACrE,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,mBAAmB;IACnB,aAAa;IACb,cAAc,EAyCd;IAtDF;MAgBG,mBAAmB;MACnB,cAAc;MACd,gBAAgB,EAgBhB;MAlCH;;QAsBI,mBAAmB;QACnB,SAAS;QACT,UAAU;QACV,yCAAoB;gBAApB,iCAAoB;QACpB,mBAAmB;QACnB,qBAAqB;QACrB,YAAY;QACZ,aAAa;QACb,eAAe;QACf,gBAAgB,EAChB;IAhCJ;MAqCG,uBAAuB;MACvB,mBAAmB;MACnB,UAAU;MACV,QAAQ;MACR,YAAY;MACZ,UAAU;MACV,iBAAiB;MACjB,aAAa;MACb,iBAAiB;MACjB,iBAAiB;MACjB,sBAAsB;MACtB,mBAAmB;MACnB,kBAAkB;MAClB,qCAAgB;MAEhB,gDAAgC,EAChC;;AAKH;EAEE,aAAa;EACb,qBAAqB,EACrB;;AAJF;EAOE,cAAc;EACd,2BAA2B,EAC3B;;AATF;EAYE,8BAA8B,EAC9B;;AAbF;EAgBE,mBAAmB;EACnB,aAAa,EACb;;AAGF;EAEC,kBAAkB,EA2DlB;EA7DD;IAKE,eAAe;IACf,YAAY,EACZ;EAPF;;IAWE,uBAAuB;IAEvB,gDAAgC;IAChC,uBAAuB;IACvB,YAAY;IACZ,cAAc;IACd,mDAAmD;IACnD,2CAA2C;IAC3C,gBAAgB,EAChB;EApBF;IAwBE,iBAAiB,EACjB;EAzBF;IA4BE,sBAAsB;IACtB,iBAAiB;IACjB,oBAAoB,EACpB;EA/BF;IAkCE,YAAY;IACZ,gBAAgB;IAChB,kBAAkB,EAClB;EArCF;IAwCU,oBAAoB,EAAI;EAxClC;IA4CE,eAAe,EAKf;IAjDF;MA8CG,eAAe;MACf,oBAAoB,EACpB;EAhDH;IAuDE,kBAAkB,EAClB;IAxDF;MAqDG,sBAAsB,EACtB;EAtDH;IA2DE,YAAY,EACZ;;AC7JF;EAGE,eAAe;EACf,YAAY;EACZ,oBAAoB,EACpB;;AANF;EASE,YAAY;EACZ,sBAAsB;EACtB,aAAa,EACb;;AAZF;EAeE,eAAe,EACf;;AAhBF;EAoBE,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;EACtB,mBAAmB;EACnB,mBAAmB;EACnB,WAAW,EAmFX;EA5GF;IA4BG,cAAc,EACd;EA7BH;IAiCG,WAAW;IACX,eAAe;IACf,mBAAmB;IACnB,SAAS;IACT,WAAW;IACX,uBAAuB;IACvB,0CAA0B;IAC1B,kBAAkB;IAClB,mBAAmB;IACnB,YAAY;IACZ,aAAa;IACb,WAAW;IACX,iBAAgB,EAUhB;IAvDH;MAgDI,iBAAiB;MACjB,mBAAmB;MACnB,UAAU;MACV,UAAU;MACV,gBAAgB;MAChB,eAAe,EACf;EAtDJ;IA0DG,gBAAgB;IAChB,iBAAiB;IACjB,YAAY;IACZ,aAAa,EACb;EA9DH;;IAkEG,cAAc,EACd;EAnEH;IAsEG,eAAe;IACf,mBAAmB;IACnB,YAAY;IACZ,aAAa,EACb;EA1EH;IA8EI,gBAAgB;IAChB,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,mBAAmB;IACnB,uBAAuB,EACvB;EApFJ;IAsFI,YAAY;IACZ,YAAY;IACZ,iBAAiB;IACjB,8BAA8B;IAC9B,qBAAqB,EAWrB;IArGJ;MA6FK,0BAA0B;MAC1B,oBAAoB;MACpB,YAAY;MACZ,YAAY;MACZ,eAAe;MACf,sEAAsE;MACtE,8DAA8D,EAC9D;EApGL;IAyGG,mBACA,EAAC;;AAMJ;EACC,cAAc,EAKd;EAND;IAIE,eAAe,EACf;;AAGF;EACC;IACC,mBAAmB,EAAA;EAEpB;IACC,kBAAkB,EAAA,EAAA;;AAIpB;EACC;IACC,mBAAmB,EAAA;EAEpB;IACC,kBAAkB,EAAA,EAAA;;ACtIpB;EAEE,iBAAiB,EACjB;;AAHF;EAME,iBAAiB;EACjB,yBAAyB,EACzB;;AARF;EAWE,gBAAgB,EAChB;;AAZF;EAeE,UAAU,EACV;;AAhBF;EAmBE,oBAAoB,EACpB;;AApBF;EAuBE,gBAAgB,EAChB;;AAxBF;EA2BE,iBAAiB;EACjB,mBAAmB;EACnB,gDAAgC;EAChC,uBAAuB;EACvB,YAAY;EACZ,cAAc,EACd;;AAjCF;EAoCE,sBAAsB;EACtB,4CAAwB,EACxB;;AAIF;EACC,gBAAgB;EAChB,iBAAiB,EACjB;;AAED;EACC,UAAU,EACV","file":"shortcode-ui.css"}

shortcode-ui/trunk/inc/class-shortcode-ui.php

@@ -68 +68 @@
         add_action( 'admin_enqueue_scripts',     array( $this, 'action_admin_enqueue_scripts' ) );
         add_action( 'wp_enqueue_editor',         array( $this, 'action_wp_enqueue_editor' ) );
+        add_action( 'media_buttons',             array( $this, 'action_media_buttons' ) );
         add_action( 'wp_ajax_bulk_do_shortcode', array( $this, 'handle_ajax_bulk_do_shortcode' ) );
         add_filter( 'wp_editor_settings',        array( $this, 'filter_wp_editor_settings' ), 10, 2 );
@@ -196 +197 @@
     public function action_admin_enqueue_scripts( $editor_supports ) {
         add_editor_style( trailingslashit( $this->plugin_url ) . 'css/shortcode-ui-editor-styles.css' );
+
+        $min = '';
+
+        wp_register_script( 'select2',
+            trailingslashit( $this->plugin_url ) . "lib/select2/js/select2{$min}.js",
+            array( 'jquery', 'jquery-ui-sortable' ), '4.0.3'
+        );
+        wp_register_style( 'select2',
+            trailingslashit( $this->plugin_url ) . 'lib/select2/css/select2.css',
+            null, '4.0.3'
+        );
     }
 
@@ -213 +225 @@
         if ( $current_post_type ) {
             foreach ( $shortcodes as $key => $args ) {
-                if ( ! empty( $args['post_type'] ) && ! in_array( $current_post_type, $args['post_type'] ) ) {
+                if ( ! empty( $args['post_type'] ) && ! in_array( $current_post_type, $args['post_type'], true ) ) {
                     unset( $shortcodes[ $key ] );
                 }
@@ -226 +238 @@
 
         // Load minified version of wp-js-hooks if not debugging.
-        $wp_js_hooks_file = 'wp-js-hooks' . ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '.min' : '' ) . '.js';
+        $wp_js_hooks_file = 'wp-js-hooks' . ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min' ) . '.js';
 
         wp_enqueue_script( 'shortcode-ui-js-hooks', $this->plugin_url . 'lib/wp-js-hooks/' . $wp_js_hooks_file, array(), '2015-03-19' );
@@ -275 +287 @@
 
     /**
+     * Output an "Add Post Element" button with the media buttons.
+     */
+    public function action_media_buttons( $editor_id ) {
+        printf( '<button type="button" class="button shortcake-add-post-element" data-editor="%s">' .
+            '<span class="wp-media-buttons-icon dashicons dashicons-migrate"></span> %s' .
+            '</button>',
+            esc_attr( $editor_id ),
+            esc_html__( 'Add Post Element', 'shortcode-ui' )
+        );
+    }
+
+    /**
      * Output required underscore.js templates in the footer
      */
     public function action_admin_print_footer_scripts() {
+
         echo $this->get_view( 'media-frame' ); // WPCS: xss ok
         echo $this->get_view( 'list-item' ); // WPCS: xss ok

shortcode-ui/trunk/inc/fields/class-field-attachment.php

@@ -93 +93 @@
             <div class="field-block shortcode-ui-field-attachment shortcode-ui-attribute-{{ data.attr }}">
                 <label for="{{ data.attr }}">{{{ data.label }}}</label>
-                <div class="shortcake-attachment-preview attachment-preview attachment">
-                    <button id="{{ data.attr }}" class="button button-small add">{{ data.addButton }}</button>
-                    <button class="button button-small remove">&times;</button>
-                    <div class="loading-indicator">
-                        <span class="dashicons dashicons-format-image"></span>
-                        <div class="attachment-preview-loading"><ins></ins></div>
-                    </div>
-                </div>
-                <div class="thumbnail-details-container">
-                    <strong><?php esc_html_e( 'Thumbnail Details', 'shortcode-ui' ); ?></strong>
-                    <div class="filename"></div>
-                    <div class="date-formatted"></div>
-                    <div class="size"></div>
-                    <div class="dimensions"></div>
-                    <div class="edit-link"><a href="#"><?php esc_html_e( 'Edit Attachment', 'shortcode-ui' ); ?></a></div>
-                </div>
                 <# if ( typeof data.description == 'string' ) { #>
                     <p class="description">{{{ data.description }}}</p>
                 <# } #>
+                <button id="{{ data.attr }}" class="shortcake-attachment-select button button-small add">{{ data.addButton }}</button>
+                <div class="attachment-previews"></div>
+            </div>
+        </script>
+
+        <script type="text/html" id="tmpl-shortcake-image-preview">
+            <div class="shortcake-attachment-preview">
+                <div class="shortcake-attachment-preview-container attachment-preview attachment <# if ( data.type === 'image' && ! data.sizes ) { #>loading<# } #>">
+
+                    <button class="button button-small remove" data-id="{{ data.id }}">×</button>
+
+                    <# if ( data.type === 'image' && data.sizes && data.sizes.thumbnail ) { #>
+                        <div class="thumbnail">
+                            <div class="centered">
+                                <img src="{{ data.sizes.thumbnail.url }}" alt="" width="{{ data.sizes.thumbnail.width }}" height="{{ data.sizes.thumbnail.height }}" />
+                            </div>
+                        </div>
+                    <# } else if ( data.type === 'image' && ( ! data.sizes || ! data.sizes.thumbnail ) ) { #>
+                        <div class="thumbnail">
+                            <div class="centered">
+                                <img src="{{ data.url }}" alt="" width="{{ data.width }}" height="{{ data.height }}" />
+                            </div>
+                        </div>
+                    <# } else if ( data.type !== 'image' ) { #>
+                        <div class="thumbnail">
+                            <div class="centered">
+                                <img src="{{ data.icon }}" />
+                            </div>
+                            <div class="filename"><div>{{ data.filename }}</div></div>
+                        </div>
+                    <# } else { #>
+                        <div class="loading-indicator">
+                            <span class="dashicons dashicons-format-image"></span>
+                            <div class="attachment-preview-loading"><ins></ins></div>
+                        </div>
+                    <# } #>
+
+                </div>
+
+                <div class="thumbnail-details-container has-attachment">
+                    <strong>Thumbnail Details</strong>
+                    <div class="filename">{{ data.filename }}</div>
+                    <div class="date-formatted">{{ data.dateFormatted }}</div>
+                    <div class="size">{{ data.filesizeHumanReadable }}</div>
+                    <# if ( data.type === 'image' ) { #>
+                        <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+                    <# } #>
+                    <div class="edit-link"><a href="{{ data.editLink }}">Edit Attachment</a></div>
+                </div>
             </div>
         </script>

shortcode-ui/trunk/inc/fields/class-field-color.php

@@ -113 +113 @@
                 <label for="{{ data.attr }}">{{{ data.label }}}</label>
                 <input type="text" name="{{ data.attr }}" id="{{ data.attr }}" value="{{ data.value }}" data-default-color="{{ data.value }}" {{{ data.meta }}}/>
-                <# if ( typeof data.description == 'string' ) { #>
+                <# if ( typeof data.description == 'string' && data.description.length ) { #>
                     <p class="description">{{{ data.description }}}</p>
                 <# } #>

shortcode-ui/trunk/inc/fields/class-field-post-select.php

@@ -39 +39 @@
     public function action_enqueue_shortcode_ui() {
 
-        $plugin_dir = dirname( dirname( __FILE__ ) );
-
-        wp_enqueue_script( 'select2', plugins_url( 'lib/select2/select2.min.js', $plugin_dir ) , array( 'jquery', 'jquery-ui-sortable' ), '3.5.2' );
-        wp_enqueue_style( 'select2', plugins_url( 'lib/select2/select2.css', $plugin_dir ), null, '3.5.2' );
+        wp_enqueue_script( 'select2' );
+        wp_enqueue_style( 'select2' );
 
         wp_localize_script( 'shortcode-ui', 'shortcodeUiPostFieldData', array(
@@ -57 +55 @@
         ?>
 
-        <style>
-
-            .edit-shortcode-form .select2-container {
-                min-width: 300px;
-            }
-
-            .edit-shortcode-form .select2-container a {
-                transition: none;
-                -webkit-transition: none;
-            }
-
-            .wp-admin .select2-drop {
-                z-index: 160001;
-            }
-
-        </style>
-
         <script type="text/html" id="tmpl-shortcode-ui-field-post-select">
             <div class="field-block shortcode-ui-field-post-select shortcode-ui-attribute-{{ data.attr }}">
                 <label for="{{ data.id }}">{{{ data.label }}}</label>
-                <input type="text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" class="shortcode-ui-post-select" />
-                <# if ( typeof data.description == 'string' ) { #>
+                <select id="{{ data.id }}" name="{{ data.name }}" class="shortcode-ui-post-select" ></select>
+                <# if ( typeof data.description == 'string' && data.description.length ) { #>
                     <p class="description">{{{ data.description }}}</p>
                 <# } #>
@@ -101 +82 @@
         $requested_shortcode = isset( $_GET['shortcode'] ) ? sanitize_text_field( $_GET['shortcode'] ) : null;
         $requested_attr      = isset( $_GET['attr'] ) ? sanitize_text_field( $_GET['attr'] ) : null;
-        $response            = array( 'posts' => array(), 'found_posts' => 0, 'posts_per_page' => 0 );
+        $response            = array( 'items' => array(), 'found_items' => 0, 'items_per_page' => 0 );
 
         $shortcodes = Shortcode_UI::get_instance()->get_shortcodes();
@@ -139 +120 @@
         }
 
-        if ( ! empty( $_GET['post__in'] ) ) {
-            $post__in = is_array( $_GET['post__in'] ) ? $_GET['post__in'] : explode( ',', $_GET['post__in'] );
+        if ( ! empty( $_GET['include'] ) ) {
+            $post__in = is_array( $_GET['include'] ) ? $_GET['include'] : explode( ',', $_GET['include'] );
             $query_args['post__in'] = array_map( 'intval', $post__in );
             $query_args['orderby']  = 'post__in';
@@ -149 +130 @@
 
         foreach ( $query->posts as $post_id ) {
-            array_push( $response['posts'], array( 'id' => $post_id, 'text' => html_entity_decode( get_the_title( $post_id ) ) ) );
+            array_push( $response['items'], array( 'id' => $post_id, 'text' => html_entity_decode( get_the_title( $post_id ) ) ) );
         }
 
-        $response['found_posts']    = $query->found_posts;
-        $response['posts_per_page'] = $query->query_vars['posts_per_page'];
+        $response['found_items']    = $query->found_posts;
+        $response['items_per_page'] = $query->query_vars['posts_per_page'];
 
         wp_send_json_success( $response );

shortcode-ui/trunk/inc/templates/edit-form.tpl.php

@@ -20 +20 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="text" class="regular-text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -30 +30 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="url" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" class="code" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -40 +40 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <textarea name="{{ data.attr }}" id="{{ data.id }}" {{{ data.meta }}}>{{ data.value }}</textarea>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -50 +50 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <select name="{{ data.attr }}" id="{{ data.id }}" {{{ data.meta }}}>
-            <# _.each( data.options, function( label, value ) { #>
-                <option value="{{ value }}" <# if ( value == data.value ){ print('selected'); } #>>{{ label }}</option>
+            <# _.each( data.options, function( option ) { #>
+
+                <# if ( 'options' in option && 'label' in option ) { #>
+                    <optgroup label="{{ option.label }}">
+                        <# _.each( option.options, function( optgroupOption ) { #>
+                            <option value="{{ optgroupOption.value }}" <# if ( optgroupOption.value === data.value ){ print('selected'); } #>>{{ optgroupOption.label }}</option>
+                        <# }); #>
+                    </optgroup>
+                <# } else { #>
+                    <option value="{{ option.value }}" <# if ( option.value === data.value ){ print('selected'); } #>>{{ option.label }}</option>
+                <# } #>
+
             <# }); #>
         </select>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -63 +73 @@
     <div class="field-block shortcode-ui-field-radio shortcode-ui-attribute-{{ data.attr }}">
         <label>{{{ data.label }}}</label>
-        <# _.each( data.options, function( label, value ) { #>
+        <# _.each( data.options, function( option ) { #>
             <label>
-                <input type="radio" name="{{ data.attr }}" value="{{ value }}" <# if ( value == data.value ) { print('checked'); } #> />
-                {{ label }}
+                <input type="radio" name="{{ data.attr }}" value="{{ option.value }}" <# if ( option.value == data.value ) { print('checked'); } #> />
+                {{ option.label }}
             </label>
         <# }); #>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -81 +91 @@
             {{{ data.label }}}
         </label>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -91 +101 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="email" class="regular-text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value}}" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -101 +111 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="number" class="regular-text" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value}}" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -111 +121 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="hidden" name="{{ data.attr }}" id="{{ data.id }}" value="true" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -121 +131 @@
         <label for="{{ data.id }}">{{{ data.label }}}</label>
         <input type="date" name="{{ data.attr }}" id="{{ data.id }}" value="{{ data.value }}" {{{ data.meta }}}/>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -131 +141 @@
         <label for="inner_content">{{{ data.label }}}</label>
         <textarea id="inner_content" name="inner_content" class="content-edit" {{{ data.meta }}}>{{ data.value }}</textarea>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>
@@ -144 +154 @@
             <output class="range" for="{{ data.id }}" id="{{ data.id }}_indicator">{{ data.value }}</output>
         </div>
-        <# if ( typeof data.description == 'string' ) { #>
+        <# if ( typeof data.description == 'string' && data.description.length ) { #>
             <p class="description">{{{ data.description }}}</p>
         <# } #>

shortcode-ui/trunk/js/build/shortcode-ui.js

@@ -64 +64 @@
         var pattern = new RegExp( searchTerm, "gi" );
         var filteredModels = sui.shortcodes.filter( function( model ) {
+            pattern.lastIndex = 0;
             return pattern.test( model.get( "label" ) );
         });
@@ -211 +212 @@
             // Encode textareas incase HTML
             if ( attr.get( 'encode' ) ) {
-                attr.set( 'value', encodeURIComponent( decodeURIComponent( attr.get( 'value' ) ) ), { silent: true } );
+                attr.set( 'value', encodeURIComponent( decodeURIComponent( attr.get( 'value' ).replace( "%", "%" ) ) ), { silent: true } );
             }
 
@@ -229 +230 @@
 
         if ( attrs.length > 0 ) {
-            template = "[{{ shortcode }} {{ attributes }}]";
+            template = "[{{ shortcode }} {{ attributes }}";
         } else {
-            template = "[{{ shortcode }}]";
+            template = "[{{ shortcode }}";
         }
 
         if ( content && content.length > 0 ) {
-            template += "{{ content }}[/{{ shortcode }}]";
+            template += "]{{ content }}[/{{ shortcode }}]";
+        } else {
+            // add closing slash to shortcodes without content
+            template += "/]";
         }
 
@@ -271 +275 @@
             wp.mce.views.register(
                 shortcode.get('shortcode_tag'),
-                // Must extend for 4.1.
-                // This is handled by wp.mce.views.register in 4.2.
-                $.extend( true, {}, shortcodeViewConstructor )
+                shortcodeViewConstructor
             );
         }
     } );
 
+    $(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
+        var elem = $( event.currentTarget ),
+            editor = elem.data('editor'),
+            options = {
+                frame: 'post',
+                state: 'shortcode-ui',
+                title: shortcodeUIData.strings.media_frame_title
+            };
+
+        event.preventDefault();
+
+        // Remove focus from the `.shortcake-add-post-element` button.
+        // Prevents Opera from showing the outline of the button above the modal.
+        //
+        // See: https://core.trac.wordpress.org/ticket/22445
+        elem.blur();
+
+        wp.media.editor.remove( editor );
+        wp.media.editor.open( editor, options );
+    } );
+
 });
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./collections/shortcodes.js":2,"./utils/shortcode-view-constructor.js":9,"./utils/sui.js":10,"./views/media-frame.js":18}],8:[function(require,module,exports){
+},{"./collections/shortcodes.js":2,"./utils/shortcode-view-constructor.js":9,"./utils/sui.js":10,"./views/media-frame.js":20}],8:[function(require,module,exports){
 (function (global){
 var $ = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
@@ -366 +389 @@
         }
 
-        var request = $.post( ajaxurl + '?action=bulk_do_shortcode', {
-                queries: _.pluck( fetcher.queries, 'query' )
-            }
-        );
-
-        request.done( function( response ) {
-            _.each( response.data, function( result, index ) {
+        var request = wp.ajax.post( 'bulk_do_shortcode', {
+            queries: _.pluck( fetcher.queries, 'query' )
+        });
+
+        request.done( function( responseData ) {
+            _.each( responseData, function( result, index ) {
                 var matchedQuery = _.findWhere( fetcher.queries, {
                     counter: parseInt( index ),
@@ -484 +506 @@
             if ( attr && attr.get('encode') ) {
                 value = decodeURIComponent( value );
+                value = value.replace( "%", "%" );
             }
 
@@ -560 +583 @@
      */
     edit: function( shortcodeString ) {
-        var currentShortcode;
-
-        // Backwards compatability for WP pre-4.2
-        if ( 'object' === typeof( shortcodeString ) ) {
-            shortcodeString = decodeURIComponent( $(shortcodeString).attr('data-wpview-text') );
-        }
-
-        currentShortcode = this.parseShortcodeString( shortcodeString );
+
+        var currentShortcode = this.parseShortcodeString( shortcodeString );
 
         if ( currentShortcode ) {
@@ -579 +596 @@
             wp_media_frame.open();
 
+            /* Trigger render_edit */
+            /*
+             * Action run after an edit shortcode overlay is rendered.
+             *
+             * Called as `shortcode-ui.render_edit`.
+             *
+             * @param shortcodeModel (object)
+             *           Reference to the shortcode model used in this overlay.
+             */
+            var hookName = 'shortcode-ui.render_edit';
+            var shortcodeModel = this.shortcodeModel;
+            wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
         }
 
@@ -599 +629 @@
         var shortcode_tags = _.map( sui.shortcodes.pluck( 'shortcode_tag' ), this.pregQuote ).join( '|' );
         var regexp = wp.shortcode.regexp( shortcode_tags );
+        regexp.lastIndex = 0;
         var matches = regexp.exec( shortcodeString );
 
@@ -651 +682 @@
     },
 
-    // Backwards compatability for Pre WP 4.2.
-    View: {
-
-        overlay: true,
-
-        initialize: function( options ) {
-            this.shortcode = this.getShortcode( options );
-            this.fetch();
-        },
-
-        getShortcode: function( options ) {
-
-            var shortcodeModel, shortcode;
-
-            shortcodeModel = sui.shortcodes.findWhere( { shortcode_tag: options.shortcode.tag } );
-
-            if (!shortcodeModel) {
-                return;
-            }
-
-            shortcode = shortcodeModel.clone();
-
-            shortcode.get('attrs').each(
-                    function(attr) {
-
-                        if (attr.get('attr') in options.shortcode.attrs.named) {
-                            attr.set('value',
-                                    options.shortcode.attrs.named[attr
-                                            .get('attr')]);
-                        }
-
-                    });
-
-            if ('content' in options.shortcode) {
-                var inner_content = shortcode.get('inner_content');
-                if ( inner_content ) {
-                    inner_content.set('value', options.shortcode.content);
-                }
-            }
-
-            return shortcode;
-
-        },
-
-        fetch : function() {
-
-            var self = this;
-
-            if ( ! this.parsed ) {
-
-                wp.ajax.post( 'do_shortcode', {
-                    post_id: $( '#post_ID' ).val(),
-                    shortcode: this.shortcode.formatShortcode(),
-                    nonce: shortcodeUIData.nonces.preview,
-                }).done( function( response ) {
-                    if ( response.indexOf( '<script' ) !== -1 ) {
-                        self.setIframes( self.getEditorStyles(), response );
-                    } else {
-                        self.parsed = response;
-                        self.render( true );
-                    }
-                }).fail( function() {
-                    self.parsed = '<span class="shortcake-error">' + shortcodeUIData.strings.mce_view_error + '</span>';
-                    self.render( true );
-                } );
-
-            }
-
-        },
-
-        /**
-         * Render the shortcode
-         *
-         * To ensure consistent rendering - this makes an ajax request to the
-         * admin and displays.
-         *
-         * @return string html
-         */
-        getHtml : function() {
-            return this.parsed;
-        },
-
-        /**
-         * Returns an array of <link> tags for stylesheets applied to the TinyMCE editor.
-         *
-         * @method getEditorStyles
-         * @returns {Array}
-         */
-        getEditorStyles: function() {
-
-            var styles = '';
-
-            this.getNodes( function ( editor, node, content ) {
-                var dom = editor.dom,
-                    bodyClasses = editor.getBody().className || '',
-                    iframe, iframeDoc, i, resize;
-
-                tinymce.each( dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) {
-                    if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
-                        link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) {
-
-                        styles += dom.getOuterHTML( link ) + '\n';
-                    }
-
-                });
-
-            } );
-
-            return styles;
-        },
-
-    },
 };
 
@@ -781 +700 @@
 
 },{"./../collections/shortcodes.js":2}],11:[function(require,module,exports){
+(function (global){
 var sui = require('./../utils/sui.js');
+var $   = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
 
 var editAttributeFieldAttachment = sui.views.editAttributeField.extend( {
+
+    previewTemplate: wp.template( 'shortcake-image-preview' ),
 
     events: {
@@ -792 +715 @@
     },
 
+    currentSelection: [],
+
+    initialize: function() {
+
+        var self = this;
+
+        _.bindAll( self, 'updateValue', 'initSelection', '_renderPreview', '_renderAll', '_removeAttachment' );
+
+        self.initSelection();
+
+        self.currentSelection.on( 'all', this.updateValue );
+        self.currentSelection.on( 'add', this._renderPreview );
+        self.currentSelection.on( 'reset', this._renderAll );
+
+    },
+
+    /**
+     * Initialize Selection.
+     *
+     * Selection is an Attachment collection containing full models for the current value.
+     *
+     * @return null
+     */
+    initSelection: function() {
+
+        this.currentSelection = new wp.media.model.Selection( [], {
+            multiple: this.model.get( 'multiple' ) ? true : false,
+        } );
+
+        // Initialize selection.
+        _.each( this.getValue(), function( item ) {
+
+            var model;
+
+            // Legacy. Handle storing full objects.
+            item  = ( 'object' === typeof( item ) ) ? item.id : item;
+            model = new wp.media.attachment( item );
+
+            this.currentSelection.add( model );
+
+            // Re-render after attachments have synced.
+            model.fetch();
+            model.on( 'sync', this._renderAll );
+
+        }.bind(this) );
+
+    },
+
     /**
      * Update the field attachment.
@@ -799 +770 @@
      * @param {int} id Attachment ID
      */
-    updateValue: function( id ) {
-
-        if ( ! id ) {
-            return;
-        }
-
-        this.setValue( id );
-
-        var self = this;
-
-        if ( editAttributeFieldAttachment.getFromCache( id ) ) {
-            self._renderPreview( editAttributeFieldAttachment.getFromCache( id ) );
-
-            // Call the updateValue() function, to trigger any listeners
-            // hooked on it.
-            self.triggerCallbacks();
-            return;
-        }
-
-        this.$container.addClass( 'loading' );
-
-        wp.ajax.post( 'get-attachment', {
-            'id': id
-        } ).done( function( attachment ) {
-            // Cache for later.
-            editAttributeFieldAttachment.setInCache( id, attachment );
-            self._renderPreview( attachment );
-
-            // Call the updateValue() function, to trigger any listeners
-            // hooked on it.
-            self.triggerCallbacks();
-        } ).always( function( attachment ) {
-            self.$container.removeClass( 'loading' );
-        });
+    updateValue: function() {
+        var value = this.currentSelection.pluck( 'id' );
+        this.setValue( value );
+        this.triggerCallbacks();
     },
 
@@ -846 +787 @@
         this.$el.html( this.template( this.model.toJSON() ) );
 
-        this.$container   = this.$el.find( '.shortcake-attachment-preview' );
+        this.$container = this.$el.find( '.attachment-previews' );
         this.$thumbnailDetailsContainer   = this.$el.find( '.thumbnail-details-container' );
-        var $addButton    = this.$container.find( 'button.add' );
+        var $addButton = this.$container.find( 'button.add' );
 
         this.frame = wp.media( {
-            multiple: false,
-            title: this.model.get( 'frameTitle' ),
+            multiple: this.model.get( 'multiple' ) ? true : false,
+            title:    this.model.get( 'frameTitle' ),
             library: {
                 type: this.model.get( 'libraryType' ),
@@ -858 +799 @@
         } );
 
-        // Add initial Attachment if available.
-        this.updateValue( this.model.get( 'value' ) );
+        this.frame.on( 'select', function() {
+            this.$el.trigger( 'selectAttachment' );
+        }.bind( this ) );
+
+        this._renderAll();
+
+    },
+
+    _renderAll: function() {
+
+        // Empty container.
+        this.$container.html('');
+
+        // Render each attachment in current selection.
+        this.currentSelection.each( function( attachment ) {
+            this._renderPreview( attachment );
+        }.bind(this) );
 
     },
@@ -870 +826 @@
     _renderPreview: function( attachment ) {
 
-        var $thumbnail = jQuery('<div class="thumbnail"></div>');
-
-        if ( 'image' !== attachment.type ) {
-
-            jQuery( '<img/>', {
-                src: attachment.icon,
-                alt: attachment.title,
-            } ).appendTo( $thumbnail );
-
-            jQuery( '<div/>', {
-                class: 'filename',
-                html:  '<div>' + attachment.title + '</div>',
-            } ).appendTo( $thumbnail );
-
-        } else {
-
-            attachmentThumb = (typeof attachment.sizes.thumbnail !== 'undefined') ?
-                attachment.sizes.thumbnail :
-                _.first( _.sortBy( attachment.sizes, 'width' ) );
-
-            jQuery( '<img/>', {
-                src:    attachmentThumb.url,
-                width:  attachmentThumb.width,
-                height: attachmentThumb.height,
-                alt:    attachment.alt,
-            } ) .appendTo( $thumbnail );
-
-        }
-
-        $thumbnail.find( 'img' ).wrap( '<div class="centered"></div>' );
-        this.$container.append( $thumbnail );
-        this.$container.toggleClass( 'has-attachment', true );
-
-        this.$thumbnailDetailsContainer.find( '.filename' ).text( attachment.filename );
-        this.$thumbnailDetailsContainer.find( '.date-formatted' ).text( attachment.dateFormatted );
-        this.$thumbnailDetailsContainer.find( '.size' ).text( attachment.filesizeHumanReadable );
-        this.$thumbnailDetailsContainer.find( '.dimensions' ).text( attachment.height + ' × ' + attachment.width );
-        this.$thumbnailDetailsContainer.find( '.edit-link a' ).attr( "href", attachment.editLink );
-        this.$thumbnailDetailsContainer.toggleClass( 'has-attachment', true );
+        var $thumbnail = $( this.previewTemplate( attachment.toJSON() ) );
+
+        $thumbnail.appendTo( this.$container );
+
+        attachment.on( 'remove', function() {
+            $thumbnail.remove();
+        } );
+
+    },
+
+    getValue: function() {
+
+        var value = this.model.get( 'value' );
+
+        if ( ! ( value instanceof Array ) ) {
+            value = value.split( ',' );
+        }
+
+        value = value.map( function( id ) {
+            return parseInt( id, 10 );
+        } );
+
+        value = value.filter( function( id ) {
+            return id > 0;
+        } );
+
+        value.sort( function( a, b ) {
+            return a < b;
+        } );
+
+        return value;
 
     },
@@ -917 +865 @@
      */
     _openMediaFrame: function(e) {
+
         e.preventDefault();
         this.frame.open();
-        if ( this.model.get( 'value' ) ) {
-            var selection = this.frame.state().get('selection');
-            attachment = wp.media.attachment( this.model.get( 'value' ) );
-            attachment.fetch();
-            selection.reset( attachment ? [ attachment ] : [] );
-            this.frame.state().set('selection', selection);
-        }
-
-        var self = this;
-        this.frame.on( 'select', function() {
-            self.$el.trigger( 'selectAttachment'  );
-        } );
+
+        var selection = this.frame.state().get('selection');
+        selection.reset( this.currentSelection.models );
+        this.frame.state('library').set( 'selection', selection );
 
     },
@@ -939 +880 @@
      */
     _selectAttachment: function(e) {
+
         var selection  = this.frame.state().get('selection');
-            attachment = selection.first();
-        if ( attachment.id != this.model.get( 'value' ) ){
-            this.model.set( 'value', null );
-            this.$container.toggleClass( 'has-attachment', false );
-            this.$container.find( '.thumbnail' ).remove();
-            this.updateValue( attachment.id );
-        }
+        this.currentSelection.reset( selection.toJSON() );
+
         this.frame.close();
+
     },
 
@@ -955 +893 @@
      */
     _removeAttachment: function(e) {
+
         e.preventDefault();
 
-        this.model.set( 'value', null );
-
-        this.$container.toggleClass( 'has-attachment', false );
-        this.$container.find( '.thumbnail' ).remove();
-        this.$thumbnailDetailsContainer.toggleClass( 'has-attachment', false );
-    },
-
-}, {
-
-    _idCache: {},
-
-    /**
-     * Store attachments in a cache for quicker loading.
-     */
-    setInCache: function( id, attachment ) {
-        this._idCache[ id ] = attachment;
-    },
-
-    /**
-     * Retrieve an attachment from the cache.
-     */
-    getFromCache: function( id ){
-        if ( 'undefined' === typeof this._idCache[ id ] ) {
-            return false;
-        }
-        return this._idCache[ id ];
+        var id = $( e.target ).attr( 'data-id' );
+
+        if ( ! id ) {
+            return;
+        }
+
+        var target = this.currentSelection.get( id );
+
+        if ( target ) {
+            this.currentSelection.remove( target );
+        }
+
     },
 
@@ -990 +915 @@
 
 
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{"./../utils/sui.js":10}],12:[function(require,module,exports){
 (function (global){
@@ -1048 +974 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../utils/sui.js":10,"./edit-attribute-field.js":14}],13:[function(require,module,exports){
-( function( $ ) {
-
-    var sui = window.Shortcode_UI;
-
-    // Cached Data.
-    var postSelectCache = {};
-
-    sui.views.editAttributeFieldPostSelect = sui.views.editAttributeField.extend( {
-
-        events: {
-            'change .shortcode-ui-post-select': 'inputChanged',
-        },
-
-        inputChanged: function(e) {
-            this.setValue( e.val );
-            this.triggerCallbacks();
-        },
-
-        render: function() {
-
-            var self = this,
-                defaults = { multiple: false };
-
-            for ( var arg in defaults ) {
-                if ( ! this.model.get( arg ) ) {
-                    this.model.set( arg, defaults[ arg ] );
-                }
-            }
-
-            var data = this.model.toJSON();
-            data.id = 'shortcode-ui-' + this.model.get( 'attr' ) + '-' + this.model.cid;
-
-            this.$el.html( this.template( data ) );
-
-            var ajaxData = {
-                action    : 'shortcode_ui_post_field',
-                nonce     : shortcodeUiPostFieldData.nonce,
-                shortcode : this.shortcode.get( 'shortcode_tag'),
-                attr      : this.model.get( 'attr' )
-            };
-
-            var $field = this.$el.find( '.shortcode-ui-post-select' );
-
-            $field.select2({
-
-                placeholder: "Search",
-                multiple: this.model.get( 'multiple' ),
-                ajax: {
-                    url: ajaxurl,
-                    dataType: 'json',
-                    quietMillis: 250,
-                    data: function (term, page) {
-                        ajaxData.s    = term;
-                        ajaxData.page = page;
-                        return ajaxData;
-                    },
-                    results: function ( response, page ) {
-
-                        if ( ! response.success ) {
-                            return { results: {}, more: false };
-                        }
-
-                        // Cache data for quicker rendering later.
-                        postSelectCache = $.extend( postSelectCache, response.data.posts );
-
-                        var more = ( page * response.data.posts_per_page ) < response.data.found_posts; // whether or not there are more results available
-                        return { results: response.data.posts, more: more };
-
-                    },
-                },
-
-                /**
-                 * Initialize Callback
-                 * Used to set render the initial value.
-                 * Has to make a request to get the title for the current ID.
-                 */
-                initSelection: function(element, callback) {
-
-                    var ids, parsedData = [], cached;
-
-                    // Convert stored value to array of IDs (int).
-                    ids = $(element)
-                        .val()
-                        .split(',')
-                        .map( function (str) { return str.trim(); } )
-                        .map( function (str) { return parseInt( str ); } );
-
-                    if ( ids.length < 1 ) {
-                        return;
-                    }
-
-                    // Check if there is already cached data.
-                    for ( var i = 0; i < ids.length; i++ ) {
-                        cached = _.find( postSelectCache, _.matches( { id: ids[i] } ) );
-                        if ( cached ) {
-                            parsedData.push( cached );
-                        }
-                    }
-
-                    // If not multiple - return single value if we have one.
-                    if ( parsedData.length && ! self.model.get( 'multiple' ) ) {
-                        callback( parsedData[0] );
-                        return;
-                    }
-
-                    var uncachedIds = _.difference( ids, _.pluck( parsedData, 'id' ) );
-
-                    if ( ! uncachedIds.length ) {
-
-                        callback( parsedData );
-
-                    } else {
-
-                        var initAjaxData      = jQuery.extend( true, {}, ajaxData );
-                        initAjaxData.action   = 'shortcode_ui_post_field';
-                        initAjaxData.post__in = uncachedIds;
-
-                        $.get( ajaxurl, initAjaxData ).done( function( response ) {
-
-                            if ( ! response.success ) {
-                                return { results: {}, more: false };
-                            }
-
-                            postSelectCache = $.extend( postSelectCache, response.data.posts );
-
-                            // If not multi-select, expects single object, not array of objects.
-                            if ( ! self.model.get( 'multiple' ) ) {
-                                callback( response.data.posts[0] );
-                                return;
-                            }
-
-                            // Append new data to cached data.
-                            // Sort by original order.
-                            parsedData = parsedData
-                                .concat( response.data.posts )
-                                .sort(function (a, b) {
-                                    if ( ids.indexOf( a.id ) > ids.indexOf( b.id ) ) return 1;
-                                    if ( ids.indexOf( a.id ) < ids.indexOf( b.id ) ) return -1;
-                                    return 0;
-                                });
-
-                            callback( parsedData );
-                            return;
-
-                        } );
-
-                    }
-
-                },
-
-            } );
-
-            // Make multiple values sortable.
-            if ( this.model.get( 'multiple' ) ) {
-                $field.select2('container').find('ul.select2-choices').sortable({
-                    containment: 'parent',
-                    start: function() { $('.shortcode-ui-post-select').select2('onSortStart'); },
-                    update: function() { $('.shortcode-ui-post-select').select2('onSortEnd'); }
-                });
-            }
-
-            return this;
-
-        }
-
-    } );
-
-    /**
-     * Extending SUI Media Controller to hide Select2 UI Drop-Down when menu
-     * changes in Meida modal
-     * 1. going back/forth between different shortcakes (refresh)
-     * 2. changing the menu in left column (deactivate)
-     * 3. @TODO closing the modal.
-     */
-    var mediaController = sui.controllers.MediaController;
-    sui.controllers.MediaController = mediaController.extend({
-
-        refresh: function(){
-            mediaController.prototype.refresh.apply( this, arguments );
-            this.destroySelect2UI();
-        },
-
-        //doesn't need to call parent as it already an "abstract" method in parent to provide callback
-        deactivate: function() {
-            this.destroySelect2UI();
-        },
-
-        destroySelect2UI: function() {
-            $('.shortcode-ui-post-select.select2-container').select2( "close" );
-        }
-
-    });
-
-} )( jQuery );
-
-},{}],14:[function(require,module,exports){
+},{"./../utils/sui.js":10,"./edit-attribute-field.js":16}],13:[function(require,module,exports){
+(function (global){
+var Backbone     = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
+    sui          = require('./../utils/sui.js'),
+    select2Field = require('./select2-field.js'),
+    $            = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
+
+sui.views.editAttributeFieldPostSelect = sui.views.editAttributeSelect2Field.extend( {
+
+    selector: '.shortcode-ui-post-select',
+
+    ajaxData: {
+        action    : 'shortcode_ui_post_field',
+        nonce     : shortcodeUiPostFieldData.nonce,
+    },
+
+    events: {
+        'change .shortcode-ui-post-select': 'inputChanged',
+    },
+
+    templateResult: function( post ) {
+        if ( post.loading ) {
+            return post.text;
+        }
+
+        var markup = '<div class="clearfix select2-result-selectable">' +
+            post.text +
+        '</div>';
+
+        return markup;
+    },
+
+    templateSelection: function( post, container ) {
+        return post.text;
+    },
+
+
+} );
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./../utils/sui.js":10,"./select2-field.js":23}],14:[function(require,module,exports){
+(function (global){
+var Backbone     = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
+    sui          = require('./../utils/sui.js'),
+    select2Field = require('./select2-field.js'),
+    $            = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
+
+sui.views.editAttributeFieldTermSelect = sui.views.editAttributeSelect2Field.extend( {
+
+    selector: '.shortcode-ui-term-select',
+
+    ajaxData: {
+        action    : 'shortcode_ui_term_field',
+        nonce     : shortcodeUiTermFieldData.nonce,
+    },
+
+    events: {
+        'change .shortcode-ui-term-select': 'inputChanged',
+    },
+
+    templateResult: function( post ) {
+        if ( post.loading ) {
+            return post.text;
+        }
+
+        var markup = '<div class="clearfix select2-result-selectable">' +
+            post.text +
+        '</div>';
+
+        return markup;
+    },
+
+    templateSelection: function( post, container ) {
+        return post.text;
+    },
+
+} );
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./../utils/sui.js":10,"./select2-field.js":23}],15:[function(require,module,exports){
+(function (global){
+var Backbone     = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
+    sui          = require('./../utils/sui.js'),
+    select2Field = require('./select2-field.js'),
+    $            = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
+
+sui.views.editAttributeFieldUserSelect = sui.views.editAttributeSelect2Field.extend( {
+
+    selector: '.shortcode-ui-user-select',
+
+    ajaxData: {
+        action    : 'shortcode_ui_user_field',
+        nonce     : shortcodeUiUserFieldData.nonce,
+    },
+
+    events: {
+        'change .shortcode-ui-user-select': 'inputChanged',
+    },
+
+    templateResult: function( user ) {
+        if ( user.loading ) {
+            return user.text;
+        }
+
+        var markup = '<div class="clearfix select2-result-selectable">' +
+            user.text +
+        '</div>';
+
+        return markup;
+    },
+
+    templateSelection: function( user, container ) {
+        return user.text;
+    },
+
+
+} );
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./../utils/sui.js":10,"./select2-field.js":23}],16:[function(require,module,exports){
 (function (global){
 var Backbone     = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
@@ -1289 +1138 @@
 
         data.meta = _meta.join( ' ' );
+
+        // Ensure options are formatted correctly.
+        if ( 'options' in data ) {
+            data.options = this.parseOptions( data.options );
+        }
 
         this.$el.html( this.template( data ) );
@@ -1361 +1215 @@
         wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
 
+    },
+
+    /**
+     * Parse Options to ensure they use the correct format.
+     *
+     * Backwards compatability for non-array options.
+     * Using objects was sub-optimal because properties don't have an order.
+     */
+    parseOptions: function( options ) {
+
+        if ( ! Array.isArray( options ) ) {
+            var _options = [];
+            _.each( Object.keys( options ), function( key ) {
+                _options.push( { value: key, label: options[ key ] } );
+            } );
+            options = _options;
+        } else {
+            options = options.map( function( option ) {
+                if ( 'object' !== typeof option ) {
+                    option = { value: option, label: option };
+                }
+                return option;
+            } );
+        }
+
+        return options;
+
     }
 
@@ -1387 +1268 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../utils/sui.js":10}],15:[function(require,module,exports){
+},{"./../utils/sui.js":10}],17:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null),
@@ -1398 +1279 @@
     editAttributeFieldAttachment = require('./edit-attribute-field-attachment.js'),
     editAttributeFieldPostSelect = require('./edit-attribute-field-post-select.js'),
-    editAttributeFieldColor = require('./edit-attribute-field-color.js');
+    editAttributeFieldTermSelect = require('./edit-attribute-field-term-select.js'),
+    editAttributeFieldUserSelect = require('./edit-attribute-field-user-select.js'),
+    editAttributeFieldColor      = require('./edit-attribute-field-color.js');
 
 
@@ -1471 +1354 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../utils/sui.js":10,"./edit-attribute-field-attachment.js":11,"./edit-attribute-field-color.js":12,"./edit-attribute-field-post-select.js":13,"./edit-attribute-field.js":14}],16:[function(require,module,exports){
+},{"./../utils/sui.js":10,"./edit-attribute-field-attachment.js":11,"./edit-attribute-field-color.js":12,"./edit-attribute-field-post-select.js":13,"./edit-attribute-field-term-select.js":14,"./edit-attribute-field-user-select.js":15,"./edit-attribute-field.js":16}],18:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null),
@@ -1505 +1388 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],17:[function(require,module,exports){
+},{}],19:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null);
@@ -1552 +1435 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../collections/shortcodes.js":2,"./insert-shortcode-list-item.js":16}],18:[function(require,module,exports){
+},{"./../collections/shortcodes.js":2,"./insert-shortcode-list-item.js":18}],20:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null),
@@ -1668 +1551 @@
 
     insertAction: function() {
+        /* Trigger render_destroy */
+        /*
+         * Action run before the shortcode overlay is destroyed.
+         *
+         * Called as `shortcode-ui.render_destroy`.
+         *
+         * @param shortcodeModel (object)
+         *           Reference to the shortcode model used in this overlay.
+         */
+        var hookName = 'shortcode-ui.render_destroy';
+        var shortcodeModel = this.controller.state().props.get( 'currentShortcode' );
+        wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
         this.controller.state().insert();
+
     },
 
@@ -1676 +1573 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../controllers/media-controller.js":3,"./media-toolbar":19,"./shortcode-ui":22}],19:[function(require,module,exports){
+},{"./../controllers/media-controller.js":3,"./media-toolbar":21,"./shortcode-ui":24}],21:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null);
@@ -1708 +1605 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],20:[function(require,module,exports){
+},{}],22:[function(require,module,exports){
 (function (global){
 var wp = (typeof window !== "undefined" ? window['wp'] : typeof global !== "undefined" ? global['wp'] : null);
@@ -1756 +1653 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../utils/sui.js":10}],21:[function(require,module,exports){
-(function (global){
-var Backbone = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
-    $ = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
+},{"./../utils/sui.js":10}],23:[function(require,module,exports){
+(function (global){
+var Backbone     = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
+    sui          = require('./../utils/sui.js'),
+    $            = (typeof window !== "undefined" ? window['jQuery'] : typeof global !== "undefined" ? global['jQuery'] : null);
 
 /**
- * Preview of rendered shortcode.
- * Asynchronously fetches rendered shortcode content from WordPress.
- * Displayed in an iframe to isolate editor styles.
+ * Abstract field for all ajax Select2-powered field views
  *
- * @class ShortcodePreview
- * @constructor
- * @params options
- * @params options.model {Shortcode} Requires a valid shortcode.
+ * Adds useful helpers that are shared between all of the fields which use
+ * Select2 as their UI.
+ *
  */
-var ShortcodePreview = Backbone.View.extend({
-    initialize: function( options ) {
-        this.head = this.getEditorStyles().join( "\n" );
-    },
-
-    getLoading: function() {
-        return '<div class="loading-placeholder">' +
-            '<div class="dashicons dashicons-admin-media"></div>' +
-            '<div class="wpview-loading"><ins></ins></div>' +
-        '</div>';
-    },
-
-    /**
-     * @method render
-     * @chainable
-     * @returns {ShortcodePreview}
-     */
+sui.views.editAttributeSelect2Field = sui.views.editAttributeField.extend( {
+
+    /**
+     * Store selection on model as a string. If this is a multiple selection,
+     * we'll be storing the value as a comma-separated list.
+     *
+     * @param jQuery.Event Change event triggered.
+     */
+    inputChanged: function(e) {
+        var _selected = $( e.currentTarget ).val();
+
+        // Store multiple selections as comma-delimited list
+        if ( Array.isArray( _selected ) ) {
+            _selected = _selected.join( ',' );
+        }
+
+        this.setValue( String( _selected ) );
+        this.triggerCallbacks();
+    },
+
+    /**
+     * Load the values to be preselected before initializing field
+     *
+     * @param $field jQuery object reference to the <select> field
+     * @param object ajaxData object containing ajax action, nonce, and shortcode & model data
+     * @param string includeField how to specify the current selection, ie 'post__in'
+     */
+    preselect: function( $field ) {
+        var _preselected = String( this.getValue() );
+
+        if ( _preselected.length ) {
+            var request = {
+                include   : _preselected,
+                shortcode : this.shortcode.get( 'shortcode_tag'),
+                attr      : this.model.get( 'attr' )
+            };
+
+            $.get( ajaxurl, $.extend( request, this.ajaxData ),
+                function( response ) {
+                    _.each( response.data.items, function( item ) {
+                        $('<option>')
+                            .attr( 'value', item.id )
+                            .text( item.text )
+                            .prop( 'selected', 'selected' )
+                            .appendTo( $field );
+                    } );
+                }
+            );
+        }
+    },
+
+    /**
+     * Make selections in this field sortable, if it's multiple select
+     *
+     * @param $field jQuery object reference to the <select> field
+     */
+    sortable: function( $field ) {
+        var ul = $field.next('.select2-container').first('ul.select2-selection__rendered');
+        ul.sortable({
+            placeholder : 'ui-state-highlight',
+            forcePlaceholderSize: true,
+            items       : 'li:not(.select2-search__field)',
+            tolerance   : 'pointer',
+            stop: function() {
+                $( $(ul).find('.select2-selection__choice').get().reverse() ).each(function() {
+                    var id = $(this).data('data').id;
+                    var option = $field.find('option[value="' + id + '"]')[0];
+                    $field.prepend(option);
+                });
+                $field.trigger( 'change' );
+            }
+        });
+    },
+
     render: function() {
 
-        var self = this;
-
-        // Render loading iFrame.
-        this.renderIFrame({
-            head: self.head,
-            body: self.getLoading(),
-        });
-
-        // Fetch shortcode preview.
-        // Render iFrame with shortcode preview.
-        this.fetchShortcode( function( response ) {
-            self.renderIFrame({
-                head: self.head,
-                body: response,
-            });
-        });
+        var self = this,
+            defaults = { multiple: false };
+
+        for ( var arg in defaults ) {
+            if ( ! this.model.get( arg ) ) {
+                this.model.set( arg, defaults[ arg ] );
+            }
+        }
+
+        var data = this.model.toJSON();
+        data.id = 'shortcode-ui-' + this.model.get( 'attr' ) + '-' + this.model.cid;
+
+        this.$el.html( this.template( data ) );
+
+        var $field = this.$el.find( this.selector );
+
+        this.preselect( $field );
+
+        var $fieldSelect2 = $field.select2({
+            placeholder: "Search",
+            multiple: this.model.get( 'multiple' ),
+
+            ajax: {
+                url: ajaxurl,
+                dataType: 'json',
+                delay: 250,
+                data: function (params) {
+                    return $.extend( {
+                        s         : params.term, // search term
+                        page      : params.page,
+                        shortcode : self.shortcode.get( 'shortcode_tag'),
+                        attr      : self.model.get( 'attr' )
+                    }, self.ajaxData );
+                },
+                processResults: function (response, params) {
+                    if ( ! response.success || 'undefined' === typeof response.data ) {
+                        return { results: [] };
+                    }
+                    var data = response.data;
+                    params.page = params.page || 1;
+                    return {
+                        results: data.items,
+                        pagination: {
+                            more: ( params.page * data.items_per_page ) < data.found_items
+                        }
+                    };
+                },
+                cache: true
+            },
+            escapeMarkup: function( markup ) { return markup; },
+            minimumInputLength: 1,
+            templateResult: this.templateResult,
+            templateSelection: this.templateSelection,
+        } );
+
+        if ( this.model.get( 'multiple' ) ) {
+            this.sortable( $field );
+        }
 
         return this;
-    },
-
-    /**
-     * Render a child iframe, removing any previously rendered iframe. Additionally, observe the rendered iframe
-     * for mutations and resize as necessary to match content.
-     *
-     * @param params
-     */
-    renderIFrame: function( params ) {
-
-        var self = this, $iframe, resize;
-
-        _.defaults( params || {}, { 'head': '', 'body': '', 'body_classes': 'shortcake shortcake-preview' });
-
-        var isIE = typeof tinymce != 'undefined' ? tinymce.Env.ie : false;
-
-        $iframe = $( '<iframe/>', {
-            src: isIE ? 'javascript:""' : '', // jshint ignore:line
-            frameBorder: '0',
-            allowTransparency: 'true',
-            scrolling: 'no',
-            style: "width: 100%; display: block",
-        } );
-
-        /**
-         * Render preview in iFrame once loaded.
-         * This is required because you can't write to
-         * an iFrame contents before it exists.
-         */
-        $iframe.load( function() {
-
-            self.autoresizeIframe( $(this) );
-
-            var head = $(this).contents().find('head'),
-                body = $(this).contents().find('body');
-
-            head.html( params.head );
-            body.html( params.body );
-            body.addClass( params.body_classes );
-
-        } );
-
-        this.$el.html( $iframe );
-
-    },
-
-    /**
-     * Watch for mutations in iFrame content.
-     * resize iFrame height on change.
-     *
-     * @param  $ object $iframe
-     */
-    autoresizeIframe: function( $iframe ) {
-
-        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
-
-        // Resize iFrame to size inner document.
-        var resize = function() {
-            $iframe.height( $iframe.contents().find('html').height() );
-        };
-
-        resize();
-
-        if ( MutationObserver ) {
-
-            var observer = new MutationObserver( function() {
-                resize();
-                $iframe.contents().find('img,link').load( resize );
-            } );
-
-            observer.observe(
-                $iframe.contents()[0],
-                { attributes: true, childList: true, subtree: true }
-            );
-
-        } else {
-
-            for ( i = 1; i < 6; i++ ) {
-                setTimeout( resize, i * 700 );
-            }
-
-        }
-
-    },
-
-
-    /**
-     * Makes an AJAX call to the server to render the shortcode based on user supplied attributes. Server-side
-     * rendering is necessary to allow for shortcodes that incorporate external content based on shortcode
-     * attributes.
-     *
-     * @method fetchShortcode
-     * @returns {String} Rendered shortcode markup (HTML).
-     */
-    fetchShortcode: function( callback ) {
-
-        wp.ajax.post( 'do_shortcode', {
-            post_id: $( '#post_ID' ).val(),
-            shortcode: this.model.formatShortcode(),
-            nonce: shortcodeUIData.nonces.preview,
-        }).done( function( response ) {
-            callback( response );
-        }).fail( function() {
-            var span = $('<span />').addClass('shortcake-error').text( shortcodeUIData.strings.mce_view_error );
-            var wrapper = $('<div />').html( span );
-            callback( wrapper.html() );
-        } );
-
-    },
-
-    /**
-     * Returns an array of <link> tags for stylesheets applied to the TinyMCE editor.
-     *
-     * @method getEditorStyles
-     * @returns {Array}
-     */
-    getEditorStyles: function() {
-        var styles = {};
-
-        var editors = typeof tinymce != 'undefined' ? tinymce.editors : [];
-        _.each( editors, function( editor ) {
-            _.each( editor.dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) {
-                if ( link.href ) {
-                    styles[ link.href ] = true;
-                }
-            });
-        });
-
-        styles = _.map( _.keys( styles ), function( href ) {
-            return $( '<link rel="stylesheet" type="text/css">' ).attr( 'href', href )[0].outerHTML;
-        });
-
-        return styles;
     }
 });
 
-module.exports = ShortcodePreview;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{}],22:[function(require,module,exports){
+/**
+ * Extending SUI Media Controller to hide Select2 UI Drop-Down when menu
+ * changes in Meida modal
+ * 1. going back/forth between different shortcakes (refresh)
+ * 2. changing the menu in left column (deactivate)
+ * 3. @TODO closing the modal.
+ */
+var mediaController = sui.controllers.MediaController;
+sui.controllers.MediaController = mediaController.extend({
+
+    refresh: function(){
+        mediaController.prototype.refresh.apply( this, arguments );
+        this.destroySelect2UI();
+    },
+
+    //doesn't need to call parent as it already an "abstract" method in parent to provide callback
+    deactivate: function() {
+        this.destroySelect2UI();
+    },
+
+    destroySelect2UI: function() {
+        $fieldSelect2.select2( 'close' );
+    }
+
+});
+
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./../utils/sui.js":10}],24:[function(require,module,exports){
 (function (global){
 var Backbone = (typeof window !== "undefined" ? window['Backbone'] : typeof global !== "undefined" ? global['Backbone'] : null),
     insertShortcodeList = require('./insert-shortcode-list.js'),
-    ShortcodePreview = require('./shortcode-preview.js'),
     EditShortcodeForm = require('./edit-shortcode-form.js'),
     Toolbar = require('./media-toolbar.js'),
@@ -2046 +1931 @@
         this.render();
 
+        /* Trigger render_new */
+        /*
+         * Action run after a new shortcode overlay is rendered.
+         *
+         * Called as `shortcode-ui.render_new`.
+         *
+         * @param shortcodeModel (object)
+         *           Reference to the shortcode model used in this overlay.
+         */
+        var hookName = 'shortcode-ui.render_new';
+        var shortcodeModel = this.controller.props.get( 'currentShortcode' );
+        wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
     },
 
@@ -2053 +1951 @@
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./../utils/sui.js":10,"./edit-shortcode-form.js":15,"./insert-shortcode-list.js":17,"./media-toolbar.js":19,"./search-shortcode.js":20,"./shortcode-preview.js":21}]},{},[7]);
+},{"./../utils/sui.js":10,"./edit-shortcode-form.js":17,"./insert-shortcode-list.js":19,"./media-toolbar.js":21,"./search-shortcode.js":22}]},{},[7]);

shortcode-ui/trunk/js/src/controllers/media-controller.js

@@ -27 +27 @@
         var pattern = new RegExp( searchTerm, "gi" );
         var filteredModels = sui.shortcodes.filter( function( model ) {
+            pattern.lastIndex = 0;
             return pattern.test( model.get( "label" ) );
         });

shortcode-ui/trunk/js/src/models/shortcode.js

@@ -76 +76 @@
             // Encode textareas incase HTML
             if ( attr.get( 'encode' ) ) {
-                attr.set( 'value', encodeURIComponent( decodeURIComponent( attr.get( 'value' ) ) ), { silent: true } );
+                attr.set( 'value', encodeURIComponent( decodeURIComponent( attr.get( 'value' ).replace( "%", "%" ) ) ), { silent: true } );
             }
 
@@ -94 +94 @@
 
         if ( attrs.length > 0 ) {
-            template = "[{{ shortcode }} {{ attributes }}]";
+            template = "[{{ shortcode }} {{ attributes }}";
         } else {
-            template = "[{{ shortcode }}]";
+            template = "[{{ shortcode }}";
         }
 
         if ( content && content.length > 0 ) {
-            template += "{{ content }}[/{{ shortcode }}]";
+            template += "]{{ content }}[/{{ shortcode }}]";
+        } else {
+            // add closing slash to shortcodes without content
+            template += "/]";
         }
 

shortcode-ui/trunk/js/src/shortcode-ui.js

@@ -18 +18 @@
             wp.mce.views.register(
                 shortcode.get('shortcode_tag'),
-                // Must extend for 4.1.
-                // This is handled by wp.mce.views.register in 4.2.
-                $.extend( true, {}, shortcodeViewConstructor )
+                shortcodeViewConstructor
             );
         }
     } );
 
+    $(document.body).on( 'click', '.shortcake-add-post-element', function( event ) {
+        var elem = $( event.currentTarget ),
+            editor = elem.data('editor'),
+            options = {
+                frame: 'post',
+                state: 'shortcode-ui',
+                title: shortcodeUIData.strings.media_frame_title
+            };
+
+        event.preventDefault();
+
+        // Remove focus from the `.shortcake-add-post-element` button.
+        // Prevents Opera from showing the outline of the button above the modal.
+        //
+        // See: https://core.trac.wordpress.org/ticket/22445
+        elem.blur();
+
+        wp.media.editor.remove( editor );
+        wp.media.editor.open( editor, options );
+    } );
+
 });

shortcode-ui/trunk/js/src/utils/fetcher.js

@@ -82 +82 @@
         }
 
-        var request = $.post( ajaxurl + '?action=bulk_do_shortcode', {
-                queries: _.pluck( fetcher.queries, 'query' )
-            }
-        );
+        var request = wp.ajax.post( 'bulk_do_shortcode', {
+            queries: _.pluck( fetcher.queries, 'query' )
+        });
 
-        request.done( function( response ) {
-            _.each( response.data, function( result, index ) {
+        request.done( function( responseData ) {
+            _.each( responseData, function( result, index ) {
                 var matchedQuery = _.findWhere( fetcher.queries, {
                     counter: parseInt( index ),

shortcode-ui/trunk/js/src/utils/shortcode-view-constructor.js

@@ -85 +85 @@
             if ( attr && attr.get('encode') ) {
                 value = decodeURIComponent( value );
+                value = value.replace( "%", "%" );
             }
 
@@ -161 +162 @@
      */
     edit: function( shortcodeString ) {
-        var currentShortcode;
-
-        // Backwards compatability for WP pre-4.2
-        if ( 'object' === typeof( shortcodeString ) ) {
-            shortcodeString = decodeURIComponent( $(shortcodeString).attr('data-wpview-text') );
-        }
-
-        currentShortcode = this.parseShortcodeString( shortcodeString );
+
+        var currentShortcode = this.parseShortcodeString( shortcodeString );
 
         if ( currentShortcode ) {
@@ -180 +175 @@
             wp_media_frame.open();
 
+            /* Trigger render_edit */
+            /*
+             * Action run after an edit shortcode overlay is rendered.
+             *
+             * Called as `shortcode-ui.render_edit`.
+             *
+             * @param shortcodeModel (object)
+             *           Reference to the shortcode model used in this overlay.
+             */
+            var hookName = 'shortcode-ui.render_edit';
+            var shortcodeModel = this.shortcodeModel;
+            wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
         }
 
@@ -200 +208 @@
         var shortcode_tags = _.map( sui.shortcodes.pluck( 'shortcode_tag' ), this.pregQuote ).join( '|' );
         var regexp = wp.shortcode.regexp( shortcode_tags );
+        regexp.lastIndex = 0;
         var matches = regexp.exec( shortcodeString );
 
@@ -252 +261 @@
     },
 
-    // Backwards compatability for Pre WP 4.2.
-    View: {
-
-        overlay: true,
-
-        initialize: function( options ) {
-            this.shortcode = this.getShortcode( options );
-            this.fetch();
-        },
-
-        getShortcode: function( options ) {
-
-            var shortcodeModel, shortcode;
-
-            shortcodeModel = sui.shortcodes.findWhere( { shortcode_tag: options.shortcode.tag } );
-
-            if (!shortcodeModel) {
-                return;
-            }
-
-            shortcode = shortcodeModel.clone();
-
-            shortcode.get('attrs').each(
-                    function(attr) {
-
-                        if (attr.get('attr') in options.shortcode.attrs.named) {
-                            attr.set('value',
-                                    options.shortcode.attrs.named[attr
-                                            .get('attr')]);
-                        }
-
-                    });
-
-            if ('content' in options.shortcode) {
-                var inner_content = shortcode.get('inner_content');
-                if ( inner_content ) {
-                    inner_content.set('value', options.shortcode.content);
-                }
-            }
-
-            return shortcode;
-
-        },
-
-        fetch : function() {
-
-            var self = this;
-
-            if ( ! this.parsed ) {
-
-                wp.ajax.post( 'do_shortcode', {
-                    post_id: $( '#post_ID' ).val(),
-                    shortcode: this.shortcode.formatShortcode(),
-                    nonce: shortcodeUIData.nonces.preview,
-                }).done( function( response ) {
-                    if ( response.indexOf( '<script' ) !== -1 ) {
-                        self.setIframes( self.getEditorStyles(), response );
-                    } else {
-                        self.parsed = response;
-                        self.render( true );
-                    }
-                }).fail( function() {
-                    self.parsed = '<span class="shortcake-error">' + shortcodeUIData.strings.mce_view_error + '</span>';
-                    self.render( true );
-                } );
-
-            }
-
-        },
-
-        /**
-         * Render the shortcode
-         *
-         * To ensure consistent rendering - this makes an ajax request to the
-         * admin and displays.
-         *
-         * @return string html
-         */
-        getHtml : function() {
-            return this.parsed;
-        },
-
-        /**
-         * Returns an array of <link> tags for stylesheets applied to the TinyMCE editor.
-         *
-         * @method getEditorStyles
-         * @returns {Array}
-         */
-        getEditorStyles: function() {
-
-            var styles = '';
-
-            this.getNodes( function ( editor, node, content ) {
-                var dom = editor.dom,
-                    bodyClasses = editor.getBody().className || '',
-                    iframe, iframeDoc, i, resize;
-
-                tinymce.each( dom.$( 'link[rel="stylesheet"]', editor.getDoc().head ), function( link ) {
-                    if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 &&
-                        link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) {
-
-                        styles += dom.getOuterHTML( link ) + '\n';
-                    }
-
-                });
-
-            } );
-
-            return styles;
-        },
-
-    },
 };
 

shortcode-ui/trunk/js/src/views/edit-attribute-field-attachment.js

@@ -1 +1 @@
 var sui = require('sui-utils/sui');
+var $   = require('jquery');
 
 var editAttributeFieldAttachment = sui.views.editAttributeField.extend( {
+
+    previewTemplate: wp.template( 'shortcake-image-preview' ),
 
     events: {
@@ -10 +13 @@
     },
 
+    currentSelection: [],
+
+    initialize: function() {
+
+        var self = this;
+
+        _.bindAll( self, 'updateValue', 'initSelection', '_renderPreview', '_renderAll', '_removeAttachment' );
+
+        self.initSelection();
+
+        self.currentSelection.on( 'all', this.updateValue );
+        self.currentSelection.on( 'add', this._renderPreview );
+        self.currentSelection.on( 'reset', this._renderAll );
+
+    },
+
+    /**
+     * Initialize Selection.
+     *
+     * Selection is an Attachment collection containing full models for the current value.
+     *
+     * @return null
+     */
+    initSelection: function() {
+
+        this.currentSelection = new wp.media.model.Selection( [], {
+            multiple: this.model.get( 'multiple' ) ? true : false,
+        } );
+
+        // Initialize selection.
+        _.each( this.getValue(), function( item ) {
+
+            var model;
+
+            // Legacy. Handle storing full objects.
+            item  = ( 'object' === typeof( item ) ) ? item.id : item;
+            model = new wp.media.attachment( item );
+
+            this.currentSelection.add( model );
+
+            // Re-render after attachments have synced.
+            model.fetch();
+            model.on( 'sync', this._renderAll );
+
+        }.bind(this) );
+
+    },
+
     /**
      * Update the field attachment.
@@ -17 +68 @@
      * @param {int} id Attachment ID
      */
-    updateValue: function( id ) {
-
-        if ( ! id ) {
-            return;
-        }
-
-        this.setValue( id );
-
-        var self = this;
-
-        if ( editAttributeFieldAttachment.getFromCache( id ) ) {
-            self._renderPreview( editAttributeFieldAttachment.getFromCache( id ) );
-
-            // Call the updateValue() function, to trigger any listeners
-            // hooked on it.
-            self.triggerCallbacks();
-            return;
-        }
-
-        this.$container.addClass( 'loading' );
-
-        wp.ajax.post( 'get-attachment', {
-            'id': id
-        } ).done( function( attachment ) {
-            // Cache for later.
-            editAttributeFieldAttachment.setInCache( id, attachment );
-            self._renderPreview( attachment );
-
-            // Call the updateValue() function, to trigger any listeners
-            // hooked on it.
-            self.triggerCallbacks();
-        } ).always( function( attachment ) {
-            self.$container.removeClass( 'loading' );
-        });
+    updateValue: function() {
+        var value = this.currentSelection.pluck( 'id' );
+        this.setValue( value );
+        this.triggerCallbacks();
     },
 
@@ -64 +85 @@
         this.$el.html( this.template( this.model.toJSON() ) );
 
-        this.$container   = this.$el.find( '.shortcake-attachment-preview' );
+        this.$container = this.$el.find( '.attachment-previews' );
         this.$thumbnailDetailsContainer   = this.$el.find( '.thumbnail-details-container' );
-        var $addButton    = this.$container.find( 'button.add' );
+        var $addButton = this.$container.find( 'button.add' );
 
         this.frame = wp.media( {
-            multiple: false,
-            title: this.model.get( 'frameTitle' ),
+            multiple: this.model.get( 'multiple' ) ? true : false,
+            title:    this.model.get( 'frameTitle' ),
             library: {
                 type: this.model.get( 'libraryType' ),
@@ -76 +97 @@
         } );
 
-        // Add initial Attachment if available.
-        this.updateValue( this.model.get( 'value' ) );
+        this.frame.on( 'select', function() {
+            this.$el.trigger( 'selectAttachment' );
+        }.bind( this ) );
+
+        this._renderAll();
+
+    },
+
+    _renderAll: function() {
+
+        // Empty container.
+        this.$container.html('');
+
+        // Render each attachment in current selection.
+        this.currentSelection.each( function( attachment ) {
+            this._renderPreview( attachment );
+        }.bind(this) );
 
     },
@@ -88 +124 @@
     _renderPreview: function( attachment ) {
 
-        var $thumbnail = jQuery('<div class="thumbnail"></div>');
-
-        if ( 'image' !== attachment.type ) {
-
-            jQuery( '<img/>', {
-                src: attachment.icon,
-                alt: attachment.title,
-            } ).appendTo( $thumbnail );
-
-            jQuery( '<div/>', {
-                class: 'filename',
-                html:  '<div>' + attachment.title + '</div>',
-            } ).appendTo( $thumbnail );
-
-        } else {
-
-            attachmentThumb = (typeof attachment.sizes.thumbnail !== 'undefined') ?
-                attachment.sizes.thumbnail :
-                _.first( _.sortBy( attachment.sizes, 'width' ) );
-
-            jQuery( '<img/>', {
-                src:    attachmentThumb.url,
-                width:  attachmentThumb.width,
-                height: attachmentThumb.height,
-                alt:    attachment.alt,
-            } ) .appendTo( $thumbnail );
-
-        }
-
-        $thumbnail.find( 'img' ).wrap( '<div class="centered"></div>' );
-        this.$container.append( $thumbnail );
-        this.$container.toggleClass( 'has-attachment', true );
-
-        this.$thumbnailDetailsContainer.find( '.filename' ).text( attachment.filename );
-        this.$thumbnailDetailsContainer.find( '.date-formatted' ).text( attachment.dateFormatted );
-        this.$thumbnailDetailsContainer.find( '.size' ).text( attachment.filesizeHumanReadable );
-        this.$thumbnailDetailsContainer.find( '.dimensions' ).text( attachment.height + ' × ' + attachment.width );
-        this.$thumbnailDetailsContainer.find( '.edit-link a' ).attr( "href", attachment.editLink );
-        this.$thumbnailDetailsContainer.toggleClass( 'has-attachment', true );
+        var $thumbnail = $( this.previewTemplate( attachment.toJSON() ) );
+
+        $thumbnail.appendTo( this.$container );
+
+        attachment.on( 'remove', function() {
+            $thumbnail.remove();
+        } );
+
+    },
+
+    getValue: function() {
+
+        var value = this.model.get( 'value' );
+
+        if ( ! ( value instanceof Array ) ) {
+            value = value.split( ',' );
+        }
+
+        value = value.map( function( id ) {
+            return parseInt( id, 10 );
+        } );
+
+        value = value.filter( function( id ) {
+            return id > 0;
+        } );
+
+        value.sort( function( a, b ) {
+            return a < b;
+        } );
+
+        return value;
 
     },
@@ -135 +163 @@
      */
     _openMediaFrame: function(e) {
+
         e.preventDefault();
         this.frame.open();
-        if ( this.model.get( 'value' ) ) {
-            var selection = this.frame.state().get('selection');
-            attachment = wp.media.attachment( this.model.get( 'value' ) );
-            attachment.fetch();
-            selection.reset( attachment ? [ attachment ] : [] );
-            this.frame.state().set('selection', selection);
-        }
-
-        var self = this;
-        this.frame.on( 'select', function() {
-            self.$el.trigger( 'selectAttachment'  );
-        } );
+
+        var selection = this.frame.state().get('selection');
+        selection.reset( this.currentSelection.models );
+        this.frame.state('library').set( 'selection', selection );
 
     },
@@ -157 +178 @@
      */
     _selectAttachment: function(e) {
+
         var selection  = this.frame.state().get('selection');
-            attachment = selection.first();
-        if ( attachment.id != this.model.get( 'value' ) ){
-            this.model.set( 'value', null );
-            this.$container.toggleClass( 'has-attachment', false );
-            this.$container.find( '.thumbnail' ).remove();
-            this.updateValue( attachment.id );
-        }
+        this.currentSelection.reset( selection.toJSON() );
+
         this.frame.close();
+
     },
 
@@ -173 +191 @@
      */
     _removeAttachment: function(e) {
+
         e.preventDefault();
 
-        this.model.set( 'value', null );
-
-        this.$container.toggleClass( 'has-attachment', false );
-        this.$container.find( '.thumbnail' ).remove();
-        this.$thumbnailDetailsContainer.toggleClass( 'has-attachment', false );
-    },
-
-}, {
-
-    _idCache: {},
-
-    /**
-     * Store attachments in a cache for quicker loading.
-     */
-    setInCache: function( id, attachment ) {
-        this._idCache[ id ] = attachment;
-    },
-
-    /**
-     * Retrieve an attachment from the cache.
-     */
-    getFromCache: function( id ){
-        if ( 'undefined' === typeof this._idCache[ id ] ) {
-            return false;
-        }
-        return this._idCache[ id ];
+        var id = $( e.target ).attr( 'data-id' );
+
+        if ( ! id ) {
+            return;
+        }
+
+        var target = this.currentSelection.get( id );
+
+        if ( target ) {
+            this.currentSelection.remove( target );
+        }
+
     },
 

shortcode-ui/trunk/js/src/views/edit-attribute-field-post-select.js

@@ -1 @@
-( function( $ ) {
+var Backbone     = require('backbone'),
+    sui          = require('sui-utils/sui'),
+    select2Field = require('sui-views/select2-field.js'),
+    $            = require('jquery');
 
-    var sui = window.Shortcode_UI;
+sui.views.editAttributeFieldPostSelect = sui.views.editAttributeSelect2Field.extend( {
 
-    // Cached Data.
-    var postSelectCache = {};
+    selector: '.shortcode-ui-post-select',
 
-    sui.views.editAttributeFieldPostSelect = sui.views.editAttributeField.extend( {
+    ajaxData: {
+        action    : 'shortcode_ui_post_field',
+        nonce     : shortcodeUiPostFieldData.nonce,
+    },
 
-        events: {
-            'change .shortcode-ui-post-select': 'inputChanged',
-        },
+    events: {
+        'change .shortcode-ui-post-select': 'inputChanged',
+    },
 
-        inputChanged: function(e) {
-            this.setValue( e.val );
-            this.triggerCallbacks();
-        },
-
-        render: function() {
-
-            var self = this,
-                defaults = { multiple: false };
-
-            for ( var arg in defaults ) {
-                if ( ! this.model.get( arg ) ) {
-                    this.model.set( arg, defaults[ arg ] );
-                }
-            }
-
-            var data = this.model.toJSON();
-            data.id = 'shortcode-ui-' + this.model.get( 'attr' ) + '-' + this.model.cid;
-
-            this.$el.html( this.template( data ) );
-
-            var ajaxData = {
-                action    : 'shortcode_ui_post_field',
-                nonce     : shortcodeUiPostFieldData.nonce,
-                shortcode : this.shortcode.get( 'shortcode_tag'),
-                attr      : this.model.get( 'attr' )
-            };
-
-            var $field = this.$el.find( '.shortcode-ui-post-select' );
-
-            $field.select2({
-
-                placeholder: "Search",
-                multiple: this.model.get( 'multiple' ),
-                ajax: {
-                    url: ajaxurl,
-                    dataType: 'json',
-                    quietMillis: 250,
-                    data: function (term, page) {
-                        ajaxData.s    = term;
-                        ajaxData.page = page;
-                        return ajaxData;
-                    },
-                    results: function ( response, page ) {
-
-                        if ( ! response.success ) {
-                            return { results: {}, more: false };
-                        }
-
-                        // Cache data for quicker rendering later.
-                        postSelectCache = $.extend( postSelectCache, response.data.posts );
-
-                        var more = ( page * response.data.posts_per_page ) < response.data.found_posts; // whether or not there are more results available
-                        return { results: response.data.posts, more: more };
-
-                    },
-                },
-
-                /**
-                 * Initialize Callback
-                 * Used to set render the initial value.
-                 * Has to make a request to get the title for the current ID.
-                 */
-                initSelection: function(element, callback) {
-
-                    var ids, parsedData = [], cached;
-
-                    // Convert stored value to array of IDs (int).
-                    ids = $(element)
-                        .val()
-                        .split(',')
-                        .map( function (str) { return str.trim(); } )
-                        .map( function (str) { return parseInt( str ); } );
-
-                    if ( ids.length < 1 ) {
-                        return;
-                    }
-
-                    // Check if there is already cached data.
-                    for ( var i = 0; i < ids.length; i++ ) {
-                        cached = _.find( postSelectCache, _.matches( { id: ids[i] } ) );
-                        if ( cached ) {
-                            parsedData.push( cached );
-                        }
-                    }
-
-                    // If not multiple - return single value if we have one.
-                    if ( parsedData.length && ! self.model.get( 'multiple' ) ) {
-                        callback( parsedData[0] );
-                        return;
-                    }
-
-                    var uncachedIds = _.difference( ids, _.pluck( parsedData, 'id' ) );
-
-                    if ( ! uncachedIds.length ) {
-
-                        callback( parsedData );
-
-                    } else {
-
-                        var initAjaxData      = jQuery.extend( true, {}, ajaxData );
-                        initAjaxData.action   = 'shortcode_ui_post_field';
-                        initAjaxData.post__in = uncachedIds;
-
-                        $.get( ajaxurl, initAjaxData ).done( function( response ) {
-
-                            if ( ! response.success ) {
-                                return { results: {}, more: false };
-                            }
-
-                            postSelectCache = $.extend( postSelectCache, response.data.posts );
-
-                            // If not multi-select, expects single object, not array of objects.
-                            if ( ! self.model.get( 'multiple' ) ) {
-                                callback( response.data.posts[0] );
-                                return;
-                            }
-
-                            // Append new data to cached data.
-                            // Sort by original order.
-                            parsedData = parsedData
-                                .concat( response.data.posts )
-                                .sort(function (a, b) {
-                                    if ( ids.indexOf( a.id ) > ids.indexOf( b.id ) ) return 1;
-                                    if ( ids.indexOf( a.id ) < ids.indexOf( b.id ) ) return -1;
-                                    return 0;
-                                });
-
-                            callback( parsedData );
-                            return;
-
-                        } );
-
-                    }
-
-                },
-
-            } );
-
-            // Make multiple values sortable.
-            if ( this.model.get( 'multiple' ) ) {
-                $field.select2('container').find('ul.select2-choices').sortable({
-                    containment: 'parent',
-                    start: function() { $('.shortcode-ui-post-select').select2('onSortStart'); },
-                    update: function() { $('.shortcode-ui-post-select').select2('onSortEnd'); }
-                });
-            }
-
-            return this;
-
+    templateResult: function( post ) {
+        if ( post.loading ) {
+            return post.text;
         }
 
-    } );
+        var markup = '<div class="clearfix select2-result-selectable">' +
+            post.text +
+        '</div>';
 
-    /**
-     * Extending SUI Media Controller to hide Select2 UI Drop-Down when menu
-     * changes in Meida modal
-     * 1. going back/forth between different shortcakes (refresh)
-     * 2. changing the menu in left column (deactivate)
-     * 3. @TODO closing the modal.
-     */
-    var mediaController = sui.controllers.MediaController;
-    sui.controllers.MediaController = mediaController.extend({
+        return markup;
+    },
 
-        refresh: function(){
-            mediaController.prototype.refresh.apply( this, arguments );
-            this.destroySelect2UI();
-        },
+    templateSelection: function( post, container ) {
+        return post.text;
+    },
 
-        //doesn't need to call parent as it already an "abstract" method in parent to provide callback
-        deactivate: function() {
-            this.destroySelect2UI();
-        },
 
-        destroySelect2UI: function() {
-            $('.shortcode-ui-post-select.select2-container').select2( "close" );
-        }
-
-    });
-
-} )( jQuery );
+} );

shortcode-ui/trunk/js/src/views/edit-attribute-field.js

@@ -42 +42 @@
 
         data.meta = _meta.join( ' ' );
+
+        // Ensure options are formatted correctly.
+        if ( 'options' in data ) {
+            data.options = this.parseOptions( data.options );
+        }
 
         this.$el.html( this.template( data ) );
@@ -114 +119 @@
         wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );
 
+    },
+
+    /**
+     * Parse Options to ensure they use the correct format.
+     *
+     * Backwards compatability for non-array options.
+     * Using objects was sub-optimal because properties don't have an order.
+     */
+    parseOptions: function( options ) {
+
+        if ( ! Array.isArray( options ) ) {
+            var _options = [];
+            _.each( Object.keys( options ), function( key ) {
+                _options.push( { value: key, label: options[ key ] } );
+            } );
+            options = _options;
+        } else {
+            options = options.map( function( option ) {
+                if ( 'object' !== typeof option ) {
+                    option = { value: option, label: option };
+                }
+                return option;
+            } );
+        }
+
+        return options;
+
     }
 

shortcode-ui/trunk/js/src/views/edit-shortcode-form.js

@@ -8 +8 @@
     editAttributeFieldAttachment = require( 'sui-views/edit-attribute-field-attachment' ),
     editAttributeFieldPostSelect = require( 'sui-views/edit-attribute-field-post-select' ),
-    editAttributeFieldColor = require( 'sui-views/edit-attribute-field-color' );
+    editAttributeFieldTermSelect = require( 'sui-views/edit-attribute-field-term-select' ),
+    editAttributeFieldUserSelect = require( 'sui-views/edit-attribute-field-user-select' ),
+    editAttributeFieldColor      = require( 'sui-views/edit-attribute-field-color' );
 
 

shortcode-ui/trunk/js/src/views/media-frame.js

@@ -113 +113 @@
 
     insertAction: function() {
+        /* Trigger render_destroy */
+        /*
+         * Action run before the shortcode overlay is destroyed.
+         *
+         * Called as `shortcode-ui.render_destroy`.
+         *
+         * @param shortcodeModel (object)
+         *           Reference to the shortcode model used in this overlay.
+         */
+        var hookName = 'shortcode-ui.render_destroy';
+        var shortcodeModel = this.controller.state().props.get( 'currentShortcode' );
+        wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
         this.controller.state().insert();
+
     },
 

shortcode-ui/trunk/js/src/views/shortcode-ui.js

@@ -1 +1 @@
 var Backbone = require('backbone'),
     insertShortcodeList = require('sui-views/insert-shortcode-list'),
-    ShortcodePreview = require('sui-views/shortcode-preview'),
     EditShortcodeForm = require('sui-views/edit-shortcode-form'),
     Toolbar = require('sui-views/media-toolbar'),
@@ -96 +95 @@
         this.render();
 
+        /* Trigger render_new */
+        /*
+         * Action run after a new shortcode overlay is rendered.
+         *
+         * Called as `shortcode-ui.render_new`.
+         *
+         * @param shortcodeModel (object)
+         *           Reference to the shortcode model used in this overlay.
+         */
+        var hookName = 'shortcode-ui.render_new';
+        var shortcodeModel = this.controller.props.get( 'currentShortcode' );
+        wp.shortcake.hooks.doAction( hookName, shortcodeModel );
+
     },
 

shortcode-ui/trunk/languages/shortcode-ui.pot

@@ -1 @@
-# Copyright (C) 2015 Fusion Engineering and community
+# Copyright (C) 2016 Fusion Engineering and community
 # This file is distributed under the GPL v2 or later.
 msgid ""
 msgstr ""
-"Project-Id-Version: Shortcake (Shortcode UI) 0.6.0-alpha\n"
+"Project-Id-Version: Shortcake (Shortcode UI) 0.7.0-alpha\n"
 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/shortcode-ui\n"
-"POT-Creation-Date: 2015-10-09 18:13:32+00:00\n"
+"POT-Creation-Date: 2016-04-20 14:44:36+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"PO-Revision-Date: 2015-MO-DA HO:MI+ZONE\n"
+"PO-Revision-Date: 2016-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
-"X-Generator: grunt-wp-i18n 0.5.3\n"
+"X-Generator: grunt-wp-i18n 0.5.4\n"
 "X-Poedit-KeywordsList: "
 "__;_e;_x:1,2c;_ex:1,2c;_n:1,2;_nx:1,2,4c;_n_noop:1,2;_nx_noop:1,2,3c;esc_"
@@ -25 +25 @@
 "X-Textdomain-Support: yes\n"
 
-#: dev.php:75
+#: dev.php:68
+msgid ""
+"Shortcode UI plugin must be active for Shortcode UI Example plugin to "
+"function."
+msgstr ""
+
+#: dev.php:119
+msgid "Shortcake With No Attributes"
+msgstr ""
+
+#: dev.php:159
 msgid "Attachment"
 msgstr ""
 
-#: dev.php:79 dev.php:80
+#: dev.php:169 dev.php:170
 msgid "Select Image"
 msgstr ""
 
-#: dev.php:83
+#: dev.php:173
 msgid "Citation Source"
+msgstr ""
+
+#: dev.php:178
+msgid "Test placeholder"
+msgstr ""
+
+#: dev.php:183
+msgid "Select Page"
+msgstr ""
+
+#: dev.php:190
+msgid "Background Color"
+msgstr ""
+
+#: dev.php:195
+msgid "Hex color code"
+msgstr ""
+
+#: dev.php:199
+msgid "Alignment"
+msgstr ""
+
+#: dev.php:200
+msgid ""
+"Whether the quotation should be displayed as pull-left, pull-right, or "
+"neither."
+msgstr ""
+
+#: dev.php:204
+msgid "None"
+msgstr ""
+
+#: dev.php:205
+msgid "Pull Left"
+msgstr ""
+
+#: dev.php:206
+msgid "Pull Right"
+msgstr ""
+
+#: dev.php:210
+msgid "Year"
+msgstr ""
+
+#: dev.php:211
+msgid "Optional. The year the quotation is from."
+msgstr ""
+
+#: dev.php:230
+msgid "Shortcake Dev"
+msgstr ""
+
+#: dev.php:249
+msgid "Quote"
+msgstr ""
+
+#: dev.php:250
+msgid "Include a statement from someone famous."
+msgstr ""
+
+#: dev.php:288
+msgid "Content:"
+msgstr ""
+
+#: dev.php:289
+msgid "Source:"
+msgstr ""
+
+#: dev.php:290
+msgid "Image:"
 msgstr ""
 
@@ -41 +121 @@
 msgstr ""
 
-#: inc/class-shortcode-ui.php:220 inc/class-shortcode-ui.php:221
+#: inc/class-shortcode-ui.php:236 inc/class-shortcode-ui.php:237
 msgid "Insert Post Element"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:222
+#: inc/class-shortcode-ui.php:238
 msgid "%s Details"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:223
+#: inc/class-shortcode-ui.php:239
 msgid "Insert Element"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:224
+#: inc/class-shortcode-ui.php:240
 msgid "Update"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:225
+#: inc/class-shortcode-ui.php:241
 msgid "There are no attributes to configure for this Post Element."
 msgstr ""
 
-#: inc/class-shortcode-ui.php:226
+#: inc/class-shortcode-ui.php:242
 msgid "Failed to load preview"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:227
+#: inc/class-shortcode-ui.php:243
 msgid "Search"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:228
+#: inc/class-shortcode-ui.php:244
 msgid "Insert Content"
 msgstr ""
 
-#: inc/class-shortcode-ui.php:323
+#: inc/class-shortcode-ui.php:339
 msgid "Something's rotten in the state of Denmark"
 msgstr ""

shortcode-ui/trunk/package.json

@@ -11 +11 @@
     "grunt": "^0.4.5",
     "grunt-browserify": "^3.4.0",
-    "grunt-contrib-jasmine": "^0.8.2",
+    "grunt-contrib-jasmine": "^1.0.3",
     "grunt-contrib-jshint": "^0.11.2",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-phpcs": "^0.4.0",
     "grunt-postcss": "^0.6.0",
-    "grunt-sass": "^0.18.0",
+    "grunt-sass": "^1.1.0",
     "grunt-wp-i18n": "^0.5.0",
     "grunt-wp-readme-to-markdown": "~1.0.0",

shortcode-ui/trunk/readme.txt

@@ -1 +1 @@
 === Shortcake (Shortcode UI) ===
-Contributors: fusionengineering, mattheu, danielbachhuber, zebulonj, goldenapples, jitendraharpalani, sanchothefat, bfintal, davisshaver, garyj, mte90, fredserva, khromov
+Contributors: fusionengineering, mattheu, danielbachhuber, zebulonj, goldenapples, jitendraharpalani, sanchothefat, bfintal, davisshaver, garyj, mte90, fredserva, khromov, bronsonquick, dashaluna, mehigh, sc0ttkclark, kraftner, pravdomil
 Tags: shortcodes
-Requires at least: 4.1
-Tested up to: 4.4
-Stable tag: 0.6.2
+Requires at least: 4.5
+Tested up to: 4.7
+Stable tag: 0.7.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -32 +32 @@
 Shortcake doesn't support custom key=>value pairs as shortcode attributes because it isn't a great user experience.
 
+== Running tests ==
+
+We have test coverage for PHP using PHPunit, and JavaScript using Jasmine.
+
+= Running tests locally =
+
+Jasmine tests can be run using `grunt jasmine` and are also run as part of the `grunt scripts` task. To update the core WordPress files used by the Jasmine test suite, run `grunt updateJasmineCoreScripts --abspath="/path/to/wordpress-install"`.
 
 == Screenshots ==
@@ -51 +58 @@
 
 == Changelog ==
+
+= 0.7.0 (November 18, 2016) =
+* Adds "Add post element" button to media buttons - one click to open the shortcode list, rather than clicking "Add media" button and then finding "insert post element" in the menu.
+* Added "Term Select" field type.
+* Added "User Select" field type.
+* Added new hooks that fire on rendering/editing/closing a shortcode, which can be used for field types which require custom javascript initialization or cleanup.
+* Select fields: add full support for multiple select fields.
+* Select fields: support custom ordering of options.
+* Select fields: support grouping option in `<optgroup>`s by passing them as a nested array.
+* Attachment fields: support multiple selection.
+* Attachment fields: support SVG images (if svg uploads are enabled by a plugin or theme).
+* Bug fix: Handle percent signs when decoding fields with `encode=true` specified.
+* Bug fix: fix issue where it takes two clicks on a shortcode in editor to bring up the Edit Shortcode modal.
+* Bug fix: fix issue when searching for shortcodes by name where if multiple shortcodes start with the search string, only the first is returned.
+* Bug fix: only output a description field on an attribute if it's not empty.
+* Compatability: Remove shims for handling the media modal in WP 4.1 and 4.2.
+* Compatability: Upgrade Select2 library to 4.0.3 to avoid conflicts with other plugins which use the latest version of Select2.
+* Added Turkish translation.
+* Added Finnish translation.
+* Added Swedish translation.
+* Added Hungarian translation.
 
 = 0.6.2 (November 12, 2015) =

shortcode-ui/trunk/shortcode-ui.php

@@ -2 +2 @@
 /**
  * Plugin Name: Shortcake (Shortcode UI)
- * Version: 0.6.2
+ * Version: 0.7.0
  * Description: User Interface for adding shortcodes.
  * Author: Fusion Engineering and community
@@ -20 +20 @@
  */
 
-define( 'SHORTCODE_UI_VERSION', '0.6.2' );
+define( 'SHORTCODE_UI_VERSION', '0.7.0-alpha' );
 
 require_once dirname( __FILE__ ) . '/inc/class-shortcode-ui.php';
@@ -27 +27 @@
 require_once dirname( __FILE__ ) . '/inc/fields/class-field-color.php';
 require_once dirname( __FILE__ ) . '/inc/fields/class-field-post-select.php';
+require_once dirname( __FILE__ ) . '/inc/fields/class-field-term-select.php';
+require_once dirname( __FILE__ ) . '/inc/fields/class-field-user-select.php';
 
 add_action( 'init', 'shortcode_ui_load_textdomain' );
@@ -43 +45 @@
     $color_field      = Shortcake_Field_Color::get_instance();
     $post_field       = Shortcode_UI_Field_Post_Select::get_instance();
+    $term_field       = Shortcode_UI_Field_Term_Select::get_instance();
+    $user_field       = Shortcode_UI_Field_User_Select::get_instance();
 }
 
@@ -59 +63 @@
     // Load the textdomain according to the plugin first
     $mofile = $domain . '-' . $locale . '.mo';
-    if ( $loaded = load_textdomain( $domain, $path . '/'. $mofile ) ) {
+    if ( $loaded = load_textdomain( $domain, $path . '/' . $mofile ) ) {
         return;
     }