promote_buttons.html

{% extends "landing/base_promote.html" %}

{% block body_attributes %}id="promote-buttons"{% endblock %}

{% block title %}{{ page_title(_('Promote MDN')) }}{% endblock %}

{% set styles = ('promote',) %}

{% block content %}

<section id="content">
<div class="wrap">

  <header id="page-head">
    <div class="wrap">

      <h1>{{ _('Promote MDN') }}</h1>

      <h2>{{ _('Spread some developer love.') }}</h2>
      {% trans %}
      <ol>
          <li><strong>Get Buttons:</strong> Use our simple form below to create a custom button and source code to promote MDN on your website or blog.</li>
          <li><strong>Post Buttons:</strong> Copy the source code and paste it anywhere on your website or blog to help people click through to MDN.</li>
          <li><strong>Feel Good:</strong> Take pride in knowing you're making developers lives just a little bit better by sharing MDN with the world.</li>
      </ol>
      {% endtrans %}
    </div>
  </header>

  <section id="content-main" class="full" role="main">

        <form id="button-builder">

            <div id="button-preview" class="boxed">
                <h3>{{_('Preview')}}</h3>
                <div><img id="button-image" src="" width="120" height="240" alt="" /></div>
            </div>

            <fieldset id="step-design" class="step">
                <h3>{{_('Choose a button style')}}</h3>
                <ul>
                    <li>
                        <label for="button-design-betterdocs">
                            <input type="radio" name="button-design" value="Better Docs" id="button-design-betterdocs">
                            <img src="{{ static('img/promote/betterdocs_foo.png') }}" alt="{{_('Better Docs')}}" />
                        </label>
                    </li>
                    <li>
                        <label for="button-design-devpowered">
                            <input type="radio" name="button-design" value="Developer Powered" id="button-design-devpowered">
                            <img src="{{ static('img/promote/devpowered_foo.png') }}" alt="{{_('Developer Powered')}}" />
                        </label>
                    </li>
                    <li>
                        <label for="button-design-bydev">
                            <input type="radio" name="button-design" value="For Developer, By Developers" id="button-design-bydev">
                            <img src="{{ static('img/promote/bydev_foo.png') }}" alt="{{_('For Developers, By Developers')}}" />
                        </label>
                    </li>
                    <li>
                        <label for="button-design-devtoolbox">
                            <input type="radio" name="button-design" value="Web Developer Toolbox" id="button-design-devtoolbox">
                            <img src="{{ static('img/promote/devtoolbox_foo.png') }}" alt="{{_('Web Developer Toolbox')}}" />
                        </label>
                    </li>
                </ul>
            </fieldset>

            <fieldset id="step-color" class="step">
                <h3>{{_('Choose a color')}}</h3>
                <ul>
                    <li class="gray">
                        <label for="button-color-gray">
                            <input id="button-color-gray" name="button-color" type="radio" value="Gray" />
                            {{_('Gray')}}
                        </label>
                    </li>
                    <li class="orange">
                        <label for="button-color-orange">
                            <input id="button-color-orange" name="button-color" type="radio" value="Orange" />
                            {{_('Orange')}}
                        </label>
                    </li>
                    <li class="red">
                        <label for="button-color-red">
                            <input id="button-color-red" name="button-color" type="radio" value="Red" />
                            {{_('Red')}}
                        </label>
                    </li>
                </ul>
            </fieldset>

            <fieldset id="step-topic" class="step">
                <h3>{{_('Replace &lt;FOO&gt; with')}}</h3>
                <ul>
                    <li>
                        <label for="button-topic-css">
                            <input id="button-topic-css" name="button-topic" type="radio" value="CSS" />
                            {{_('CSS')}}
                        </label>
                    </li>
                    <li>
                        <label for="button-topic-html">
                            <input id="button-topic-html" name="button-topic" type="radio" value="HTML" />
                            {{_('HTML')}}
                        </label>
                    </li>
                    <li>
                        <label for="button-topic-js">
                            <input id="button-topic-js" name="button-topic" type="radio" value="JavaScript" />
                            {{_('JavaScript')}}
                        </label>
                    </li>
                    <li>
                        <label for="button-topic-web">
                            <input id="button-topic-web" name="button-topic" type="radio" value="Web" />
                            {{_('Web')}}
                       </label>
                    </li>
                </ul>
            </fieldset>

            <section id="step-code" class="step">
                <h3>{{_('Add your custom button to your website')}}</h3>
                <h4>{{_('Your source code:')}}</h4>
                    <textarea id="button-code" cols="40" rows="7"></textarea>
                <h4>{{_('Your button will take people to:')}}</h4>
                    <a id="button-url" href="#">...</a>
            </section>

        </form>
    </div>

  </section><!-- /#content-main -->

</div>
</section>

{% endblock %}

{% block js %}
<script>
// <![CDATA[

function rowsToObjects (col_names, rows) {
    var items = [];
    for (var i=0,row; row=rows[i]; i++) {
        var item = {};
        for (var j=0,col_name; col_name=col_names[j]; j++) {
            item[col_name] = row[j];
        }
        items.push(item);
    }
    return items;
}

