code switchers
This commit is contained in:
Alex Wolfe
parent
b5fdd6ba52
commit
9b074c0aed
|
|
@ -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
|
||||
|
|
@ -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(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/animate.css")
|
||||
link(rel="stylesheet" href="/resources/css/main.css")
|
||||
|
||||
<!-- MOBILE ICONS -->
|
||||
|
|
|
|||
|
|
@ -39,42 +39,42 @@
|
|||
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.
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
//ES5
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
.code-box
|
||||
pre.prettyprint.lang-html(data-name="es5")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.sfx.dev.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
pre.prettyprint.lang-html(data-name="typescript")
|
||||
code.
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.config({
|
||||
paths: {
|
||||
'*': '*.js',
|
||||
'angular2/*': 'angular2/*',
|
||||
}
|
||||
});
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
pre.prettyprint.lang-html
|
||||
code.
|
||||
//TypeScript
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://jspm.io/system@0.16.js"></script>
|
||||
<script src="https://code.angularjs.org/2.0.0-alpha.19/angular2.dev.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<my-app></my-app>
|
||||
<script>
|
||||
System.config({
|
||||
paths: {
|
||||
'*': '*.js',
|
||||
'angular2/*': 'angular2/*',
|
||||
}
|
||||
});
|
||||
System.import('main');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
.callout.is-helpful
|
||||
header Don't use code.angularjs.org in a live app
|
||||
|
|
@ -91,42 +91,37 @@
|
|||
it all off like this:
|
||||
|
||||
.code-box
|
||||
nav.code-box-nav
|
||||
a(href="#")
|
||||
pre.prettyprint.lang-javascript(data-name="es5")
|
||||
code.
|
||||
function AppComponent() {}
|
||||
|
||||
pre.prettyprint.lang-javascript
|
||||
code.
|
||||
//ES5
|
||||
function AppComponent() {}
|
||||
|
||||
AppComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: 'my-app'
|
||||
}),
|
||||
new angular.View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
];
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
pre.prettyprint.lang-typescript
|
||||
code.
|
||||
//TypeScript
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
AppComponent.annotations = [
|
||||
new angular.Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
}),
|
||||
new angular.View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
];
|
||||
|
||||
bootstrap(AppComponent);
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1>My first Angular 2 App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
|
||||
bootstrap(AppComponent);
|
||||
|
||||
|
||||
.l-main-section
|
||||
|
|
@ -179,20 +174,23 @@
|
|||
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.
|
||||
|
||||
pre.prettyprint.lang-typescript
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
...
|
||||
// bootstrap is available for use because it was imported from angular core
|
||||
bootstrap(AppComponent);
|
||||
|
||||
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.
|
||||
|
||||
pre.prettyprint.lang-typescript
|
||||
code.
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
.code-box
|
||||
pre.prettyprint.lang-typescript(data-name="es5")
|
||||
code.
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
...
|
||||
// bootstrap is available for use because it was imported from angular core
|
||||
bootstrap(AppComponent);
|
||||
|
||||
pre.prettyprint.lang-typescript(data-name="typescript")
|
||||
code.
|
||||
// window.angular is available because the script file attaches the angular property to the window
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
angular.bootstrap(AppComponent);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
|
||||
border: none;
|
||||
|
||||
// SIZES
|
||||
&.button-small {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,37 @@
|
|||
.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -47,6 +47,11 @@
|
|||
border: 4px solid $regal;
|
||||
}
|
||||
|
||||
code {
|
||||
background: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
ol {
|
||||
background: $steel;
|
||||
padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -42,6 +42,89 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
|
|||
$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
|
||||
$scope.showBio = function($event) {
|
||||
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
|
||||
prettyPrint();
|
||||
|
|
|
|||
Loading…
Reference in New Issue