Add doc:tutorial-instructions widget

1 files changed, 82 insertions, 0 deletions

diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index 6275012c..a3527c52 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -85,4 +85,86 @@
     return {html: lines.join('\n'), hilite: lineNo.join(',') };
   };
 
+  var HTML_TPL =
+      '<a ng:init="showInstructions = {show}" ng:show="!showInstructions" ng:click="showInstructions = true" href>Show Instructions</a>' +
+      '<div ng:controller="TutorialInstructionsCtrl" ng:show="showInstructions">' +
+        '<div class="tabs-nav">' +
+          '<ul>' +
+          '</ul>' +
+        '</div>' +
+        '<div class="tabs-content"><div class="tabs-content-inner">' +
+
+        '</div></div>' +
+      '</div>';
+
+  var HTML_NAV = '<li ng:class="currentCls(\'{id}\')"><a ng:click="select(\'{id}\')" href>{title}</a></li>';
+  var HTML_CONTENT = '<div ng:show="selected==\'{id}\'">{content}</div>';
+
+  var DEFAULT_NAV =
+    '<li ng:class="currentCls(\'git-mac\')"><a ng:click="select(\'git-mac\')" href>Git on Mac/Linux</a></li>' +
+    '<li ng:class="currentCls(\'git-win\')"><a ng:click="select(\'git-win\')" href>Git on Windows</a></li>' +
+    '<li ng:class="currentCls(\'ss-mac\')"><a ng:click="select(\'ss-mac\')" href>Snapshots on Mac/Linux</a></li>' +
+    '<li ng:class="currentCls(\'ss-win\')"><a ng:click="select(\'ss-win\')" href>Snapshots on Windows</a></li>';
+
+  var DEFAULT_CONTENT =
+    '<div ng:show="selected==\'git-mac\'">' +
+      '<ol>' +
+      '<li><p>Reset the workspace to step {step}.</p>' +
+      '<pre><code> git checkout -f step-{step}</code></pre></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '</ol>' +
+    '</div>' +
+
+    '<div ng:show="selected==\'git-win\'">' +
+      '<ol>' +
+      '<li><p>Reset the workspace to step {step}.</p>' +
+      '<pre><code> git checkout -f step-{step}</code></pre></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '</ol>' +
+    '</div>' +
+
+    '<div ng:show="selected==\'ss-mac\'">' +
+      '<ol>' +
+      '<li><p>Reset the workspace to step {step}.</p>' +
+      '<pre><code> ./goto_step.sh {step}</code></pre></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '</ol>' +
+    '</div>' +
+
+    '<div ng:show="selected==\'ss-win\'">' +
+      '<ol>' +
+      '<li><p>Reset the workspace to step {step}.</p>' +
+      '<pre><code> ./goto_step.bat {step}</code></pre></li>' +
+      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">anglar\'s server</a>.</p></li>' +
+      '</ol>' +
+    '</div>';
+
+  angular.widget('doc:tutorial-instructions', function(element) {
+    element.hide();
+    this.descend(true);
+
+    var tabs = angular.element(HTML_TPL.replace('{show}', element.attr('show') || 'false')),
+        nav = tabs.find('.tabs-nav ul'),
+        content = tabs.find('.tabs-content-inner'),
+        children = element.children();
+
+    if (children.length) {
+      // load custom content
+      angular.forEach(element.children(), function(elm) {
+        var elm = angular.element(elm),
+            id = elm.attr('id');
+
+        nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
+        content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
+      });
+    } else {
+      // default
+      nav.append(DEFAULT_NAV);
+      content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
+    }
+
+    element.html('');
+    element.append(tabs);
+    element.show();
+  });
 })();