meteoric / meteor-ionic Goto Github PK
View Code? Open in Web Editor NEWIonic components for Meteor. No Angular!
Home Page: http://meteoric.github.io
License: MIT License
Ionic components for Meteor. No Angular!
Home Page: http://meteoric.github.io
License: MIT License
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.
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)
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?
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!
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.
Is the ionic grid (http://ionicframework.com/docs/components/#grid-even) system implemented or will it be implemented?
Many thanks
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?
http://ionicframework.com/docs/nightly/api/service/$ionicGesture/
I think a good gesture library to use would be hammer.js.
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
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
.
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!
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"}}
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 ?
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?
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');
});
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.
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
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 []
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.
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.
http://ionicframework.com/docs/nightly/api/directive/onHold/
#2 might take care of a lot of these
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:
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.
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}}
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}}
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'
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:
And the route definition:
Router.route 'iTrackStores',
path: '/itrack/stores'
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.
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)
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?
http://ionicframework.com/docs/nightly/api/page/keyboard/
Not sure what this provides over their Cordova plugin: https://github.com/driftyco/ionic-plugins-keyboard
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.
Specifically the editable / deletable / sortable functionality.
http://ionicframework.com/docs/nightly/api/directive/ionList/
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 ,
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...
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?
Create some wiki pages for:
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?
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?
Anything I should know before hand?
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.
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.
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
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?
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.