Commit 987912c6 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Move class categories list creation to Ruby side. 

Like with guides, HTML is created once and added as hidden div
inside index.html.  The index page view component grabs the
HTML from there and displays.  This way this HTML-creation is
done only once -- although my manual measurements showed no
real difference in page load time, we are loading one file
less, which is good.
parent 12410382

lib/jsduck/app.rb

+2 −2
Original line number Diff line number Diff line
@@ -95,7 +95,7 @@ module JsDuck 
        @timer.time(:parsing) { @guides.parse_dir(@guides_dir) }

      end



      @categories = Categories.new()

      @categories = Categories.new(get_doc_formatter(relations))

      if @categories_path

        @timer.time(:parsing) do

          @categories.parse(@categories_path)
@@ -120,7 +120,6 @@ module JsDuck 
        @timer.time(:generating) { write_tree(@output_dir+"/output/tree.js", relations) }

        @timer.time(:generating) { write_search_data(@output_dir+"/output/searchData.js", relations) }

        @timer.time(:generating) { write_classes(@output_dir+"/output", relations) }

        @timer.time(:generating) { @categories.write(@output_dir+"/output/overviewData.js") }

        @timer.time(:generating) { @guides.write(@output_dir+"/guides") }

      end
@@ -278,6 +277,7 @@ module JsDuck 
      html.gsub!("{extjs_path}", @extjs_path)

      html.gsub!("{append_html}", @append_html)

      html.gsub!("{guides}", @guides.to_html)

      html.gsub!("{categories}", @categories.to_html)

      FileUtils.rm(dir+"/index.html")

      File.open(dir+"/index.html", 'w') {|f| f.write(html) }

    end

lib/jsduck/categories.rb

+38 −5
Original line number Diff line number Diff line
@@ -5,7 +5,8 @@ module JsDuck 


  # Reads in categories and outputs JSON file

  class Categories

    def initialize

    def initialize(doc_formatter)

      @doc_formatter = doc_formatter

      @overview = {"organisation" => [], "categories" => {}}

    end
@@ -36,10 +37,42 @@ module JsDuck 
      end

    end



    # Writes the categories as JavaScript file

    def write(filename)

      js = "Docs.overviewData = " + JSON.generate( @overview ) + ";"

      File.open(filename, 'w') {|f| f.write(js) }

    # Returns HTML listing of classes divided into categories

    def to_html

      html = @overview["organisation"].map do |group|

        [

          "<div class='section classes'>",

          "<h1>#{group['name']}</h1>",

          group['categories'].map do |cat|

            [

              "<div class='#{cat['align']}'>",

              cat['items'].map do |item|

                [

                  "<h3>#{item}</h3>",

                  "<div class='links'>",

                  class_links(item),

                  "</div>",

                ]

              end,

              "</div>",

            ]

          end,

          "<div style='clear:both'></div>",

          "</div>",

        ]

      end.flatten.join("\n")



      return <<-EOHTML

        <div id='categories-content' style='display:none'>

            #{html}

        </div>

      EOHTML

    end



    def class_links(category)

      return @overview["categories"][category]["classes"].map do |cls|

        @doc_formatter.link(cls, nil, cls)

      end

    end



  end

template/app/view/Viewport.js

+1 −2
Original line number Diff line number Diff line
@@ -192,8 +192,7 @@ Ext.define('Docs.view.Viewport', { 
                    items: [

                        {

                            autoScroll: true,

                            xtype: 'indexcontainer',

                            classData: Docs.overviewData

                            xtype: 'indexcontainer'

                        },

                        {

                            xtype: 'container',

template/app/view/index/Container.js

+7 −28
Original line number Diff line number Diff line
@@ -8,8 +8,6 @@ Ext.define('Docs.view.index.Container', { 
    cls: 'class-list',



    initComponent: function() {

        var data = this.classData;



        var tpl = new Ext.XTemplate(

            '<h1 class="top">{title}</h1>',

            '<tpl if="notice">',
@@ -34,41 +32,22 @@ Ext.define('Docs.view.index.Container', { 
                    '</div>',

                '</div>',

            '</tpl>',

            '<tpl for="organisation">',

                '<div class="section classes">',

                    '<h1>{name}</h1>',

                    '<tpl for="categories">',

                        '<div class="{align}">',

                        '<tpl for="items">',

                            '<h3>{.}</h3>',

                            '<div class="links">',

                                '{[this.renderClasses(values)]}',

                            '</div>',

                        '</tpl>',

                        '</div>',

                    '</tpl>',

                    '<div style="clear:both"></div>',

                '</div>',

            '</tpl>',

            {

                renderClasses: function(category) {

                    return Ext.Array.map(data.categories[category].classes, function(cls) {

                        return Ext.String.format('<a href="#/api/{0}" rel="{0}" class="docClass">{0}</a>', cls);

                    }).join("\n");

                }

            }

            '{categories}'

        );



        var notice = Ext.get("notice-text");

        var guides = Ext.get("guides-content");

        this.html = tpl.apply(Ext.apply({

        var categories = Ext.get("categories-content");

        this.html = tpl.apply({

            // Use the same title as in <title>

            title: Ext.query("title")[0].innerHTML,

            // If page contains div with notice-text extract the text and show it as notice

            notice: notice && notice.dom.innerHTML,

            // Extract guides

            guides: guides && guides.dom.innerHTML

        }, data));

            guides: guides && guides.dom.innerHTML,

            // Extract categories

            categories: categories && categories.dom.innerHTML

        });



        this.callParent(arguments);

    }

template/index.html

+1 −1
Original line number Diff line number Diff line
@@ -27,7 +27,6 @@ 


  <script type="text/javascript" src="output/tree.js"></script>

  <script type="text/javascript" src="output/searchData.js"></script>

  <script type="text/javascript" src="output/overviewData.js"></script>



</head>

<body id="ext-body" class="iScroll">
@@ -37,6 +36,7 @@ 
        <iframe id="x-history-frame"></iframe>

    </form>

    {guides}

    {categories}

    <div id="footer-content" style="display: none">{footer}</div>

    {append_html}

</body>