') .addClass('ui secondary vertical following fluid accordion menu') .html(html) ; $sticky = $('

') .addClass('ui sticky hidden transition') .html($followMenu) ; $rail = $('

') .addClass('ui close right rail') .html($sticky) .prependTo($container) ; $followMenu .accordion({ exclusive: false, onChange: function() { $sticky.sticky('refresh'); } }) .find('.menu a[href], .title[href]') .on('click', handler.scrollTo) ; $sticky .transition('fade', function() { $sticky.sticky({ context: $container, offset: 50 }); }) ; }, scrollTo: function(event) { var id = $(this).attr('href').replace('#', ''), $element = $('#'+id), position = $element.offset().top ; $element .addClass('active') ; $('html, body') .animate({ scrollTop: position }, 500) ; location.hash = '#' + id; event.stopImmediatePropagation(); event.preventDefault(); return false; }, less: { parseFile: function(content) { var variables = {}, lines = content.match(/^(@[\s|\S]+?;)/gm), name, value ; if(lines) { $.each(lines, function(index, line) { // clear whitespace line = $.trim(line); // match variables only if(line[0] == '@') { name = line.match(/^@(.+):/); value = line.match(/:\s*([\s|\S]+?;)/); if( ($.isArray(name) && name.length >= 2) && ($.isArray(value) && value.length >= 2) ) { name = name[1]; value = value[1]; variables[name] = value; } } }); } return variables; }, changeTheme: function(theme) { var $themeDropdown = $(this), variableURL = '/build/less/themes/packages/{$theme}/{$type}s/{$element}.variables', overrideURL = '/build/less/themes/packages/{$theme}/{$type}s/{$element}.overrides', urlData = { theme : typeof(theme === 'string') ? theme.toLowerCase() : theme, type : $themeDropdown.data('type'), element : $themeDropdown.data('element') } ; $themeDropdown .api({ on : 'now', url : variableURL, dataType : 'text', urlData : urlData, onSuccess: function(content) { window.less.modifyVars( handler.less.parseFile(content) ); $themeDropdown .api({ on : 'now', url : overrideURL, dataType : 'text', urlData : urlData, onSuccess: function(content) { if( $('style.override').size() > 0 ) { $('style.override').remove(); } console.log(content); $('') .addClass('override') .appendTo('body') ; $('.sticky').sticky('refresh'); } }) ; } }) ; } }, create: { examples: function(json) { var types = json['Types'], text = json['Text'], states = json['States'], variations = json['Variations'], $element, html ; $.each(types, function(name, type){ html += '

' + name + '