// TODO: This was exported and munged from a Google Docs spreadsheet. It could
// probably be reduced / refactored a bit.
var buttons = rowsToObjects(
    [ "design","topic","color","url","wt","id","tracked_url","alt_text" ],
    [
[ "Better Docs","CSS","Gray","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn1","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn1","{{_("Better CSS docs for a better Web on MDN")}}" ],
[ "Better Docs","HTML","Gray","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn2","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn2","{{_("Better HTML docs for a better Web on MDN")}}" ],
[ "Better Docs","JavaScript","Gray","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn3","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn3","{{_("Better JavaScript docs for a better Web on MDN")}}" ],
[ "Better Docs","Web","Gray","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn4","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn4","{{_("Better Web docs for a better Web on MDN")}}" ],
[ "Better Docs","CSS","Orange","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn5","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn5","{{_("Better CSS docs for a better Web on MDN")}}" ],
[ "Better Docs","HTML","Orange","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn6","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn6","{{_("Better HTML docs for a better Web on MDN")}}" ],
[ "Better Docs","JavaScript","Orange","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn7","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn7","{{_("Better JavaScript docs for a better Web on MDN")}}" ],
[ "Better Docs","Web","Orange","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn8","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn8","{{_("Better Web docs for a better Web on MDN")}}" ],
[ "Better Docs","CSS","Red","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn9","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn9","{{_("Better CSS docs for a better Web on MDN")}}" ],
[ "Better Docs","HTML","Red","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn10","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn10","{{_("Better HTML docs for a better Web on MDN")}}" ],
[ "Better Docs","JavaScript","Red","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn11","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn11","{{_("Better JavaScript docs for a better Web on MDN")}}" ],
[ "Better Docs","Web","Red","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn12","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn12","{{_("Better Web docs for a better Web on MDN")}}" ],
[ "Developer Powered","CSS","Gray","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn13","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn13","{{_("MDN is Developer Powered for CSS docs and more.")}}" ],
[ "Developer Powered","HTML","Gray","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn14","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn14","{{_("MDN is Developer Powered for HTML docs and more.")}}" ],
[ "Developer Powered","JavaScript","Gray","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn15","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn15","{{_("MDN is Developer Powered for JavaScript docs and more.")}}" ],
[ "Developer Powered","Web","Gray","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn16","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn16","{{_("MDN is Developer Powered for Web docs and more.")}}" ],
[ "Developer Powered","CSS","Orange","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn17","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn17","{{_("MDN is Developer Powered for CSS docs and more.")}}" ],
[ "Developer Powered","HTML","Orange","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn18","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn18","{{_("MDN is Developer Powered for HTML docs and more.")}}" ],
[ "Developer Powered","JavaScript","Orange","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn19","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn19","{{_("MDN is Developer Powered for JavaScript docs and more.")}}" ],
[ "Developer Powered","Web","Orange","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn20","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn20","{{_("MDN is Developer Powered for Web docs and more.")}}" ],
[ "Developer Powered","CSS","Red","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn21","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn21","{{_("MDN is Developer Powered for CSS docs and more.")}}" ],
[ "Developer Powered","HTML","Red","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn22","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn22","{{_("MDN is Developer Powered for HTML docs and more.")}}" ],
[ "Developer Powered","JavaScript","Red","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn23","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn23","{{_("MDN is Developer Powered for JavaScript docs and more.")}}" ],
[ "Developer Powered","Web","Red","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn24","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn24","{{_("MDN is Developer Powered for Web docs and more.")}}" ],
[ "For Developer, By Developers","CSS","Gray","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn25","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn25","{{_("CSS docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","HTML","Gray","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn26","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn26","{{_("HTML docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","JavaScript","Gray","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn27","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn27","{{_("JavaScript docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","Web","Gray","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn28","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn28","{{_("Web docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","CSS","Orange","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn29","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn29","{{_("CSS docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","HTML","Orange","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn30","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn30","{{_("HTML docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","JavaScript","Orange","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn31","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn31","{{_("JavaScript docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","Web","Orange","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn32","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn32","{{_("Web docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","CSS","Red","https:\/\/developer.mozilla.org\/docs\/css","\/?WT.mc_id=","mdn33","https:\/\/developer.mozilla.org\/docs\/css\/?WT.mc_id=mdn33","{{_("CSS docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","HTML","Red","https:\/\/developer.mozilla.org\/docs\/html","\/?WT.mc_id=","mdn34","https:\/\/developer.mozilla.org\/docs\/html\/?WT.mc_id=mdn34","{{_("HTML docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","JavaScript","Red","https:\/\/developer.mozilla.org\/docs\/javascript","\/?WT.mc_id=","mdn35","https:\/\/developer.mozilla.org\/docs\/javascript\/?WT.mc_id=mdn35","{{_("JavaScript docs by developers, for developers on MDN")}}" ],
[ "For Developer, By Developers","Web","Red","https:\/\/developer.mozilla.org\/docs","\/?WT.mc_id=","mdn36","https:\/\/developer.mozilla.org\/docs\/?WT.mc_id=mdn36","{{_("Web docs by developers, for developers on MDN")}}" ],
[ "Web Developer Toolbox","---","Gray","https:\/\/developer.mozilla.org\/web","\/?WT.mc_id=","mdn37","https:\/\/developer.mozilla.org\/web\/?WT.mc_id=mdn37","{{_("MDN is your Web Developer Toolbox for docs and more on HTML, CSS, JavaScript and other Web standards and open technologies.")}}" ],
[ "Web Developer Toolbox","---","Orange","https:\/\/developer.mozilla.org\/web","\/?WT.mc_id=","mdn38","https:\/\/developer.mozilla.org\/web\/?WT.mc_id=mdn38","{{_("MDN is your Web Developer Toolbox for docs and more on HTML, CSS, JavaScript and other Web standards and open technologies.")}}" ],
[ "Web Developer Toolbox","---","Red","https:\/\/developer.mozilla.org\/web","\/?WT.mc_id=","mdn39","https:\/\/developer.mozilla.org\/web\/?WT.mc_id=mdn39","{{_("MDN is your Web Developer Toolbox for docs and more on HTML, CSS, JavaScript and other Web standards and open technologies.")}}" ]
    ]
);

(function($) {

    // Reveal an element by selector, scroll to it if it wasn't visible before.
    function doReveal(sel) {
        var was_visible = $(sel).is(':visible');
        $(sel).fadeIn('fast', function() {
            if (!was_visible) {
                $("html,body").animate({scrollTop: $(sel).offset().top}, 500);
            }
        });
    }

    function updateButtonCode (ev) {

        // Build a search spec from current selection state.
        var spec = {
            design: $('input:radio[name=button-design]:checked').val(),
            color:  $('input:radio[name=button-color]:checked').val(),
            topic:  $('input:radio[name=button-topic]:checked').val()
        };

        // Reveal / hide builder steps only if preceding conditions are met.
        if (spec['design']) {
            doReveal('#step-color');
        } else {
            $('#step-color').hide();
        }

        if (spec['design'] && 'Web Developer Toolbox' != spec['design'] && spec['color']) {
            doReveal('#step-topic');
        } else {
            $('#step-topic').hide();
        }

        if ( spec['design'] === 'Web Developer Toolbox' ) {
          $("#step-code h3 b").text("3");
        }
        else {
          $("#step-code h3 b").text("4");
        }

        $('#step-topic ul').removeClass();
        $('#step-topic ul').addClass(spec['color']);

        // Search through known combinations for a match
        var sel = null;
        for (var i=0,item; item=buttons[i]; i++) {
            // Be optimistic, assume a match until a column mismatch.
            var found = true;
            for (var k in spec) if (spec.hasOwnProperty(k)) {
                // Accept --- or selector value as column match.
                if ('---' != item[k] && spec[k] != item[k]) {
                    found = false; break;
                }
            }
            // If nothing mismatched, then we have our item.
            if (found) { sel = item; break; }
        }

        // Reveal preview only if there's a valid selection.
        if (sel) {
            $('#button-preview').fadeIn();
            doReveal('#step-code');
        } else {
            $('#button-preview, #step-code').hide();
        }

        // Do nothing if, somehow, a valid selection wasn't found.
        if (!sel) { return; }

        // Update the button preview image.
        $('#button-image')
            .attr('alt', sel.alt_text)
            .attr('src', '{{ STATIC_URL }}img/promote/promobutton_'+sel.id+'.png');

        $('#button-url')
            .text(sel.url)
            .attr('title', sel.alt_text)
            .attr('href', sel.tracked_url);

        // Update the button code.
        $('#button-code').val([
            '<a href="', sel.tracked_url, '" title="', sel.alt_text, '">',
            '<img src="{{ request.build_absolute_uri(STATIC_URL) }}img/promote/promobutton_', sel.id, '.png" ',
                'alt="', sel.alt_text, '" />',
            '</a>'
        ].join(''));

    }

    $('#button-builder input:radio').click(function(){
      $(this).parents('ul').children('li').removeClass('selected');
      $(this).parents('li').addClass('selected');
    });
    $('#button-builder input:radio:checked').parents('li').addClass('selected');


    // Update the button code on any change to selectors.
    $('#button-builder input:radio').click(updateButtonCode);
    $('#button-builder select').change(updateButtonCode);

    // Do an initial code update on page ready.
    $(document).ready(function () {
        updateButtonCode();
    });

    // Redirect clicks on topic links to radio selection.
    $('#step-topic a').click(function () {
        $(this).parent().prev().click();
        updateButtonCode();
        return false;
    });

    // Focusing on the code textarea selects all for copypasta
    $('#button-code').click(function (ev) { $(ev.target).select(); });

    // Keep the button preview onscreen during scrolling
    var fixed = false;
    $(document).scroll(function() {
    	if( $(this).scrollTop() >= $("#button-builder").offset().top-20 ) {
    	  if( !fixed ) {
    	    fixed = true;
    	    $("#button-preview").addClass("fixed");
    	  }
    	} else {
    	  if( fixed ) {
    	    fixed = false;
    	    $("#button-preview").removeClass("fixed");
    	  }
    	}
    });


})(jQuery);

// ]]>
</script>
{% endblock %}