How to use Meteor FlowRouter.reload() - meteor

I've found the FlowRouter documentation for FlowRouter.reload(), but I've been unable to find specific code examples and can't get it working.
In my app, I have a template that uses some clever javascript (Isotope) to reposition elements as the page resizes. Sometimes the user navigates away, resizes the browser window, and then returns - to a messed up page that should refresh and redraw to reposition the elements for the re-sized window.
This is my route. How would I use FlowRouter.reload() to reload/refresh just the "work" template area? Alternatively, how would I use it to reload/refresh the whole layout template or window?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});

In case anyone else comes here, this was solved with a great help from Hugh in the Meteor forum.
The solution did not use reload. Instead, it made use of Triggers in FlowRouter to check if the template was being reloaded, refresh it if so, and then stop once refreshed to prevent an endless loop.
Here is how it worked out.
// handle refreshing div on every load of div
let fireReload = false;
function reloadCheck(context, redirect, stop) {
if (fireReload) {
console.log('Hugh is Awesome and also reloading screen...');
FlowRouter.reload();
stop();
}
}
function routeCleanup() {
fireReload = !fireReload;
}
FlowRouter.route('/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
triggersEnter: [reloadCheck],
triggersExit: [routeCleanup]
});

Related

Gitkit - popupMode and signInSuccess callback do not work well together

I'm using popupMode: true on my Sign In page, and have a signInSuccess callback function on my Widget page:
var config = {
...
callbacks: {
signInSuccess: function(tokenString, accountInfo,
opt_signInSuccessUrl) {
console.log(JSON.stringify(accountInfo));
return true;
}
},
...
}
My function gets called, and the user gets signed-in in the original window, but the widget popup window does not close.
Is this a defect or am I missing something?
Yeah this behavior has been changed for popups when signInSuccess is provided. There were problems with the old behavior. The idea here is that when callback is provided, the developer wants to handle that on their own. The page is still closed automatically when no callback is provided. In your case you will need to close manually.
You can add this snippet before you return true:
if (window.opener) {
window.close();
}

Meteor Iron Router - Router.go callback possible?

I've got a link that I want the user to press. When they press it, the router will go to a certain template and then run Smoothscroll.js code to animate and scroll down to the anchor tag.
//When the user clicks on the link to get to the #contact anchor...
//The code below does not work.
Router.go('index');
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1200);
Router.go('index') works just fine.
$('html,body').animate({
scrollTop: $('#contact').offset().top
}, 1200);
Works as well by itself on the index template.
But when I try to run them together, the router goes to index, but the scrolling does not work.
Any idea how I can do this?
EDIT
This is what I have for the latest Meteor 1.0+ and a path like /#contact
Router.route('/', {
name: 'index'
});
Router.onAfterAction(function() {
var self = this;
// always start by resetting scroll to top of the page
$(window).scrollTop(0);
// if there is a hash in the URL, handle it
if (this.params.hash) {
// now this is important : Deps.afterFlush ensures that iron-router rendering
// process has finished inserting the current route template into DOM so we
// can manipulate it via jQuery, if you skip this part the HTML element you
// want to scroll to might not yet be present in the DOM (this is probably
// why your code fails in the first place)
Tracker.afterFlush(function() {
if (typeof $("#" + self.params.hash).offset() != "undefined"){
var scrollTop = $("#" + self.params.hash).offset().top;
$("html,body").animate({
scrollTop: scrollTop
});
}
});
}
});
Unless you're doing something fancy you probably don't want to use Router.go and instead let iron-router manage routing on anchor click as it normally does.
As far as scrolling to an element is concerned, this is the onAfterAction hook I'm using, it supports any route and any hash (/anyroute#anyhash).
Router.onAfterAction(function() {
// always start by resetting scroll to top of the page
$(window).scrollTop(0);
var hash=this.params.hash;
// if there is a hash in the URL, handle it
if (hash) {
// now this is important : Tracker.afterFlush ensures that iron-router
// rendering process has finished inserting the current route template
// into DOM so we can manipulate it via jQuery, if you skip this part
// the HTML element you want to scroll to might not yet be present in
// the DOM (this is probably why your code fails in the first place)
Tracker.afterFlush(function() {
var element=$("#"+hash);
var scrollTop = element.offset().top;
$("html,body").animate({
scrollTop: scrollTop
});
});
}
});

Framework7 starter page "pageInit" NOT WORKING

anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});

Error with jquery hover and ajax pagination when they're together

Thanks for reading. I have some codes on my wordpress site, the first one adds an overlay over an image with a color, the article title and a link to go to the project. The second code adds an ajax pagination using jQuery.
The thing is that i have my projects with images and the jquery overlay owrking perfect, but when they click on the previous projects link that calls the ajax pagination, the jquery overlay stops working.
I have been trying different options, but maybe i'm not on the correct way to solve it. Does anyone has a clue?
Thanks in advance.
The codes:
// PORTFOLIO HOVER EFFECT
jQuery('ul.portfolio-thumbs li').hover(function(){
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
}, function() {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
});
// POSTS NAVIGATION
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
I've found the solution in the same day and #BrockAdams helped me with the doubts. I'm putting here the code because it can be helpful for someone.
jQuery('ul.portfolio-thumbs li').live('hover', function(event){
if (event.type == 'mouseenter') {
jQuery(".overlay", this).stop().animate({top:'0px'},{queue:false,duration:300});
} else {
jQuery(".overlay", this).stop().animate({top:'190px'},{queue:false,duration:300});
}
});
jQuery('#posts-navigation a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#ajax-container').fadeOut(500).load(link + ' #ajax-inner', function(){ jQuery('#ajax-container').fadeIn(500); });
});
You can post answers to your own question.
And, you needed to use live()Doc on the hover, because the pagination presumably loads in new portfolio-thumbs lis.
Without the live(), these new lis would have no events attached to them (unless you re-called jQuery('ul.portfolio-thumbs li').hover after every pagination event).
Live is easier, and avoids the pitfall of having multiple copies of the same event-listener attached to an element.
And, yes, you can use both live() calls (or more) on the same page without problems.

Volume muting when player is hidden / shown with jQuery

I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.

Resources