From 3506ac87c09c0748d92ef594c94365a5d7b07262 Mon Sep 17 00:00:00 2001
From: Dirk Dougherty <ddougherty@google.com>
Date: Fri, 21 Feb 2014 11:15:52 -0800
Subject: Doc change: Updated content for distribute.

Change-Id: I612fbb8e5b7aedd73c0e633e5517bb89375760ed
---
 docs/html/distribute/tools/promote/badges.jd | 362 +++++++++++++++++++++++++++
 1 file changed, 362 insertions(+)
 create mode 100644 docs/html/distribute/tools/promote/badges.jd

(limited to 'docs/html/distribute/tools/promote/badges.jd')

diff --git a/docs/html/distribute/tools/promote/badges.jd b/docs/html/distribute/tools/promote/badges.jd
new file mode 100644
index 0000000..e91a804
--- /dev/null
+++ b/docs/html/distribute/tools/promote/badges.jd
@@ -0,0 +1,362 @@
+page.title=Google Play Badge Generator
+page.image=/images/gp-badges-set.png
+page.metaDescription=Build badges for your app in just a few clicks, or download hi-res badge assets localized for a variety of languages.
+meta.tags="disttools, promoting, deviceart, marketing, googleplay"
+page.tags="badge, google play"
+
+@jd:body
+
+<p itemprop="description">Google Play badges enable you to promote your apps with
+official branding in your online ads, promotional materials, or anywhere you want
+a link to your apps</p>
+
+<p>In the form below,
+input your app's package name or publisher name, choose the badge style,
+click <em>Build my badge</em>, then paste the HTML into your web content.</p>
+
+<p>If you're creating a promotional web page for your app, you should also use the
+<a href="{@docRoot}distribute/tools/promote/device-art.html">Device Art Generator</a>, which quickly
+wraps your screenshots in real device artwork.</p>
+
+<p>For guidelines when using the Google Play badge and other brand assets,
+see the <a href="{@docRoot}distribute/tools/promote/brand.html#brand-google_play">Brand
+Guidelines</a>.</p>
+
+<style type="text/css">
+
+form.button-form {
+  margin-top:2em;
+}
+
+/* the label and input elements are blocks that float left in order to
+   keep the left edgets of the input aligned, and IE 6/7 do not fully support "inline-block" */
+label.block {
+  display: block;
+  float: left;
+  width: 100px;
+  padding-right: 10px;
+}
+
+input.text {
+  display: block;
+  float: left;
+  width: 250px;
+}
+
+div.button-row {
+  white-space:nowrap;
+  min-height:80px;
+}
+
+div.button-row input {
+  vertical-align:middle;
+  margin:0 5px 0 0;
+}
+
+#jd-content div.button-row img {
+  margin: 0;
+  vertical-align:middle;
+}
+
+</style>
+
+<script type="text/javascript">
+
+// locales for which we have the 'app' badge
+var APP_LANGS = ['it','pt-br','pt-pt','nl','ko','ja','fr','es','es-419','en','de'];
+
+// variables for creating 'try it out' demo button
+var imagePath = "{@docRoot}images/brand/"
+var linkStart = "<a href=\"https://play.google.com/store/";
+var imageStart = "\">\n"
+        + "  <img alt=\"";
+  // leaves opening for the alt text value
+var imageSrc = "\"\n       src=\"" + imagePath;
+  // leaves opening for the image file name
+var imageEnd = ".png\" />\n</a>";
+
+// variables for creating code snippet
+var linkStartCode = "&lt;a href=\"https://play.google.com/store/";
+var imageStartCode = "\"&gt;\n"
+        + "  &lt;img alt=\"";
+  // leaves opening for the alt text value
+var imageSrcCode = "\"\n       src=\"" + imagePath;
+  // leaves opening for the image file name
+var imageEndCode = ".png\" />\n&lt;/a>";
+
+/** Generate the HTML snippet and demo based on form values */
+function buildButton(form) {
+  var lang = $('#locale option:selected').val();
+  var selectedValue = lang + $('form input[type=radio]:checked').val();
+  var altText = selectedValue.indexOf("generic") != -1 ? "Get it on Google Play" : "Android app on Google Play";
+
+  if (form["package"].value != "com.example.android") {
+    $("#preview").show();
+    var packageName = escapeHTML(form["package"].value);
+    $("#snippet").show().html(linkStartCode + "apps/details?id=" + packageName
+            + imageStartCode + altText + imageSrcCode
+            + selectedValue + imageEndCode);
+    $("#button-preview").html(linkStart + "apps/details?id=" + packageName
+            + imageStart + altText + imageSrc
+            + selectedValue + imageEnd);
+            
+    // Send the event to Analytics
+    _gaq.push(['_trackEvent', 'Distribute', 'Create Google Play Badge', 'Package ' + selectedValue]);
+  } else if (form["publisher"].value != "Example, Inc.") {
+    $("#preview").show();
+    var publisherName = escapeHTML(form["publisher"].value);
+    $("#snippet").show().html(linkStartCode + "search?q=pub:" + publisherName
+            + imageStartCode + altText + imageSrcCode
+            + selectedValue + imageEndCode);
+    $("#button-preview").html(linkStart + "search?q=pub:" + publisherName
+            + imageStart + altText + imageSrc
+            + selectedValue + imageEnd);
+   
+    // Send the event to Analytics
+    _gaq.push(['_trackEvent', 'Distribute', 'Create Google Play Badge', 'Publisher ' + selectedValue]);
+  } else {
+    alert("Please enter your package name or publisher name");
+  }
+  return false;
+}
+
+/** Listen for Enter key */
+function onTextEntered(event, form, me) {
+  // 13 = enter
+  if (event.keyCode == 13) {
+    buildButton(form);
+  }
+}
+
+/** When input is focused, remove example text and disable other input */
+function onInputFocus(object, example) {
+  if (object.value == example) {
+    $(object).val('').css({'color' : '#000'});
+  }
+  $('input[type="text"]:not(input[name='+object.name+'])',
+          object.parentNode).attr('disabled','true');
+  $('#'+object.name+'-clear').show();
+}
+
+/** When input is blured, restore example text if appropriate and enable other input */
+function onInputBlur(object, example) {
+  if (object.value.length < 1) {
+    $(object).attr('value',example).css({'color':'#ccc'});
+    $('input[type="text"]', object.parentNode).removeAttr('disabled');
+    $('#'+object.name+'-clear').hide();
+  }
+}
+
+/** Clear the form to start over */
+function clearLabel(id, example) {
+  $("#preview").hide();
+  $('#'+id+'').html('').attr('value',example).css({'color':'#ccc'});
+  $('input[type="text"]', $('#'+id+'').parent()).removeAttr('disabled');
+  $('#'+id+'-clear').hide();
+  return false;
+}
+
+/** Switch the badge urls for selected language */
+function changeBadgeLang() {
+  var lang = $('#locale option:selected').val();
+  
+  // check if we have the 'app' badge for this lang and show notice if not
+  $("div.button-row.error").remove();  // remove any existing instance of error message
+  if ($.inArray(lang,APP_LANGS) == -1) {
+    $("div.button-row.app").hide();
+    $("div.button-row.app").after('<div class="button-row error"><p class="note" style="margin:1em 0 -1em">'
+        + 'Sorry, we currently don\'t have the '
+        + '<em>Android app on Google Play</em> badge translated for '
+        + $("select#locale option[value="+lang+"]").attr("title")
+        + '.<br>Please check back later or instead use the <em>Get it on Google Play</em> badge below.'
+        + '</p></div>');
+  } else {
+    $("div.button-row.app").show(); // show the 'app' badge row
+  }
+  
+  $('.button-row img').each(function() {
+    var id = $(this).parent().attr('for');
+    var imgName = lang + $('input#'+id).attr('value') + '.png';
+    var lastSlash = $(this).attr('src').lastIndexOf('/');
+    var imgPath = $(this).attr('src').substring(0, lastSlash+1);
+    $(this).attr('src', imgPath + imgName);
+  });
+}
+
+/** When the doc is ready, find the inputs and color the input grey if the value is the example
+    text. This is necessary to handle back-navigation, which can auto-fill the form with previous
+    values (and text should not be grey) */
+$(document).ready(function() {
+  $(".button-form input.text").each(function(index) {
+    if ($(this).val() == $(this).attr("default")) {
+      $(this).css("color","#ccc");
+    } else {
+      /* This is necessary to handle back-navigation to the page after form was filled */
+      $('input[type="text"]:not(input[name='+this.name+'])',
+              this.parentNode).attr('disabled','true');
+      $('#'+this.name+'-clear').show();
+    }
+  });
+});
+
+</script>
+
+<form class="button-form">
+  <label class="block" for="locale">Language:</label>
+  <select id="locale" style="display:block;float:left;margin:0"
+          onchange="changeBadgeLang()">
+    <option title="Afrikaans"
+            value="af">Afrikaans</option>
+    <option title="Arabic"
+            value="ar">العربية</option>
+    <option title="Belarusian"
+            value="be">Беларуская</option>
+    <option title="Bulgarian"
+            value="bg">Български</option>
+    <option title="Catalan"
+            value="ca">Català</option>
+    <option title="Chinese (China)"
+            value="zh-cn">中文 (中国)</option>
+    <option title="Chinese (Hong Kong)"
+            value="zh-hk">中文（香港）</option>
+    <option title="Chinese (Taiwan)"
+            value="zh-tw">中文 (台灣)</option>
+    <option title="Croatian"
+            value="hr">Hrvatski</option>
+    <option title="Czech"
+            value="cs">Česky</option>
+    <option title="Danish"
+            value="da">Dansk</option>
+    <option title="Dutch"
+            value="nl">Nederlands</option>
+    <option title="Estonian"
+            value="et">Eesti</option>
+    <option title="Farsi - Persian"
+            value="fa">فارسی</option>
+    <option title="Filipino"
+            value="fil">Tagalog</option>
+    <option title="Finnish"
+            value="fi">Suomi</option>
+    <option title="French"
+            value="fr">Français</option>
+    <option title="German"
+            value="de">Deutsch</option>
+    <option title="Greek"
+            value="el">Ελληνικά</option>
+    <option title="English"
+            value="en" selected="true">English</option>
+<!--
+    <option title="Hebrew"
+            value="iw-he">עברית</option>
+-->
+    <option title="Hungarian"
+            value="hu">Magyar</option>
+    <option title="Indonesian"
+            value="id-in">Bahasa Indonesia</option>
+    <option title="Italian"
+            value="it">Italiano</option>
+    <option title="Japanese"
+            value="ja">日本語</option>
+    <option title="Korean"
+            value="ko">한국어</option>
+    <option title="Latvian"
+            value="lv">Latviešu</option>
+    <option title="Lithuanian"
+            value="lt">Lietuviškai</option>
+    <option title="Malay"
+            value="ms">Bahasa Melayu</option>
+    <option title="Norwegian"
+            value="no">Norsk (bokmål)‎</option>
+    <option title="Polish"
+            value="pl">Polski</option>
+    <option title="Portuguese (Brazil)"
+            value="pt-br">Português (Brasil)</option>
+    <option title="Portuguese (Portugal)"
+            value="pt-pt">Português (Portugal)</option>
+    <option title="Romanian"
+            value="ro">Română</option>
+    <option title="Russian"
+            value="ru">Русский</option>
+    <option title="Serbian"
+            value="sr">Српски / srpski</option>
+    <option title="Slovak"
+            value="sk">Slovenčina</option>
+    <option title="Slovenian"
+            value="sl">Slovenščina</option>
+    <option title="Spanish (Spain)"
+            value="es">Español (España)</option>
+    <option title="Spanish (Latin America)"
+            value="es-419">Español (Latinoamérica)</option>
+    <option title="Swedish"
+            value="sv">Svenska</option>
+    <option title="Swahili"
+            value="sw">Kiswahili</option>
+    <option title="Thai"
+            value="th">ไทย</option>
+    <option title="Turkish"
+            value="tr">Türkçe</option>
+    <option title="Ukrainian"
+            value="uk">Українська</option>
+    <option title="Vietnamese"
+            value="vi">Tiếng Việt</option>
+    <option title="Zulu"
+            value="zu">isiZulu</option>
+  </select>
+  <p style="clear:both;margin:0">&nbsp;</p>
+  <label class="block" for="package" style="clear:left">Package name:</label>
+  <input class="text" type="text" id="package" name="package"
+         value="com.example.android"
+         default="com.example.android"
+         onfocus="onInputFocus(this, 'com.example.android')"
+         onblur="onInputBlur(this, 'com.example.android')"
+         onkeyup="return onTextEntered(event, this.parentNode, this)"/>&nbsp;
+         <a id="package-clear" style="display:none" href="#"
+            onclick="return clearLabel('package','com.example.android');">clear</a>
+  <p style="clear:both;margin:0">&nbsp;<em>or</em></p>
+  <label class="block" style="margin-top:5px" for="publisher">Publisher&nbsp;name:</label>
+  <input class="text" type="text" id="publisher" name="publisher"
+         value="Example, Inc."
+         default="Example, Inc."
+         onfocus="onInputFocus(this, 'Example, Inc.')"
+         onblur="onInputBlur(this, 'Example, Inc.')"
+         onkeyup="return onTextEntered(event, this.parentNode, this)"/>&nbsp;
+         <a id="publisher-clear" style="display:none" href="#"
+            onclick="return clearLabel('publisher','Example, Inc.');">clear</a>
+         <br/><br/>
+
+
+<div class="button-row app">
+  <input type="radio" name="buttonStyle" value="_app_rgb_wo_45" id="ws" />
+    <label for="ws"><img src="{@docRoot}images/brand/en_app_rgb_wo_45.png"
+alt="Android app on Google Play (small)" /></label>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+  <input type="radio" name="buttonStyle" value="_app_rgb_wo_60" id="wm" />
+    <label for="wm"><img src="{@docRoot}images/brand/en_app_rgb_wo_60.png"
+alt="Android app on Google Play (large)" /></label>
+</div>
+
+<div class="button-row">
+  <input type="radio" name="buttonStyle" value="_generic_rgb_wo_45" id="ns" checked="checked" />
+    <label for="ns"><img src="{@docRoot}images/brand/en_generic_rgb_wo_45.png"
+alt="Get it on Google Play (small)" /></label>
+    &nbsp;&nbsp;&nbsp;&nbsp;
+  <input type="radio" name="buttonStyle" value="_generic_rgb_wo_60" id="nm" />
+    <label for="nm"><img src="{@docRoot}images/brand/en_generic_rgb_wo_60.png"
+alt="Get it on Google Play (large)" /></label>
+</div>
+
+  <input class="button" onclick="return buildButton(this.parentNode);"
+    type="button" value="Build my badge" style="padding:10px" />
+  <br/>
+</form>
+
+<div id="preview" style="display:none">
+  <p>Copy and paste this HTML into your web site:</p>
+  <textarea id="snippet" cols="100" rows="5" onclick="this.select()"
+style="font-family:monospace;background-color:#efefef;padding:5px;display:none;margin-bottom:1em">
+  </textarea >
+
+<p>Try it out:</p>
+<div id="button-preview" style="margin-top:1em"></div>
+</div>
+
-- 
cgit v1.1