honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

code switchers

Browse Source
This commit is contained in:
Alex Wolfe 2015-04-22 06:59:02 -07:00
parent b5fdd6ba52
commit 9b074c0aed
8 changed files with 3383 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/_includes/_code-box.jade
View File

@ -0,0 +1,7 @@
.code-box
header.code-box-header
nav.code-box-nav
button(class="button" aria-label="View ES5" ng-class="(language == 'es5') ? 'is-selected' : ''" ng-click="toggleCodeLanguage($event, 'es5')" ) ES5
button(class="button" aria-label="View TypeScript" ng-class="(language == 'typescript') ? 'is-selected' : ''" ng-click="toggleCodeLanguage($event, 'typescript')") TypeScript
.code-box-content

1
public/_includes/_head-include.jade
View File

@ -37,6 +37,7 @@ link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico")
link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css") link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css') link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css')
link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css") link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
link(rel="stylesheet" href="/resources/css/vendor/animate.css")
link(rel="stylesheet" href="/resources/css/main.css") link(rel="stylesheet" href="/resources/css/main.css")
<!-- MOBILE ICONS --> <!-- MOBILE ICONS -->

32
public/docs/js/latest/guide/setup.jade
View File

@ -39,9 +39,9 @@
p. p.
The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load. The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. System requires mapping the code file paths to understand what to be load.
pre.prettyprint.lang-html .code-box
pre.prettyprint.lang-html(data-name="es5")
code. code.
//ES5
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -52,9 +52,8 @@
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
pre.prettyprint.lang-html pre.prettyprint.lang-html(data-name="typescript")
code. code.
//TypeScript
&lt;!DOCTYPE html&gt; &lt;!DOCTYPE html&gt;
&lt;html&gt; &lt;html&gt;
&lt;head&gt; &lt;head&gt;
@ -76,6 +75,7 @@
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt; &lt;/html&gt;
.callout.is-helpful .callout.is-helpful
header Don't use code.angularjs.org in a live app header Don't use code.angularjs.org in a live app
p. p.
@ -91,12 +91,8 @@
it all off like this: it all off like this:
.code-box .code-box
nav.code-box-nav pre.prettyprint.lang-javascript(data-name="es5")
a(href="#")
pre.prettyprint.lang-javascript
code. code.
//ES5
function AppComponent() {} function AppComponent() {}
AppComponent.annotations = [ AppComponent.annotations = [
@ -112,9 +108,8 @@
angular.bootstrap(AppComponent); angular.bootstrap(AppComponent);
}); });
pre.prettyprint.lang-typescript pre.prettyprint.lang-typescript(data-name="typescript")
code. code.
//TypeScript
import {Component, View, bootstrap} from 'angular2/angular2'; import {Component, View, bootstrap} from 'angular2/angular2';
@Component({ @Component({
@ -179,20 +174,23 @@
p. p.
TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app. TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.
pre.prettyprint.lang-typescript strong ES5
p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
.code-box
pre.prettyprint.lang-typescript(data-name="es5")
code. code.
import {Component, View, bootstrap} from 'angular2/angular2'; import {Component, View, bootstrap} from 'angular2/angular2';
... ...
// bootstrap is available for use because it was imported from angular core // bootstrap is available for use because it was imported from angular core
bootstrap(AppComponent); bootstrap(AppComponent);
strong ES5 pre.prettyprint.lang-typescript(data-name="typescript")
p.
In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.
pre.prettyprint.lang-typescript
code. code.
// window.angular is available because the script file attaches the angular property to the window // window.angular is available because the script file attaches the angular property to the window
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
angular.bootstrap(AppComponent); angular.bootstrap(AppComponent);
}); });

2
public/resources/css/module/_buttons.scss
View File

