Adjust code examples to generate links to other UI

9 years ago · d4f510d9d9
11 changed files with 240 additions and 163 deletions
--- a/server/documents/behaviors/api.html.eco
+++ b/server/documents/behaviors/api.html.eco
@ -3,6 +3,9 @@ layout      : 'default'
 css         : 'api'
 standalone  : true

+element     : 'API'
+elementType : 'behavior'
+
 title       : 'API'
 description : 'API allows elements to trigger actions on a server'
 type        : 'UI Behavior'
--- a/server/documents/behaviors/form.html.eco
+++ b/server/documents/behaviors/form.html.eco
@ -3,7 +3,7 @@ layout      : 'default'
 css         : 'form'
 standalone  : true

-element     : 'form'
+element     : 'validation'
 elementType : 'behavior'

 title       : 'Form Validation'
--- a/server/documents/elements/header.html.eco
+++ b/server/documents/elements/header.html.eco
@ -21,8 +21,8 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']

  <h2 class="ui dividing header">Types</h2>

-  <div class="example" data-content="ui header">
-    <h4 class="ui header">Page (H1-H6)</h4>
+  <div class="example" data-tag="h1,h2,h3,h4,h5">
+    <h4 class="ui header">Page Headers</h4>
    <p class="header">Headers may be oriented to give the hierarchy of a section in the context of the page</p>
    <div class="ignored info ui message">Page headings are sized using <a href="https://j.eremy.net/confused-about-rem-and-em/" target="_blank"><code>rem</code></a> and are not affected by surrounding content size.</div>
    <h1 class="ui header">First header</h1>
@ -37,8 +37,8 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>

-  <div class="example" data-content="ui header">
-    <h4 class="ui header">Content</h4>
+  <div class="example" data-class="size">
+    <h4 class="ui header">Content Headers</h4>
    <p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p>
    <div class="ignored info ui message">Content headings are sized with <a href="https://j.eremy.net/confused-about-rem-and-em/" target="_blank"><code>em</code></a> and are based on the font-size of their container.</div>
    <div class="ui ignored icon font buttons">
@ -60,7 +60,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
  </div>

  <div class="example">
-    <h4 class="ui header">Icon</h4>
+    <h4 class="ui header">Icon Headers</h4>
    <p>A header can be formatted to emphasize an icon</p>
    <h2 class="ui icon header">
      <i class="settings icon"></i>
@ -80,7 +80,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
  </div>

  <div class="example" data-class="sub">
-    <h4 class="ui header">Subheaders</h4>
+    <h4 class="ui header">Sub Headers</h4>
    <p>Headers may be formatted to label smaller or de-emphasized content.</p>
    <h2 class="ui sub header">
      Price
@ -117,7 +117,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
  <h2 class="ui dividing header">Content</h2>


-  <div class="example">
+  <div class="example" data-use-content="true" data-class="image" data-tag="img">
    <h4 class="ui header">Image</h4>
    <p>A header may contain an <a href="/elements/image.html">image</a></p>
    <h2 class="ui header">
@ -147,7 +147,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
  </div>


-  <div class="example">
+  <div class="example" data-use-content="true" data-class="icon">
    <h4 class="ui header">Icon</h4>
    <p>A header may contain an <a href="/elements/icon.html">icon</a></p>
    <h2 class="ui header">
@ -169,7 +169,7 @@ themes      : ['Default', 'Classic', 'Bookish', 'Chubby', 'Material']
    <img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
  </div>

-  <div class="example" data-class="sub">
+  <div class="example" data-use-content="true" data-class="sub">
    <h4 class="ui header">Subheader</h4>
    <p>Headers may contain subheaders</p>
    <h2 class="ui header">
--- a/server/documents/elements/icon.html.eco
+++ b/server/documents/elements/icon.html.eco
@ -28,6 +28,7 @@ themes      : ['Default']
    </div>

    <div class="ui ignored message">Semantic includes a complete port of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome 4.3</a> designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a> for its standard icon set.</div>
+
    <div class="icon example">
      <h4 class="ui header">Web Content</h4>
      <p>Icons can represent types of content found on websites</p>
@ -146,7 +147,6 @@ themes      : ['Default']
        <i class="wifi icon"></i>
      </div>
    </div>
-
    <div class="icon example">
      <h4 class="ui header">User Actions</h4>
      <p>Icons can represent common actions a user can take</p>
@ -293,7 +293,7 @@ themes      : ['Default']
      </div>
    </div>

-    <div class="icon example">
+    <div class="icon example" data-class="none">
      <h4 class="ui header">Users</h4>
      <p>Icons can represent types of people</p>
      <div class="ui doubling five column grid">
