meteoric/meteor-ionic

Ionic components for Meteor. No Angular!

meteor-ionic's Issues

Make android alignments optional?

I have the following layout:

{{#ionBody}}
    {{> ionNavBar class="item-input-inset bar-calm"}}

    {{#ionNavView}}
      {{> yield}}
    {{/ionNavView}}
{{/ionBody}}

One of my routes has an template that has this:

{{#contentFor "headerButtonLeft"}}
    <a href="{{pathFor 'search'}}" class="button icon ion-search"></a>
  {{/contentFor}}

  {{#contentFor "headerTitle"}}
    <h1 class="title">Production Orders</h1>
  {{/contentFor}}

  {{#contentFor "headerButtonRight"}}
    <button class="button">Put Away</button>
  {{/contentFor}}

And as you know, this will render properly on an iOS device, but on an Android, the headerTitle is going to align left, as per this line of code: https://github.com/meteoric/meteor-ionic/blob/master/components/ionHeaderBar/ionHeaderBar.js#L6

Are you guys able to make these platform-based rules optional?

Animation performance

Ionic recently switched to custom JS animations https://github.com/driftyco/ionic/blob/master/js/angular/service/ionicConfig.js#L324

I hacked together a CSS version just to get things working: https://github.com/meteoric/ionic-sass/blob/master/stylesheets/_transitions.scss

We should investigate how to get better performance. Velocity.js? Is iron:router impacting performance at all?

Retain scroll position when going backward in nav stack

IonItem needs more route options

Loving Meteoric! When working with ionItem I need to tap into IronRouter's features such as query, hash, & data. Chris has a great href helper pathFor.

Are you open to a PR on this?

Slide Box

http://ionicframework.com/docs/api/directive/ionSlideBox/

drag-content="false"

Hi.

Is it possible to use this with your {{#ionSideMenuContent}} ?

Or a suggested work around would be great!

Thanks in advance, awesome package, thanks!

Kind regards

Chrs

No such template: ionNavBar

Thanks for a great package,

After deploy to modulus.io i got this error Uncaught Error: No such template: ionNavBar
Working very well on localhost ,

Possible to provide the repo for the demo on the front page?

I was wondering if it is possible to provide the github repo for the http://meteoric.github.io/ front page? I think people could learn a lot from the demo.

using ionSideMenus

i see you have something ported for side menus, but could you explain how to replace the required angular directive? Or is that already done?

http://ionicframework.com/docs/api/directive/ionSideMenus/

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

looks like something needs to be connected to get the scrolling across to work?

is there an example anywhere of these being used? i couldn't see it in the two example apps.

Blending tabs with header

Where do we place the code for the top-positioned tabs if we want to create (something like this)[http://ionicframework.com/docs/components/#striped-style-tabs]?

Currently my template looks like the following

<template name="contentTemplate">

    {{#contentFor "headerTitle"}}
        <h1 class="title">Title</h1>
    {{/contentFor}}


    {{#ionView}}

        <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
            <div class="tabs">
                <a class="tab-item active" href="#">
                    First
                </a>
                <a class="tab-item" href="#">
                    Second
                </a>
            </div>
        </div>

    {{#ionContent}}
        <div class="list">
            {{#each items}}
                {{ name }}
            {{/each}}
        </div>
    {{/ionContent}}
    {{/ionView}}

</template>

but the top tabs are blocking the content

get examples mopre detailed

Hi!
The project is awesome.
Could you post the app code running at http://meteoric.github.io/ for better comprehention?
(just learning ionic and would help me a lot to see the working examples)
Thanks a lot!

how would one go about contributing the popup and slidebox components?

Anything I should know before hand?

Scroll positions - how do they work?

First: Amazing work! Thank you so much, this is a really useful for me.
In your demo apps, I can see that you've got scroll position working correctly - on "Back" it's on the same place it where when you left the page. Do I need to do anything special to get this behavior?

using side menus

Hi! just a short question.
How to enable side menu on just one side?
Eg. if i only put left side menu container, the menu will appear on both sides (the rigth one is empty)

Tabs: activate current tab on page load

As reported by @benstr in meteoric/meteorhunt#3

How do we set the current tab when the page first loads?

Currently the current tab is set when a tab is clicked: https://github.com/meteoric/meteor-ionic/blob/master/components/ionTab/ionTab.js#L2

Badge position is not proper

I try to add badge to meteorhunt, here is my code:

{{> ionTab title="Trending" path="trending" badgeNumber="10" iconOff="ios-bolt-outline" iconOn="ios-bolt" class="tab-item-positive"}}

        {{> ionTab title="Recent" path="recent" badgeNumber="15" iconOff="ios-clock-outline" iconOn="ios-clock" class="tab-item-positive"}}

But the final effect is weird:

ionItem Underscore Error

During ionItem development it was tested with Lo-Dash accidentally included. Lo-Dash is smart enough to know what you want if no predicate is defined in the helper function. Underscore is not and requires a predicate which I did not originally include and now causes an error.

Sorry about this. PR coming...

Scroll

http://ionicframework.com/docs/nightly/api/directive/ionScroll/

Not sure how necessary this is, but perhaps the <ion-infinite-scroll> directive could be worth replicating.

Feature expose-aside-when for side-menu

In the readme it says "expose-aside-when (not sure this is needed)". I would be in need to this feature or is there already an easy way to implement something like this http://codepen.io/mhartington/pen/CvawB ?

ionic - grid

Is the ionic grid (http://ionicframework.com/docs/components/#grid-even) system implemented or will it be implemented?

Many thanks

tabs stay on the top instead bottom on android device

I find it can be set use angular service $ionicConfigProvider as below code:

$ionicConfigProvider.tabs.position("bottom"); //Places them at the bottom for all OS
$ionicConfigProvider.tabs.style("standard"); //Makes them all look the same across all OS

how to deal with it in meteor-ionic ?
Thanks for your help

Toggle Element

I have the toggle element in my project. It's not saving state. After looking a little harder I see that you implemented the toggle as an autoforms element instead of a plain form element. Is there any way the people that don't use autoforms could get a version of that ionic element as a plain working form element?

Thanks!

Adding {{> UI. contentBlock }} to ionNavBar?

When working with the ionNavBar component, the content changes every time we go to a new route. This is due to the different yield helpers in the template that seem to reinitialize themselves.

How can I define just one time the content inside the ionNavBar and make it the same across all routes?

Would it not be a good solution for that to add {{> UI. contentBlock }} inside the ionNavBar template? (like it is for ionHeaderBar, ionFooterBar, ionSubheaderBar...)

This would not prevent users to define their own yield helpers in {{> UI. contentBlock }} if they want to.

fourseven:[email protected]: No compatible build found

on starting a new app with just meteoric, there was no styling applied.
i assume since scss is not a dep of the meteoric package?

so i looked at one of your demo apps and pulled out the various packages there, but now hit the issue below.

any chance you would switch to stylus?

   While checking for fourseven:[email protected]:
   error: No compatible build found

=> Your application has errors. Waiting for file change.
^C                                            
metion> meteor update
This project is already at Meteor 1.0.3.1, the latest release.
=> Errors while upgrading packages:           

While checking for fourseven:[email protected]:
error: No compatible build found

metion> meteor update
This project is already at Meteor 1.0.3.1, the latest release.

Changes to your project's package version selections from updating package versions:

accounts-base                      added, version 1.1.3
accounts-password                  added, version 1.0.6
aldeed:autoform                    added, version 4.2.2
aldeed:collection2                 added, version 2.3.1
aldeed:simple-schema               added, version 1.1.0
anti:fake                          added, version 0.4.1
email                              added, version 1.0.5
fourseven:scss                     added, version 1.0.0
less                               added, version 1.0.12
localstorage                       added, version 1.0.2
matb33:collection-hooks            added, version 0.7.9
meteoric:autoform-ionic            added, version 0.1.4
meteoric:ionic-sass                added, version 0.1.7
meteoric:ionicons-sass             added, version 0.1.5
momentjs:moment                    added, version 2.8.4
npm-bcrypt                         added, version 0.7.7
service-configuration              added, version 1.0.3
sha                                added, version 1.0.2
softwarerero:accounts-t9n          added, version 1.0.5
srp                                added, version 1.0.2
useraccounts:core                  added, version 1.5.0
useraccounts:ionic                 added, version 1.5.0
wizonesolutions:underscore-string  added, version 1.0.0
zimme:iron-router-active           added, version 1.0.1

metion> meteor
[[[[[ ~/dev/shumi/fbox/metion ]]]]]           

=> Started proxy.                             
=> Started MongoDB.                           
=> Errors prevented startup:                  

   While building the application:
   client/layouts/app.scss: Scss compiler error: undefined
   /Users/dc/dev/shumi/fbox/metion/client/layouts/app.scss:1: file to import not
   found or unreadable:
   '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic'
   Current dir: /Users/dc/dev/shumi/fbox/metion/client/layouts/


=> Your application has errors. Waiting for file change.
^C                                            
metion> scss --version
Sass 3.4.10 (Selective Steve)

Ability to add data-* attribute inside ionItem

When using the ionItem component inside ionList for the sidebar, there is currently no way to specify data-* attributes. It would be useful for adding things like data-ion-menu-close and others.

Events

http://ionicframework.com/docs/nightly/api/directive/onHold/
#2 might take care of a lot of these

Suggestions

Instead of having to manually add the meteoric:ionic-sass package
Inside the main meteoric:ionic package.js, add the following:

api.addFiles(['ionic/css/ionic.min.css'
        ,'ionic/fonts/ionicons.eot'
        ,'ionic/fonts/ionicons.ttf'
        ,'ionic/fonts/ionicons.svg'
        ,'ionic/fonts/ionicons.woff'
        ],'client',{isAsset:true});

api.addFiles('linkToCss.html','client');

Assuming you put the ionic folder inside the package

Then, in linkToCss.html, insert:

link rel="stylesheet" type="text/css" href="/packages/meteoric_ionic/ionic/css/ionic.min.js"

Would this be a better approach?

Routes without data cause rendering to fail

When using a route without a data attribute the route fails with:

Here is an example of working and non-working code:

Router.map ->
  @route 'home',
    path: '/'
    action: ->
      # Wait on collections
      # @wait Meteor.subscribe('someCollection')
      @render 'home'

    # If I comment out the below three lines the application fails to load 
    # with the above error in the console.
    # data: ->
    #   # Return some collections pointer
    #   return []

  @route 'login',
    path: '/login'
    action: ->
      @render 'login'
    data: ->
      return []

Segment Control

Is it possible to create segmented control (UISegmentedControl) using meteor-ionic?

Theres https://github.com/tinga-dev/ti-ionic-segmented-control but it can't be used directly in meteor-ionic.

Tap to scroll to top

iOS users are accustomed to being able to tap the status bar to be able to scroll the main view back to the top. I think this requires some Cordova integration.

Template refactor?

I noticed that there's a lot of templates with

<div class="{{classes}}">
    {{> UI.contentBlock}}
</div>

I feel like there's gotta be a way to consolidate them somehow maybe?

Popup

http://ionicframework.com/docs/nightly/api/service/$ionicPopup/

IonLoading.show() gives error

Can you guys refactor so that we don't have to send an object into the show method? That way we can just do IonLoading.show(). Currently, doing that will throw an error because the delay property is not found.

Android animation performance

In meteoric/contacts#1 @rclai reported that:

I can see the left/right swipe more but there's still a fade out of the current content before the new content swipes in.

In the browser, there's a seamless transition that doesn't involve the fading out of the current content.

headerTitle and template data

Template data (set w ironRouter) shows up in content but does not appear in header.

{{#contentFor "headerTitle"}}
    <h1 class="title">{{_id}}</h1> <!-- won't show up -->
{{/contentFor}}
{{#ionView}}
    {{#ionContent}}
        <h1>{{_id}}</h1> <!-- shows up -->
    {{/ionContent}}
{{/ionView}}

Back button in nav view requires data attribute in Router.route

The back button in a nav view requires data attribute in Router.route directive to work as intended.
Here's a gist demonstrating the dependency:
https://gist.github.com/rjakobsson/2a7ead7798899128350a

These files were tested on [email protected] using the latest versions of:

• [email protected]
• [email protected]
• [email protected]
• iron:[email protected]
• meteoric:[email protected]
• fourseven:[email protected]
• meteoric:[email protected]
• meteoric:[email protected]

Platform

http://ionicframework.com/docs/nightly/api/service/$ionicPlatform/

Some interesting stuff in here, but there might be a 3rd party library we can include to get the same functionality.

Lists

Specifically the editable / deletable / sortable functionality.

http://ionicframework.com/docs/nightly/api/directive/ionList/

On button click active effects

I noticed that there were no :active CSS rules on buttons, then I realized that the Ionic active effects are done via JavaScript by injecting the activated class and removing it.

http://ionicframework.com/docs/components/#buttons

Are you guys able to put a global listener somewhere for the buttons (ionBody perhaps?):

$(document).on('mousedown', '.button', function () {
    $(this).addClass('activated');
}).on('mouseup', '.button', function () {
    $(this).removeClass('activated');
});

can't get #ionTabs "has-badge" to work

With the risk of asking something silly easy, I've been googling around and been unable to get this to work.

Any idea why the code below refuses to display the badge count?

{{#ionTabs style="ios has-badge"}}
        {{> ionTab title="Home" path="home" iconOff="ios-heart-outline" iconOn="ios-heart" badge="{{badgeCountHelper}}" badge-style="badge-assertive"}}
{{/ionTabs}}

ionItem routes not working after update meteoric:[email protected]

After update my code doesn't work anymore with routes in <#ionItem>, options path='' and route='' crashes at debug with 'call error of undefined'. The only option working now is href='/xxxxxx'

Error with path attribute in IonItem

Hello,

Just found that specifying a path attribute for the ionItem component triggers the following error client-side:

Exception in template helper: TypeError: Cannot read property 'call' of undefined

Here is my code:

{{#ionItem path="iTrackStores" buttonRight=true class="item-icon-right"}}
  iTrack {{>ionIcon icon="ios-arrow-forward" class="assertive"}}
{{/ionItem}}

And the route definition:

Router.route 'iTrackStores',
  path: '/itrack/stores'

I've followed this example though.

Page transition when using sideMenu

First of all thank you all for this great package. My issue is when I'm using the sideMenu as navigation there's still a slide in animation during page transition. This creates double slide effects with the sideNavigation closing and the page transitioning with slide animation. Is there a way to disable the slide effect when using the sideMenu as navigation?

Keyboard

http://ionicframework.com/docs/nightly/api/page/keyboard/

Not sure what this provides over their Cordova plugin: https://github.com/driftyco/ionic-plugins-keyboard

IonLoading pattern usage

I'm trying to implement this routing pattern:

Router.route('/myroute', {
  ... other route stuff ...
  onBeforeAction: function () {
    IonLoading.show({ delay: 0 });
    this.next();
  },
  onAfterAction: function () {
    IonLoading.hide();
  }
})

But I'm getting this error:

Exception in callback of async function: TypeError: Cannot read property 'firstNode' of undefined
    at Object.IonLoading.hide

This probably happens because the firstNode hasn't finished rendering when onAfterAction gets triggered.

Is there a pattern you guys follow to get that loading screen to pop up when there's a route with say, a big subscription?

Also, can you guys refactor so that we don't have to send an object into the show method? That way we can just do IonLoading.show(). Currently, doing that will throw an error because the delay property is not found.

Swipe to go back

iOS users are accustomed to being able to swipe right to navigate back. We won't be able to mimic the exact functionality without some major enhancements to iron:router (read Ionic's blog post about how they implemented this), but I think a simple event handler that triggers a history.back on swipe could be sufficient.

LICENSE

Ionic is licensed under MIT.
The meteor-ionic repo doesn't contain any Ionic code, but https://github.com/meteoric/ionic-sass and https://github.com/meteoric/ionicons-sass do.

We are currently bundling https://github.com/jakiestfu/Snap.js/ which is MIT
We plan on bundling https://github.com/hammerjs/hammer.js which is also MIT

Are we allowed to bundle these libraries together? Can we also use the MIT license?

Create a Getting Started guide

Create some wiki pages for:

• Getting started / installation
• Creating a navigation UI
• Creating a tab UI (with cross-platform UI)
• Modals
• Autoform
• Accounts templates

Gesture

http://ionicframework.com/docs/nightly/api/service/$ionicGesture/

I think a good gesture library to use would be hammer.js.

Template instance custom properties inaccessible inside ion tags

When you have something like this:

<template name="template">
   {{#ionBody}}
      {{#ionSomething}}
            {{myCustomHelper}}
      {{/ionSomething}}
   {{/ionBody}}
</template>

And you try to do this pattern:

Template.template.created = function () {
    this.myCustomProperty = new ReactiveVar();
};

Template.template.helpers({
    myCustomHelper: function () {
        return Template.instance().myCustomProperty.get();
    }
});

You won't be able to access that custom property that you've defined in the created callback because the template scope has changed. I was wondering whether you guys have ran into this issue and what you guys have done to deal with it?

This pattern is similar to what's being demonstrated here: https://www.discovermeteor.com/blog/template-level-subscriptions/

What I have done was set custom properties in the this.data property, but according to Meteor docs, that's supposed to be read-only.