cke_wfpl_images: cleanup, auto-select first

[wfpl-cms.git] / admin_pages.html

diff --git a/admin_pages.html b/admin_pages.html
index 7db5cb7..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,45 +147,38 @@
                                        code += '</div>'
                                break;
                        }
-                       CKEDITOR.dialog.getCurrent().hide(); // FIXME
-                       console.log(code);
-                       editor.insertHtml(code);
+                       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: [
                                                                        {
                                                                                type: 'html',
-                                                                               html: '<div class="cke_wfpl_images_dialog"><p>Note: If the image you want is not shown below, go to the control panel, then "manage images" and add it there. Next time you load an editor, you\'ll see that new image below.</p>'
+                                                                               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>"
+                                                                                       + "<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 + '">');
-                                               }
+                                               ]
                                        };
                                });
                        }