Merge branch 'master' into production

README.md

@@ -14,6 +14,7 @@
 * [Examples](#-examples)
 * [Install](#-install)
     * [Via Package Manager](#via-package-manager)
+    * [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)
     * [Download Source Files](#download-source-files)
 * [Usage](#-usage)
     * [HTML](#html)
@@ -29,9 +30,9 @@
 
 
 ## 🌏 Browser Support
-| <img src="https://user-images.githubusercontent.com/1215767/34348387-a2e64588-ea4d-11e7-8267-a43365103afe.png" alt="Chrome" width="16px" height="16px" /> Chrome | <img src="https://user-images.githubusercontent.com/1215767/34348383-9e7ed492-ea4d-11e7-910c-03b39d52f496.png" alt="Firefox" width="16px" height="16px" /> Firefox | <img src="https://user-images.githubusercontent.com/1215767/34348394-a981f892-ea4d-11e7-9156-d128d58386b9.png" alt="Safari" width="16px" height="16px" /> Safari | <img src="https://user-images.githubusercontent.com/1215767/34348380-93e77ae8-ea4d-11e7-8696-9a989ddbbbf5.png" alt="Edge" width="16px" height="16px" /> Edge | <img src="https://user-images.githubusercontent.com/1215767/34348590-250b3ca2-ea4f-11e7-9efb-da953359321f.png" alt="IE" width="16px" height="16px" /> Internet Explorer |
+| <img src="https://user-images.githubusercontent.com/1215767/34348387-a2e64588-ea4d-11e7-8267-a43365103afe.png" alt="Chrome" width="16px" height="16px" /> Chrome | <img src="https://user-images.githubusercontent.com/1215767/34348590-250b3ca2-ea4f-11e7-9efb-da953359321f.png" alt="IE" width="16px" height="16px" /> Internet Explorer | <img src="https://user-images.githubusercontent.com/1215767/34348380-93e77ae8-ea4d-11e7-8696-9a989ddbbbf5.png" alt="Edge" width="16px" height="16px" /> Edge | <img src="https://user-images.githubusercontent.com/1215767/34348394-a981f892-ea4d-11e7-9156-d128d58386b9.png" alt="Safari" width="16px" height="16px" /> Safari | <img src="https://user-images.githubusercontent.com/1215767/34348383-9e7ed492-ea4d-11e7-910c-03b39d52f496.png" alt="Firefox" width="16px" height="16px" /> Firefox |
 | :---------: | :---------: | :---------: | :---------: | :---------: |
-| Yes | Yes | Yes | Yes | 8+ |
+| Yes | 8+ | Yes | Yes | Yes |
 
 
 ## 🎨 Features
@@ -69,11 +70,36 @@ $ bower install tui-layout # Latest version
 $ bower install tui-layout#<tag> # Specific version
 ```
 
+### Via Contents Delivery Network (CDN)
+TOAST UI products are available over a CDN powered by [TOAST Cloud](https://www.toast.com).
+
+You can use CDN as below.
+
+```html
+<script src="https://uicdn.toast.com/tui.layout/latest/tui-layout.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.layout/
+├─ latest
+│  ├─ tui-layout.js
+│  ├─ tui-layout.min.js
+├─ v2.0.0/
+│  ├─ ...
+```
+
+
 ### Download Source Files
 * [Download bundle files](https://github.com/nhnent/tui.layout/tree/production/dist)
 * [Download all sources for each version](https://github.com/nhnent/tui.layout/releases)
 
 
+
+
 ## 🔨 Usage
 
 ### HTML

bower.json

@@ -21,6 +21,6 @@
     ],
     "dependencies": {
         "jquery": "^1.11.0",
-        "tui-code-snippet": "^1.2.5"
+        "tui-code-snippet": "^1.3.0"
     }
 }

examples/example01-basic.html

@@ -30,7 +30,7 @@
             <div id="layout"></div>
         </div>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.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="../dist/tui-layout.js"></script>
         <script class="code-js">
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tui-layout",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "dist/tui-layout",
   "scripts": {
     "test": "karma start --no-single-run",
@@ -51,6 +51,6 @@
   },
   "dependencies": {
     "jquery": "^1.11.0",
-    "tui-code-snippet": "^1.2.5"
+    "tui-code-snippet": "^1.3.0"
   }
 }

src/js/group.js

@@ -151,7 +151,7 @@ var Group = snippet.defineClass(/** @lends Group.prototype */ {
             item.index = index;
             item.$element.attr({
                 'data-index': index,
-                'data-groupInfo': this.id
+                'data-groupinfo': this.id
             });
         }, this);
         this.$dimmed.hide();

src/js/layout.js

@@ -11,6 +11,17 @@ var snippet = require('tui-code-snippet');
 var statics = require('./statics');
 var Group = require('./group');
 var Guide = require('./guide');
+var sendHostName = function() {
+    var hostname = location.hostname;
+    snippet.imagePing('https://www.google-analytics.com/collect', {
+        v: 1,
+        t: 'event',
+        tid: 'UA-115377265-9',
+        cid: hostname,
+        dp: hostname,
+        dh: 'layout'
+    });
+};
 
 /**
  * Layout class make layout element and include groups, control item move and set events.
@@ -26,6 +37,7 @@ var Guide = require('./guide');
  *             @param {string} options.grouplist.items.title - The item's title
  *             @param {string} [options.grouplist.items.isClose] - Whether the item is closed or not
  *             @param {string} [options.grouplist.items.isDraggable] - Whether the item is draggable or not
+ *     @param {Boolean} [options.usageStatistics=true|false] send hostname to google analytics [default value is true]
  * @example
  * var container = document.getElementById('layout');
  * var Layout = tui.Layout; // or require('tui-layout');
@@ -73,6 +85,10 @@ var Guide = require('./guide');
  */
 var Layout = snippet.defineClass(/** @lends Layout.prototype */ {
     init: function(container, options) {
+        options = snippet.extend({
+            usageStatistics: true
+        }, options);
+
         /**
          * Container element
          * @type {jQuery}
@@ -84,6 +100,10 @@ var Layout = snippet.defineClass(/** @lends Layout.prototype */ {
         this._makeGroup(options.grouplist);
         this._makeGuide(options.guideHTML);
         this._setEvents();
+
+        if (options.usageStatistics) {
+            sendHostName();
+        }
     },
 
     /**
@@ -437,7 +457,7 @@ var Layout = snippet.defineClass(/** @lends Layout.prototype */ {
      */
     _update: function() {
         var temp = this.$temp,
-            oldGroup = this._getGroup(temp.attr('data-groupInfo')),
+            oldGroup = this._getGroup(temp.attr('data-groupinfo')),
             targetGroup = this._getGroup(temp.parent()),
             removeIndex = parseInt(temp.attr('data-index'), 10),
             addIndex = this._getAddIndex(),

test/group.spec.js

@@ -14,19 +14,19 @@ describe('group', function() {
             ratio: '5',
             items: [{
                 id: 'item1',
-                contentId: 'viewItem1',
+                contentId: 'viewitem1',
                 title: 'title1'
             }, {
                 id: 'item2',
-                contentId: 'viewItem2',
+                contentId: 'viewitem2',
                 title: 'title2'
             }, {
                 id: 'item3',
-                contentId: 'viewItem3',
+                contentId: 'viewitem3',
                 title: 'title3'
             }, {
                 id: 'item4',
-                contentId: 'viewItem3',
+                contentId: 'viewitem3',
                 title: 'title4'
             }],
             id: 'groupA'
@@ -39,11 +39,11 @@ describe('group', function() {
             ratio: '5',
             items: [{
                 id: 'item5',
-                contentId: 'viewItem5',
+                contentId: 'viewitem5',
                 title: 'title5'
             }, {
                 id: 'item6',
-                contentId: 'viewItem6',
+                contentId: 'viewitem6',
                 title: 'title6'
             }],
             id: 'groupA'

test/item.spec.js

@@ -9,15 +9,15 @@ describe('item set', function() {
         item = new Item({
             title: 'title1',
             id: 'id1',
-            contentId: 'lifeStyle',
+            contentId: 'lifestyle',
             groupInfo: 'groupA',
             isDraggable: true,
             isClose: true,
             index: 0
         });
         item2 = new Item({
             id: 'iddddd1',
-            contentId: 'lifeStyle',
+            contentId: 'lifestyle',
             groupInfo: 'groupA',
             isDraggable: true,
             isClose: false,
@@ -26,7 +26,7 @@ describe('item set', function() {
         item3 = new Item({
             title: 'asdf',
             id: 'id2',
-            contentId: 'lifeStyle',
+            contentId: 'lifestyle',
             groupInfo: 'groupA',
             index: 3
         });

test/layout.spec.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var $ = require('jquery');
+var snippet = require('tui-code-snippet');
 
 var Layout = require('../src/js/layout');
 
@@ -10,8 +11,8 @@ describe('layout', function() {
         id: 'g0',
         ratio: '10',
         items: [{
-            id: 'item-lifeStyle',
-            contentId: 'lifeStyle',
+            id: 'item-lifestyle',
+            contentId: 'lifestyle',
             title: 'Sports',
             isDraggable: true
         },
@@ -39,8 +40,8 @@ describe('layout', function() {
             isDraggable: true
         },
         {
-            id: 'item-todoList', // 변경가능
-            contentId: 'todoList',
+            id: 'item-todolist', // 변경가능
+            contentId: 'todolist',
             title: 'TodoList Seciton',
             isClose: false,
             isDraggable: true
@@ -164,4 +165,26 @@ describe('layout', function() {
             done();
         }, 1000);
     });
+    describe('usageStatistics', function() {
+        beforeEach(function() {
+            spyOn(snippet, 'imagePing');
+            this.layout = null;
+        });
+
+        it('should send hostname by default', function() {
+            this.layout = new Layout($('#layout1'), {
+                grouplist: groupList1
+            });
+
+            expect(snippet.imagePing).toHaveBeenCalled();
+        });
+        it('should not send hostname on usageStatistics option false', function() {
+            this.layout = new Layout($('#layout1'), {
+                grouplist: groupList1,
+                usageStatistics: false
+            });
+
+            expect(snippet.imagePing).not.toHaveBeenCalled();
+        });
+    });
 });