Adds localization dropdown, and nag

server/documents/elements/button.html.eco

@@ -1,6 +1,6 @@
 ---
 layout      : 'default'
-css         : 'button'
+css         : 'button-page'
 element     : 'button'
 elementType : 'element'
 

server/documents/modules/dropdown.html.eco

@@ -1421,9 +1421,9 @@ themes      : ['Default']
       </thead>
       <tbody>
         <tr>
-          <td>onChange(value, text)</td>
+          <td>onChange(value, text, $choice)</td>
           <td>Dropdown</td>
-          <td>Is called after a dropdown item is selected. receives the name and value of selection.</td>
+          <td>Is called after a dropdown item is selected. receives the name and value of selection and the active menu element</td>
         </tr>
         <tr>
           <td>onShow</td>

server/files/javascript/semantic.js

@@ -48,10 +48,13 @@ semantic.ready = function() {
     $footer           = $('.page > .footer'),
 
     $menuPopup        = $('.ui.main.menu .popup.item'),
-    $menuDropdown     = $('.ui.main.menu .dropdown'),
+    $pageDropdown     = $('.ui.main.menu .page.dropdown'),
     $pageTabMenu      = $('.tab.header.segment .tabular.menu'),
     $pageTabs         = $('.tab.header.segment .menu .item'),
 
+    $languageDropdown = $('.ui.main.menu .language.dropdown'),
+    $languageModal    = $('.language.modal'),
+
     $downloadDropdown = $('.download.buttons .dropdown'),
 
     $helpPopup        = $('.header .help.icon'),
@@ -59,9 +62,10 @@ semantic.ready = function() {
     $example          = $('.example'),
     $shownExample     = $example.filter('.shown'),
 
-    $developer        = $('.developer.item'),
-    $overview         = $('.overview.item, .overview.button'),
-    $designer         = $('.designer.item'),
+    $mode             = $('.header .mode.button'),
+    $developer        = $('.header .developer.item'),
+    $overview         = $('.header .overview.item'),
+    $designer         = $('.header .designer.item'),
 
     $sidebarButton    = $('.fixed.launch.button'),
     $code             = $('div.code').not('.existing'),
@@ -822,6 +826,10 @@ semantic.ready = function() {
     })
   ;
 
+  $languageModal.modal({
+    detachable: false
+  });
+
   $menu
     .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item')
     .sidebar('attach events', $hideMenu, 'hide')
@@ -875,6 +883,9 @@ semantic.ready = function() {
     .on('click', handler.swapStyle)
   ;
 
+  $mode
+    .dropdown()
+  ;
   $developer
     .on('click', handler.developerMode)
   ;
@@ -894,13 +905,43 @@ semantic.ready = function() {
     })
   ;
 
-  $menuDropdown
+  $pageDropdown
     .dropdown({
       on       : 'hover',
       action   : 'nothing',
       allowTab : false
     })
   ;
+  $languageDropdown
+    .popup()
+    .dropdown({
+      on       : 'click',
+      onShow: function() {
+        $(this).popup('hide');
+      },
+      onChange: function(value, text, $choice) {
+        var
+          percent = $choice.data('percent') || 0
+        ;
+        window.Transifex.live.translateTo(value, true);
+        if(percent < 100) {
+          $('.language.modal')
+            .find('.header .name')
+              .html(text)
+              .end()
+            .find('.complete')
+              .html(percent)
+              .end()
+            .modal('show', function() {
+              $('.language.modal .progress .bar').css('width', percent + '%');
+            })
+          ;
+        }
+      }
+    })
+
+  ;
+
 
   if($('body').hasClass('index') ) {
     $('.masthead')

server/files/stylesheets/semantic.css

@@ -706,7 +706,7 @@ body#example.hide {
 -----------------*/
 
 #example.overview h2.ui.header {
-  margin-bottom: 0em;
+  margin-bottom: 0.5em;
 }
 #example.overview .example {
   display: table-row;
@@ -726,6 +726,7 @@ body#example.hide {
   font-weight: normal;
   padding: 0em 0em 0em 0.5em;
   width: auto;
+  line-height: 1.4;
 }
 
 /*----------------
@@ -1731,8 +1732,8 @@ body.progress .ui.progress .bar {
   #example .masthead .mobile.buttons {
     display: block;
   }
-  #example.button .ui.buttons,
-  #example.button :not(.buttons) .ui.button {
+  #example.button-page .ui.buttons,
+  #example.button-page :not(.buttons) .ui.button {
     margin-bottom: 0.5em;
   }
   #example .masthead:before {

server/layouts/default.html.eco

@@ -148,6 +148,20 @@
   ga('send', 'pageview');
 
   </script>
+  <script type="text/javascript">
+    window.liveSettings = {
+      api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
+      parse_attr : [
+        'data-title',
+        'data-content'
+      ],
+      detectlang   : true,
+      autocollect  : true,
+      ignore_tags  : ['i'],
+      ignore_class : ["code", "ace_editor"]
+    };
+  </script>
+  <script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
 </head>
 <body id="example" class="pushable <%= @document.css %>" ontouchstart="">
   <div class="ui vertical inverted labeled icon sidebar menu" id="menu">
@@ -210,12 +224,12 @@
       <% else: %>
       <div class="disabled icon item"><i class="left chevron icon"></i></div>
       <% end %>
-      <div class="section ui dropdown link item">
+      <div class="section ui page dropdown link item">
         <span class="count"><%= "#{pageNumber} of #{pageCount}" %></span>
         <div class="menu">
           <% for element, index in currentCollection: %>
             <a class="<%= if element.id is @document.id then 'active ' %>item" href="<%= element.url %>">
-              <%= (index+1) %>. <%= element.title %>
+              <%= element.title %>
             </a>
           <% end %>
         </div>
@@ -230,20 +244,28 @@
           <iframe src="http://ghbtns.com/github-btn.html?user=semantic-org&repo=semantic-ui&type=watch&count=true"
   allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
         </div>
-        <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %>
-        <a class="popup designer icon item" data-content="Designer Mode">
-          <i class="docs designer icon"></i>
-        </a>
-        <a class="popup developer icon item" data-content="Developer Mode">
-          <i class="docs developer icon"></i>
-        </a>
-        <% end %>
         <a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/quirkyinc/semantic">
           <i class="alternate github icon"></i>
         </a>
-      <!--   <a class="popup localization icon item" data-content="International">
-          <i class="docs globe icon"></i>
-        </a> -->
+        <div class="ui language dropdown item" id="languages" data-content="Select Language">
+          <i class="world icon"></i>
+          <div class="menu">
+            <div class="item" data-percent="100" data-value="en">English</div>
+            <div class="item" data-percent="19" data-value="nl">Nederlands</div>
+            <div class="item" data-percent="19" data-value="hu">Magyar</div>
+            <div class="item" data-percent="8" data-value="ar">العربية</div>
+            <div class="item" data-percent="0" data-value="pt_BR">Português</div>
+            <div class="item" data-percent="0" data-value="tr">Türkçe</div>
+            <div class="item" data-percent="0" data-value="es">Español</div>
+            <div class="item" data-percent="0" data-value="ru">Русский</div>
+            <div class="item" data-percent="0" data-value="de">Deutsch</div>
+            <div class="item" data-percent="0" data-value="fr">Français</div>
+            <div class="item" data-percent="0" data-value="ja">日本語</div>
+            <div class="item" data-percent="0" data-value="en">简体中文</div>
+            <div class="item" data-percent="0" data-value="kr">한국어</div>
+            <div class="item" data-percent="0" data-value="it">Italiano</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -291,6 +313,31 @@
       </div>
     </div>
   </div>
+  <div class="ui basic language modal">
+    <i class="close icon"></i>
+    <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
+    <div class="content">
+      <div class="middle aligned image">
+        <i class="world icon"></i>
+      </div>
+      <div class="description">
+        <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
+        <div class="ui teal active striped progress">
+          <div class="bar"></div>
+        </div>
+        <p>We need your help to make Semantic available to  people who speak your language.</p>
+        <p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team, please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
+        </p>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="ui inverted cancel button">No Thanks</div>
+      <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help" target="_blank" class="ui inverted approve teal button">
+        <i class="mail icon"></i>
+        Help Translate
+      </a>
+    </div>
+  </div>
   <script src="/javascript/library/less.js"></script>
 </body>
 

server/partials/header.html.eco

@@ -12,9 +12,6 @@
       <p><%=@document.description %></p>
       <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
       <div class="ui divider"></div>
-      <div class="ui basic toggle overview button">
-        Definition
-      </div>
       <% end %>
       <% if @document.type is 'UI Module': %>
       <a href="/module.html" class="ui right floated basic labeled icon button">
@@ -22,6 +19,20 @@
         <i class="help icon" data-title="What are Modules?" data-content="Modules are UI elements that include behaviors as part of their definition. Modules require some knowledge of Javascript to trigger."></i>
       </a>
       <% end %>
+      <div class="ui right floated basic button floating mode dropdown">
+        Change View
+        <div class="menu">
+          <a class="overview item">
+            Definition
+          </a>
+          <a class="designer item">
+            Designer
+          </a>
+          <a class="developer item">
+            Developer
+          </a>
+        </div>
+      </div>
       <% if @document.themes?: %>
       <div class="ui floating dropdown theme basic button" data-element="<%= @document.element %>" data-type="<%= @document.elementType %>">
         <span class="text">Theme</span>