--- a/server/documents/elements/image.html.eco
+++ b/server/documents/elements/image.html.eco
@ -19,7 +19,7 @@ themes      : ['Default']

  <h2 class="ui dividing header">Types</h2>

-  <div class="example" data-class="image">
+  <div class="example" data-class="image" data-tag="img,svg">
    <h4 class="ui header">Image</h4>
    <p>An image</p>
    <div class="ui ignored message">
@ -104,11 +104,14 @@ themes      : ['Default']
  <div class="example">
    <h4 class="ui header">Vertically Aligned</h4>
    <p>An image can specify its vertical alignment</p>
-    <img class="ui top aligned tiny image" src="/images/wireframe/square-image.png"> Top Aligned
+    <img class="ui top aligned tiny image" src="/images/wireframe/square-image.png">
+    <span>Top Aligned</span>
    <div class="ui divider"></div>
-    <img class="ui middle aligned tiny image" src="/images/wireframe/square-image.png"> Middle Aligned
+    <img class="ui middle aligned tiny image" src="/images/wireframe/square-image.png">
+    <span>Middle Aligned</span>
    <div class="ui divider"></div>
-    <img class="ui bottom aligned tiny image" src="/images/wireframe/square-image.png"> Bottom Aligned
+    <img class="ui bottom aligned tiny image" src="/images/wireframe/square-image.png">
+    <span>Bottom Aligned</span>
  </div>

  <div class="example">
@ -124,14 +127,14 @@ themes      : ['Default']
  </div>

  <div class="example">
-    <h4 class="ui header">
-      Spaced
-      <div class="ui teal label">New in 2.0</div>
-    </h4>
+    <h4 class="ui header">Spaced</h4>
    <p>An image can specify that it needs an additional spacing to separate it from nearby content</p>

+    <div class="ui segment">
      <p>Te eum doming eirmod, nominati pertinacia <img class="ui mini spaced image" src="/images/wireframe/image.png"> argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
    </div>
+  </div>
+
  <div class="another example">
      <p><img class="ui mini right spaced image" src="/images/wireframe/image.png">Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

--- a/server/documents/elements/input.html.eco
+++ b/server/documents/elements/input.html.eco
@ -97,10 +97,9 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="left labeled, left corner labeled, right corner labeled, right labeled, labeled">
    <h4 class="ui header">Labeled</h4>
    <p>An input can be formatted with a label</p>
-    <div class="another example">
    <div class="ui labeled input">
      <div class="ui label">
        http://
@ -108,7 +107,6 @@ themes      : ['Default']
      <input type="text" placeholder="mysite.com">
    </div>
  </div>
-  </div>
  <div class="another example">
    <div class="ui right labeled input">
      <input type="text" placeholder="Find domain">
@ -149,7 +147,7 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="left action, right action, action">
    <h4 class="ui header">Action</h4>
    <p>An input can be formatted to alert the user to an action they may perform</p>
    <div class="ui action input">
--- a/server/documents/elements/label.html.eco
+++ b/server/documents/elements/label.html.eco
@ -18,7 +18,7 @@ themes      : ['Default']

 <div class="main ui container">

-  <h2 class="ui dividing header">Content</h2>
+  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Label</h4>
@ -27,53 +27,6 @@ themes      : ['Default']
      <i class="mail icon"></i> 23
    </div>
  </div>
-  <div class="example">
-    <h4 class="ui header">Detail</h4>
-    <p>A label can contain a detail</p>
-    <div class="ui label">
-      Dogs
-      <div class="detail">214</div>
-    </div>
-  </div>
-
-  <div class="example">
-    <h4 class="ui header">Image</h4>
-    <p>A label can include an image</p>
-    <a class="ui label">
-      <img class="ui right spaced image" src="/images/avatar/small/elliot.jpg">
-      Elliot
-    </a>
-    <a class="ui label">
-      <img class="ui right spaced circular image" src="/images/avatar/small/stevie.jpg">
-      Stevie
-    </a>
-  </div>
-
-  <div class="example">
-    <h4 class="ui header">Link</h4>
-    <p>A label can be a link or contain an item that links</p>
-    <a class="ui label">
-      <i class="mail icon"></i> 23
-    </a>
-  </div>
-  <div class="another example">
-    <div class="ui label">
-      <i class="mail icon"></i>
-      23
-      <a class="detail">View Mail</a>
-    </div>
-  </div>
-
-  <div class="example">
-    <h4 class="ui header">Delete Icon</h4>
-    <p>A label can contain an icon used to remove itself</p>
-    <div class="ui label">
-      Witty
-      <i class="delete icon"></i>
-    </div>
-  </div>
-
-  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Image</h4>
@ -126,7 +79,7 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="pointing above, pointing below, pointing left, pointing right">
    <h4 class="ui header">Pointing</h4>
    <p>A label can point to content next to it</p>
    <form class="ui fluid form">
