From 06818b14010473fed608374055c6239f644f8a39 Mon Sep 17 00:00:00 2001 From: Joey Arnold Date: Wed, 3 Feb 2016 23:29:57 -0700 Subject: [PATCH] ionScroll ionScroll can now be used with almost all the ionic 1.2 camelCase version of paremeters (except events like onScroll/onZooming). To be able to be fully featured, iscroll would need to be modified heavily. --- README.md | 4 +- components/ionScroll/ionScroll.html | 9 +++ components/ionScroll/ionScroll.js | 87 +++++++++++++++++++++++++++++ package.js | 9 +-- 4 files changed, 103 insertions(+), 6 deletions(-) create mode 100644 components/ionScroll/ionScroll.html create mode 100644 components/ionScroll/ionScroll.js diff --git a/README.md b/README.md index 5e4bbd9..38d065b 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ A [Product Hunt](http://producthunt.com) clone built in Meteor Ionic. (In Progre * [x] Popover * [x] Popup * [ ] Scroll - * [ ] ion-scroll + * [x] ion-scroll: Need to modify iscroll (massive re-engineering and cleanup) to add features. * [ ] ion-infinite-scroll * [x] Side Menus * [x] ion-side-menus @@ -108,7 +108,7 @@ A [Product Hunt](http://producthunt.com) clone built in Meteor Ionic. (In Progre ### Code Style Change: These are code styles that I want to impose on this forked repo. -* Get rid of all session variables [ ] +* [ ] Get rid of all session variables ## License [MIT License](https://github.com/meteoric/meteor-ionic/blob/master/LICENSE) diff --git a/components/ionScroll/ionScroll.html b/components/ionScroll/ionScroll.html new file mode 100644 index 0000000..2d08b13 --- /dev/null +++ b/components/ionScroll/ionScroll.html @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/components/ionScroll/ionScroll.js b/components/ionScroll/ionScroll.js new file mode 100644 index 0000000..6af1c15 --- /dev/null +++ b/components/ionScroll/ionScroll.js @@ -0,0 +1,87 @@ +Template.ionScroll.onCreated(function() { + this.nativeScrolling = new ReactiveVar(false); + this.direction = new ReactiveVar('y'); + this.locking = new ReactiveVar(true); + this.paging = new ReactiveVar(true); + this.onRefresh = new ReactiveVar(true); + this.onScroll = new ReactiveVar(() => {}); + this.scrollBarX = new ReactiveVar(true); + this.scrollBarY = new ReactiveVar(true); + this.zooming = new ReactiveVar(false); + this.minZoom = new ReactiveVar(0.5); + this.maxZoom = new ReactiveVar(3); + this.hasBouncing = new ReactiveVar(true); + + this.scroller = null; + + _.extend(this, { + set_direction: direction => this.direction.set(_.isUndefined(direction) ? 'y' : direction), + set_locking: locking => this.locking.set(_.isUndefined(locking) ? true : locking), + set_paging: paging => this.paging.set(!!paging), + set_onRefresh: onRefresh => this.onRefresh.set(onRefresh), + set_onScroll: onScroll => { + if (_.isFunction(onScroll)) { + if (!!this.scroller) this.scroller.off(this.onScroll.get(onScroll)); + this.onScroll.set(onScroll); + } + }, + set_scrollBarX: scrollBarX => this.scrollBarX.set(_.isUndefined(scrollBarX) ? true : scrollBarX), + set_scrollBarY: scrollBarY => this.scrollBarY.set(_.isUndefined(scrollBarY) ? true : scrollBarY), + set_zooming: zooming => this.zooming.set(!!zooming), + set_minZoom: minZoom => this.minZoom.set(_.isUndefined(minZoom) ? minZoom : 0.5), + set_maxZoom: maxZoom => this.maxZoom.set(_.isUndefined(maxZoom) ? maxZoom : 3), + set_hasBouncing: hasBouncing => this.hasBouncing.set(_.isUndefined(hasBouncing) ? true: hasBouncing) // todo: Make this platform dependent. + }); + + this.autorun(() => { + if (!Template.currentData()) return; + this.nativeScrolling.set(!!Template.currentData().overflowScroll); + + this.set_direction(Template.currentData().direction); + this.set_locking(Template.currentData().locking); + this.set_paging(Template.currentData().paging); + this.set_onRefresh(Template.currentData().onRefresh); + this.set_onScroll(Template.currentData().onScroll); + this.set_scrollBarX(Template.currentData().scrollBarX); + this.set_scrollBarY(Template.currentData().scrollBarY); + this.set_zooming(Template.currentData().zooming); + this.set_minZoom(Template.currentData().minZoom); + this.set_maxZoom(Template.currentData().maxZoom); + this.set_hasBouncing(Template.currentData().hasBouncing); + }); +}); + +Template.ionScroll.onRendered(function() { + if (!this.nativeScrolling.get()) { // todo: make this reactive? Is there a use case? + this.scroller = new IScroll(this.$(".scroller-wrapper").get(0)); + + if (!!this.onScroll.get()) { this.scroller.on('scroll', this.onScroll.get()); } + + this.autorun(() => { + this.scroller.options = _.extend(this.scroller.options, { + scrollX: this.direction.get().indexOf('x') !== -1, + scrollY: this.direction.get().indexOf('y') !== -1, + freeScroll: !this.locking.get(), + zoom: this.zooming.get(), + zoomMin: this.minZoom.get(), + zoomMax: this.maxZoom.get(), + bounce: this.hasBouncing.get() + }); + + this.scroller.refresh(); + }); + + this.autorun(() => { + // only available in ionscroll-probe. + //if (_.isFunction(this.onScroll.get())) { console.log(this.onScroll.get()); this.scroller.on('onScroll', this.onScroll.get()); } + }); + + this.$(".scroller-wrapper").children().load(() => this.scroller.refresh()); + } +}); + +Template.ionScroll.helpers({ + nativeScrollingClass: function() { + return Template.instance().nativeScrolling.get() ? 'overflow-scroll' : ''; + } +}); \ No newline at end of file diff --git a/package.js b/package.js index 9eeece8..c745900 100644 --- a/package.js +++ b/package.js @@ -1,7 +1,7 @@ Package.describe({ name: "jandres:ionic", summary: "Ionic components for Meteor. No Angular!", - version: "0.1.41", + version: "0.1.43", git: "https://github.com/JoeyAndres/meteor-ionic.git" }); @@ -13,9 +13,6 @@ Cordova.depends({ Package.onUse(function(api) { api.versionsFrom("1.0"); - api.use([ - "fourseven:scss@3.3.3" - ]); api.use([ "jandres:template-extension@4.0.4", @@ -28,6 +25,7 @@ Package.onUse(function(api) { "tracker", "session", "jquery", + "jandres:iscroll-zoom@5.1.4", "jandres:snapjs@2.0.2", "fourseven:scss@3.3.3" ], "client"); @@ -118,6 +116,9 @@ Package.onUse(function(api) { "components/ionReorderButton/ionReorderButton.html", "components/ionReorderButton/ionReorderButton.js", + "components/ionScroll/ionScroll.html", + "components/ionScroll/ionScroll.js", + "components/ionSideMenu/ionSideMenu.html", "components/ionSideMenu/ionSideMenu.js",