Implementation of http://ionicframework.com/docs/api/directive/ionList/

.gitignore

@@ -1,2 +1,4 @@
+/.idea
+.versions
 .build*
 .DS_Store

README.md

@@ -1,17 +1,17 @@
-![](http://f.cl.ly/items/391y4708420P0H001k1G/meteoric.png)
+![Meteoric Logo](meteoric-logo.png)
+
+[![Gitter](https://badges.gitter.im/JoeyAndres/meteor-ionic.svg)](https://gitter.im/JoeyAndres/meteor-ionic?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
 # meteor-ionic
 
 ### Build [Ionic](http://ionicframework.com/) apps in [Meteor](https://www.meteor.com/)!
 
-## NOTE: This package is no longer being actively maintained. 
-
-If you are interested in maintaining it, contact me through [my Github profile](https://github.com/nickw). Now that Meteor is officially supporting (and actively recommending) React and Angular, I suggest using [Ionic](https://github.com/driftyco/ionic), [Ionic 2](https://github.com/driftyco/ionic2) or [Reapp](https://github.com/reapp) as alternatives for building hybrid mobile apps with Meteor.
-
 ## Overview
 
 This is an attempt at **real Ionic and Meteor integration**. This is not just Ionic's CSS framework wrapped in a Meteor package. It aims to be a complete port of [Ionic’s Angular directives](http://ionicframework.com/docs/api/) to [Meteor Blaze](https://www.meteor.com/blaze) templates.
 
+Note: This is a forked of meteoric:ionic, which is now not maintained. In response, I decided to fork it, and maintain this package for my own. I have written acceptance test on [JoeyAndres/ionic-demo](https://github.com/JoeyAndres/ionic-demo), which is a fork of meteoric/demo.
+
 ## Why?
 [Ionic](http://ionicframework.com/) is arguably the most comprehensive, polished, cross-platform mobile framework available. But unfortunately a large portion of its functionality comes from Angular directives. [I'm not a fan of trying to force-fit Angular into Meteor](https://medium.com/space-camp/your-meteor-app-probably-doesnt-need-angular-13986a0323f6), so I wanted to see if I could rewrite Ionic specifically for Meteor.
 
@@ -22,14 +22,27 @@ Check out the [GUIDE.md](GUIDE.md) for a guide on how to get started.
 
 **Beta** See the TODO section below to see which Angular Directives have been ported to Blaze.
 
+## Install
+
+```bash
+meteor add jandres:ionic
+```
+
 ## Dependencies
-Rather than include compiled or CDN versions of Ionic's CSS Framework we’ve extraced it into two separate packages:
 
-- [meteoric:ionicons-sass](http://github.com/meteoric/ionicons-sass) Ionic’s Ionicons set wrapped for Meteor.
-- [meteoric:ionic-sass](http://github.com/meteoric/ionic-sass) The base Ionic CSS Framework wrapped for Meteor.
+- [jandres:meteoric-sass](https://github.com/JoeyAndres/meteoric-sass/) Ionic's scss only package and currently up to date with ionic v1.2.4
 
 ## Examples
 
+### Demo of all components
+The demo app of various ionic components
+
+[Demo](http://jandres-ionic.meteor.com/) |  [Code](https://github.com/JoeyAndres/ionic-demo)
+
+## Pre-fork Examples
+
+The following are examples prior to this fork.
+
 ### Contacts App
 A simple CRUD app to manage contacts.
 
@@ -40,13 +53,6 @@ A [Product Hunt](http://producthunt.com) clone built in Meteor Ionic. (In Progre
 
 [Demo](http://meteorhunt.meteor.com/) |  [Code](https://github.com/meteoric/meteorhunt)
 
-### Demo of all components
-The demo app of various meteoric components
-
-[Demo](http://meteor-ionic.meteor.com/) |  [Code](https://github.com/meteoric/demo)
-
-You can also keep track of the various other repos from the [Meteoric team](https://github.com/meteoric)
-
 ## TODO
 
 ### Angular Directives to convert to Blaze:
@@ -67,15 +73,15 @@ You can also keep track of the various other repos from the [Meteoric team](http
   * [x] ion-footer-bar
 * [x] Keyboard (requires [cordova](http://cordova.apache.org/) integration)
 * [ ] Lists (needs edit/remove/sort functionality)
-  * [ ] ion-list
-  * [ ] ion-item
-  * [ ] ion-delete-button
-  * [ ] ion-reorder-button
-  * [ ] ion-option-button
+  * [x] ion-list
+  * [x] ion-item
+  * [x] ion-delete-button
+  * [x] ion-reorder-button
+  * [x] ion-option-button
   * [ ] collection-repeat
 * [x] Loading
 * [x] Modal
-* [x] Navigation (requires [iron:router](https://github.com/EventedMind/iron-router) integration)
+* [x] Navigation (requires [iron:router](https://github.com/EventedMind/iron-router) integration)a
   * [x] ion-nav-view
   * [x] ion-view
   * [x] ion-nav-bar
@@ -87,9 +93,9 @@ You can also keep track of the various other repos from the [Meteoric team](http
 * [x] Platform
 * [x] Popover
 * [x] Popup
-* [ ] Scroll
-  * [ ] ion-scroll
-  * [ ] ion-infinite-scroll
+* [x] Scroll
+  * [x] ion-scroll
+  * [x] ion-infinite-scroll
 * [x] Side Menus
   * [x] ion-side-menus
   * [x] ion-side-menu-content
@@ -101,6 +107,10 @@ You can also keep track of the various other repos from the [Meteoric team](http
 * [x] Tabs (requires [iron:router](https://github.com/EventedMind/iron-router) integration)
   * [x] ion-tabs
   * [x] ion-tab
+
+### Code Style Change: 
+These are code styles that I want to impose on this forked repo.
+* [ ] Get rid of all session variables.
 
 ## License
 [MIT License](https://github.com/meteoric/meteor-ionic/blob/master/LICENSE)

components/ionBody/ionBody.js

@@ -18,6 +18,7 @@ Template.registerHelper('isAndroid', function () {
   return Platform.isAndroid();
 });
 
+// todo: This is a duplicate of METEORIC.PLATFORM, what to do?? Do we put the Meteor.isCordova test there?
 Template.ionBody.helpers({
   platformClasses: function () {
     var classes = ['grade-a'];

components/ionContent/ionContent.html

@@ -1,7 +1,30 @@
 <template name="ionContent">
-  <div class="scroll-content ionic-scroll">
-    <div class="{{classes}}">
-      {{> UI.contentBlock}}
-    </div>
-  </div>
+    {{#if scroll}}
+    <ion-content class="scroll-content
+                        ionic-scroll
+                        {{#if hasHeader}}has-header{{/if}}
+                        {{#if hasFooter}}has-footer{{/if}}">
+        {{#ionScroll
+          class=classes
+          direction=direction
+          locking=locking
+          padding=padding
+          overflowScroll=overflowScroll
+          scrollbarX=scrollbarX
+          scrollbarY=scrollbarY
+          startX=starX
+          startY=startY
+          onScroll=onScroll
+          onScrollComplete=onScrollComplete
+          hasBouncing=hasBouncing
+          scrollEventInterval=scrollEventInterval
+          stopPropagation=false}}
+        {{> Template.contentBlock}}
+        {{/ionScroll}}
+    </ion-content>
+    {{else}}
+    <ion-content>
+        {{> Template.contentBlock}}
+    </ion-content>
+    {{/if}}
 </template>

components/ionContent/ionContent.js

@@ -1,39 +1,104 @@
+let ionContentDefault = {
+    direction: 'y',
+    locking: true,
+    padding: true,
+    scroll: true,
+    overflowScroll: false,
+    scrollBarX: true,
+    scrollBarY: true,
+    startX: '0',
+    startY: '0',
+    onScroll: null,
+    onScrollComplete: null,
+    hasBouncing: true,
+    scrollEventInterval: 10
+};
+
+Template.ionContent.onCreated(function() {
+    this.direction = new ReactiveVar(ionContentDefault.direction);
+    this.locking = new ReactiveVar(ionContentDefault.locking);
+    this.padding = new ReactiveVar(ionContentDefault.padding);  // todo: make this platform dependent.
+    this.scroll = new ReactiveVar(ionContentDefault.scroll);
+    this.overflowScroll = new ReactiveVar(ionContentDefault.overflowScroll);  // todo: Make a Meteoric config for defaults.
+    this.scrollBarX = new ReactiveVar(ionContentDefault.scrollBarX);
+    this.scrollBarY = new ReactiveVar(ionContentDefault.scrollBarY);
+    this.startX = new ReactiveVar(ionContentDefault.startX);
+    this.startY = new ReactiveVar(ionContentDefault.startY);
+    this.onScroll = new ReactiveVar(ionContentDefault.onScroll);
+    this.onScrollComplete = new ReactiveVar(ionContentDefault.onScrollComplete);
+    this.hasBouncing = new ReactiveVar(ionContentDefault.hasBouncing);  // tdo: Make platform dependent.
+    this.scrollEventInterval = new ReactiveVar(ionContentDefault.scrollEventInterval);
+
+    this.autorun(() => {
+        let td = Template.currentData();
+        if (!td) return;
+        this.direction.set(td.direction || ionContentDefault.direction);
+        this.locking.set(!!td.locking ? td.locking : ionContentDefault.locking);
+        this.padding.set(!!td.padding ? td.padding : ionContentDefault.padding);
+        this.scroll.set(!!td.scroll ? td.scroll : ionContentDefault.scroll);
+        this.overflowScroll.set(!!td.overflowScroll ? td.overflowScroll : ionContentDefault.overflowScroll);
+        this.scrollBarX.set(!!td.scrollBarX ? td.scrollBarX : ionContentDefault.scrollBarX);
+        this.scrollBarY.set(!!td.scrollBarY ? td.scrollBarY : ionContentDefault.scrollBarY);
+        this.startX.set(!!td.startX ? td.startX : ionContentDefault.startX);
+        this.startY.set(!!td.startX ? td.startY : ionContentDefault.startY);
+        this.onScroll.set(td.onScroll);
+        this.onScrollComplete.set(td.onScrollComplete);
+        this.hasBouncing.set(!!td.hasBouncing ? td.hasBouncing : ionContentDefault.hasBouncing);
+        this.scrollEventInterval.set(!!this.scrollEventInterval ? this.scrollEventInterval : ionContentDefault.scrollEventInterval);
+    });
+});
+
 Template.ionContent.helpers({
-  classes: function () {
-    var classes = ['content'];
+    hasHeader: function() { return METEORIC.hasHeader.get(); },
 
-    if (this.class) {
-      classes.push(this.class);
-    }
+    hasFooter: function() { return METEORIC.hasFooter.get(); },
 
-    if (this.scroll !== false) {
-      classes.push('overflow-scroll');
-    }
+    classes: function () {
+        var classes = ['content'];
 
-    if (Session.get('hasHeader')) {
-      classes.push('has-header');
-    }
+        if (this.class) {
+            classes.push(this.class);
+        }
 
-    if (Session.get('hasSubheader')) {
-      classes.push('has-subheader');
-    }
+        if (this.scroll !== false) {
+            //classes.push('overflow-scroll');
+            classes.push('scroll');
+        }
 
-    if (Session.get('hasTabs')) {
-      classes.push('has-tabs');
-    }
+        if (Session.get('hasSubheader')) {
+            classes.push('has-subheader');
+        }
 
-    if (Session.get('hasTabsTop')) {
-      classes.push('has-tabs-top');
-    }
+        if (Session.get('hasTabs')) {
+            classes.push('has-tabs');
+        }
 
-    if (Session.get('hasFooter')) {
-      classes.push('has-footer');
-    }
+        if (Session.get('hasTabsTop')) {
+            classes.push('has-tabs-top');
+        }
 
-    if (Session.get('hasSubfooter')) {
-      classes.push('has-subfooter');
-    }
+        if (Session.get('hasFooter')) {
+            classes.push('has-footer');
+        }
 
-    return classes.join(' ');
-  }
-});
+        if (Session.get('hasSubfooter')) {
+            classes.push('has-subfooter');
+        }
+
+        return classes.join(' ');
+    },
+
+    direction: function() { return Template.instance().direction.get(); },
+    locking: function() { return Template.instance().locking.get(); },
+    padding: function() { return Template.instance().padding.get(); },
+    scroll: function() { return Template.instance().scroll.get(); },
+    overflowScroll: function() { return Template.instance().overflowScroll.get(); },
+    scrollBarX: function() { return Template.instance().scrollBarX.get(); },
+    scrollBarY: function() { return Template.instance().scrollBarY.get(); },
+    startX: function() { return Template.instance().startX.get(); },
+    startY: function() { return Template.instance().startY.get(); },
+    onScroll: function() { return Template.instance().onScroll.get(); },
+    onScrollComplete: function() { return Template.instance().onScrollComplete.get(); },
+    hasBouncing: function() { return Template.instance().hasBouncing.get(); },
+    scrollEventInterval: function() { return Template.instance().scrollEventInterval.get(); }
+});

components/ionDeleteButton/ionDeleteButton.html

@@ -0,0 +1,8 @@
+<template name="ionDeleteButton">
+    <div class="item-left-edit item-delete enable-pointer-events
+                {{#if showDelete}}visible active{{/if}}">
+        <ion-delete-button
+                class="{{class}} button icon button-icon item-left-editable">
+        </ion-delete-button>
+    </div>
+</template>

components/ionDeleteButton/ionDeleteButton.js

@@ -0,0 +1,13 @@
+Template.ionDeleteButton.onCreated(function() {
+    let parent = this.parent((t) => t.view.name === "Template.ionItem", true);
+    if (!parent) { throw "Template.ionDeleteButton must be a descendant of Template.ionItem."; }
+    _.extend(this, {
+        showDelete: parent.showDelete
+    });
+});
+
+Template.ionDeleteButton.helpers({
+    showDelete: function() {
+        return Template.instance().showDelete.get();
+    }
+});

components/ionFooterBar/ionFooterBar.html

@@ -1,5 +1,7 @@
 <template name="ionFooterBar">
-  <div class="{{classes}}">
-    {{> UI.contentBlock}}
-  </div>
-</template>
+    <div class="bar bar-footer {{classes}}">
+        <div class="buttons">{{> yield "footerButtonLeft"}}</div>
+        <div class="title">{{> yield "footerTitle"}}</div>
+        <div class="buttons">{{> yield "footerButtonRight"}}</div>
+    </div>
+</template>