js2/mwEmbed/libClipEdit/pixastic-lib/pixastic.core.js

   1 /*
   2  * Pixastic Lib - Core Functions - v0.1.1
   3  * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com, http://blog.nihilogic.dk/
   4  * MIT License [http://www.opensource.org/licenses/mit-license.php]
   5  */
   6
   7 var Pixastic = (function() {
   8
   9
  10
  11         function addEvent(el, event, handler) {
  12                 if (el.addEventListener)
  13                         el.addEventListener(event, handler, false);
  14                 else if (el.attachEvent)
  15                         el.attachEvent("on" + event, handler);
  16         }
  17
  18         function onready(handler) {
  19                 var handlerDone = false;
  20                 var execHandler = function() {
  21                         if (!handlerDone) {
  22                                 handlerDone = true;
  23                                 handler();
  24                         }
  25                 }
  26                 document.write("<"+"script defer src=\"//:\" id=\"__onload_ie_sumbox__\"></"+"script>");
  27                 var script = document.getElementById("__onload_ie_sumbox__");
  28                 script.onreadystatechange = function() {
  29                         if (script.readyState == "complete") {
  30                                 script.parentNode.removeChild(script);
  31                                 execHandler();
  32                         }
  33                 }
  34                 if (document.addEventListener)
  35                         document.addEventListener("DOMContentLoaded", execHandler, false);
  36                 addEvent(window, "load", execHandler);
  37         }
  38
  39
  40         function init() {
  41                 if (!Pixastic.parseOnLoad) return;
  42                 var imgEls = getElementsByClass("pixastic", null, "img");
  43                 var canvasEls = getElementsByClass("pixastic", null, "canvas");
  44                 var elements = imgEls.concat(canvasEls);
  45                 for (var i=0;i<elements.length;i++) {
  46                         (function() {
  47
  48                         var el = elements[i];
  49                         var actions = [];
  50                         var classes = el.className.split(" ");
  51                         for (var c=0;c<classes.length;c++) {
  52                                 var cls = classes[c];
  53                                 if (cls.substring(0,9) == "pixastic-") {
  54                                         var actionName = cls.substring(9);
  55                                         if (actionName != "")
  56                                                 actions.push(actionName);
  57                                 }
  58                         }
  59                         if (actions.length) {
  60                                 if (el.tagName == "IMG") {
  61                                         var dataImg = new Image();
  62                                         dataImg.src = el.src;
  63                                         if (dataImg.complete) {
  64                                                 for (var a=0;a<actions.length;a++) {
  65                                                         var res = Pixastic.applyAction(el, el, actions[a], null);
  66                                                         if (res)
  67                                                                 el = res;
  68                                                 }
  69                                         } else {
  70                                                 dataImg.onload = function() {
  71                                                         for (var a=0;a<actions.length;a++) {
  72                                                                 var res = Pixastic.applyAction(el, el, actions[a], null)
  73                                                                 if (res)
  74                                                                         el = res;
  75                                                         }
  76                                                 }
  77                                         }
  78                                 } else {
  79                                         setTimeout(function() {
  80                                                 for (var a=0;a<actions.length;a++) {
  81                                                         var res = Pixastic.applyAction(
  82                                                                 el, el, actions[a], null
  83                                                         );
  84                                                         if (res)
  85                                                                 el = res;
  86                                                 }
  87                                         },1);
  88                                 }
  89                         }
  90
  91                         })();
  92                 }
  93         }
  94
  95         onready(init);
  96
  97
  98         // getElementsByClass by Dustin Diaz, http://www.dustindiaz.com/getelementsbyclass/
  99         function getElementsByClass(searchClass,node,tag) {
 100                         var classElements = new Array();
 101                         if ( node == null )
 102                                         node = document;
 103                         if ( tag == null )
 104                                         tag = '*';
 105
 106                         var els = node.getElementsByTagName(tag);
 107                         var elsLen = els.length;
 108                         var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
 109                         for (i = 0, j = 0; i < elsLen; i++) {
 110                                         if ( pattern.test(els[i].className) ) {
 111                                                         classElements[j] = els[i];
 112                                                         j++;
 113                                         }
 114                         }
 115                         return classElements;
 116         }
 117
 118         var debugElement;
 119
 120         function writeDebug(text, level) {
 121                 if (!Pixastic.debug) return;
 122
 123                 try {
 124                         switch (level) {
 125                                 case "warn" :
 126                                         console.warn("Pixastic:", text);
 127                                         break;
 128                                 case "error" :
 129                                         console.error("Pixastic:", text);
 130                                         break;
 131                                 default:
 132                                         console.log("Pixastic:", text);
 133                         }
 134                 } catch(e) {
 135                 }
 136                 if (!debugElement) {
 137
 138                 }
 139         }
 140
 141
 142         return {
 143
 144                 parseOnLoad : false,
 145
 146                 debug : false,
 147
 148                 applyAction : function(img, dataImg, actionName, options) {
 149
 150                         options = options || {};
 151
 152                         var imageIsCanvas = (img.tagName == "CANVAS");
 153                         if (imageIsCanvas && Pixastic.Client.isIE()) {
 154                                 if (Pixastic.debug) writeDebug("Tried to process a canvas element but browser is IE.");
 155                                 return false;
 156                         }
 157
 158                         var canvas, ctx;
 159                         if (Pixastic.Client.hasCanvas()) {
 160                                 canvas = document.createElement("canvas");
 161                                 ctx = canvas.getContext("2d");
 162                         }
 163
 164                         var w = parseInt(img.offsetWidth);
 165                         var h = parseInt(img.offsetHeight);
 166
 167                         if (actionName.indexOf("(") > -1) {
 168                                 var tmp = actionName;
 169                                 actionName = tmp.substr(0, tmp.indexOf("("));
 170                                 var arg = tmp.match(/\((.*?)\)/);
 171                                 if (arg[1]) {
 172                                         arg = arg[1].split(";");
 173                                         for (var a=0;a<arg.length;a++) {
 174                                                 thisArg = arg[a].split("=");
 175                                                 if (thisArg.length == 2) {
 176                                                         if (thisArg[0] == "rect") {
 177                                                                 var rectVal = thisArg[1].split(",");
 178                                                                 options[thisArg[0]] = {
 179                                                                         left : parseInt(rectVal[0],10)||0,
 180                                                                         top : parseInt(rectVal[1],10)||0,
 181                                                                         width : parseInt(rectVal[2],10)||0,
 182                                                                         height : parseInt(rectVal[3],10)||0
 183                                                                 }
 184                                                         } else {
 185                                                                 options[thisArg[0]] = thisArg[1];
 186                                                         }
 187                                                 }
 188                                         }
 189                                 }
 190                         }
 191
 192                         if (!options.rect) {
 193                                 options.rect = {
 194                                         left : 0, top : 0, width : w, height : h
 195                                 };
 196                         }
 197                         var validAction = false;
 198                         if (Pixastic.Actions[actionName] && typeof Pixastic.Actions[actionName].process == "function") {
 199                                 validAction = true;
 200                         }
 201                         if (!validAction) {
 202                                 if (Pixastic.debug) writeDebug("Invalid action \"" + actionName + "\". Maybe file not included?");
 203                                 return false;
 204                         }
 205                         if (!Pixastic.Actions[actionName].checkSupport()) {
 206                                 if (Pixastic.debug) writeDebug("Action \"" + actionName + "\" not supported by this browser.");
 207                                 return false;
 208                         }
 209
 210                         if (Pixastic.Client.hasCanvas()) {
 211                                 canvas.width = w;
 212                                 canvas.height = h;
 213                                 canvas.style.width = w+"px";
 214                                 canvas.style.height = h+"px";
 215                                 ctx.drawImage(dataImg,0,0,w,h);
 216                         }
 217
 218                         var params = {
 219                                 image : img,
 220                                 canvas : canvas,
 221                                 width : w,
 222                                 height : h,
 223                                 useData : true,
 224                                 options : options
 225                         }
 226
 227                         var res = Pixastic.Actions[actionName].process(params);
 228
 229                         if (!res) {
 230                                 return false;
 231                         }
 232
 233                         if (Pixastic.Client.hasCanvas()) {
 234                                 if (params.useData) {
 235                                         if (Pixastic.Client.hasCanvasImageData()) {
 236                                                 canvas.getContext("2d").putImageData(params.canvasData, options.rect.left, options.rect.top);
 237                                                 // Opera doesn't seem to update the canvas until we draw something on it, lets draw a 0x0 rectangle.
 238                                                 canvas.getContext("2d").fillRect(0,0,0,0);
 239                                         }
 240                                 }
 241                                 // copy properties and stuff from the source image
 242                                 canvas.title = img.title;
 243                                 canvas.imgsrc = img.imgsrc;
 244                                 if (!imageIsCanvas) canvas.alt  = img.alt;
 245                                 if (!imageIsCanvas) canvas.imgsrc = img.src;
 246                                 canvas.className = img.className;
 247                                 if (img.getAttribute("style"))
 248                                         canvas.setAttribute("style", img.getAttribute("style"));
 249                                 canvas.cssText = img.cssText;
 250                                 canvas.name = img.name;
 251                                 canvas.tabIndex = img.tabIndex;
 252                                 canvas.id = img.id;
 253
 254                                 if (img.parentNode && img.parentNode.replaceChild) {
 255                                         img.parentNode.replaceChild(canvas, img);
 256                                 }
 257
 258                                 return canvas;
 259                         }
 260
 261                         return img;
 262                 },
 263
 264                 prepareData : function(params, getCopy) {
 265                         var ctx = params.canvas.getContext("2d");
 266                         var rect = params.options.rect;
 267                         var dataDesc = ctx.getImageData(rect.left, rect.top, rect.width, rect.height);
 268                         var data = dataDesc.data;
 269                         if (!getCopy) params.canvasData = dataDesc;
 270                         return data;
 271                 },
 272
 273                 // load the image file
 274                 process : function(img, actionName, options, callback)
 275                 {
 276                         if (img.tagName == "IMG") {
 277                                 var dataImg = new Image();
 278                                 dataImg.src = img.src;
 279                                 if (dataImg.complete) {
 280                                         var res = Pixastic.applyAction(img, dataImg, actionName, options);
 281                                         if (callback) callback(res);
 282                                         return res;
 283                                 } else {
 284                                         dataImg.onload = function() {
 285                                                 var res = Pixastic.applyAction(img, dataImg, actionName, options)
 286                                                 if (callback) callback(res);
 287                                         }
 288                                 }
 289                         }
 290                         if (img.tagName == "CANVAS") {
 291                                 var res = Pixastic.applyAction(img, img, actionName, options);
 292                                 if (callback) callback(res);
 293                                 return res;
 294                         }
 295                 },
 296
 297                 Client : {
 298                         hasCanvas : (function() {
 299                                 var c = document.createElement("canvas");
 300                                 var val = false;
 301                                 try {
 302                                         val = !!((typeof c.getContext == "function") && c.getContext("2d"));
 303                                 } catch(e) {}
 304                                 return function() {
 305                                         return val;
 306                                 }
 307                         })(),
 308
 309                         hasCanvasImageData : (function() {
 310                                 var c = document.createElement("canvas");
 311                                 var val = false;
 312                                 var ctx;
 313                                 try {
 314                                         if (typeof c.getContext == "function" && (ctx = c.getContext("2d"))) {
 315                                                 val = (typeof ctx.getImageData == "function");
 316                                         }
 317                                 } catch(e) {}
 318                                 return function() {
 319                                         return val;
 320                                 }
 321                         })(),
 322
 323                         isIE : function() {
 324                                 return !!document.all && !!window.attachEvent && !window.opera;
 325                         }
 326                 },
 327
 328                 Actions : {}
 329         }
 330
 331
 332 })();