Remove dependency on ACE editor, redo all code samples, redo code colors

server/files/javascript/home.js

@@ -67,9 +67,9 @@ semantic.home.ready = function() {
     })
   ;
 
-  window.Transifex.live.onTranslatePage(function(name){
-    name = $('.language.dropdown .item[data-value=' + name + ']').text();
-    $('.language.dropdown > .text').html(name);
+  window.Transifex.live.onTranslatePage(function(countryCode){
+    var fullName = $('.language.dropdown .item[data-value=' + countryCode + ']').eq(0).text();
+    $('.language.dropdown > .text').html(fullName);
   });
 
 

server/files/javascript/semantic.js

@@ -405,16 +405,6 @@ semantic.ready = function() {
             urlData  : urlData,
             onSuccess: function(content) {
               less.modifyVars( handler.less.parseFile(content) );
-              /*if($('.less.column').size() > 0) {
-                var $code = $('<div />')
-                  .addClass('code')
-                  .attr('data-type', 'less')
-                  .attr('data-title', 'button.variables')
-                  .html(content)
-                ;
-                $('.less.column').html($code);
-                $.proxy(handler.initializeCode, $code)();
-              }*/
               $themeDropdown
                 .api({
                   on       : 'now',
@@ -673,29 +663,8 @@ semantic.ready = function() {
       ;
     },
 
-    resizeCode: function() {
-      $('.ace_editor')
-        .each(function() {
-          var
-            $code = $(this),
-            padding     = 50,
-            editor,
-            editorSession,
-            codeHeight
-          ;
-          $code.css('height', 'auto');
-          editor        = ace.edit($code[0]);
-          editorSession = editor.getSession();
-
-          codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;
-          $code.css('height', codeHeight);
-          editor.resize();
-        })
-      ;
-    },
-
     makeCode: function() {
-      if(window.ace !== undefined) {
+      if(window.hljs !== undefined) {
         $code
           .filter(':visible')
           .each(handler.initializeCode)
@@ -704,6 +673,9 @@ semantic.ready = function() {
           .each(handler.createAnnotation)
         ;
       }
+      else {
+        console.log('Syntax highlighting not found');
+      }
     },
 
 
@@ -730,23 +702,24 @@ semantic.ready = function() {
         name = (evaluatedCode)
           ? 'existing'
           : 'instructive',
+        formattedCode = code,
         whiteSpace,
         $label,
-        editor,
-        editorSession,
         codeHeight
       ;
-
-
-      // trim whitespace
-      whiteSpace = new RegExp('\\n\\s{' + indent + '}', 'g');
-      code = $.trim(code).replace(whiteSpace, '\n');
-
-      if(contentType == 'html') {
-        $code.text(code);
-      }
-      else {
-        $code.html(code);
+      var entityMap = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': '&quot;',
+        "'": '&#39;',
+        "/": '&#x2F;'
+      };
+
+      function escapeHTML(string) {
+        return String(string).replace(/[&<>"'\/]/g, function (s) {
+          return entityMap[s];
+        });
       }
 
       // evaluate if specified
@@ -754,39 +727,35 @@ semantic.ready = function() {
         eval(code);
       }
 
-      // initialize
-      editor        = ace.edit($code[0]);
-      editorSession = editor.getSession();
-
-      //editor.setTheme('ace/theme/tomorrow');
-      editor.setTheme('ace/theme/github');
-      editor.setShowPrintMargin(false);
-      editor.setReadOnly(true);
-      editor.renderer.setShowGutter(false);
-      editor.setHighlightActiveLine(false);
-      editorSession.setMode('ace/mode/'+ contentType);
-      editorSession.setUseWrapMode(true);
-      editorSession.setTabSize(2);
-      editorSession.setUseSoftTabs(true);
-      codeHeight = editorSession.getScreenLength() * editor.renderer.lineHeight + padding;
-      $(this)
-        .height(codeHeight + 'px')
-        .wrap('<div class="ui ' + name + ' segment">')
+      // trim whitespace & escape
+      whiteSpace = new RegExp('\\n\\s{' + indent + '}', 'g');
+      formattedCode = $.trim(code).replace(whiteSpace, '\n');
+      formattedCode = escapeHTML(formattedCode);
+
+      $code.html(formattedCode);
+
+      // wrap
+      $code = $code
+        .wrap('<div class="ui ' + name + ' segment"></div>')
+        .wrap('<pre></pre>')
       ;
 
+      // color code
+      window.hljs.highlightBlock($code[0]);
+
       // add label
       if(title) {
         $('<div>')
           .addClass('ui attached top label')
           .html('<span class="title">' + title + '</span>' + '<em>' + (displayType[contentType] || contentType) + '</em>')
-          .prependTo( $(this).parent() )
+          .prependTo( $(this).closest('.segment') )
         ;
       }
       if(label) {
         $('<div>')
           .addClass('ui pointing below label')
           .html(displayType[contentType] || contentType)
-          .insertBefore ( $(this).parent() )
+          .insertBefore ( $(this).closest('.segment') )
         ;
       }
       // add run code button
@@ -797,16 +766,15 @@ semantic.ready = function() {
           .on('click', function() {
             eval(code);
           })
-          .insertBefore ( $(this).parent() )
+          .insertBefore ( $(this).closest('.segment') )
         ;
       }
       // add preview if specified
       if(preview) {
         $(code)
-          .insertAfter( $(this).parent() )
+          .insertAfter( $(this).closest('.segment') )
         ;
       }
-      editor.resize();
 
       $code.removeClass('hidden');
 
@@ -883,6 +851,14 @@ semantic.ready = function() {
     })
   ;
 
+  window.hljs.configure({
+    languages: [
+      'xml',
+      'css',
+      'javascript'
+    ]
+  });
+
   $languageModal
     .modal()
   ;
@@ -909,13 +885,6 @@ semantic.ready = function() {
     .each(handler.createCode)
   ;
 
-  $(window)
-    .on('resize', function() {
-      clearTimeout(handler.timer);
-      handler.timer = setTimeout(handler.resizeCode, 500);
-    })
-  ;
-
   $downloadDropdown
     .dropdown({
       on         : 'click',

server/files/stylesheets/semantic.css

@@ -49,6 +49,18 @@ h5 {
   font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif/*rtl:prepend:"Droid Arabic Kufi","Droid Sans", */;
 }
 
+pre {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+pre {
+  background-color: #FFFFFF;
+  text-align: left;
+}
+
 p:first-child {
   margin-top: 0em;
 }
@@ -82,9 +94,6 @@ h1 {
 #example .example .anchor + p {
   margin: 0px 0px 1em;
 }
-pre {
-  background-color: #F0F0F0;
-}
 /*rtl:ignore*/
 pre.console {
   background-color: transparent;
@@ -538,6 +547,18 @@ body#example.hide {
   width: 100px;
 }
 
+
+#example .segment pre {
+  margin: 0em;
+  padding: 0em;
+}
+#example .segment pre .code {
+  margin: 0em;
+  padding: 0em;
+  max-height: 610px;
+  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+}
+
 #example table .instructive.segment {
   background-color: transparent;
   border: 0px;
@@ -545,13 +566,6 @@ body#example.hide {
   padding: 0em;
   margin: -0.4em -0.7em;
 }
-#example table .instructive.segment .code {
-  margin: 0em;
-}
-#example table .instructive.segment div.code .ace_identifier,
-#example table .instructive.segment div.code .ace_line {
-  color: #555555;
-}
 
 #example .ui.label + .instructive.segment {
   margin-top: 0em;
@@ -1009,9 +1023,6 @@ body.progress.animated .ui.progress .bar {
 #example .example > p {
   color: #555555;
 }
-#example .example div.code[data-demo] {
-  color: transparent;
-}
 
 /*--------------
     List Page
@@ -1051,139 +1062,192 @@ body.progress.animated .ui.progress .bar {
 }
 
 
-/*----------------
-    Code Colors
------------------*/
+/*******************************
+         Code Samples
+*******************************/
 
-/* example code reskin */
-#example div.code.hide {
-  display: none;
-}
-/*rtl:ignore*/
-#example div.code {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  direction:ltr;
-}
-#example div.code .ace_gutter {
-  background-color: #FAFAFA;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  color: #999999;
-}
-#example div.code .ace_gutter-cell {
-  padding-right: 20px;
-  padding-left: 10px;
-}
-#example div.code .ace_bracket {
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-#example div.code .ace_indent-guide {
-  position: relative;
-  background: none;
-}
-#example div.code .ace_gutter,
-#example div.code .ace_scroller {
-  background-color: transparent;
-  overflow: visible;
-  margin: 14px 10px;
-}
-#example div.code .ace_scrollbar {
-  overflow: hidden;
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0em;
+  color: #666;
   background-color: transparent;
