Merge remote-tracking branch 'muaz-khan/master'

.gitignore

@@ -15,4 +15,17 @@ lib-cov
 .wafpickle-*
 config.gypi
 CVS
-npm-debug.log
+npm-debug.log
+.idea/Canvas-Designer.iml
+
+.idea/.name
+
+.idea/encodings.xml
+
+.idea/misc.xml
+
+.idea/modules.xml
+
+.idea/vcs.xml
+
+.idea/workspace.xml

canvas-designer-widget.js

@@ -1,19 +1,5 @@
-// Last time updated: 2016-04-17 6:42:16 AM UTC
-
-// _______________
-// Canvas-Designer
-
-// Open-Sourced: https://github.com/muaz-khan/Canvas-Designer
-
-// --------------------------------------------------
-// Muaz Khan     - www.MuazKhan.com
-// MIT License   - www.WebRTC-Experiment.com/licence
-// --------------------------------------------------
-
-function CanvasDesigner() {
-    var designer = this;
-    designer.iframe = null;
-
+var CanvasDesigner = (function() {
+    var iframe;
     var tools = {
         line: true,
         pencil: true,
@@ -25,27 +11,27 @@ function CanvasDesigner() {
         bezier: true,
         quadratic: true,
         text: true,
+        marker: true,
         image: true
     };
-
-    var selectedIcon = 'pencil';
+    var selectedIcon = 'marker';
 
     function syncData(data) {
-        if (!designer.iframe) return;
+        if (!iframe) return;
 
-        designer.postMessage({
+        iframe.contentWindow.postMessage({
             canvasDesignerSyncData: data
-        });
+        }, '*');
     }
 
     var syncDataListener = function(data) {};
     var dataURLListener = function(dataURL) {};
-
+    
     function onMessage(event) {
-        if (!event.data || event.data.uid !== designer.uid) return;
+        if(!event.data) return;
 
         if (!!event.data.canvasDesignerSyncData) {
-            designer.pointsLength = event.data.canvasDesignerSyncData.points.length;
+            CanvasDesigner.pointsLength = event.data.canvasDesignerSyncData.points.length;
             syncDataListener(event.data.canvasDesignerSyncData);
         }
 
@@ -54,93 +40,60 @@ function CanvasDesigner() {
         }
     }
 
-    function getRandomString() {
-        if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
-            var a = window.crypto.getRandomValues(new Uint32Array(3)),
-                token = '';
-            for (var i = 0, l = a.length; i < l; i++) {
-                token += a[i].toString(36);
+    return {
+        appendTo: function(parentNode) {
+            iframe = document.createElement('iframe');
+            iframe.src = this.widgetHtmlURL +  '?widgetJsURL=' + this.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 0;
+            parentNode.appendChild(iframe);
+
+            window.removeEventListener('message', onMessage);
+            window.addEventListener('message', onMessage, false);
+        },
+        destroy: function() {
+            if(iframe) {
+                iframe.parentNode.removeChild(iframe);
             }
-            return token;
-        } else {
-            return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
-        }
-    }
-
-    designer.uid = getRandomString();
-
-    designer.appendTo = function(parentNode) {
-        designer.iframe = document.createElement('iframe');
-        designer.iframe.src = designer.widgetHtmlURL + '?widgetJsURL=' + designer.widgetJsURL + '&tools=' + JSON.stringify(tools) + '&selectedIcon=' + selectedIcon;
-        designer.iframe.style.width = '100%';
-        designer.iframe.style.height = '100%';
-        designer.iframe.style.border = 0;
-
-        window.removeEventListener('message', onMessage);
-        window.addEventListener('message', onMessage, false);
-
-        parentNode.appendChild(designer.iframe);
-    };
-
-    designer.destroy = function() {
-        if (designer.iframe) {
-            designer.iframe.parentNode.removeChild(designer.iframe);
-            designer.iframe = null;
-        }
-        window.removeEventListener('message', onMessage);
-    };
-
-    designer.addSyncListener = function(callback) {
-        syncDataListener = callback;
-    };
-
-    designer.syncData = syncData;
-
-    designer.setTools = function(_tools) {
-        tools = _tools;
-    };
-
-    designer.setSelected = function(icon) {
-        if (typeof tools[icon] !== 'undefined') {
-            selectedIcon = icon;
-        }
-    };
-
-    designer.toDataURL = function(format, callback) {
-        dataURLListener = callback;
-
-        if (!designer.iframe) return;
-        designer.postMessage({
-            genDataURL: true,
-            format: format
-        });
-    };
-
-    designer.sync = function() {
-        if (!designer.iframe) return;
-        designer.postMessage({
-            syncPoints: true
-        });
-    };
-
-    designer.pointsLength = 0;
-
-    designer.undo = function(index) {
-        if (!designer.iframe) return;
-
-        designer.postMessage({
-            undo: true,
-            index: index || designer.pointsLength - 1 || -1
-        });
-    };
-
-    designer.postMessage = function(message) {
-        if (!designer.iframe) return;
-
-        message.uid = designer.uid;
-        designer.iframe.contentWindow.postMessage(message, '*');
+            window.removeEventListener('message', onMessage);
+        },
+        addSyncListener: function(callback) {
+            syncDataListener = callback;
+        },
+        syncData: syncData,
+        setTools: function(_tools) {
+            tools = _tools;
+        },
+        setSelected: function(icon) {
+            if (typeof tools[icon] !== 'undefined') {
+                selectedIcon = icon;
+            }
+        },
+        toDataURL: function(format, callback) {
+            dataURLListener = callback;
+            if (!iframe) return;
+            iframe.contentWindow.postMessage({
+                genDataURL: true,
+                format: format
+            }, '*');
+        },
+        sync: function() {
+            if (!iframe) return;
+            iframe.contentWindow.postMessage({
+                syncPoints: true
+            }, '*');
+        },
+        pointsLength: 0,
+        undo: function(index) {
+            if (!iframe) return;
+            iframe.contentWindow.postMessage({
+                undo: true,
+                index: index || this.pointsLength - 1 || -1
+            }, '*');
+        },
+        widgetHtmlURL: 'widget.html',
+        // widgetJsURL: 'widget.min.js'
+        widgetJsURL: 'widget.js'
     };
-
-    designer.widgetHtmlURL = 'widget.html';
-    designer.widgetJsURL = 'widget.min.js';
-}
+})();