Merge branch 'next' of github.com:Semantic-Org/Semantic-UI-Docs

Author: jlukic

package.json

@@ -10,7 +10,7 @@
     "url": "git://github.com/Semantic-Org/Semantic-UI-Docs.git"
   },
   "dependencies": {
-    "docpad": "~6.78.1",
+    "docpad": "~6.79.0",
     "docpad-plugin-copy": "~2.1.3",
     "docpad-plugin-eco": "~2.1.0",
     "docpad-plugin-partials": "~2.9.2"

server/documents/elements/icon.html.eco

@@ -1239,7 +1239,7 @@ themes      : ['Default']
         <div class="column"><i class="delicious icon"></i>Delicious</div>
         <div class="column"><i class="deviantart icon"></i>Deviantart</div>
         <div class="column"><i class="digg icon"></i>Digg</div>
-        <div class="column"><i class="dribbble icon"></i>Dribbble</div>
+        <div class="column"><i class="dribble icon"></i>Dribble</div>
         <div class="column"><i class="dropbox icon"></i>Dropbox</div>
         <div class="column"><i class="drupal icon"></i>Drupal</div>
         <div class="column"><i class="empire icon"></i>Empire</div>

server/documents/hotfix.html.eco

@@ -7,49 +7,56 @@ title      : 'Test Page'
 type       : 'Library'
 ---
 <div class="ui container">
-<form class="ui form">
-  <div class="fields">
-    <div class="seven wide field">
-      <label>Card Number</label>
-      <div class="ui fluid button" tabindex="0">Submit Order</div>
-    </div>
-    <div class="three wide field">
-      <label>CVC</label>
-      <input type="text" name="card[cvc]" maxlength="3" placeholder="CVC">
-    </div>
-    <div class="six wide field">
-      <label>Expiration</label>
-      <div class="two fields">
-        <div class="field">
-          <select class="ui fluid dropdown" name="card[expire-month]">
-            <option value="">Month</option>
-            <option value="1">January</option>
-            <option value="2">February</option>
-            <option value="3">March</option>
-            <option value="4">April</option>
-            <option value="5">May</option>
-            <option value="6">June</option>
-            <option value="7">July</option>
-            <option value="8">August</option>
-            <option value="9">September</option>
-            <option value="10">October</option>
-            <option value="11">November</option>
-            <option value="12">December</option>
-          </select>
-        </div>
-        <div class="field">
-          <input type="text" name="card[expire-year]" maxlength="4" placeholder="Year">
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
+<div class="ui basic segment">
+    1. After "First" tab is clicked, click the "ClickMe" button. Alert will appear<br />
+    2. <b>BUG:</b> When "First" tab is clicked on again, button stops working. Changing <i>cacheType</i> doesnt change anything!<br />
+    3. <b>The goal is to run JS once and then leave it be</b>. So scripts must be evaluated once and tab should not reload, if focused on again.
 </div>
 
+<div class="ui top attached tabular menu">
+  <a class="active item" data-tab="first">First</a>
+  <a class="item" data-tab="second">Second</a>
+</div>
+<div class="ui bottom attached active tab segment" data-tab="first">
+
+</div>
+<div class="ui bottom attached tab segment" data-tab="second">
+
+</div>
 </div>
 <script>
 $(document).ready(function() {
-  $('.ui.dropdown').dropdown();
+  var firstTabContent = "<div id='testfirst'>One&nbsp;<button>ClickMe</button></div> \n" +
+                "<script type='text/javascript'>\n" +
+                "   $(function() { $('button').click(function() { alert(1) }); $('#testfirst').append('<div>dynamically appended div <b>(will disappear if tab is clicked again!)</b> ' + (new Date()).getTime() + '</div>') });\n" +
+                "</scr" + "ipt>";
+
+$('.menu .item')
+.tab({
+    cache: true,
+    cacheType: 'DOM',
+    evaluateScripts: true,
+    onFirstLoad: function(tabPath, parameterArray, historyEvent) {
+        console.log('Initialized tab: ' + tabPath);
+    },
+    onLoad: function(tabPath, parameterArray, historyEvent) { //tab selected
+        console.log('Selected tab: ' + tabPath);
+    },
+    apiSettings: {
+        loadingDuration : 300,
+        mockResponse    : function(settings) {
+            var response = {
+                first  :  firstTabContent,
+
+              second : 'Two',
+
+              third  : 'Three'
+            };
+
+            return response[settings.urlData.tab];
+        }
+    }
+});
 });
 
 </script>

server/documents/modules/tab.html.eco

@@ -671,7 +671,7 @@ themes      : ['Default']
         <tr>
           <td>cacheType <div class="ui horizontal label">2.2</div></td>
           <td>response</td>
-          <td>Can be set to either <code>response</code> or <code>html</code>. Response will cache the original response on load, this way callbacks always receive the same content. Using `html` will cache the resulting html after all callbacks, making sure any changes to content are preserved.</td>
+          <td>Can be set to either <code>response</code>, <code>DOM</code> or <code>html</code>. Using <code>DOM</code> will cache the a clone of the DOM tree, preserving all events as they existed on render. <code>response</code> will cache the original response on load, this way callbacks always receive the same content. Using <code>html</code> will cache the resulting html after all callbacks, making sure any changes to content are preserved.</td>
         </tr>
         <tr>
           <td>cache</td>