javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): fix zonejs issue, add new template

Browse Source
This commit is contained in:
Drew Rygh
2015-09-30 16:21:52 -05:00
parent 43505407b3
commit c89deca542
5 changed files with 55 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
demos/component-docs/index.ts
View File

@ -1,4 +1,5 @@
import {App, ActionSheet} from 'ionic/ionic';
import {NgZone} from 'angular2/angular2';
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
@ -9,13 +10,21 @@ function toTitleCase(str) {
})
class DemoApp {
constructor(actionSheet: ActionSheet) {
component: any;
actionSheet: any;
constructor(actionSheet: ActionSheet, zone: NgZone) {
this.actionSheet = actionSheet;
this.component = {
title: 'Action Sheet',
}
title: 'Action Sheets',
};
window.onmessage = (e) => {
this.component.title = toTitleCase(e.data.replace('-', ' '));
zone.run(() => {
if (e.data) {
var data = JSON.parse(e.data);
this.component.title = toTitleCase(data.hash.replace('-', ' '));
}
});
};
}

3
demos/component-docs/main.html
View File

@ -3,8 +3,7 @@
<ion-content class="has-header padding components-demo">
<section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheet' }">
<section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
<button class="button" (click)="openMenu()">
Show Actionsheet
</button>

9
gulpfile.js
View File

@ -367,7 +367,8 @@ gulp.task('demos', function(){
.pipe(tsc, tscOptions, null, tscReporter)
.pipe(babel, getBabelOptions('demos'))
var indexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
var baseIndexTemplate = _.template(fs.readFileSync('scripts/demos/index.template.html'))();
var docsIndexTemplate = _.template(fs.readFileSync('scripts/demos/docs.index.template.html'))();
return gulp.src(['demos/**/*'])
.pipe(cache('demos', { optimizeMemory: true }))
@ -377,12 +378,18 @@ gulp.task('demos', function(){
function createIndexHTML() {
return through2.obj(function(file, enc, next) {
var indexTemplate = baseIndexTemplate;
if (file.path.indexOf('component-docs') > -1) {
indexTemplate = docsIndexTemplate;
}
this.push(new VinylFile({
base: file.base,
contents: new Buffer(indexTemplate),
path: path.join(path.dirname(file.path), 'index.html'),
}));
next(null, file);
});
}
})

33
scripts/demos/docs.index.template.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<ion-app>
<ion-loading-icon></ion-loading-icon>
</ion-app>
<script src="/js/ionic.bundle.js"></script>
<script>
System.config({
"paths": {
"*": "*.js",
"ionic/*": "ionic/*",
"angular2/*": "angular2/*",
"rx": "rx"
}
})
System.import("index");
</script>
</body>
</html>

1
scripts/demos/index.template.html
View File

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>