@ -136,21 +89,21 @@ themes      : ['Default']
          Please enter a value
        </div>
      </div>
-      <div class="ui simple divider"></div>
+      <div class="ui divider"></div>
      <div class="field" placeholder="Last Name">
        <div class="ui pointing below label">
          Please enter a value
        </div>
        <input type="text">
      </div>
-      <div class="ui simple divider"></div>
+      <div class="ui divider"></div>
      <div class="inline field">
        <input type="text" placeholder="Username">
        <div class="ui pointing left label">
          That name is taken!
        </div>
      </div>
-      <div class="ui simple divider"></div>
+      <div class="ui divider"></div>
      <div class="inline field">
        <div class="ui pointing right label">
          Your password must be 6 characters or more
@ -160,14 +113,14 @@ themes      : ['Default']
    </form>
  </div>

-  <div class="example">
+  <div class="example" data-class="left corner, right corner, corner">
    <h4 class="ui header">Corner</h4>
    <p>A label can position itself in the corner of an element</p>
-    <div class="yellow ui message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
+    <div class="ui ignored warning message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
    <div class="ui two column grid">
      <div class="column">
        <div class="ui fluid image">
-          <a class="ui left red corner label">
+          <a class="ui red left corner label">
            <i class="heart icon"></i>
          </a>
          <img src="/images/wireframe/image.png">
@ -175,7 +128,7 @@ themes      : ['Default']
      </div>
      <div class="column">
        <div class="ui fluid image">
-          <a class="ui black corner label">
+          <a class="ui black right corner label">
            <i class="save icon"></i>
          </a>
          <img src="/images/wireframe/image.png">
@ -192,7 +145,7 @@ themes      : ['Default']
    <a class="ui teal tag label">Featured</a>
  </div>

-  <div class="example">
+  <div class="example" data-class="left ribbon, right ribbon, ribbon">
    <h4 class="ui header">Ribbon</h4>
    <p>A label can appear as a ribbon attaching itself to an element.</p>
    <div class="ui two column grid">
@ -319,7 +272,77 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="floating">
+    <h4 class="ui header">Floating</h4>
+    <p>A label can float above another element</p>
+    <div class="ui compact menu">
+      <a class="item">
+        <i class="icon mail"></i> Messages
+        <div class="floating ui red label">22</div>
+      </a>
+      <a class="item">
+        <i class="icon users"></i> Friends
+        <div class="floating ui teal label">22</div>
+      </a>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Content</h2>
+
+  <div class="example" data-use-content="true">
+    <h4 class="ui header">Detail</h4>
+    <p>A label can contain a detail</p>
+    <div class="ui label">
+      Dogs
+      <div class="detail">214</div>
+    </div>
+  </div>
+
+  <div class="example" data-use-content="true" data-class="icon">
+    <h4 class="ui header">Icon</h4>
+    <p>A label can include an icon</p>
+    <a class="ui label">
+      <i class="mail icon"></i>
+      Mail
+    </a>
+    <a class="ui label">
+      Tag
+      <i class="delete icon"></i>
+    </a>
+  </div>
+
+  <div class="example" data-use-content="true" data-class="image" data-tag="img">
+    <h4 class="ui header">Image</h4>
+    <p>A label can include an image</p>
+    <a class="ui label">
+      <img class="ui right spaced avatar image" src="/images/avatar/small/elliot.jpg">
+      Elliot
+    </a>
+    <a class="ui label">
+      <img src="/images/avatar/small/stevie.jpg">
+      Stevie
+    </a>
+  </div>
+
+  <div class="example" data-use-content="true" data-tag="a">
+    <h4 class="ui header">Link</h4>
+    <p>A label can be a link or contain an item that links</p>
+    <a class="ui label">
+      <i class="mail icon"></i> 23
+    </a>
+  </div>
+  <div class="another example">
+    <div class="ui label">
+      <i class="mail icon"></i>
+      23
+      <a class="detail">View Mail</a>
+    </div>
+  </div>
+
+  <h2 class="ui dividing header">Variations</h2>
+
+
+  <div class="example" data-class="empty circular, circular">
    <h4 class="ui header">Circular</h4>
    <p>A label can be circular</p>
    <a class="ui red circular label">2</a>
