feature: send hostname

bower.json

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

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://unpkg.com/tui-code-snippet@1.3.0/dist/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://unpkg.com/tui-code-snippet@1.3.0/dist/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

@@ -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} [options.usageStatistics=true] - send hostname to google analytics
  */
 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,7 +2,7 @@
  * @author NHN Ent. FE Development Team <[email protected]>
  * @fileoverview Util
  */
-import {forEach} from 'tui-code-snippet';
+import {forEach, imagePing} from 'tui-code-snippet';
 const {min, max} = Math;
 
 module.exports = {
@@ -71,5 +71,21 @@ module.exports = {
  }
 
  return props;
+ },
+
+ /**
+ * send hostname
+ */
+ sendHostName() {
+ const {hostname} = location;
+
+ 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,37 @@
+/**
+ * @fileoverview Test env
+ * @author NHN Ent. FE Development Lab <[email protected]>
+ */
+
+import snippet from 'tui-code-snippet';
+import ImageEditor from '../src/js/imageEditor';
+
+describe('ImageEditor', () => {
+ describe('constructor', () => {
+ let imageEditor;
+
+ afterEach(() => {
+ imageEditor.destroy();
+ });
+
+ it('should send hostname by default', () => {
+ const el = document.createElement('div');
+ spyOn(snippet, 'imagePing');
+
+ imageEditor = new ImageEditor(el);
+
+ expect(snippet.imagePing).toHaveBeenCalled();
+ });
+
+ it('should not send hostname on usageStatistics option false', () => {
+ const el = document.createElement('div');
+ spyOn(snippet, 'imagePing');
+
+ imageEditor = new ImageEditor(el, {
+ usageStatistics: false
+ });
+
+ expect(snippet.imagePing).not.toHaveBeenCalled();
+ });
+ });
+});