Merge branch 'master' into production

.editorconfig

@@ -0,0 +1,5 @@
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf

README.md

@@ -24,7 +24,7 @@ Canvas image editor
 
 ## Dependency
 * [fabric.js](https://github.com/kangax/fabric.js/releases/tag/v1.6.7) >=1.6.7
-* [tui.code-snippet](https://github.com/nhnent/tui.code-snippet/releases/tag/v1.2.5) >=1.2.5
+* [tui.code-snippet](https://github.com/nhnent/tui.code-snippet/releases/tag/v1.2.5) >=1.3.0
 
 ## Test Environment
 ### PC
@@ -92,6 +92,28 @@ var imageEditor = new tui.ImageEditor('.tui-image-editor', {
 });
 ```
 
+### Via Contents Delivery Network (CDN)
+TOAST UI products are available over the CDN powered by [TOAST Cloud](https://www.toast.com).
+
+You can use the CDN as below.
+
+```html
+<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
+```
+
+If you want to use a specific version, use the tag name instead of `latest` in the url's path.
+
+The CDN directory has the following structure.
+
+```
+tui-image-editor/
+├─ latest/
+│  ├─ tui-image-editor.js
+│  └─ tui-image-editor.min.js
+├─ v3.1.0/
+│  ├─ ...
+```
+
 ### Download
 * [Download bundle files from `dist` folder](https://github.com/nhnent/tui.image-editor/tree/production/dist)
 * [Download all sources for each version](https://github.com/nhnent/tui.image-editor/releases)

bower.json

@@ -29,10 +29,13 @@
   ],
   "dependencies": {
     "fabric": "~1.6.4",
-    "tui-code-snippet": "^1.2.5"
+    "tui-code-snippet": "^1.3.0"
   },
   "devDependencies": {
     "tui-component-colorpicker": "~1.0.1",
     "filesaver": "*"
+  },
+  "resolutions": {
+    "tui-code-snippet": "^1.3.0"
   }
 }

examples/example01-basic.html

@@ -223,7 +223,7 @@
             <div class="tui-image-editor"></div>
         </div>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
-        <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.code-snippet/v1.2.5/dist/tui-code-snippet.js"></script>
+        <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
         <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.component.colorpicker/1.0.2/dist/colorpicker.min.js"></script>

examples/example02-mobile.html

@@ -172,7 +172,7 @@
             <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
         </div>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.js"></script>
-        <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.code-snippet/v1.2.5/dist/tui-code-snippet.js"></script>
+        <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.3.0/tui-code-snippet.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
         <script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.component.colorpicker/1.0.2/dist/colorpicker.min.js"></script>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHNEnt FE Development Lab <dl_javascript@nhnent.com>",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "license": "MIT",
   "repository": "https://github.com/nhnent/tui.image-editor",
   "main": "dist/tui-image-editor.js",
@@ -57,6 +57,6 @@
   },
   "dependencies": {
     "core-js": "2.4.1",
-    "tui-code-snippet": "^1.2.5"
+    "tui-code-snippet": "^1.3.0"
   }
 }

src/js/imageEditor.js

@@ -7,6 +7,7 @@ import Invoker from './invoker';
 import commandFactory from './factory/command';
 import Graphics from './graphics';
 import consts from './consts';
+import {sendHostName} from './util';
 
 const events = consts.eventNames;
 const commands = consts.commandNames;
@@ -20,10 +21,13 @@ const {isUndefined, forEach, CustomEvents} = snippet;
  * @param {Object} [option] - Canvas max width & height of css
  *  @param {number} option.cssMaxWidth - Canvas css-max-width
  *  @param {number} option.cssMaxHeight - Canvas css-max-height
+ *  @param {Boolean} [option.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false.
  */
 class ImageEditor {
     constructor(wrapper, option) {
-        option = option || {};
+        option = snippet.extend({
+            usageStatistics: true
+        }, option);
 
         /**
          * Invoker
@@ -64,6 +68,10 @@ class ImageEditor {
         if (option.selectionStyle) {
             this._setSelectionStyle(option.selectionStyle);
         }
+
+        if (option.usageStatistics) {
+            sendHostName();
+        }
     }
 
     /**

src/js/util.js

@@ -2,8 +2,9 @@
  * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
  * @fileoverview Util
  */
-import {forEach} from 'tui-code-snippet';
+import {forEach, imagePing} from 'tui-code-snippet';
 const {min, max} = Math;
+let hostnameSent = false;
 
 module.exports = {
     /**
@@ -71,5 +72,25 @@ module.exports = {
         }
 
         return props;
+    },
+
+    /**
+     * send hostname
+     */
+    sendHostName() {
+        const {hostname} = location;
+        if (hostnameSent) {
+            return;
+        }
+        hostnameSent = true;
+
+        imagePing('https://www.google-analytics.com/collect', {
+            v: 1,
+            t: 'event',
+            tid: 'UA-115377265-9',
+            cid: hostname,
+            dp: hostname,
+            dh: 'image-editor'
+        });
     }
 };

test/imageEditor.spec.js

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview Test env
+ * @author NHN Ent. FE Development Lab <dl_javascript@nhnent.com>
+ */
+
+import snippet from 'tui-code-snippet';
+import ImageEditor from '../src/js/imageEditor';
+
+describe('ImageEditor', () => {
+    // hostnameSent module scope variable can not be reset.
+    // maintain cases with xit as it always fail, if you want to test these cases, change xit to fit one by one
+    describe('constructor', () => {
+        let imageEditor, el;
+
+        beforeEach(() => {
+            el = document.createElement('div');
+            spyOn(snippet, 'imagePing');
+        });
+
+        afterEach(() => {
+            imageEditor.destroy();
+        });
+
+        xit('should send hostname by default', () => {
+            imageEditor = new ImageEditor(el);
+
+            expect(snippet.imagePing).toHaveBeenCalled();
+        });
+
+        xit('should not send hostname on usageStatistics option false', () => {
+            imageEditor = new ImageEditor(el, {
+                usageStatistics: false
+            });
+
+            expect(snippet.imagePing).not.toHaveBeenCalled();
+        });
+    });
+});

test/text.spec.js

@@ -208,7 +208,7 @@ describe('Text', () => {
             const textareaStyles = textarea.style;
 
             expect(textareaStyles['font-size']).toEqual(`${expected.fontSize / ratio}px`);
-            expect(textareaStyles['font-family'].replace(/'|"/g, '')).toEqual(expected.fontFamily);
+            expect(textareaStyles['font-family'].replace(/'|"|\\/g, '')).toEqual(expected.fontFamily);
             expect(textareaStyles['font-weight']).toEqual(expected.fontWeight);
             expect(textareaStyles['font-align']).toEqual(expected.fontAlign);
             expect(textareaStyles['line-height']).toEqual(obj.getLineHeight() + 0.1);