@ -352,22 +375,6 @@ themes      : ['Default']
    <a class="ui black empty circular label"></a>
  </div>

-  <div class="example">
-    <h4 class="ui header">Floating</h4>
-    <p>A label can float above another element</p>
-    <div class="ui compact menu">
-      <a class="item">
-        <i class="icon mail"></i> Messages
-        <div class="floating ui red label">22</div>
-      </a>
-      <a class="item">
-        <i class="icon users"></i> Friends
-        <div class="floating ui teal label">22</div>
-      </a>
-    </div>
-  </div>
-
-  <h2 class="ui dividing header">Variations</h2>
  <div class="example">
    <h4 class="ui header">Colored</h4>
    <p>A label can have different colors</p>
@ -458,7 +465,7 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="tag">
    <h4 class="ui header">Tag Group</h4>
    <p>Labels can share tag formatting</p>
    <div class="ui tag labels">
@ -480,7 +487,7 @@ themes      : ['Default']
    </div>
  </div>

-  <div class="example">
+  <div class="example" data-class="circular">
    <h4 class="ui header">Circular Group</h4>
    <p>Labels can share shapes</p>
    <div class="ui circular labels">
--- a/server/documents/views/comment.html.eco
+++ b/server/documents/views/comment.html.eco
@ -1,14 +1,14 @@
 ---
 layout      : 'default'
 css         : 'comment'
+element     : 'comment'
+elementType : 'view'
+standalone  : true

 title       : 'Comment'
 description : 'A comment displays user feedback to site content'
 type        : 'UI View'

-element     : 'comment'
-elementType : 'view'
-
 themes      : ['Default', 'Chubby']
 ---

