finish responsive images, revamp admin_images

[wfpl-cms.git] / admin_pages.html

diff --git a/admin_pages.html b/admin_pages.html
index 59af576..c7ac728 100644 (file)
--- a/admin_pages.html
+++ b/admin_pages.html
@@ -62,6 +62,8 @@
        <script>
                window.cke_wfpl_images = {
                        images: ~wfpl_images_json~,
+                       small_width: ~wfpl_image_width_small~,
+                       thumb_width: ~wfpl_image_width_thumb~,
                        next_id: 0,
                        selected: [],
                        editors: []
@@ -90,7 +92,7 @@
                        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;
+                       var code, src, caption;
                        if (selected == null) {
                                CKEDITOR.dialog.getCurrent().hide();
                                return;
@@ -98,51 +100,35 @@
                        image = window.cke_wfpl_images.images[selected];
                        switch(align) {
                                case 'left':
-                                       code = '<span class="wfpl_ifl"'
+                                       code = '<div class="wfpl_li">'
+                               break;
+                               case 'centered':
+                                       code = '<div class="wfpl_ci">'
                                break;
                                case 'right':
-                                       code = '<span class="wfpl_ifr"'
+                                       code = '<div class="wfpl_ri">'
                                break;
-                               case 'centered': case 'full':
-                                       code = '<div class="wfpl_ic"'
+                               case 'full':
+                                       code = '<div class="wfpl_fi">'
                                break;
                        }
-                       size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
-                       width = image.image_width;
-                       height = image.image_height;
-                       src = image.image;
+                       code += '<div class="wfpl_i"'
+                       src = image.src;
                        if (image.caption == '') {
                                caption = '&nbsp;';
                        } else {
                                caption = enc_html(image.caption);
                        }
                        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);
+                               src =
+                                       src.substr(0, src.length - 4)
+                                       + 'w' + window.cke_wfpl_images.small_width
+                                       + src.substr(src.length - 4);
                        }
-                       height += 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;
-                       }
+                       code += ' padding-top: ' + image.aspect;
+                       code += '">&nbsp</div>' + caption;
+                       code += '</div>'
                        CKEDITOR.dialog.getCurrent().hide();
                        CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
                }
@@ -164,7 +150,7 @@
                                        thumbs = '<div class="cke_wfpl_thumbs">'
                                        for (i in window.cke_wfpl_images.images) {
                                                im = window.cke_wfpl_images.images[i];
-                                               thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.thumb+')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
+                                               thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.src.substr(0, im.src.length - 4) + 'w' + window.cke_wfpl_images.thumb_width + im.src.substr(im.src.length - 4) + ')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
                                                selected = '';
                                        }
                                        thumbs += '</div>'