') } else if(image) { $(this).replaceWith(''); } }) ; // remove wireframe images $this.find('.wireframe').remove(); if($this.not('br').not('.wireframe')) { // allow inline styles only with this one class if($this.is('.my-container')) { code += $this.get(0).outerHTML + "\n"; } else { code += $this.removeAttr('style').get(0).outerHTML + "\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'), $ignoredContent = $('.ui.popup, i.code:last-child, .anchor, .code, .existing.segment, .instructive, .language.label, .annotation, br, .ignore, .ignored'), $demo = $example.children().not($header).not($ignoredContent), code = $example.data('code') || $.proxy(handler.generateCode, this)() ; if( $code.hasClass('existing') ) { $annotation.show(); $code.removeClass('existing'); $.proxy(handler.initializeCode, $code)(); } if($annotation.size() === 0) { $annotation = $('

') .addClass('annotation') .appendTo($example) ; } if( $example.find('.instructive').size() === 0) { $code = $('

') .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(); $annotation.fadeIn(500); } else { $annotation.hide(); if($demo.size() > 1) { $demo.show(); } else { $demo.fadeIn(500); } } if(type === undefined) { $sectionHeaders.visibility('refresh'); $sectionExample.visibility('refresh'); $footer.visibility('refresh'); } }, createAnnotation: function() { if(!$(this).data('type')) { $(this).data('type', 'html'); } $(this) .wrap('

') .parent() .hide() ; }, makeCode: function() { if(window.hljs !== undefined) { $code .filter(':visible') .each(handler.initializeCode) ; $existingCode .each(handler.createAnnotation) ; } else { console.log('Syntax highlighting not found'); } }, initializeCode: function() { var $code = $(this).show(), $codeTag = $(''), code = $code.html(), existingCode = $code.hasClass('existing'), evaluatedCode = $code.hasClass('evaluated'), contentType = $code.data('type') || 'javascript', title = $code.data('title') || false, demo = $code.data('demo') || false, preview = $code.data('preview') || false, label = $code.data('label') || false, displayType = { html : 'HTML', javascript : 'Javascript', css : 'CSS', text : 'Command Line', sh : 'Command Line' }, indent = handler.getIndent(code) || 2, padding = 20, name = (evaluatedCode) ? 'existing' : 'instructive', formattedCode = code, whiteSpace, $label, codeHeight ; var entityMap = { "&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/' }; function escapeHTML(string) { return String(string).replace(/[&<>"'\/]/g, function (s) { return entityMap[s]; }); } // evaluate if specified if(evaluatedCode) { eval(code); } // trim whitespace & escape whiteSpace = new RegExp('\\n\\s{' + indent + '}', 'g'); formattedCode = $.trim(code).replace(whiteSpace, '\n'); formattedCode = escapeHTML(formattedCode); // replace with


      $codeTag
        .addClass($code.attr('class'))
        .html(formattedCode)
      ;

      $code
        .replaceWith($codeTag)
      ;
      $code = $codeTag;

      $code
        .html(formattedCode)
      ;

      // wrap
      $code = $code
        .wrap('')
        .wrap('')
      ;

      // color code
      window.hljs.highlightBlock($code[0]);

      // add label
      if(title) {
        $('')
          .addClass('ui attached top label')
          .html('' + title + '' + '' + (displayType[contentType] || contentType) + '')
          .prependTo( $code.closest('.segment') )
        ;
      }
      if(label) {
        $('')
          .addClass('ui pointing below language label')
          .html(displayType[contentType] || contentType)
          .insertBefore ( $code.closest('.segment') )
        ;
      }
      // add run code button
      if(demo) {
        $('')
          .addClass('ui pointing below label')
          .html('Run Code')
          .on('click', function() {
            eval(code);
          })
          .insertBefore ( $code.closest('.segment') )
        ;
      }
      // add preview if specified
      if(preview) {
        $(code)
          .insertAfter( $code.closest('.segment') )
        ;
      }

      $code.removeClass('hidden');

    },

    swapStyle: function() {
      var
        theme = $(this).data('theme')
      ;
      $(this)
        .addClass('active')
        .siblings()
          .removeClass('active')
      ;
      $('head link.ui')
        .each(function() {
          var
            href         = $(this).attr('href'),
            subDirectory = href.split('/')[3],
            newLink      = href.replace(subDirectory, theme)
          ;
          $(this)
            .attr('href', newLink)
          ;
        })
      ;
    }
  };


  handler.createAnchors();

  if( $pageTabs.size() > 0 ) {
    $pageTabs
      .tab({
        context      : '.main.container',
        childrenOnly : true,
        history      : true,
        onTabInit    : function() {
          handler.makeCode();

          $container = ($('.fixed.column').size() > 0 )
            ? $(this).find('.examples')
            : $(this)
          ;
          $sectionHeaders = $container.children('h2');
          $sectionExample = $container.find('.example');
          $exampleHeaders = $sectionExample.children('h4');
          // create code
          handler.tryCreateMenu();
          $(window).on('resize.menu', function() {
            handler.tryCreateMenu();
          });
        },
        onTabLoad : function() {
          $sticky.filter(':visible').sticky('refresh');
        }
      })
    ;
  }
  else {
    handler.makeCode();
    handler.tryCreateMenu();
    $(window).on('resize.menu', function() {
      handler.tryCreateMenu();
    });
  }


  $sticky
    .sticky({
      context : '.main.container',
      pushing : true
    })
  ;

  window.hljs.configure({
    languages: [
      'xml',
      'css',
      'javascript'
    ]
  });

  $menu
    .sidebar({
      transition       : 'uncover',
      mobileTransition : 'uncover'
    })
    .sidebar('attach events', '.launch.button, .view-ui, .launch.item')
  ;

  handler.createIcon();
  $example
    .each(function() {
      $.proxy(handler.generateCode, this)();
    })
    .find('i.code')
      .on('click', handler.createCode)
  ;

  $shownExample
    .each(handler.createCode)
  ;

  $downloadDropdown
    .dropdown({
      on         : 'click',
      transition : 'scale'
    })
  ;

  $themeDropdown
    .dropdown({
      action: 'select',
      onChange: handler.less.changeTheme
    })
  ;

  if($.fn.tablesort !== undefined && $sortTable.size() > 0) {
    $sortTable
      .tablesort()
    ;
  }

  $helpPopup
    .popup({
      position: 'bottom right'
    })
  ;

  $swap
    .on('click', handler.swapStyle)
  ;

  $overview
    .dropdown({
      action: 'select',
      onChange: handler.changeMode
    })
  ;

  $menuPopup
    .popup({
      position  : 'bottom center',
      className : {
        popup: 'ui popup'
      }
    })
  ;

  $pageDropdown
    .dropdown({
      on       : 'hover',
      action   : 'nothing',
      allowTab : false
    })
  ;
  $languageDropdown
    .popup()
    .dropdown({
      on       : 'click',
      onShow: function() {
        $(this).popup('hide');
      },
      onChange: handler.translatePage
    })
  ;


  window.Transifex.live.onTranslatePage(handler.showLanguageModal);

};


// attach ready event
$(document)
  .ready(semantic.ready)
;