Develop Reference

How can I use javascript to make it so the user can only trigger the hover event once the Lottie animation has played in full?

How can I make it so the user is only able to trigger the mouse hover & mouse left events, once the Lottie animation has initially played in full.
Currently the user is able to cause the hover event when the animation is mid-playing, something I don't want to be able to happen.
Thanks
var anim4;
var anim5 = document.getElementById('lottie5')
var animation5 = {
container: anim5,
renderer: 'svg',
loop: true,
autoplay: false, /*MAKE SURE THIS IS FALSE*/
rendererSettings: {
progressiveLoad: false},
path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
name: 'myAnimation',
};
anim4 = lottie.loadAnimation(animation5);
// SCROLLING DOWN
var waypoint5 = new Waypoint({
element: document.getElementById('lottie5'),
handler: function(direction) {
if (direction === 'down') {
anim4.playSegments([[130,447],[358,447]], true);
this.destroy()
}
},
offset: '50%'
})
anim5.addEventListener("mouseenter", myScript1);
anim5.addEventListener("mouseleave", myScript2);
function myScript1(){
anim4.goToAndStop(500, true);
}
function myScript2(){
anim4.playSegments([358,447],true);
};

var anim4;
var anim5 = document.getElementById('lottie5')
var animation5 = {
container: anim5,
renderer: 'svg',
loop: false,
autoplay: true, /*MAKE SURE THIS IS FALSE*/
rendererSettings: {
progressiveLoad: false},
path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
name: 'myAnimation',
};
anim4 = lottie.loadAnimation(animation5);
// SCROLLING DOWN
var waypoint5 = new Waypoint({
element: document.getElementById('lottie5'),
handler: function(direction) {
if (direction === 'down') {
anim4.playSegments([[130,447],[358,447]], true);
this.destroy()
}
},
offset: '50%'
})
anim4.addEventListener("complete", function(){
console.log('Animation completed!!');
anim5.addEventListener("mouseenter", myScript1);
anim5.addEventListener("mouseleave", myScript2);
});
function myScript1(){
anim4.goToAndStop(500, true);
}
function myScript2(){
anim4.playSegments([358,447],true);
};

Figure it out in case anyone is interested.
This might not be the most efficient way, but worked for me!
anim4.addEventListener('complete', function(e) {
console.log('Animation completed');
});
anim4.addEventListener('complete', function(e) {
var elem = document.getElementById('lottie5');
elem.addEventListener('mouseover', mouseElem)
elem.addEventListener('mouseleave', mouseElem2)
function mouseElem() {
anim4.goToAndStop(150, true);
}
function mouseElem2() {
anim4.goToAndStop(30, true);
}

EXT JS: How to hide the fourth tab of the item based on some if condition?

I am new to ext js and I am trying to hide the fourth tab on my screen based on certain entity condition. As, I have coded I am able to disable
(blur) the 4th Setting tab, but the hidden or hide() function is failing.
Basically, I want to hide the fourth tab in items Payment.PaymentSettingsCfg on certain condition.
Any help would really appreciate, thanks in advance.
var bsdataloded = false;
Payment.PaymentSettingsCfg = {
id: 'PaymentSettingsPanel',
title: getMsg('PaymentAdmin', 'PaymentSettingsHeader'),
xtype: 'PaymentSettingsPanels',
listeners: {
activate: function() {
if (!bsdataloded) {
this.loadSettings();
bsdataloded = true;
}
}
}
}
var hidePaymentSettingcfg = false;
debugger;
if (Payment.EntitySettings &&
Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
Payment.PaymentSettingsCfg.disabled = true; //working
// Payment.PaymentSettingsCfg.hidden = true;// not working, even hide() not working
hidePaymentSettingcfg = true;
}
init: function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: null
}));
app = new Payment.admin.AppContainer({
id: 'main-panel',
title: Payment.getMsg('PaymentAdmin', 'PaymentConfHeader'),
el: 'bodydiv',
border: true,
layout: 'fit',
defaults: {
border: false
},
items: [{
xtype: 'tabpanel',
activeTab: 0,
width: 500,
deferredRender: false,
hidden: false,
defaults: {
border: false
},
items: [
Payment.PaymentItemCfg,
Payment.PaymentPeriodCfg,
Payment.PaymentTypeCfg,
Payment.PaymentSettingsCfg
]
}]
});
app.render();
}
};
}();

Here is the example to hide and show the tab based on if condition
i am hiding and showing the tab on checkbox checking but you can get your idea
i hope it will help you
here is the Fiddle...

Added the logic to the listeners and it worked.
listeners : {
afterrender : function(){
var testTab = this.getTabEl(3);
if (Payment.EntSettings["EntSITE|Payment_SWitch"] === "Y") {
testTab.hide();
}
}
}

