API tools faq
paste
Advertisement
academo

Untitled

academo
May 11th, 2011
197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.54 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * Controls: Image plugin
  3.  *
  4.  * Depends on jWYSIWYG
  5.  */
  6. (function ($) {
  7.     if (undefined === $.wysiwyg) {
  8.         throw "wysiwyg.image.js depends on $.wysiwyg";
  9.     }
  10.  
  11.     if (!$.wysiwyg.controls) {
  12.         $.wysiwyg.controls = {};
  13.     }
  14.  
  15.     /*
  16.      * Wysiwyg namespace: public properties and methods
  17.      */
  18.     $.wysiwyg.controls.image = {
  19.         init: function (Wysiwyg) {
  20.             var self = this, elements, dialog, szURL, formImageHtml,
  21.                 formTextLegend, formTextPreview, formTextUrl, formTextTitle,
  22.                 formTextDescription, formTextWidth, formTextHeight, formTextOriginal,
  23.                 formTextFloat, formTextFloatNone, formTextFloatLeft, formTextFloatRight,
  24.                 formTextSubmit, formTextReset,
  25.                 img = {
  26.                     alt: "",
  27.                     self: Wysiwyg.dom.getElement("img"), // link to element node
  28.                     src: "http://",
  29.                     title: ""
  30.                 };
  31.  
  32.             formTextLegend  = "Insert Image";
  33.             formTextPreview = "Preview";
  34.             formTextUrl     = "URL";
  35.             formTextTitle   = "Title";
  36.             formTextDescription = "Description";
  37.             formTextWidth   = "Width";
  38.             formTextHeight  = "Height";
  39.             formTextOriginal = "Original W x H";
  40.             formTextFloat   = "Float";
  41.             formTextFloatNone = "None";
  42.             formTextFloatLeft = "Left";
  43.             formTextFloatRight = "Right";
  44.             formTextSubmit  = "Insert Image";
  45.             formTextReset   = "Cancel";
  46.  
  47.             if ($.wysiwyg.i18n) {
  48.                 formTextLegend = $.wysiwyg.i18n.t(formTextLegend, "dialogs.image");
  49.                 formTextPreview = $.wysiwyg.i18n.t(formTextPreview, "dialogs.image");
  50.                 formTextUrl = $.wysiwyg.i18n.t(formTextUrl, "dialogs.image");
  51.                 formTextTitle = $.wysiwyg.i18n.t(formTextTitle, "dialogs.image");
  52.                 formTextDescription = $.wysiwyg.i18n.t(formTextDescription, "dialogs.image");
  53.                 formTextWidth = $.wysiwyg.i18n.t(formTextWidth, "dialogs.image");
  54.                 formTextHeight = $.wysiwyg.i18n.t(formTextHeight, "dialogs.image");
  55.                 formTextOriginal = $.wysiwyg.i18n.t(formTextOriginal, "dialogs.image");
  56.                 formTextFloat = $.wysiwyg.i18n.t(formTextFloat, "dialogs.image");
  57.                 formTextFloatNone = $.wysiwyg.i18n.t(formTextFloatNone, "dialogs.image");
  58.                 formTextFloatLeft = $.wysiwyg.i18n.t(formTextFloatLeft, "dialogs.image");
  59.                 formTextFloatRight = $.wysiwyg.i18n.t(formTextFloatRight, "dialogs.image");
  60.                 formTextSubmit = $.wysiwyg.i18n.t(formTextSubmit, "dialogs.image");
  61.                 formTextReset = $.wysiwyg.i18n.t(formTextReset, "dialogs");
  62.             }
  63.  
  64.             formImageHtml = '<form class="wysiwyg"><fieldset><legend>' + formTextLegend + '</legend>' +
  65.                 '<div class="imageselect"><label>' + formTextUrl + ':</label><input type="text" name="src" value=""/><div id="file-uploader" class="upload"></div></div>' +
  66.                 '<div><label>' + formTextTitle + ': </label><input type="text" name="imgtitle" value=""/></div>' +
  67.                 '<div><label>' + formTextDescription + ': </label><input type="text" name="description" value=""/></div>' +
  68.                 '<div><label>' + formTextWidth + ': </label><input type="text" name="width" value="" class="width"/></div>'+
  69.                 '<div><label>' + formTextHeight + ':</label> <input type="text" name="height" value="" class="height"/></div>' +
  70.                 '<div><label>' + formTextOriginal + ':</label> <input type="text" name="naturalWidth" value="" class="width" disabled="disabled"/></div>' +
  71.                 '<div><label>x</label><input type="text" name="naturalHeight" value="" class="height" disabled="disabled"/></div>' +
  72.                 '<div><label>' + formTextFloat + ': </label><select name="float">' +
  73.                 '<option value="">' + formTextFloatNone + '</option>' +
  74.                 '<option value="left">' + formTextFloatLeft + '</option>' +
  75.                 '<option value="right">' + formTextFloatRight + '</option></select></div></fieldset>' +
  76.                 '<fieldset><legend>Vista previa</legend>' +
  77.                 '<label><img src="" alt="' + formTextPreview + '" style="float: left; width: 80px; height: 60px; border: 1px solid rgb(192, 192, 192);"/></label></fieldset>' +
  78.                 '<input type="submit" class="button" value="' + formTextSubmit + '"/> ' +
  79.                 '<input type="reset" class="button" value="' + formTextReset + '"/></form>';
  80.            
  81.            
  82.             if (img.self) {
  83.                 img.src = img.self.src ? img.self.src : "";
  84.                 img.alt = img.self.alt ? img.self.alt : "";
  85.                 img.title = img.self.title ? img.self.title : "";
  86.                 img.width = img.self.width ? img.self.width : "";
  87.                 img.height = img.self.height ? img.self.height : "";
  88.             }
  89.  
  90.             if ($.modal) {
  91.                 elements = $(formImageHtml);
  92.                 elements = self.makeForm(elements, img);
  93.  
  94.                 $.modal(elements, {
  95.                     onShow: function (dialog) {
  96.                         $("input:submit", dialog.data).click(function (e) {
  97.                             e.preventDefault();
  98.  
  99.                             self.processInsert(dialog, Wysiwyg, img);
  100.  
  101.                             $.modal.close();
  102.                         });
  103.                         $("input:reset", dialog.data).click(function (e) {
  104.                             e.preventDefault();
  105.                             $.modal.close();
  106.                         });
  107.                     },
  108.                     maxWidth: Wysiwyg.defaults.formWidth,
  109.                     maxHeight: Wysiwyg.defaults.formHeight,
  110.                     overlayClose: true
  111.                 });
  112.             } else if ($.fn.dialog) {
  113.                 elements = $(formImageHtml);
  114.                 elements = self.makeForm(elements, img);
  115.  
  116.                 dialog = elements.appendTo("body");
  117.                 dialog.dialog({
  118.                     modal: true,
  119.                     minWidth: 500,
  120.                     maxWidth: 600,
  121.                     open: function (ev, ui) {
  122.                         var uploader = new qq.FileUploader({
  123.                             // pass the dom node (ex. $(selector)[0] for jQuery users)
  124.                             element: $("#file-uploader", dialog)[[0]],
  125.                             // path to server-side upload script
  126.                             action: base + "/pages/upload",
  127.                             allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
  128.                             debug: true,
  129.                             onComplete: function(id, fileName, responseJSON){
  130.                                 $("input[name='src']", dialog).val(base + "/img/" + responseJSON.file);
  131.                                 $("input[name='src']", dialog).change();
  132.                                 $("input[name='src']", dialog).attr("readonly", "readonly");
  133.                             }
  134.                         });
  135.                         $("input:submit", dialog).click(function (e) {
  136.                             e.preventDefault();
  137.  
  138.                             self.processInsert(dialog, Wysiwyg, img);
  139.  
  140.                             $(dialog).dialog("close");
  141.                         });
  142.                         $("input:reset", dialog).click(function (e) {
  143.                             e.preventDefault();
  144.                             $(dialog).dialog("close");
  145.                         });
  146.                     },
  147.                     close: function (ev, ui) {
  148.                         dialog.dialog("destroy");
  149.                     }
  150.                 });
  151.             } else {
  152.                 if ($.browser.msie) {
  153.                     Wysiwyg.ui.focus();
  154.                     Wysiwyg.editorDoc.execCommand("insertImage", true, null);
  155.                 } else {
  156.                     elements = $("<div/>")
  157.                         .css({"position": "absolute",
  158.                             "z-index": 2000,
  159.                             "left": "50%", "top": "50%", "background": "rgb(0, 0, 0)",
  160.                             "margin-top": -1 * Math.round(Wysiwyg.defaults.formHeight / 2),
  161.                             "margin-left": -1 * Math.round(Wysiwyg.defaults.formWidth / 2)})
  162.                         .html(formImageHtml);
  163.                     elements = self.makeForm(elements, img);
  164.  
  165.                     $("input:submit", elements).click(function (event) {
  166.                         event.preventDefault();
  167.  
  168.                         self.processInsert(elements, Wysiwyg, img);
  169.  
  170.                         $(elements).remove();
  171.                     });
  172.                     $("input:reset", elements).click(function (event) {
  173.                         event.preventDefault();
  174.  
  175.                         if ($.browser.msie) {
  176.                             Wysiwyg.ui.returnRange();
  177.                         }
  178.  
  179.                         $(elements).remove();
  180.                     });
  181.  
  182.                     $("body").append(elements);
  183.                 }
  184.             }
  185.  
  186.             $(Wysiwyg.editorDoc).trigger("wysiwyg:refresh");
  187.         },
  188.  
  189.         processInsert: function (form, Wysiwyg, img) {
  190.             var image,
  191.                 szURL = $('input[name="src"]', form).val(),
  192.                 title = $('input[name="imgtitle"]', form).val(),
  193.                 description = $('input[name="description"]', form).val(),
  194.                 width = $('input[name="width"]', form).val(),
  195.                 height = $('input[name="height"]', form).val(),
  196.                 styleFloat = $('select[name="float"]', form).val(),
  197.                 style = [],
  198.                 found;
  199.  
  200.             if (img.self) {
  201.                 // to preserve all img attributes
  202.                 $(img.self).attr("src", szURL)
  203.                     .attr("title", title)
  204.                     .attr("alt", description)
  205.                     .css("float", styleFloat);
  206.  
  207.                 if (width.toString().match(/^[0-9]+(px|%)?$/)) {
  208.                     $(img.self).css("width", width);
  209.                 } else {
  210.                     $(img.self).css("width", "");
  211.                 }
  212.  
  213.                 if (height.toString().match(/^[0-9]+(px|%)?$/)) {
  214.                     $(img.self).css("height", height);
  215.                 } else {
  216.                     $(img.self).css("height", "");
  217.                 }
  218.             } else {
  219.                 found = width.toString().match(/^[0-9]+(px|%)?$/);
  220.                 if (found) {
  221.                     if (found[1]) {
  222.                         style.push("width: " + width + ";");
  223.                     } else {
  224.                         style.push("width: " + width + "px;");
  225.                     }
  226.                 }
  227.  
  228.                 found = height.toString().match(/^[0-9]+(px|%)?$/);
  229.                 if (found) {
  230.                     if (found[1]) {
  231.                         style.push("height: " + height + ";");
  232.                     } else {
  233.                         style.push("height: " + height + "px;");
  234.                     }
  235.                 }
  236.  
  237.                 if (styleFloat.length > 0) {
  238.                     style.push("float: " + styleFloat + ";");
  239.                 }
  240.  
  241.                 if (style.length > 0) {
  242.                     style = ' style="' + style.join(" ") + '"';
  243.                 }
  244.  
  245.                 image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "'" + style + "/>";
  246.                 Wysiwyg.insertHtml(image);
  247.             }
  248.         },
  249.  
  250.         makeForm: function (form, img) {
  251.             form.find("input[name=src]").val(img.src);
  252.             form.find("input[name=imgtitle]").val(img.title);
  253.             form.find("input[name=description]").val(img.alt);
  254.             form.find('input[name="width"]').val(img.width);
  255.             form.find('input[name="height"]').val(img.height);
  256.             form.find('img').attr("src", img.src);
  257.  
  258.             form.find('img').bind("load", function () {
  259.                 if (form.find('img').attr("naturalWidth")) {
  260.                     form.find('input[name="naturalWidth"]').val(form.find('img').attr("naturalWidth"));
  261.                     form.find('input[name="naturalHeight"]').val(form.find('img').attr("naturalHeight"));
  262.                 }
  263.             });
  264.  
  265.             form.find("input[name=src]").bind("change", function () {
  266.                 form.find('img').attr("src", this.value);
  267.             });
  268.  
  269.             return form;
  270.         }
  271.     };
  272.  
  273.     $.wysiwyg.insertImage = function (object, szURL, attributes) {
  274.         if ("object" !== typeof (object) || !object.context) {
  275.             object = this;
  276.         }
  277.  
  278.         if (!object.each) {
  279.             console.error("Something goes wrong, check object");
  280.         }
  281.  
  282.         return object.each(function () {
  283.             var self = $(this).data("wysiwyg"),
  284.                 image,
  285.                 attribute;
  286.  
  287.             if (!self) {
  288.                 return this;
  289.             }
  290.  
  291.             if (!szURL || szURL.length === 0) {
  292.                 return this;
  293.             }
  294.  
  295.             if ($.browser.msie) {
  296.                 self.ui.focus();
  297.             }
  298.  
  299.             if (attributes) {
  300.                 self.editorDoc.execCommand("insertImage", false, "#jwysiwyg#");
  301.                 image = self.getElementByAttributeValue("img", "src", "#jwysiwyg#");
  302.  
  303.                 if (image) {
  304.                     image.src = szURL;
  305.  
  306.                     for (attribute in attributes) {
  307.                         if (attributes.hasOwnProperty(attribute)) {
  308.                             image.setAttribute(attribute, attributes[attribute]);
  309.                         }
  310.                     }
  311.                 }
  312.             } else {
  313.                 self.editorDoc.execCommand("insertImage", false, szURL);
  314.             }
  315.  
  316.             $(self.editorDoc).trigger("wysiwyg:refresh");
  317.  
  318.             return this;
  319.         });
  320.     };
  321. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!