--- a/server/files/javascript/docs.js
+++ b/server/files/javascript/docs.js
@ -85,6 +85,7 @@ semantic.ready = function() {
      : 0,
    languageDropdownUsed = false,

+    metadata,

    requestAnimationFrame = window.requestAnimationFrame
      || window.mozRequestAnimationFrame
@ -100,6 +101,18 @@ semantic.ready = function() {
  // event handlers
  handler = {

+    getMetadata: function() {
+      $.api({
+        debug : false,
+        on    : 'now',
+        url   : '/metadata.json',
+        cache : 'local',
+        onSuccess: function(response) {
+          metadata = response;
+        }
+      });
+    },
+
    createIcon: function() {
      $example
        .each(function(){
@ -293,34 +306,6 @@ semantic.ready = function() {
      }
    },

-    loadSearch: function() {
-      if( !$search.hasClass('loaded') ) {
-        $search.addClass('loading');
-        $.getJSON('/metadata.json')
-          .always(function() {
-            $search.removeClass('loading');
-          })
-          .fail(function(err) {
-            console.log('Failed to load search metadata');
-          })
-          .done(function(data) {
-            $search
-              .addClass('loaded')
-              .search({
-                transition     : 'slide down',
-                searchFullText : false,
-                source         : data,
-                searchFields   : [ 'title', 'category'],
-                onSelect       : function(results, response) {
-                  window.location = '/' + results.filename;
-                }
-              })
-            ;
-          })
-        ;
-      }
-    },
-
    tryCreateMenu: function(event) {
      if($(window).width() > 640 && !$('body').hasClass('basic')) {
        if($container.size() > 0 && $container.find('.following.menu').size() === 0) {
@ -842,9 +827,12 @@ semantic.ready = function() {
            : $closestExample,
        $header     = $example.find('h4').eq(0),
        $attributes = $code.find('.attribute, .class'),
+        $tags       = $code.find('.title'),
        pageName    = handler.getPageTitle(),
        name        = handler.getText($header).toLowerCase(),
-        classes     = $example.data('class') || ''
+        classes     = $example.data('class') || '',
+        tags        = $example.data('tag')  || false,
+        useContent  = $example.data('use-content') || false
      ;
      // Add title
      if(name) {
@ -859,6 +847,7 @@ semantic.ready = function() {
      // Add common variations
      classes = classes.replace('text alignment', "left aligned, right aligned, justified, center aligned");
      classes = classes.replace('floating', "right floated,left floated,floated");
+      classes = classes.replace('vertically aligned', "top aligned, middle aligned, bottom aligned");
      classes = classes.replace('vertically attached', "attached");
      classes = classes.replace('horizontally attached', "attached");
      classes = classes.replace('attached', "left attached,right attached,top attached,bottom attached,attached");
@ -868,12 +857,42 @@ semantic.ready = function() {
        ? classes.split(',')
        : []
      ;
-      // check each class value
+      // highlight tags if asked
+      if(tags) {
+        tags = (tags !== '')
+          ? tags.split(',')
+          : []
+        ;
+        $tags.each(function() {
+          var
+            $tag    = $(this),
+            tagHTML = $tag.html(),
+            newHTML = false
+          ;
+          $.each(tags, function(index, tag) {
+            if(tagHTML == tag) {
+              newHTML = tagHTML.replace(tag, '<b>' + tag + '</b>');
+            }
+          });
+          if(newHTML) {
+            $tag
+              .addClass('class')
+              .html(newHTML)
+            ;
+          }
+        });
+      }
+      // highlight classes
      $attributes.each(function() {
        var
          $attribute    = $(this),
          attributeHTML = $attribute.html(),
          $value,
+          isUI,
+          isPageElement,
+          isOtherUI,
+          elementClasses,
+          classString,
          html,
          newHTML
        ;
@ -883,20 +902,43 @@ semantic.ready = function() {
        }
        $value        = $attribute.next('.value, .string').eq(0);
        html          = $value.html();
-        // check against each value
-        $.each(classes, function(index, className) {
-          className = $.trim(className);
+
+        isUI          = (html.search('ui') !== -1);
+        isPageElement = (html.search(pageName) > 0);
+        isOtherUI     = (!isPageElement && isUI);
+
+        // check if any class match
+        $.each(classes, function(index, string) {
+          var
+            className      = $.trim(string),
+            isClassMatch   = (html.search(className) !== -1)
+          ;
          if(className === '') {
            return true;
          }
-          if(pageName !== 'icon' && className == 'icon' && $value.prevAll('.title').html() == 'i') {
-            return true;
-          }
-          if(html.search(className) !== -1) {
-            newHTML = html.replace(className, '<b>' + className + '</b>');
+          // class match on current page element (or content if allowed)
+          if(isClassMatch && (isPageElement || useContent) ) {
+            newHTML = html.replace(className, '<b title="Required Class">' + className + '</b>');
            return false;
          }
        });
+
+        // generate links to other UI
+        if(isOtherUI) {
+          html           = newHTML || html;
+          classString    = html.replace(/\"/g, '');
+          elementClasses = classString.split(' ');
+          $.each(elementClasses, function(index, string){
+            var
+              className = string.replace('"', '')
+            ;
+            if(metadata && metadata[className] && metadata[className].url) {
+              // we found a match
+              newHTML = html.replace(classString, '<a href="' + metadata[className].url + '">' + classString + '</a>');
+            }
+          });
+        }
+
        if(newHTML) {
          $value
            .addClass('class')
@ -1325,6 +1367,8 @@ semantic.ready = function() {
    window.Transifex.live.onTranslatePage(handler.showLanguageModal);
  }

+  handler.getMetadata();
+
 };


--- a/server/files/stylesheets/docs.css
+++ b/server/files/stylesheets/docs.css
@ -1712,29 +1712,51 @@ code.less:hover .lisp .body {
 }

 /* Emphasized Value */
-code.code .class.string b,
-code.code .class.value b {
-  padding: 0px;
+code.code .class {
+  color: #008C79;
+}
+code.code .class b {
  font-weight: normal;
  background-color: rgba(90, 90, 90, 0);
  border-radius: 5px;
  line-height: 1;
  vertical-align: baseline;
-  display: inline-block;/*
+  display: inline-block;
  -webkit-transition: all 0.3s ease;
-  transition: all 0.3s ease;*/
-}
-code.code .class.value {
-  /*color: #668C79;*/
-}
-code.code .class.string b,
-code.code .class.value b {
-  background-color: rgba(98, 190, 169, 0.25);
-  color: #008078;
+  transition: all 0.3s ease;
  margin: 0px -2px;
  padding: 2px 2px;
 }
+code.code .class b {
+  background-color: rgba(218, 189, 40, 0.15);
+  color: #9E6C00;
+}
+
+/*
+code.code:hover .class.string b,
+code.code:hover .class.value b {
+  background-color: rgba(218, 189, 40, 0.1);
+  color: inherit;
+}
+*/
+

+/* Linked UI */
+code .string a,
+code .tag .value a {
+  border-radius: 5px;
+  line-height: 1;
+  margin: 0px -2px;
+  padding: 2px 4px;
+  background-color: rgba(150, 150, 150, 0.1);
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+code .string a:hover,
+code .tag .value a:hover {
+  background-color: rgba(40, 150, 218, 0.2);
+  color: #00689E;
+}