cke_wfpl_images: cleanup, auto-select first

diff --git a/admin_pages.html b/admin_pages.html
index 705caff..fea49de 100644 (file)
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -29,6 +29,10 @@
                .cke_wfpl_images_dialog * + p {
                        padding-top: 5px;
                }
+               .cke_wfpl_images_dialog * a {
+                       text-decoration: underline;
+                       color: blue;
+               }
                .cke_wfpl_images_dialog .cke_wfpl_thumbs {
                        height: 270px;
                        overflow-y: scroll;
@@ -57,17 +61,16 @@
        </style>
        <script type="text/javascript">
                window.cke_wfpl_images = {
-                       images: {~wfpl_images {~
-                               "~id~": {
+                       images: [~wfpl_images {~
+                               {
                                        thumb: "~image thumb_src jsdq~",
                                        image: "~image image_src jsdq~",
                                        image_width: "~image image_width~",
                                        image_height: "~image image_height~",
                                        sizes: "~sizes jsdq~",
                                        caption: "~caption jsdq~"
-                               }
-                               ~ sep {~,~}~
-                       ~}~},
+                               }~ sep {~,~}~~}~
+                       ],
                        next_id: 0,
                        selected: [],
                        editors: []
@@ -95,7 +98,7 @@
                        var image;
                        var code, width, height, src, size, caption;
                        if (selected == null) {
-                               console.log("no selected picture"); // FIXME
+                               CKEDITOR.dialog.getCurrent().hide();
                                return;
                        }
                        image = window.cke_wfpl_images.images[selected];
@@ -144,35 +147,28 @@
                                        code += '</div>'
                                break;
                        }
-                       CKEDITOR.dialog.getCurrent().hide(); // FIXME
+                       CKEDITOR.dialog.getCurrent().hide();
                        editor.insertElement(CKEDITOR.dom.element.createFromHtml(code));
                }
                CKEDITOR.plugins.add('wfpl_images', {
                        init: function (editor) {
                                var plugin_id = window.cke_wfpl_images.editors.length;
                                window.cke_wfpl_images.editors.push(editor);
-                               window.cke_wfpl_images.selected.push(null);
+                               window.cke_wfpl_images.selected.push(window.cke_wfpl_images.images.length > 0 ? 0 : null);
 
                                editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
                                editor.ui.addButton('wfpl_images', {
                                        label: 'Insert Image',
                                        command: 'wfpl_images',
-                                       toolbar: 'insert' /* which section to put this button in */
+                                       toolbar: 'insert'
                                });
                                CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
-                                       // CKEDITOR.dialog.definition
                                        return {
                                                title: 'Insert Image',
                                                minWidth: 700,
                                                minHeight: 350,
-                                               onShow: function() {
-                                                       // FIXME unselect and remove hilight
-                                                       // window.cke_wfpl_images.selected[plugin_id] = null;
-                                               },
                                                contents: [
                                                        {
-                                                               id: 'tab1',
-                                                               label: '?not displayed',
                                                                expand: true,
                                                                padding: 0,
                                                                elements: [
@@ -180,9 +176,9 @@
                                                                                type: 'html',
                                                                                html: '<div class="cke_wfpl_images_dialog">'
                                                                                        + '<h3>Step 1: Choose an image to insert:</h3>'
-                                                                                       + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
-                                                                               + "</div>"
-                                                                               + '<p style="white-space: normal">If you\'d like to insert an image not shown above, you can <a style="color: blue; text-decoration: underline" href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
+                                                                                       + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"~ first {~selected ~}~cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
+                                                                               + '<p>If you\'d like to insert an image not shown above, you can <a href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
+                                                                               + '</div>'
                                                                        }
                                                                ]
                                                        }
@@ -190,7 +186,6 @@
                                                buttons: [
                                                        {
                                                                type: 'button',
-                                                               id: 'left',
                                                                label: 'Insert on Left',
                                                                className: 'cke_dialog_ui_button_ok',
                                                                onClick: function() {
@@ -199,7 +194,6 @@
                                                        },
                                                        {
                                                                type: 'button',
-                                                               id: 'center',
                                                                label: 'Insert Centered',
                                                                className: 'cke_dialog_ui_button_ok',
                                                                onClick: function() {
@@ -208,7 +202,6 @@
                                                        },
                                                        {
                                                                type: 'button',
-                                                               id: 'right',
                                                                label: 'Insert on Right',
                                                                className: 'cke_dialog_ui_button_ok',
                                                                onClick: function() {
@@ -217,7 +210,6 @@
                                                        },
                                                        {
                                                                type: 'button',
-                                                               id: 'full',
                                                                label: 'Insert BIG',
                                                                className: 'cke_dialog_ui_button_ok',
                                                                onClick: function() {
@@ -225,14 +217,7 @@
                                                                }
                                                        },
                                                        CKEDITOR.dialog.cancelButton
-                                               ],
-                                               onOk: function () {
-                                                       var image = this.getContentElement('tab1', 'image').getValue();
-                                                       if (image === null) {
-                                                               return;
-                                                       }
-                                                       editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
-                                               }
+                                               ]
                                        };
                                });
                        }

diff --git a/admin_pages.php b/admin_pages.php
index 4f5c4c8..0736879 100644 (file)
--- a/admin_pages.php
+++ b/admin_pages.php
@@ -80,7 +80,7 @@ function admin_pages_main_delete($id) {
 
 function admin_pages_get_images() {
        $images = db_get_assocs('cms_images', 'image,name,caption,sizes', 'order by name, caption, image');
-       $id = 1;
+       $id = 0;
        foreach($images as &$image) {
                $image['id'] = '' . $id;
                $id += 1;