+  -webkit-text-size-adjust: none;
 }
-#example div.code {
-  margin: -1em;
-  font-size: 14px;
-  padding: 5px 0px;
-  background-color: transparent;
+
+/*--------------
+    Hover Only
+---------------*/
+
+.hljs,
+.hljs span {
+  -moz-transition: 0.5s color ease;
+  -webkit-transition: 0.5s color ease;
+  -ms-transition: 0.5s color ease;
+  transition: 0.5s color ease;
 }
-#example div.code .ace_line,
-#example div.code .ace_line span {
-  -webkit-transition:
-    color 1s ease-out
-  ;
-  -moz-transition:
-    color 1s ease-out
-  ;
-  -o-transition:
-    color 1s ease-out
-  ;
-  -ms-transition:
-    color 1s ease-out
-  ;
-  transition:
-    color 1s ease-out
-  ;
+.hljs {
+  color: #333333;
 }
-#example div.code .ace_line {
 
-  color: #555555;
+/* Class Name */
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-dartdoc,
+.tex .hljs-formula {
+  color: #009991;
 }
-#example div.code .ace_tag {
-  color: #DCBCD3;
+.code:hover .hljs-string,
+.code:hover .hljs-tag .hljs-value,
+.code:hover .hljs-phpdoc,
+.code:hover .hljs-dartdoc,
+.code:hover .tex .hljs-formula {
+  color: #009991;
 }
