Meteor Swipe [MAINTAINER WANTED]

This package comes with all the bells and whistles for creating an app with swiping between pages. Checkout this repo for some examples.

Getting Started

Add this package to your project:

meteor add ccorcos:swipe

Create some templates. And initialize a swiper with those template names.

Swiper = new Swipe(['page1', 'page2', 'page3', 'page4', 'page5'])

Insert the swiper somewhere and make sure to pass the swiper object.

<template name="main">
  <div class="wrapper">
    {{>swipe Swiper=Swiper}}
  </div>
</template>

Don't forget the helper.

Template.main.helpers
  Swiper: -> Swiper

Control the layout of the pages by reactively setting the left and right pages.

Template.main.rendered = ->

  # initial page
  Swiper.setInitialPage('page1')

  # page control
  Tracker.autorun ->
    if Swiper.pageIs('page1')
      Swiper.leftRight(null, 'page2')

  Tracker.autorun ->
    if Swiper.pageIs('page2')
      Swiper.leftRight('page1', 'page3')

  Tracker.autorun ->
    if Swiper.pageIs('page3')
      Swiper.leftRight('page2', 'page4')


  Tracker.autorun ->
    if Swiper.pageIs('page4')
        Swiper.leftRight('page3', 'page5')

  Tracker.autorun ->
    if Swiper.pageIs('page5')
      Swiper.leftRight('page4', null)

setInitialPage sets the current page without any animation.

To prevent a swipe from starting on a certain element, simply add a no-swipe class to that element.

If you want to be able to click or touch an element within the swiper, you have to use the click function. This takes care of making sure that you touch up inside the element you intent to click.

Swiper.click 'page1', '.pop-up', (e,t) ->
  alert 'hey!'

And if you want to control control swiping, you'll need to set the "swipe-control" class

Swiper.click 'page1', '.next', (e,t) ->
  Swiper.moveRight()

Lastly, if you want to vertically scroll a div, use the scrollable class.

Known Issues

Bugs out when the mouse drags off screen.
Can be abused in Safari with touches somehow.

Uncaught TypeError: Cannot read property 'findAll' of null

I am using the swipe package right now and everything works 99% of the time. However, each time I start the page, I get the Uncaught TypeError: Cannot read property 'findAll' of null error in my browser console but the swipe still works and I can still get to my pages correctly.

I am using Ionic and am hacking apart the MeteorHunt demo. Might something from that be causing the issue?

Also, just once so far Swipe stopped working all together until I restarted my computer. I am guessing it was a user-error problem but maybe it's indicative of something else?

My Router file:

Router.route('/groups',{
  name: 'allGroups',
  template: 'groups',
  layoutTemplate: 'appLayout'
});

Router.route('/groups/myfeed', {
  name: 'myGroups',
  template: 'groups',
  layoutTemplate: 'appLayout'
});

My groups template file with my pages:

<template name="groups">
  {{#contentFor "headerButtonLeft"}}
    <button class="button button-clear pull-left button-positive" data-ion-modal="search">
      {{> ionIcon icon='ios-search'}}
    </button>
  {{/contentFor}}

  {{#contentFor "headerButtonRight"}}
    <button class="button button-clear pull-right button-positive" data-ion-modal="newPost">
      {{> ionIcon icon='ios-plus-empty'}}
    </button>
  {{/contentFor}}

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

  {{#ionView}}
    {{#ionContent}}
      <div class="wrapper">
        {{>swipe Swiper=Swiper}}
      </div>
    {{/ionContent}}
  {{/ionView}}
</template>

<template name="allGroups">
  <div class="scroll-me scrollable">
    {{#ionList}}
      {{#each posts}}
        {{> _postItem post=this path="posts.show"}}
      {{/each}}
    {{/ionList}}
  </div>
</template>

 <template name="myGroups">
      <div class="scroll-me scrollable">
          {{#ionList}}
            {{#each posts}}
              {{> _postItem post=this path="posts.show"}}
            {{/each}}
          {{/ionList}}
      </div>
</template>

and my groups.js file:

this.Swiper = new Swipe(['allGroups', 'myGroups']);

Template.groups.created = function () {
  this.autorun(function () {
    this.subscription = Meteor.subscribe('posts');
  }.bind(this));
};

Template.groups.rendered = function () {
  Session.set('currentTab', 'groups');
  Swiper.setInitialPage(Router.current().route.getName());

  this.autorun(function () {
    if (!this.subscription.ready()) {
      IonLoading.show();
    } else {
      IonLoading.hide();
    }
  }.bind(this));

  Tracker.autorun(function() {
      // checking current page
    if (Swiper.pageIs('allGroups')) {
      Session.set('page','All Charities');
      Router.go('allGroups');
      return Swiper.leftRight(null, 'myGroups');
    }
  });
  Tracker.autorun(function() {
    if (Swiper.pageIs('myGroups')) {
      Session.set('page','My Charities');
      Router.go('myGroups');
      return Swiper.leftRight('allGroups', null);
    }
  });

};

Template.groups.helpers({
  posts: function () {
    return Posts.find({}, {sort: {createdAt: -1, name: -1}});
  },
  Swiper: function() {
    return Swiper;
  },
  page: function(){
    return Session.get('page');
  }
});
Template.allGroups.helpers({
  posts: function () {
    return Posts.find({}, {sort: {createdAt: -1, name: -1}});
  }
});

Template.myGroups.helpers({
  posts: function(){
    return Posts.find({});
  }
});

And the error is being shot at me from ccorcos_swipe.js:92 with this code:

 $(self.t.findAll('.animate')).removeClass('animate');

Is there some other file that is supposed to add to var t = null; before it is getting animated and my code is just preventing it? Any idea where I should start looking?

ccorcos / meteor-swipe Goto Github PK

meteor-swipe's Introduction

Meteor Swipe [MAINTAINER WANTED]

Getting Started

Known Issues

meteor-swipe's People

Contributors

Stargazers

Watchers

Forkers

meteor-swipe's Issues

Multi-touch bug

Layout example

Click and scroll events disabled.

Implement iron-router

Uncaught TypeError: Cannot read property 'findAll' of null

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent