ckeditor plugin for wfpl cms images mostly working

diff --git a/admin_pages.html b/admin_pages.html
index dba6950..7db5cb7 100644 (file)
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -5,7 +5,238 @@
        <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
        <!--~$head {~-->
        <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
+       <style>
+               /* icon in cke buttons */
+               .cke_button_icon.cke_button__wfpl_images_icon {
+                       background-image: url(/code/ckeditor/plugins/icons.png?t=D5AC);
+                       background-position: 0 -1504px;
+               }
+               .cke_wfpl_images_dialog * {
+                       white-space: normal !important;
+               }
+               .cke_wfpl_images_dialog h3 {
+                       margin-top: 10px;
+                       font-weight: bold;
+                       font-size: 18px;
+               }
+               .cke_wfpl_images_dialog strong {
+                       color: inherit;
+               }
+               .cke_wfpl_images_dialog p {
+                       font-size: 12px;
+                       line-height: 16px;
+               }
+               .cke_wfpl_images_dialog * + p {
+                       padding-top: 5px;
+               }
+               .cke_wfpl_images_dialog .cke_wfpl_thumbs {
+                       height: 270px;
+                       overflow-y: scroll;
+               }
+               .cke_wfpl_thumbs .cke_wfpl_thumb {
+                       width: 50px;
+                       height: 50px;
+                       padding: 10px;
+                       color: transparent;
+                       font-size: 10px;
+                       font-weight: bold;
+                       display: inline-block;
+                       overflow: hidden;
+                       text-align: center;
+                       background-position: 50% 50%;
+                       background-repeat: no-repeat;
+                       background-color: transparent;
+                       border: 2px solid white;
+               }
+               .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
+                       color: white;
+                       text-shadow: 1px 1px 2px #000;
+                       box-shadow: 1px 1px 6px #444;
+                       border: 2px solid #444;
+               }
+       </style>
        <script type="text/javascript">
+               window.cke_wfpl_images = {
+                       images: {~wfpl_images {~
+                               "~id~": {
+                                       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 {~,~}~
+                       ~}~},
+                       next_id: 0,
+                       selected: [],
+                       editors: []
+               };
+               function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
+                       var thumbs = element.parentNode.children;
+                       var i, thumb;
+                       for (i = 0; i < thumbs.length; i++) {
+                               thumb = thumbs[i];
+                               if (thumb === element) {
+                                       if (thumb.className.substr(0, 9) !== 'selected ') {
+                                               thumb.className = 'selected ' + thumb.className;
+                                       }
+                               } else {
+                                       if (thumb.className.substr(0, 9) === 'selected ') {
+                                               thumb.className = thumb.className.substr(9);
+                                       }
+                               }
+                       }
+                       window.cke_wfpl_images.selected[plugin_id] = image_id;
+               }
+               function cke_wfpl_images_insert_click(plugin_id, align) {
+                       var selected = window.cke_wfpl_images.selected[plugin_id];
+                       var editor = window.cke_wfpl_images.editors[plugin_id];
+                       var image;
+                       var code, width, height, src, size, caption;
+                       if (selected == null) {
+                               console.log("no selected picture"); // FIXME
+                               return;
+                       }
+                       image = window.cke_wfpl_images.images[selected];
+                       switch(align) {
+                               case 'left':
+                                       code = '<span class="wfpl_ifl"'
+                               break;
+                               case 'right':
+                                       code = '<span class="wfpl_ifr"'
+                               break;
+                               case 'centered': case 'full':
+                                       code = '<div class="wfpl_ic"'
+                               break;
+                       }
+                       size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
+                       width = image.image_width;
+                       height = image.image_height;
+                       src = image.image;
+                       caption = image.caption;
+                       if (caption == '') {
+                               caption = '&nbsp;';
+                       }
+                       if (align != 'full') {
+                               var wh = size.split('x');
+                               wh[0] = parseInt(wh[0]);
+                               wh[1] = parseInt(wh[1]);
+                               if (width / height > wh[0] / wh[1]) {
+                                       height = Math.round(height * wh[0] / width);
+                                       width = wh[0];
+                               } else {
+                                       width = Math.round(width * wh[1] / height);
+                                       height = wh[1];
+                               }
+                               size = '' + wh[0] + '-' + wh[1]; // dash instead of x
+                               src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
+                       }
+                       code += ' style="background-image: url(/' + src + ');';
+                       code += ' width: ' + width + 'px;';
+                       code += ' padding-top: ' + height + 'px;';
+                       code += '">' + caption;
+                       switch(align) {
+                               case 'left': case 'right':
+                                       code += '</span>'
+                               break;
+                               case 'centered': case 'full':
+                                       code += '</div>'
+                               break;
+                       }
+                       CKEDITOR.dialog.getCurrent().hide(); // FIXME
+                       console.log(code);
+                       editor.insertHtml(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);
+
+                               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 */
+                               });
+                               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>'
+                                                                                       + '<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>"
+                                                                       }
+                                                               ]
+                                                       }
+                                               ],
+                                               buttons: [
+                                                       {
+                                                               type: 'button',
+                                                               id: 'left',
+                                                               label: 'Insert on Left',
+                                                               className: 'cke_dialog_ui_button_ok',
+                                                               onClick: function() {
+                                                                       cke_wfpl_images_insert_click(plugin_id, 'left');
+                                                               }
+                                                       },
+                                                       {
+                                                               type: 'button',
+                                                               id: 'center',
+                                                               label: 'Insert Centered',
+                                                               className: 'cke_dialog_ui_button_ok',
+                                                               onClick: function() {
+                                                                       cke_wfpl_images_insert_click(plugin_id, 'centered');
+                                                               }
+                                                       },
+                                                       {
+                                                               type: 'button',
+                                                               id: 'right',
+                                                               label: 'Insert on Right',
+                                                               className: 'cke_dialog_ui_button_ok',
+                                                               onClick: function() {
+                                                                       cke_wfpl_images_insert_click(plugin_id, 'right');
+                                                               }
+                                                       },
+                                                       {
+                                                               type: 'button',
+                                                               id: 'full',
+                                                               label: 'Insert BIG',
+                                                               className: 'cke_dialog_ui_button_ok',
+                                                               onClick: function() {
+                                                                       cke_wfpl_images_insert_click(plugin_id, 'full');
+                                                               }
+                                                       },
+                                                       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 + '">');
+                                               }
+                                       };
+                               });
+                       }
+               });
                function make_wysiwyg(name) {
                        CKEDITOR.replace(name, {
                                'contentsCss': 'style.css?m=~style.css mtime~',
@@ -21,6 +252,7 @@
                                ],
                                'uiColor': '#ccccff',
                                'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
+                               'extraPlugins': 'wfpl_images',
                                'height': '300px',
                                'toolbar': [
                                        ['Source'],
@@ -31,7 +263,7 @@
                                        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
                                        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                                        ['Link', 'Unlink', 'Anchor'],
-                                       ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
+                                       ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
                                        '/',
                                        ['Styles', 'Font', 'FontSize'],
                                        ['TextColor', 'BGColor'],

diff --git a/admin_pages.php b/admin_pages.php
index f674b66..4f5c4c8 100644 (file)
--- a/admin_pages.php
+++ b/admin_pages.php
@@ -78,6 +78,16 @@ function admin_pages_main_delete($id) {
        return './admin_pages';
 }
 
+function admin_pages_get_images() {
+       $images = db_get_assocs('cms_images', 'image,name,caption,sizes', 'order by name, caption, image');
+       $id = 1;
+       foreach($images as &$image) {
+               $image['id'] = '' . $id;
+               $id += 1;
+       }
+       return $images;
+}
+
 function admin_pages_main_listing() {
        $listing_rows = db_get_assocs('cms_pages', 'id,filename,coalesce(nullif(nav_title,\'\'), title) as title', 'order by concat(nav_title,title)');
        tem_set('listings', $listing_rows);
@@ -138,6 +148,7 @@ function admin_pages_main_form($id = false) {
                $data = array('filename' => format_cms_filename($_REQUEST['new_filename']));
        }
 
+       tem_set('wfpl_images', admin_pages_get_images());
        tem_set('form', $data);
        tem_set('$head'); # wysiwyg init goes in <head>
 }