Code samples should now automatically resize when browser resizes, code samples now generate on first mousemove so as to avoid changes in html markup from interacting with examples

Former-commit-id: a78a8ca545
Former-commit-id: 846f90b6c1

node/src/documents/modules/modal.html.eco

@@ -111,7 +111,7 @@ type        : 'UI Module'
 
   <h2 class="ui dividing header">Types</h2>
 
-  <div class="example">
+  <div class="no example">
     <h4 class="ui header">Standard</h4>
     <p>A standard modal</p>
     <div class="code" data-demo="true">
@@ -121,7 +121,7 @@ type        : 'UI Module'
     </div>
   </div>
 
-  <div class="example">
+  <div class="no example">
     <h4 class="ui header">Basic</h4>
     <p>A modal can reduce its complexity</p>
     <div class="code" data-demo="true">

node/src/files/javascript/semantic.js

@@ -234,27 +234,16 @@ semantic.ready = function() {
       ;
     },
 
-    createCode: function(type) {
+    generateCode: function() {
       var
         $example    = $(this).closest('.example'),
-        $header     = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
-        $demo       = $example.children().not($header).not('i.code:first-child, .code, .language.label, .annotation, br, .ignore, .ignored'),
         $annotation = $example.find('.annotation'),
         $code       = $annotation.find('.code'),
+        $header     = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
+        $demo       = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
         whiteSpace  = new RegExp('\\n\\s{4}', 'g'),
-        code       = ''
+        code        = ''
       ;
-      if($annotation.size() === 0) {
-        $annotation = $('<div/>')
-          .addClass('annotation')
-          .appendTo($example)
-        ;
-      }
-      if( $code.hasClass('existing') ) {
-        $annotation.show();
-        $code.removeClass('existing');
-        $.proxy(handler.initializeCode, $code)();
-      }
       if( $code.size() === 0) {
         $demo
           .each(function(){
@@ -264,15 +253,45 @@ semantic.ready = function() {
             }
           })
         ;
-        //code  = $.trim(code.replace(whiteSpace, '\n'));
+      }
+      $example.data('code', code);
+      return code;
+    },
+    createCode: function(type) {
+      var
+        $example    = $(this).closest('.example'),
+        $header     = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
+        $annotation = $example.find('.annotation'),
+        $code       = $annotation.find('.code'),
+        $demo       = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
+        code        = $example.data('code')
+      ;
+      if( $code.hasClass('existing') ) {
+        $annotation.show();
+        $code.removeClass('existing');
+        $.proxy(handler.initializeCode, $code)();
+      }
+
+      $.proxy(handler.generateCode, this)();
+
+      if($annotation.size() === 0) {
+        $annotation = $('<div/>')
+          .addClass('annotation')
+          .appendTo($example)
+        ;
+      }
+
+      if( $example.find('.ace_editor').size() === 0) {
         $code = $('<div/>')
           .data('type', 'html')
           .addClass('code')
           .html(code)
+          .hide()
             .appendTo($annotation)
         ;
         $.proxy(handler.initializeCode, $code)();
       }
+
       if( ($demo.first().is(':visible') || type == 'developer') && type != 'designer' ) {
         $demo.hide();
         $header.show();
@@ -300,9 +319,29 @@ semantic.ready = function() {
       ;
     },
 
+    resizeCode: function() {
+      $('.ace_editor')
+        .each(function() {
+          var
+            $code = $(this),
+            padding     = 4,
+            editor,
+            editorSession,
+            codeHeight
+          ;
+          $code.css('height', 'auto');
+          editor        = ace.edit($code[0]);
+          editorSession = editor.getSession();
+          codeHeight    = editor.session.getScreenLength() * (editor.renderer.lineHeight)  + editor.renderer.scrollBar.getWidth() + padding;
+          $code.css('height', codeHeight);
+          editor.resize();
+        })
+      ;
+    },
+
     initializeCode: function() {
       var
-        $code        = $(this),
+        $code        = $(this).show(),
         code         = $code.html(),
         existingCode = $code.hasClass('existing'),
         contentType  = $code.data('type')    || 'javascript',
@@ -354,7 +393,7 @@ semantic.ready = function() {
       editorSession.setTabSize(2);
       editorSession.setUseSoftTabs(true);
 
-      codeHeight = editor.session.getScreenLength() * (editor.renderer.lineHeight)  + editor.renderer.scrollBar.getWidth() + padding;
+      codeHeight = editorSession.getScreenLength() * (editor.renderer.lineHeight)  + editor.renderer.scrollBar.getWidth() + padding;
       $(this)
         .height(codeHeight + 'px')
         .wrap('<div class="ui instructive segment">')
@@ -541,6 +580,13 @@ semantic.ready = function() {
     }
   };
 
+  $(window)
+    .on('resize', function() {
+      clearTimeout(handler.timer);
+      handler.timer = setTimeout(handler.resizeCode, 100);
+    })
+  ;
+
   $downloadDropdown
     .dropdown({
       on         : 'click',
@@ -565,7 +611,9 @@ semantic.ready = function() {
   }
 
   handler.createIcon();
+
   $example
+    .one('mousemove', handler.generateCode)
     .find('i.code')
       .on('click', handler.createCode)
   ;