@ -13,7 +13,7 @@
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
overflow: hidden; overflow: hidden;
border: none;
// SIZES // SIZES
&.button-small { &.button-small {

30
public/resources/css/module/_code-box.scss
View File

@ -1,11 +1,37 @@
.code-box { .code-box {
header { border-radius: 4px;
background: $steel;
box-shadow: 0px 2px 5px rgba($coal, .3);
display: none;
margin-bottom: $unit * 3;
header {
background: darken($steel, 5%);
color: $snow;
padding: $unit;
border-radius: 4px 4px 0px 0px;
} }
nav { nav {
a { button {
line-height: $unit * 3;
height: $unit * 3;
padding: 0px ($unit * 3);
margin-right: $unit;
font-size: 13px;
background: lighten($steel, 3%);
color: $tin;
font-weight: 500;
&.is-selected {
background: $blueberry;
color: $snow;
} }
} }
}
.prettyprint {
box-shadow: none;
margin: 0px;
}
} }

5
public/resources/css/module/_code.scss
View File

@ -47,6 +47,11 @@
border: 4px solid $regal; border: 4px solid $regal;
} }
code {
background: none;
font-size: 15px;
}
ol { ol {
background: $steel; background: $steel;
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7); padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);

3181
public/resources/css/vendor/animate.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

100
public/resources/js/site.js
View File

@ -42,6 +42,89 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
$scope.showMenu = !$scope.showMenu; $scope.showMenu = !$scope.showMenu;
}; };
/*
* Code Switcher
*
*/
$scope.language = 'es5';
var $codeBoxes = $('.code-box');
if($codeBoxes.length) {
//UPDATE ALL CODE BOXES
$codeBoxes.each(function(index, codeBox) {
//REGISTER ELEMENTS
var $codeBox = $(codeBox);
var $examples = $codeBox.find('.prettyprint');
var $firstItem = $($examples[0]);
var $header = $("<header class='code-box-header'></header>");
var $nav = $("<nav class='code-box-nav'></nav>");
var selectedName = '';
//HIDE/SHOW CONTENT
$examples.addClass('is-hidden');
$firstItem.removeClass('is-hidden');
//UPDATE NAV FOR EACH CODE BOX
$examples.each(function(index, example) {
var $example = $(example);
var name = $example.data('name');
var selected = (index === 0) ? 'is-selected' : '';
var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
// ADD EVENTS FOR CODE SNIPPETS
$button.on('click', function(e) {
e.preventDefault();
var $currentButton = $(e.currentTarget);
var $buttons = $nav.find('.button');
var selectedName = $currentButton.data('name');
$buttons.removeClass('is-selected');
$currentButton.addClass('is-selected');
//UPDAT VIEW ON SELECTTION
$examples.addClass('is-hidden');
var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
$currentExample.removeClass('is-hidden').addClass('animated fadeIn');
});
$nav.append($button);
});
//ADD HEADER TO DOM
$header.append($nav);
$codeBox.prepend($header);
});
//FADEIN EXAMPLES
$codeBoxes.addClass('is-visible');
}
// TOGGLE CODE LANGUAGE
$scope.toggleCodeExample = function(event, name) {
console.log('hello');
event.preventDefault();
$scope.language = language;
};
/*
* Code Formatting
*
*/
var $codeBlocks = $('pre');
if($codeBlocks.length) {
$codeBlocks.each(function(index, codeEl) {
var $codeEl = $(codeEl);
if(!$codeEl.hasClass('prettyprint')) {
$codeEl.addClass('prettyprint linenums');
}
});
}
// BIO MODAL // BIO MODAL
$scope.showBio = function($event) { $scope.showBio = function($event) {
var parentEl = angular.element(document.body); var parentEl = angular.element(document.body);
@ -85,23 +168,6 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
} }
}; };
/*
* Code Formatting
*
*/
$scope.language = 'es5';
// TOGGLE CODE LANGUAGE
$scope.toggleCodeLanguage = function(event) {
$scope.showMenu = !$scope.showMenu;
};
var $codeBoxes = $('pre');
if($codeBoxes.length) {
$codeBoxes.addClass('prettyprint linenums');
}
// INITIALIZE PRETTY PRINT // INITIALIZE PRETTY PRINT
prettyPrint(); prettyPrint();