From c96c7135743acd8e53b986de5218b3da3cf9f706 Mon Sep 17 00:00:00 2001 From: Andrew Date: Wed, 18 Mar 2015 16:55:22 -0500 Subject: [PATCH] fix traceur not showing errors --- gulpfile.js | 29 ++++---- playground/basic-example/main.js | 3 +- src/components/app/ionic.scss | 1 + src/components/sidemenu/sidemenu.js | 66 +++++++++++++++++-- src/components/sidemenu/sidemenu.scss | 20 ++++++ .../tabbar/mixins/android/android-tabbar.js | 8 --- src/components/tabbar/tabbar.js | 4 +- src/core/gestures/drag-gesture.js | 31 +++++++++ src/core/gestures/edge-drag-gesture.js | 17 +++++ src/core/gestures/edgePanGesture | 0 src/core/gestures/gesture.js | 37 +++++++++++ src/core/gestures/panGesture.js | 1 - 12 files changed, 191 insertions(+), 26 deletions(-) create mode 100644 src/core/gestures/drag-gesture.js create mode 100644 src/core/gestures/edge-drag-gesture.js delete mode 100644 src/core/gestures/edgePanGesture create mode 100644 src/core/gestures/gesture.js delete mode 100644 src/core/gestures/panGesture.js diff --git a/gulpfile.js b/gulpfile.js index 1913ded9b5..d5dda3105d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -76,21 +76,20 @@ gulp.task('playgroundFiles', function() { gulp.task('playgroundJs', function() { return gulp.src(config.src.playgroundJs) - .pipe(traceurCompile()) + .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 + .pipe(plumber()) + .pipe(traceur({ + modules: 'instantiate', + moduleName: true, + annotations: true, + types: true + })) + .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 .pipe(gulp.dest(config.dist)); }); function traceurCompile() { return lazypipe() - .pipe(rename, {extname: ''}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 - .pipe(plumber) - .pipe(traceur, { - modules: 'instantiate', - moduleName: true, - annotations: true, - types: true - }) - .pipe(rename, {extname: '.js'}) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 (); } gulp.task('js', function () { @@ -99,7 +98,15 @@ gulp.task('js', function () { // Forces the files to register themselves with 'ionic' prefix file.dirname = 'ionic/' + file.dirname; })) - .pipe(traceurCompile()) + .pipe(rename({extname: ''})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 + .pipe(plumber()) + .pipe(traceur({ + modules: 'instantiate', + moduleName: true, + annotations: true, + types: true + })) + .pipe(rename({extname: '.js'})) //hack, see: https://github.com/sindresorhus/gulp-traceur/issues/54 // compiled js files in playground go to the playground root, everything else goes in /ionic .pipe(gulp.dest('dist')); }); diff --git a/playground/basic-example/main.js b/playground/basic-example/main.js index 77a6fef132..2995cdc929 100644 --- a/playground/basic-example/main.js +++ b/playground/basic-example/main.js @@ -2,13 +2,14 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; import {Tabbar} from 'ionic/components/tabbar/tabbar'; import {Modal} from 'ionic/components/modal/modal'; +import {SideMenu, SideMenuParent} from 'ionic/components/sidemenu/sidemenu'; import 'ionic/components/tabbar/mixins/android/android-tabbar'; @Component({ selector: '[playground-main]' }) @Template({ url: 'main.html', - directives: [Tabbar, Modal] + directives: [Tabbar, Modal, SideMenu, SideMenuParent] }) class PlaygroundMain { constructor() { diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss index b1eafc147b..d03922ea4f 100644 --- a/src/components/app/ionic.scss +++ b/src/components/app/ionic.scss @@ -19,4 +19,5 @@ @import "../button/button"; @import "../tabbar/tabbar"; @import "../modal/modal"; +@import "../sidemenu/sidemenu"; diff --git a/src/components/sidemenu/sidemenu.js b/src/components/sidemenu/sidemenu.js index 5e70ee581f..b6452d8ceb 100644 --- a/src/components/sidemenu/sidemenu.js +++ b/src/components/sidemenu/sidemenu.js @@ -1,7 +1,65 @@ -import {Component, Template} from 'angular2/angular2'; -import {ViewGroup} from '../view-group'; +import {Component, Template, Inject, Parent, NgElement} from 'angular2/angular2'; +import {Ion} from '../ion'; +// import {EdgeDragGesture} from '../../core/gestures/edge-drag-gesture'; -class Sidemenu extends ViewGroup { - constructor() { +@Component({ + selector: 'ion-side-menu', + bind: { + side: 'side' + } +}) +@Template({ + inline: `` +}) +export class SideMenu extends Ion { + constructor( + @Parent() sideMenuParent: SideMenuParent, + @NgElement() element: NgElement + ) { + this.el = element; + // this.gesture = new EdgeDragGesture(sideMenuParent.el.domElement, this); + this._drag = {}; + super(); + } + onDragStart(ev) { + this._drag = { + width: this.el.domElement.offsetWidth + }; + this.el.domElement.classList.add('no-animate'); + } + onDrag(ev) { + var pos = this._drag.pos = Math.max(0, Math.min(ev.center.x, this._drag.width)); + this.el.domElement.style.transform = 'translate3d(0,' + pos + 'px,0)'; + } + onDragEnd(ev) { + var { pos, width } = this._drag; + this.el.domElement.style.transform = ''; + if (pos < width / 2) { + this.close(); + } else if (pos > width / 2) { + this.open(); + } + this.el.domElement.style.transform = ''; + this.el.domElement.classList.remove('no-animate'); + this._drag = null; + } + open() { + this.el.domElement.classList.add('open'); + } + close() { + this.el.domElement.classList.remove('open'); + } +} + +@Component({ + selector: 'ion-side-menu-parent' +}) +@Template({ + inline: '' +}) +export class SideMenuParent extends Ion { + constructor(@NgElement() element: NgElement) { + this.el = element; + super(); } } diff --git a/src/components/sidemenu/sidemenu.scss b/src/components/sidemenu/sidemenu.scss index e69de29bb2..f1caecff70 100644 --- a/src/components/sidemenu/sidemenu.scss +++ b/src/components/sidemenu/sidemenu.scss @@ -0,0 +1,20 @@ +ion-side-menu { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 304px; + + background: rgba(255,0,0,0.5); + border-right: 1px solid black; + + transition: transform 0.3s; + + transform: translate3d(0, -304px, 0); + &.open { + transform: translate3d(0,0,0); + } + &.no-animate { + transition-duration: 0s; + } +} diff --git a/src/components/tabbar/mixins/android/android-tabbar.js b/src/components/tabbar/mixins/android/android-tabbar.js index 6d4470361c..b4154d1519 100644 --- a/src/components/tabbar/mixins/android/android-tabbar.js +++ b/src/components/tabbar/mixins/android/android-tabbar.js @@ -5,13 +5,5 @@ import {TabbarConfig} from '../../tabbar'; TabbarConfig.platform('android') .template('./android-template.html') .mixin(function(tabbar) { - // Draggable(tabbar) - // tabbarInstance.setAsHeader() - - tabbar.extend({ - press() { - alert('pressing from android mixin'); - } - }); }); diff --git a/src/components/tabbar/tabbar.js b/src/components/tabbar/tabbar.js index d941bdbd88..7989e08e3f 100644 --- a/src/components/tabbar/tabbar.js +++ b/src/components/tabbar/tabbar.js @@ -13,7 +13,9 @@ export var TabbarConfig = new IonConfigService(); services: [TabbarConfig] }) @Template({ - inline: `` + inline: `` }) export class Tabbar extends Ion { constructor( diff --git a/src/core/gestures/drag-gesture.js b/src/core/gestures/drag-gesture.js new file mode 100644 index 0000000000..bec31868a8 --- /dev/null +++ b/src/core/gestures/drag-gesture.js @@ -0,0 +1,31 @@ +import {Gesture} from './gesture'; +var noop = function() {}; + +class DragGesture extends Gesture { + // constructor(element, opts = {}) { + // super(element, opts); + // this.onDrag = opts.onDrag; + // this.onDragStart = opts.onDragStart; + // this.onDragEnd = opts.onDragEnd; + // } + // listen() { + // super.listen(); + // this.hammertime.on('dragstart', this._onDragStart.bind(this)); + // this.hammertime.on('drag', this._onDrag.bind(this)); + // this.hammertime.on('dragend', this._onDragEnd.bind(this)); + // } + // unlisten() { + // super.unlisten(); + // this.hammertime.destroy(); + // } + + // _onDragStart(ev) { + // (this.onDragStart || noop)(ev); + // } + // _onDrag(ev) { + // (this.onDrag || noop)(ev); + // } + // _onDragEnd(ev) { + // (this.onDragEnd || noop)(ev); + // } +} diff --git a/src/core/gestures/edge-drag-gesture.js b/src/core/gestures/edge-drag-gesture.js new file mode 100644 index 0000000000..6d3efbf055 --- /dev/null +++ b/src/core/gestures/edge-drag-gesture.js @@ -0,0 +1,17 @@ +import {DragGesture} from './drag-gesture'; + +class EdgeDragGesture extends DragGesture { + // constructor(element, opts = { edge = 'left', buffer = 25 } = {}) { + // super(element, opts); + // } + + // _onDragStart(ev) { + // var { buffer, edge } = this._options; + // var { gesture } = ev; + // if (edge === 'left' && gesture.center.x > buffer) return; + // if (edge === 'top' && gesture.center.y > buffer) return; + // if (edge === 'right' && gesture.center.y < window.innerWidth - buffer) return; + // if (edge === 'bottom' && gesture.center.y < window.innerHeight - buffer) return; + // super._onDragStart(ev); + // } +} diff --git a/src/core/gestures/edgePanGesture b/src/core/gestures/edgePanGesture deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/src/core/gestures/gesture.js b/src/core/gestures/gesture.js new file mode 100644 index 0000000000..6d26cfbcae --- /dev/null +++ b/src/core/gestures/gesture.js @@ -0,0 +1,37 @@ + +export class Gesture { + // constructor(element, opts = {}) { + // this.element = element; + // this._options = opts; + // } + // options(opts = {}) { + // extend(this._options, opts); + // } + + // listen() { + // this.hammertime = Hammer(element, this._options); + // } + // unlisten() { + // this.hammertime.destroy(); + // this.hammertime = null; + // } + // destroy() { + // this.hammertime.destroy(); + // } +} + +// TODO make a utils.js +function extend() { + for (var i = 0, ii = arguments.length; i < ii; i++) { + var obj = arguments[i]; + if (obj) { + var keys = Object.keys(obj); + for (var j = 0, jj = keys.length; j < jj; j++) { + var key = keys[j]; + if (!ILLEGAL_ASSIGN_FIELDS[key]) { + this[key] = obj[key]; + } + } + } + } +} diff --git a/src/core/gestures/panGesture.js b/src/core/gestures/panGesture.js deleted file mode 100644 index 8b13789179..0000000000 --- a/src/core/gestures/panGesture.js +++ /dev/null @@ -1 +0,0 @@ -