-#example div.code .ace_attribute-name {
-  color: #F4C5C5;
+
+/* Comment */
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #AAAAAA;
+  font-style: italic;
 }
-#example div.code .ace_string {
-  color: #00A59D;
+
+
+/* Properties */
+.hljs-tag,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #999999;
+  font-weight: normal;
 }
-#example div.code .ace_cursor {
-  border-left: none;
+
+.code:hover .hljs-tag,
+.code:hover .hljs-rules .hljs-property,
+.code:hover .django .hljs-tag .hljs-keyword {
+  color: #892A6F;
+  font-weight: normal;
 }
-#example div.code .ace_paren {
-  color: #CCCCCC;
+
+/* HTML Tag */
+.hljs-tag .hljs-title {
+  color: #884E75;
+  font-weight: normal;
 }
-#example div.code .ace_keyword {
-  color: #CCCCCC;
+.code:hover .hljs-tag .hljs-title {
+  color: #892A6F;
 }
-#example div.code .ace_identifier {
-  color: #CCCCCC;
+
+/* Attribute */
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: #8E6E6E;
+  transition: color 0.3s;
 }
-#example div.code .ace_punctuation {
-  color: #CCCCCC;
+.code:hover .hljs-attribute,
+.code:hover .hljs-variable,
+.code:hover .lisp .hljs-body {
+  color: #934E4E;
 }
-#example div.code .ace_active_line {
-  background-color: #FBFBE5;
+
+/* CSS ID */
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #009FDA;
+  font-weight: bold;
 }
 
-/* Hovered Style */
-#example div.code:hover .ace_line {
-  color: #555555;
+/* CSS Attribute */
+.hljs-rule .hljs-attribute {
+  color: #892A6F;
 }
-#example div.code:hover .ace_tag {
+.code:hover .hljs-rule .hljs-attribute {
   color: #892A6F;
 }
-#example div.code:hover .ace_attribute-name {
-  color: #934E4E;
+
+/* CSS Value */
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #666666;
 }
-#example div.code:hover .ace_content {
+
+.code:hover .hljs-number,
+.code:hover .hljs-hexcolor,
+.code:hover .ruby .hljs-constant {
+  color: #333333;
 }
-#example div.code:hover .ace_string {
-  color: #00A59D;
+
+
+
+/*--------------
+      Normal
+---------------*/
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold;
 }
-#example div.code:hover .ace_cursor {/*
-  border-left: 1px solid #AAAAAA;*/
+
+.javascript .hljs-title,
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
 }
-#example div.code:hover .ace_paren {
-  color: #555555;
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold;
 }
-#example div.code:hover .ace_keyword {
-  color: #555555;
+
+
+.hljs-regexp {
+  color: #009926;
 }
-#example div.code:hover .ace_identifier {
-  color: #555555;
+
+.hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold;
 }
-#example div.code:hover .ace_scrollbar {
-  overflow: hidden !important;
+
+.hljs-deletion {
+  background: #fdd;
 }
-#example div.code:hover .ace_punctuation {
-  color: #555555;
+
+.hljs-addition {
+  background: #dfd;
 }
-#example div.code:hover .ace_active_line {
-  background-color: #FBFBE5;
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
 }
 
 

server/layouts/default.html.eco

@@ -84,7 +84,6 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/definitions/css/semantic.min.css">
   <% end %>
 
-  <!-- <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/site.less" /> -->
   <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,700italic' rel='stylesheet' type='text/css'>
 
   <link rel="stylesheet" type="text/css" href="/stylesheets/doc-icon.css">
@@ -117,9 +116,10 @@
   }());
   </script>
   <% end %>
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
   <script src="/javascript/library/history.js"></script>
   <script src="/javascript/library/easing.js"></script>
-  <script src="/javascript/library/ace/ace.js"></script>
   <script src="/javascript/library/tablesort.js"></script>
   <script src="/javascript/library/typing.js"></script>
 

src/definitions/modules/dimmer.js

@@ -90,7 +90,7 @@ $.fn.dimmer = function(parameters) {
             module.set.pageDimmer();
           }
 
-          if(settings.closable) {
+          if(settings.on == 'click' && settings.closable) {
             module.verbose('Adding dimmer close event', $dimmer);
             $dimmer
               .on(clickEvent + eventNamespace, module.event.click)

src/definitions/modules/popup.js

@@ -213,7 +213,7 @@ $.fn.popup = function(parameters) {
             module.refresh();
           }
           else {
-            module.error(error.content, element);
+            module.debug('No content specified skipping display', element);
           }
         },
 
@@ -907,7 +907,6 @@ $.fn.popup.settings = {
   maxSearchDepth : 10,
 
   error: {
-    content         : 'Your popup has no content specified',
     invalidPosition : 'The position you specified is not a valid position',
     method          : 'The method you called is not defined.',
     recursion       : 'Popup attempted to reposition element to fit, but could not find an adequate position.'