Load extra conditional in backbone js page

I have a backbone app developed externally - initially where I perform the definitions & inject jquery etc..) on the first line - the 7th param is the 'tools template')
I
P.S A lot of code has been removed from here for clarity/ease (as it is well over 800 lines with all the other code) & this is all new to me so feel free to point out any obvious mistakes
On Line 8 - I have the following line:
window.isMobileDevice ? "text!views/tools/templates/i_tools.html" : "text!views/tools/templates/tools.html",
This basically does a 'if a mobile device load mobile page OTHERWISE load the standard (desktop) page.
I want to amend this with some additional logic but unsure how...
I want to add in another conditional, which basically says the following:
if (mobile device)
Load mobile page (as is now) e.g mobile-tools.html
else
if (stampVar == true)
load desktop stamp page e.g stamp-tools.html
else
load the standard desktop page e.g tools.html
Any ideas on how to do this? The stampVar will basically be true/false and i'm trying to work out how to load that in dynamically from an existing js object
define([
"jquery",
"backbone",
"config",
"models/model",
"collections/collection",
"views/tools/toolsBase",
window.isMobileDevice ? "text!views/tools/templates/i_tools.html" : "text!views/tools/templates/stamper_tools.html",
window.isMobileDevice ? "text!views/tools/templates/i_editor.html" : "text!views/tools/templates/editor.html",
window.isMobileDevice ? "text!views/tools/templates/i_txts.html" : "text!views/tools/templates/txts.html",
window.isMobileDevice ? "text!views/tools/templates/i_txtsItem.html" : "text!views/tools/templates/txtsItem.html",
"text!views/tools/templates/fontItem.html",
"curvetext"
],
function ($, Backbone, Config, Model, Collection, ToolsBase, ToolsTmpl, EditorTmpl, TxtTmpl, TxtItemTmpl, FontItemTmpl) {
"use strict";
var View = ToolsBase.extend({
initialize: function() {
var self = this;
if (window.isMobileDevice) {
$(window).bind("resize.app", _.bind(this.resizeTools, this));
}
},
render: function() {
var self = this, tpl_data, tools_tpl_data;
$('.customtool-title .tools-tabs').show();
self.stickerSetup();
//console.log(app.ctors);
tools_tpl_data = {
tips: app.settings.tips,
isCompetition: app.settings.competition !== undefined,
allowCodes: app.ctors["toolsCtor"].getAllowCodes(),
customType: 'stamper'
};
if (app.settings.competition !== undefined) {
tools_tpl_data.competition = app.settings.competition
}
console.log(ToolsTmpl);
self.$el.find(".tools").append(_.template(ToolsTmpl, tools_tpl_data));
tpl_data = {
stickerTxtTop : self.selectedTxt.top,
stickerTxtMiddle : self.selectedTxt.middle,
stickerTxtBottom : self.selectedTxt.bottom,
selectedtitle : self.selectedTitle,
selectedtemplate : self.selectedTemplate,
stickerTemplate : Config.templates + self.selectedTemplate + Config.templateExtension,
isCompetition : app.settings.competition !== undefined,
designType: app.ctors["toolsCtor"].getDesignType(),
tips: app.settings.tips,
selectedCodes : self.selectedCodes,
selectedPoints : self.selectedPoints
};
if (app.settings.competition !== undefined) {
tpl_data.competition = app.settings.competition;
}
if (self.backgroundType === "color") {
tpl_data.stickerBgImage = null;
tpl_data.stickerFgImage = this.getFgPath(self.stickerFgImage);
self.$el.find(".editor").append(_.template(EditorTmpl, tpl_data));
$(".customtool-background").hide();
$('.customtool-fill').css({
background: self.stickerBgColor,
opacity: self.stickerBgOpacity
}).show();
} else {
tpl_data.stickerFgImage = this.getFgPath(self.stickerFgImage);
tpl_data.stickerBgImage = this.getBgPath(self.stickerBgImage);
self.$el.find(".editor").append(_.template(EditorTmpl, tpl_data));
$(".customtool-background").show();
$('.customtool-fill').hide();
}
self.applyTextFormatting();
self.refreshArcs(1,".customtool-toptext", self.selectedTxt.top.arc);
self.refreshArcs(2,".customtool-middletext", self.selectedTxt.middle.arc);
self.refreshArcs(3,".customtool-bottomtext", self.selectedTxt.bottom.arc);
self.toggleCodes();
if (app.settings.competition !== undefined && !window.isMobileDevice) {
$('#dialog-form').dialog({
autoOpen: false,
width: 600,
modal: true,
zIndex: 1001,
dialogClass: 'competition-dialog',
draggable: false,
buttons: [{
'text': "Create Another",
'class': 'pull-right createanother',
'style': 'display:none',
'click': function(e) {
self.restart(e);
return false;
}
}, {
'text': "Enter Competition",
'class': 'pull-right green enter',
'disabled': true,
'click': function(e) {
self.competitionEnter(e);
return false;
}
}, {
'text': "Order",
'class': 'pull-right continue green',
'style': 'display:none',
'click': function(e) {
self.competitionContinue(e);
return false;
}
}, {
'text': "Cancel",
'class': 'pull-left cancelcomp',
'click': function(e) {
self.competitionCancel(e);
return false;
}
}]
});
}
if (app.settings.competition !== undefined) {
_gaq.push(['_trackPageview', '/sticker-competition/editor']);
}
if (!window.isMobileDevice) {
app.trigger("tools:bg");
}
}
}, {
sticker_id: null,
toolsOpen: false
});
return View;
});

