Commit e2764afa authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Initial support for phone/tablet portrait/landscape in @example. 

All words added after @example tag are converted into CSS classes.
The classes are detected in frontend and appropriate styling is applied.

The default is: phone landscape.
parent 502d57a1

lib/jsduck/doc_formatter.rb

+5 −2
Original line number Diff line number Diff line
@@ -90,8 +90,11 @@ module JsDuck 
        elsif s.check(@img_re)

          out += replace_img_tag(s.scan(@img_re))

        elsif s.check(@example_annotation_re)

          s.scan(@example_annotation_re)

          out += '<pre class="inline-example"><code>'

          # Match possible classnames following @example and add them

          # as CSS classes inside <pre> element.

          s.scan(@example_annotation_re) =~ @example_annotation_re

          css_classes = ($1 || "").strip

          out += "<pre class='inline-example #{css_classes}'><code>"

        elsif s.check(/[{<]/)

          out += s.scan(/[{<]/)

        else

spec/doc_formatter_spec.rb

+6 −4
Original line number Diff line number Diff line
@@ -293,7 +293,7 @@ describe JsDuck::DocFormatter do 


    shared_examples_for "example" do

      it "creates <pre> with inline-example class" do

        @html.should =~ /<pre class="inline-example">/m

        @html.should =~ /<pre class='inline-example *'>/m

      end



      it "removes the line with @example markup" do
@@ -319,19 +319,21 @@ describe JsDuck::DocFormatter do 
      it_should_behave_like "example"

    end



    describe "code block beginning with @example and title" do

    describe "code block beginning with @example and an extra CSS class" do

      before do

        @html = @formatter.format(<<-EOS.gsub(/^ *\|/, ""))

          |See example:

          |

          |    @example My little example

          |    @example landscape

          |

          |    if (condition) {

          |        doSomething();

          |    }

        EOS

      end

      it_should_behave_like "example"

      it "creates <pre> with inline-example and extra class" do

        @html.should =~ /<pre class='inline-example landscape'>/m

      end

    end



    describe "@example code block indented more than 4 spaces" do

template/app/controller/InlineExamples.js

+6 −1
Original line number Diff line number Diff line
@@ -73,13 +73,18 @@ Ext.define('Docs.controller.InlineExamples', { 
            // Grab code from <pre> element and replace it with new empty <div>

            // Strip tags and replace HTML entities with their values

            var code = Ext.String.htmlDecode(Ext.util.Format.stripTags(inlineEg.innerHTML));

            var options = {};

            Ext.Array.forEach(inlineEg.className.split(/ +/), function(cssClass) {

                options[cssClass] = true;

            });

            var div = document.createElement("div");

            inlineEg.parentNode.replaceChild(div, inlineEg);

            // Then render the example component inside the div

            var eg = Ext.create('Docs.view.examples.Inline', {

                height: 200,

                renderTo: div,

                value: code

                value: code,

                options: options

            });

        }, this);

    }

template/app/view/examples/Inline.js

+2 −1
Original line number Diff line number Diff line
@@ -58,7 +58,8 @@ Ext.define('Docs.view.examples.Inline', { 
                }

            }),

            this.preview = Ext.create('Docs.view.examples.InlinePreview', {

                cmpName: 'preview'

                cmpName: 'preview',

                options: this.options

            })

        ];

template/app/view/examples/InlinePreview.js

+10 −3
Original line number Diff line number Diff line
@@ -18,17 +18,24 @@ Ext.define('Docs.view.examples.InlinePreview', { 
    getHtml: function() {

        if (Docs.touchExamplesUi) {

            var tpl = new Ext.XTemplate(

                '<div class="touchExample phone landscape">',

                    '<iframe id="{id}" style="width: 480px; height: 320px; border: 0;"></iframe>',

                '<div class="touchExample {device} {orientation}">',

                    '<iframe id="{id}" style="border: 0;"></iframe>',

                '</div>'

            );

            return tpl.apply({

                id: this.getIframeId(),

                device: this.options.tablet ? "tablet" : "phone",

                orientation: this.options.portrait ? "portrait" : "landscape"

            });

        }

        else {

            var tpl = new Ext.XTemplate(

                '<iframe id="{id}" style="width: 100%; height: 100%; border: 0"></iframe>'

            );

            return tpl.apply({

                id: this.getIframeId()

            });

        }

        return tpl.apply({id: this.getIframeId()});

    },



    /**