Slick keybindings left and right only work when the focus is on a slide. When the reveal modal is opened the focus is not on the slide thus the keybindings wont work. I am looking for a way to either set the focus correctly or set more of a global keybinding but keep in mind there may be more than one gallery on a page. Any suggestions would be greatly appreciated.
$('.galleryGroup').each(function(){
if (typeof $(this).data('gallery') !== 'undefined'){
var id = $(this).data('gallery');
// Open reveal on click
$('.galleriesImage'+id).click(function(){
// Open Reveal Modal
$('#galleriesReveal'+id).foundation('open');
// Cancel Any previously created reveals
$(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
// Set the inital slide
if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
// Initiate slideshow
$('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
// Set focus on the slideshow
$('something').focus();
}).css('cursor','pointer');
}
});
With slick it only works when one of the buttons (prev / next) is focused or one of the slides. It does not work when you focus the whole slideshow
$(document).ready(function(){
$(document).foundation();
$('.galleryGroup').each(function(){
if (typeof $(this).data('gallery') !== 'undefined'){
var id = $(this).data('gallery');
// Open reveal on click
$('.galleriesImage'+id).click(function(){
// Open Reveal Modal
$('#galleriesReveal'+id).foundation('open');
// Cancel Any previously created reveals
$(window).on('closed.zf.reveal',function(){ $('#slides'+id).slick('unslick'); });
// Set the inital slide
if (typeof jQuery(this).data('ref') !== 'undefined'){ var iid=jQuery(this).data('ref'); }else{var iid=0;}
// Initiate slideshow
$('#slides'+id).slick({infinite: true,dots: false,lazyLoad: 'ondemand',autoplay: false,initialSlide: iid});
// Set focus on the first slide
//setTimeout(function() {
$('#slides'+id+' .slick-slide').eq(0).focus()
//}, 0);
}).css('cursor','pointer');
}
});
});
In general there are many parts which cna be simplified using the Foundation Sites API and better logic in the code.
https://codepen.io/DanielRuf/pen/RQmPbd
Related
I am trying to get this series of slideshows to fade in/out on scroll.
Trying to get it to do gradual fade but am not getting anywhere with this.
https://thetulip.community/Shannon-Garden-Smith
<script>
$(window).scroll(function() {
$(".image 1").css({
'opacity' : 0.5-(($(this).scrollTop())/20)
});
});
</script>
I tried this but to no avail!
My knowledge of Java is limited, so I'm not sure how to have each one fade in and out on scorll.
Any help would be beyond appreciated.
Thank you,
S
Welcome to the community.
I'm not sure which library you're using for your slideshow presentation, but jQuery has built in methods to fade HTML elements in or out. You can view them here:
https://api.jquery.com/fadeIn/
https://api.jquery.com/fadeout/
Note that each method has an optional function to call once the animation is completed, which is called once per element match. One approach could be to call fadeOut() on click, and then call fadeIn() within the fadeOut method's complete function. For example:
var images = [
"https://freight.cargo.site/w/750/i/0c4f83626e13ce4aa69fee4a84d02618c43afa3ff33d3c6bbd8fd6e265aa5538/01-03-downwrong.jpg",
"https://freight.cargo.site/w/750/i/3aa2564a6c11b13ef5c44820c69b00563e89ddd572372d52d60b6a0bfd80d1bc/01-04-downwrong.jpg"
]
var i = 0;
$(function() {
$('img').attr('src', images[i]);
});
$('img').click(function() {
$(this).fadeOut('slow', function() {
i = i === images.length - 1 ? 0 : i + 1;
$('img').attr('src', images[i]);
$(this).fadeIn('slow');
});
});
Here's a fiddle: https://jsfiddle.net/matthewmeppiel/n28hg4qj/5/
I have written this simple demo component to demonstrate a problem. The component code is below
App.FocusOutComponent = Em.Component.extend({
attributeBindings: ['tabindex'],
tagName: 'focus-out',
setFocus: function() {
console.log('clicked focus-out container');
this.$().find('button').focus();
console.log('focus set to button');
}.on('click'),
focussedOut: function() {
console.log('focussedOut from outer container');
}.on('focusOut'),
});
{{#focus-out id="focus-container" tabindex="-1"}}
<button id="text-button">Test Button</button>
{{/focus-out}}
When I run this and click on the focus-out element, this is the order of the logs. Link to demo
clicked focus-out container
focussedOut from outer container
focus set to button
Now when I am trying to write acceptance tests for this with the following code.
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
find('focus-out').click();
console.log('after click in test');
});
});
The order of the logs are different. Link to demo.
clicked focus-out container
focus set to button
after click in test
focussedOut from outer container
The focusOut log got printed at the very end instead before the after click log. I was expecting the same order for the logs with just an additional log(after click) in the end.
Im not sure if this is a bug or something wrong with my code.
I also noticed another problem while executing tests. If I have focus on the chrome dev-tools while the tests are running, the focusOut event will not trigger at all.
Some help with this is much appreciated.
the click event doesn't set focus (being a back door route). You'll need to manually set focus then click if you want the same results.
Ember's Click Helper (sends mousedown/mouseup, then click)
function click(app, selector, context) {
var $el = app.testHelpers.findWithAssert(selector, context);
run($el, 'mousedown');
if ($el.is(':input')) {
var type = $el.prop('type');
if (type !== 'checkbox' && type !== 'radio' && type !== 'hidden') {
run($el, function(){
// Firefox does not trigger the `focusin` event if the window
// does not have focus. If the document doesn't have focus just
// use trigger('focusin') instead.
if (!document.hasFocus || document.hasFocus()) {
this.focus();
} else {
this.trigger('focusin');
}
});
}
}
run($el, 'mouseup');
run($el, 'click');
return app.testHelpers.wait();
}
Modified Test
test('test visit / and click button', function() {
expect(0);
visit('/').then(function() {
var el = find('focus-out');
el.focus();
click(el);
console.log('after click in test');
});
});
http://emberjs.jsbin.com/lefazevozi/1/edit?js,console,output
It's also important to note, that tearing down will also call the focus out event. So the main reason you were seeing the focusout at all was because on teardown it was losing focus from the button child.
Maybe focus should be set before mousedown on the click helper in the ember test, though I'm not sure what else that might affect, or if people wouldn't generally be expecting that since jquery doesn't do that.
I have a component which is inserted into the DOM as a '' tag (e.g., default behaviour). The component's job is to wrap a 3rd party jQuery tool and I'm trying to ensure it is responsive to "resize" events so I would like to explicitly set width and height style attributes.
In the component, it is easy enough to being to the style attribute:
attributeBindings: ['style'],
style: function() {
return "width: auto";
}.property('widthCalc'),
In this case, this works but doesn't do anything useful because style just returns a static string (width: auto).
Instead what I want to do is -- based on any change to the computed property widthCalc -- set the width based on the new value. So here's the next logical step:
style: function() {
var width = $('body')[0].offsetWidth;
return 'width: ' + width + 'px';
}.property('widthCalc'),
This too works, dynamically setting the DIV to the width of the body's width (note: this isn't really what I want but it does prove that this simple binding works). Now what I really want is to get the value of width from a computed property on the component but I don't even have to go that far to run into trouble; notice that instead of a global jQuery selector I switch to a localised component-scoped selector:
style: function() {
var width = this.$().offsetWidth;
return 'width: ' + width + 'px';
}.property('widthCalc'),
Unfortunately this causes the page NOT to load and gives the following error:
Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
I imagine this is Ember run-loop juju but I'm not sure how to proceed. Any help would be appreciated.
Since it is not possible to call this.$() in the component before it has been added to the dom, provide an initial value until the component is ready.
For example,
Setting a default value to the property style and on didInsertElement event reopen the class and define style as a calculated property using this.$()
http://emberjs.jsbin.com/delexoqize/1/edit?html,js,output
js
App.MyCompComponent = Em.Component.extend({
attributeBindings:["style"],
style:"visibility:hidden",
prop1:null,
initializeThisStyle:function(){
this.set("style","visibility:visible");
this.reopen({
style:function(){
// var thisOffsetWidth = this.$().get(0).offsetWidth;
return "visibility:visible;color:red;background-color:lightgrey;width:"+this.get("prop1")+"px";
}.property("prop1")
});
}.on("didInsertElement")
});
Alternatively handle the error raised by this.$() and provide a default value. Afterwards when the component will be added the property will be calculated as planned.
http://emberjs.jsbin.com/hilalapoce/1/edit?html,js,output
js
App.MyCompComponent = Em.Component.extend({
attributeBindings:["style"],
style:function(){
try{
this.$();//this will throw an erro initialy
return "visibility:visible;color:red;background-color:lightgrey;width:"+this.get("prop1")+"px";
}catch(e){
return "color:blue";
}
}.property("prop1"),
prop1:null
});
With the component I was trying to solve for I ended coming up with an solution that seems effective to me which I will share below. For an understanding of the why I was getting the error and how one might more directly address that error please see the comment from #melc above.
My Solution
What I'm solving for is resizing a jQuery component wrapped in an Ember component. In many cases, resizing is handled gracefully by CSS alone but some jQuery components -- including the very nice knob component from aterrien -- has JS which gets directly involved and therefore needs the containers width and height properties to be set explicitly by the Ember component so that it reacts appropriately.
When solving for this I realised my use-case had two problems:
Solving for a page resize event
Adjusting to the fact that my knob component was -- at times -- in the DOM but in a part of the DOM which was not visible (more explicitly it was in Bootstrap tab which wasn't visible).
The Resize Listener
The first part of the solution is to listen for a page-level resize of the page. I do this with the following:
resizeListener: function() {
var self = this;
self.$(window).on('resize', Ember.run.bind(self, self.resizeDidHappen));
}.on('didInsertElement'),
Page Resize Handler
When a resize is done at the "page" level I now want my component to inspect what the resize impact has been on the component:
resizeDidHappen: function() {
Ember.run.debounce(this, function() {
// get dimensions
var newWidth = Number(this.$().parent().get(0).offsetWidth);
var newHeight = Number(this.$().parent().get(0).offsetHeight);
// set instance variables
this.set('width', newWidth);
this.set('height', newWidth);
// reconfigure knob
this.$('.knob').trigger(
'configure',
{
width: newWidth,
height: newWidth
}
);
}, 300);
}
This solves the page resize problem if it exists in isolation but to make the component it is probably a good idea to solve for the visibility use case as well (certainly in my case it was critical).
Visibility Handler
Why? Well, for two reasons that I can think of:
Many jQuery components refuse to load or perform badly if they aren't loaded
The ember component appears to not be able to establish a "resize" event when it is not visible in the DOM
The one problem is that there is no DOM-level event for visibility changes, so how do we react to a change in visibility without polling on an interval? Well in most cases there will be a UI element which is controlling the state of visibility. In my case it's Bootstrap's tab bar and in this case they have events that fire on the tabs when they become visible. Great. Here's a selector for Bootstrap's selector (assuming you're inside the content area of the newly visible tab):
visibilityEventEmitter: function(context) {
// since there is no specific DOM event for a change in visibility we must rely on
// whatever component is creating this change to notify us via a bespoke event
// this function is setup for a Bootstrap tab pane; for other event emmitters you will have to build your own
try {
var thisTabPane = context.$().closest('.tab-pane').attr('id');
var $emitter = context.$().closest('.tab-content').siblings('[role=tabpanel]').find('li a[aria-controls=' + thisTabPane + ']');
return $emitter;
} catch(e) {
console.log('Problem getting event emitter: %o', e);
}
return false;
},
visibilityEventName: 'shown.bs.tab',
then we just need to add the following code:
_init: function() {
var isVisible = this.$().get(0).offsetWidth > 0;
if (isVisible) {
this.visibilityDidHappen();
}
}.on('didInsertElement'),
visibilityListener: function() {
// Listen for visibility event and signal a resize when it happens
// note: this listener is placed on a DOM element which is assumed
// to always be visibile so no need to wait on placing this listener
var self = this;
Ember.run.schedule('afterRender', function() {
var $selector = self.get('visibilityEventEmitter')(self);
$selector.on(self.get('visibilityEventName'), Ember.run.bind(self, self.visibilityDidHappen ));
});
}.on('didInsertElement'),
visibilityDidHappen: function() {
// On the first visibility event, the component must be initialised
if(!this.get('isInitialised')) {
this.initiateKnob();
} else {
// force a resize assessment as window sizing may have changed
// since last time component was visible
this.resizeDidHappen();
}
},
Note that this also results in a tiny refactor of our resize listener, removing it's trigger from the didInsertElement event and instead being triggered by initiateKnob which will happen not when the Ember component loads but instead lazy load at the first point of visibility in the DOM.
initiateKnob: function() {
var self = this;
this.set('isInitialised', true);
var options = this.buildOptions();
this.$('.knob').knob(options);
this.syncValue();
this.resizeDidHappen(); // get dimensions initialised on load
console.log('setting resize listener for %s', self.elementId);
self.resizeListener(); // add a listener for future resize events
},
resizeListener: function() {
this.$(window).on('resize', Ember.run.bind(this, this.resizeDidHappen));
},
Does it work?
To a large degree but not completely. Here's what works:
the first 'tab' which is visible at load resizes on demand
all tabs resize when they are switched to (aka, when they gain visibility)
what doesn't work is:
tabs other than the first tab do not resize (aka, the onresize callback appears broken)
The error I get is:
vendor.js:13693 Uncaught TypeError: undefined is not a function
Backburner.run vendor.js:13716
Backburner.join vendor.js:34296
run.join vendor.js:34349
run.bind vendor.js:4759
jQuery.event.dispatch vendor.js:4427
jQuery.event.add.elemData.handle
Not sure what to make of this ... any help would be appreciated. Full code can be found here:
https://gist.github.com/295e7e05c3f2ec92fb45.git
I have a component which require to handle both click and double click. Its code is like
Template :
<div class="routine_week routine-border box-height-fix fl pointer">
{{mark-down marking}}
</div>
Component
import Ember from 'ember';
export default Ember.Component.extend({
marking : 0,
isMarkable : false,
click : function(){
//click here
},
doubleClick : function(){
//double click here
}
});
Now issue is that doubleClick never got fired. If it does it also fires two click events. How can I ensure that doubleclick event will not interact with click
Ember is so powerful that I was able to imitate DoubleClick using SingleClick event. Its all depend upon Ember.run Loop. Here is the code for anyone like me trying to do that -
//capture event for singleClick only execute if there is no doubleClick
eventIO : null,
//ember actually execute the doubleClick but it also gives two singleClick
doubleClick : function(){
var eventIO = this.get('eventIO');
//check if there is any event for single click, disable it
if(eventIO != null){
Ember.run.cancel(eventIO);
this.set('eventIO',null);
}
// do the stuff with double click
},
// our click event which got executed in both single / double click
click : function(){
var eventIO = this.get('eventIO');
//if this is the first click , schedule it for later after 500 ms
if(eventIO === null)
{
var eventIO = Ember.run.later(this,function(){
//do single click stuff
var eventIO = this.get('eventIO');
///clear additional events
if(eventIO != null){
Ember.run.cancel(eventIO);
this.set('eventIO',null);
}
},500);
//register event to the component
this.set('eventIO',eventIO);
}
},
<p {{on 'dblclick' this.doubleClick}}></p>
What I am trying to do is have a "load more" button at the bottom of a ajax populated list. I have got all the code working with a docked button, but I would now like to have it at the bottom.
What is happening is when the listView card is show I see my list but the list won't scroll. It pulls up and down a little but just won't have it. I have tried adding different configurations and layouts to listView with no different.
What I have done is the following
var moreButton = new Ext.Button({
text: 'Load more...',
ui: 'round',
handler: function() {//Do the loading - this works}
});
//In my list config I have a docked top bar for going "back" other than that pretty standard
var list = new Ext.List(Ext.apply(listConfig, {
fullscreen: false
}));
//This is my view for what I am trying to do
var listView = new Ext.Container({
items:[list, moreButton]
});
listView is then added to an other container as it is populated from a search box, it is show with setCard when I get a valid response from the server.
[sencha person] are you on 0.98? I think we had a regression in our scroller. Might want to downgrade back to 0.97