ExtJS Ext.panel.Panel tools order

I've got this panel. It shows tools icons in this order: gear, close, collapse.
I'd like to get icons is this order: gear, collapse, close. I can't figure it out.
When I put collapseFirst: true, then collapse is at the first position.
Here's an alternative link to the SenchFiddle
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
width : 500,
height: 200,
title : 'Panel',
renderTo: Ext.getBody(),
closable : true,
collapsible : true,
collapseFirst : false,
tools: [{
type : 'gear'
}],
initTools: function() {
var me = this,
tools = me.tools,
i, tool;
me.tools = [];
for (i = tools && tools.length; i; ) {
--i;
me.tools[i] = tool = tools[i];
tool.toolOwner = me;
}
// Add a collapse tool unless configured to not show a collapse tool
// or to not even show a header.
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
if (Ext.getVersion().major == '4') {
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
me.collapseTool = me.expandTool = Ext.widget({
xtype: 'tool',
handler: me.toggleCollapse,
scope: me
});
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
} else {
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
}
if (me.pinnable) {
me.initPinnable();
}
// Add subclass-specific tools.
me.addTools();
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
xtype : 'tool',
type: 'close',
scope: me,
handler: me.close
});
}
}
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
Thanks anyone for help :)

EDIT: Found that overriding the initTools method is a better solutions for this
EDIT 2: Supports both ExtJS 4.2 and ExtJS 5.x
Ext.create('Ext.panel.Panel', {
width : 500,
height: 500,
title : 'Panel',
renderTo: Ext.getBody(),
closable : true,
collapsible : true,
collapseFirst : false,
tools: [{
type : 'gear'
}],
initTools: function() {
var me = this,
tools = me.tools,
i, tool;
me.tools = [];
for (i = tools && tools.length; i; ) {
--i;
me.tools[i] = tool = tools[i];
tool.toolOwner = me;
}
// Add a collapse tool unless configured to not show a collapse tool
// or to not even show a header.
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
if (Ext.getVersion().major == '4') {
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
me.collapseTool = me.expandTool = Ext.widget({
xtype: 'tool',
handler: me.toggleCollapse,
scope: me
});
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
} else {
me.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
}
if (me.pinnable) {
me.initPinnable();
}
// Add subclass-specific tools.
me.addTools();
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
xtype : 'tool',
type: 'close',
scope: me,
handler: me.close
});
}
}
});

How to turn music on and off with one button?

For my website I use the ION.sound plugin and i would like to pause a fragment and play it again with the same button. Unfortunately, Jquery's .toggle has been removed in version 1.9 and can not be used anymore. How could I turn this audiofragment on and off with the same button? This is what i have so far:
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8"
});
playRadio = function() {
$.ionSound.play("track_radio");
}
stopRadio = function() {
$.ionSound.stop("track_radio");
}
$("#speakers").click(function(event){
playRadio();
});

You need something to track the playing status and check it when clicked.
$.ionSound({
sounds: [
"track_radio"
],
path: "sounds/",
multiPlay: true,
volume: "0.8",
playing: false;
});
onOffRadio = function() {
$.ionSound.play("track_radio");
$.ionSound.playing = true;
}
stopRadio = function() {
$.ionSound.stop("track_radio");
$.ionSound.playing = false;
}
$("#speakers").click(function(event){
if ($.ionSound.playing) {
stopRadio();
}
else {
playRadio();
}
});

You can simply make use of the 'text' attribute of the button element.
<button id="play-pause">Play</button>
$("#play-pause").click(function() {
if($(this).text() == 'Play') {
playRadio();
$(this).text('Pause');
}
else {
pauseRadio();
$(this).text('Play');
}
});
Here's the fiddle