I've used an HTML template in my angular project. Everything seems fine until I realized that some js files doesn't work which affected the whole project. The most important part is even the main.js file didn't work. My lect said to ignore the js and recreate which part doesn't work but I'm tryna use this file because there are many things in there.
Here are the codes in the main.js file, is there something here that is not compatible with Angular?
This is my first time using StackOverflow so I'm sorry if there's anything wrong with the way I'm asking
(function () {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select('#header')
let offset = header.offsetHeight
let elementPos = select(el).offsetTop
window.scrollTo({
top: elementPos - offset,
behavior: 'smooth'
})
}
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Mobile nav dropdowns activate
*/
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '.scrollto', function(e) {
if (select(this.hash)) {
e.preventDefault()
let navbar = select('#navbar')
if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
}
scrollto(this.hash)
}
}, true)
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener('load', () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash)
}
}
});
/**
* Preloader
*/
let preloader = select('#preloader');
if (preloader) {
window.addEventListener('load', () => {
preloader.remove()
});
}
/**
* Clients Slider
*/
new Swiper('.clients-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 40
},
480: {
slidesPerView: 3,
spaceBetween: 60
},
640: {
slidesPerView: 4,
spaceBetween: 80
},
992: {
slidesPerView: 6,
spaceBetween: 120
}
}
});
/**
* Porfolio isotope and filter
*/
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
portfolioIsotope.on('arrangeComplete', function() {
AOS.refresh()
});
}, true);
}
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Animation on scroll
*/
window.addEventListener('load', () => {
AOS.init({
duration: 1000,
easing: "ease-in-out",
once: true,
mirror: false
});
});
})()```
You need to export this code logic, and import it in the files that you need it in.
Let's put all your code in a file called a.js.
Your file becomes
export default a = (function () {
"use strict";
...
let's create a file called b.js on the same level as a.js
And later you import it in b.js as follows
import a from "./a"
Note
Once you import a.js into any file, all the logic inside it will be automatically executed (you can see the function execution at the end) because the function self executes.
Related
This opens more text when I click a button. Now I need more of these on a web page. I duplicated the function and renamed in const lines the names to menubutton2 and dropdownmenu3 but the second button doesn't work
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton');
const dropdwonMenu = $w('#dropdownMenu');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton2');
const dropdwonMenu = $w('#dropdownMenu2');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}
I'm a bit confused, don't know what is going wrong.
Maybe a bit of an explanation about this and it's usage in object methods would be awesome.
I saw that i should use this as global variable but that gives me more errors.
Here is my code:
$(function () {
var options = {
seeking: false,
stopped: true,
sliderOptions: {
imagesLoaded: true,
contain: true,
wrapAround: true,
cellAlign: 'left',
setGallerySize: false,
accessibility: true,
prevNextButtons: false,
pageDots: false,
selectedAttraction: 0.02,
hash: true
}
}
var CH = {
init: function () {
this.playerEvents()
this.bind()
this.progress()
},
playerEvents: function () {
slider.on('select.flickity', function (event, index) {
$('#audio').attr('src', 'assets/mp3/' + $('.slide').eq(index).attr('id') + '.mp3')
$('#id div, #title div').hide()
$('#id div').eq(index).show()
$('#title div').eq(index).show()
$('#playpause').text('PLAY')
}).on('change.flickity', function (event, index) {
options.stopped == false ? (audio.play(), $('#playpause').text('PAUSE')) : (audio.pause(), $('#playpause').text('PLAY'))
}).on('staticClick.flickity', function (event, pointer, cellElement, cellIndex) {
if (typeof cellIndex == 'number') {
slider.flickity('selectCell', cellIndex);
}
})
$(window).on('load resize', function () {
if (matchMedia('screen and (max-width: 600px)').matches) {
slider.flickity({
cellAlign: 'center'
})
} else {
slider.flickity({
cellAlign: 'left'
})
}
slider.flickity('resize')
})
},
addZero: function (i) {
return i < 10 ? '0' + i : i;
},
timestamp: function (t) {
t = Math.floor(t)
var s = t % 60
var m = Math.floor(t / 60)
return this.addZero(m) + ':' + this.addZero(s)
},
progress: function () {
console.log(this.timestamp(audio.currentTime))
var dur = (audio.currentTime / audio.duration) * 100
$('#a').css('width', dur + '%')
$('#time').html(this.timestamp(audio.currentTime))
audio.paused ? options.stopped = true : options.stopped = false
window.requestAnimationFrame(this.progress)
},
seek: function (e) {
if (e.type === 'click') {
options.seeking = true;
$('#playpause').text('PAUSE')
audio.play()
}
if (options.seeking && (e.buttons > 0 || e.type == 'click') && !audio.paused) {
var percent = e.offsetX / $(this).width()
audio.currentTime = percent * audio.duration
audio.volume = 0
} else {
audio.volume = 1
}
},
playPause: function () {
audio.paused ? (audio.play(), $('#playpause').text('PAUSE')) : (audio.pause(), $('#playpause').text('PLAY'));
},
menu: function () {
if ($('#menu').hasClass('open')) {
$('#menu').removeClass('open');
$('#menu').css({
right: '-100%',
opacity: '0'
});
audio.animate({ volume: 1 })
$('#menu-btn').removeClass('active')
} else {
$('#menu').addClass('open');
$('#menu').css({
right: '0',
opacity: '1'
});
audio.animate({ volume: 0.5 })
$('#menu-btn').addClass('active')
}
},
bind: function () {
$('#progress').on('click', this.seek)
$('#progress').on('mousemove', this.seek)
$('#progress').on('mouseleave', function () {
options.seeking = false
})
$('#playpause').on('click', this.playPause)
audio.onended = () => {
slider.flickity('next')
$('#playpause').text('PAUSE')
audio.play()
}
$('#menu-btn, #close').on('click', this.menu)
$('#nav a').on('click', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
$('#content div').eq($(this).index()).fadeIn(250).siblings(this).hide();
})
}
}
var audio = $('#audio')[0]
var slider = $('#hae').flickity(options.sliderOptions)
CH.init()
});
Any help would be much appreciated.
Thanks!
When you call window.requestAnimationFrame(this.progress) the function will be called later with this pointing to the window object. Try changing
window.requestAnimationFrame(this.progress);
to
let self = this;
window.requestAnimationFrame(function(){
self.progress()
});
i am having an issue trying to reenable a scrollmagic controller if it has been disabled before.
i want to have the logo color change only triggered if its a narrow viewport (if the logo is in the colored area) and disabled if its wide..that works so far
but if i resize the window to narrow again it won't reenable the controller..i tried to destroy and reset the controller as well but somehow it won't reenable the controller...
codepen (gsap and scrollmagic used):
https://codepen.io/HendrikEng/pen/owyBYz?editors=0011
js:
const mobile = {
controller: new ScrollMagic.Controller(),
changeLogo: {
init: () => {
console.log("init tweens an scrollmagic");
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
},
enterInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
}
};
const trigger = document.querySelectorAll(".js-change-logo");
trigger.forEach(id => {
const scene = new ScrollMagic.Scene({
triggerElement: id,
reverse: true,
triggerHook: 0.065,
duration: id.clientHeight
})
.on("enter", () => {
tweens.enterOuter();
tweens.enterInner();
})
.on("leave", () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
destroyTweens: () => {
console.log("kill tweens");
TweenMax.killTweensOf(".c-logo__outer");
TweenMax.killTweensOf(".c-logo__inner");
TweenMax.set(".c-logo__outer", { clearProps: "all" });
TweenMax.set(".c-logo__inner", { clearProps: "all" });
}
}
};
$(window).on("resize", function() {
var win = $(this); //this = window
if (win.width() <= 450) {
// reanble controller if disabledbed before - doesnt work
mobile.controller.enabled(true);
mobile.changeLogo.init();
} else {
// disable scrollmagic controller
mobile.controller.enabled(false);
// destroy tweens
mobile.changeLogo.destroyTweens();
}
}).resize();
#hendrikeng I hope you don't mind, but I changed your code quite a lot. I've found myself needing to do this exact thing numerous times recently, so I based a lot of it on my own work.
I think the largest issue was that you were running a lot of functions on every resize which is not very performant and also makes it difficult to keep track of what's initialised and what's not. Mine relies on an init_flag so that it is only setup once.
There are then methods to update (duration on resize if needed) and destroy.
https://codepen.io/motionimaging/pen/848366af015cdf3a90de5fb395193502/?editors=0100
const mobile = {
init_flag: false,
init: () => {
$(window).on('resize', function(){
const width = $(window).width();
if( width <= 450 ){
if(! mobile.init_flag ){
mobile.setup();
} else {
mobile.update();
}
} else {
if( mobile.init_flag ){
mobile.destroy();
}
}
});
},
setup: () => {
mobile.init_flag = true;
mobile.triggers = document.querySelectorAll('.js-change-logo');
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
},
enterInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
}
};
mobile.controller = new ScrollMagic.Controller();
mobile.triggers.forEach(el => {
el.scene = new ScrollMagic.Scene({
triggerElement: el,
reverse: true,
triggerHook: 0.065,
duration: el.clientHeight
})
.on('enter', () => {
tweens.enterOuter();
tweens.enterInner();
})
.on('leave', () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
update: () => {
if( mobile.init_flag ){
mobile.triggers.forEach(el => {
el.scene.duration(el.clientHeight);
});
}
},
destroy: function(){
mobile.controller.destroy(true);
mobile.init_flag = false;
$('.c-logo > *').attr('style', '');
},
};
mobile.init();
I'm try to test my ReactJS mixin for drag and drop functionality using jasmine, karma and React TestUtils.
No exception is thrown but when debugging it seems that the function bound to the event listener not being executed when the event is simulated.
You can clone the it here:
https://github.com/itsh01/react-dragdrop/tree/testing-simutale-events
Thank you very much in advance.
Here is my test:
beforeEach(function () {
var CompDrag = React.createClass({
mixins: [DragDropMixin],
dragDrop: function dragDrop() {
return {
draggable: true,
dropType: 'test',
dataTransfer: {
test: true
}
};
},
render: function render() {
return React.createElement('div', {});
}
});
var CompDrop = React.createClass({
mixins: [DragDropMixin],
dragDrop: function dragDrop() {
var self = this;
return {
droppable: true,
acceptableTypes: ['test'],
drop: function (data) {
self.setState(data);
}
};
},
render: function render() {
return React.createElement('div', {});
}
});
elementDrag = React.createElement(CompDrag, {});
elementDrop = React.createElement(CompDrop, {});
});
...
it('should attach drop functionality when configured', function () {
var renderedDrag = TestUtils.renderIntoDocument(elementDrag);
var renderedDrop = TestUtils.renderIntoDocument(elementDrop);
var nodeDrag = renderedDrag.getDOMNode();
var nodeDrop = renderedDrop.getDOMNode();
var mockEvent = {
preventDefault: function () {},
dataTransfer: {
types: ["objtopass"],
setData: function () {},
getData: function () {
return JSON.parse({
dropType: 'test',
data: {
test: true
}
});
}
}
};
TestUtils.SimulateNative.dragStart(nodeDrag, mockEvent);
TestUtils.Simulate.dragOver(nodeDrop, mockEvent);
TestUtils.Simulate.drop(nodeDrop, mockEvent);
expect(renderedDrop.state).not.toBeNull();
});
Here is the mixin:
'use strict';
var _ = lodash;
var DragDropMixin = {
/*
* usage:
*
* mixins: [DragDropMixin],
* dragDrop: function () {
*
* return {
*
* // when dragging an item
* draggable: true,
* dropType: 'myItem',
* dataTransfer: { myItemData: property }
*
* // when dropping an item:
* droppable: true,
* acceptableDrops: ['myItem'],
* drop: function (myItem) {},
* };
* }
*
*/
isAttrEnabled: function (attr) {
return this.dragDropData && this.dragDropData[attr];
},
isDroppable: function () {
return this.isAttrEnabled('droppable');
},
isDraggable: function () {
return this.isAttrEnabled('draggable');
},
componentDidMount: function () {
var node = this.getDOMNode();
this.dragDropData = this.dragDrop();
if (this.isDroppable()) {
node.addEventListener('dragover', this.handleDragOver, this);
node.addEventListener('drop', this.handleDrop, this);
}
if (this.isDraggable()) {
node.draggable = true;
node.addEventListener('dragstart', this.handleDragStart, this);
}
},
componentWillUnmount: function () {
var node = this.getDOMNode();
if (this.isDroppable()) {
node.removeEventListener('dragover', this.handleDragOver);
node.removeEventListener('drop', this.handleDrop);
}
if (this.isDraggable()) {
node.removeEventListener('dragstart', this.handleDragStart);
}
},
handleDragOver: function (e) {
e.preventDefault();
},
handleDrop: function (e) {
var jsonData = e.dataTransfer.getData('objToPass'),
passedObj = JSON.parse(jsonData),
acceptableDrops = this.dragDropData.acceptableDrops;
e.preventDefault();
if (!this.dragDropData.drop) {
throw new Error('Must define drop function when using droppable');
}
if (_.includes(acceptableDrops, passedObj.dropType)) {
this.dragDropData.drop(passedObj.data);
}
},
handleDragStart: function (e) {
var objToPass = {
data: this.dragDropData.dataTransfer,
dropType: this.dragDropData.dropType
};
e.dataTransfer.setData('objToPass', JSON.stringify(objToPass));
}
};
Thanks again.
OK, got it.
I was actually listening to native events and simulating React synthetic events.
Fixed it by changing the mixin:
componentDidMount: function () {
var node = this.getDOMNode();
this.dragDropData = this.dragDrop();
if (this.isDroppable()) {
node.ondragover = this.handleDragOver;
node.ondrop = this.handleDrop;
}
if (this.isDraggable()) {
node.draggable = true;
node.ondragstart = this.handleDragStart;
}
},
And testing by triggering a native event
nodeDrag.ondragstart(mockEvent);
nodeDrop.ondragover(mockEvent);
nodeDrop.ondrop(mockEvent);
expect(DragDropMixin.handleDrop).toHaveBeenCalled();
expect(renderedDrop.state).toBeNull();
I have used Durandal.js for my SPA. I need to have slideshow of Images as background in certain pages, for which I am using jquery-backstretch. I am fetching images from my web back-end. Everything works fine while navigating between pages in normal speed. But, when I navigate from one of the pages which has backstretch to another one with backstretch very rapidly, Images from backstretch in first page also creeps in second page. When I debugged, only the correct Images were being passed to second page. And also the slideshow is not running in a proper interval. So it must be both the backstretches being invoked.
Please tell me how I can stop the previous backstretch from appearing again. Here are the relevant code snippets.
This is my first page's(with backstretch) viewmodel code.
var id = 0;
var backstetcharray;
function loadbackstretchb() {
backstetcharray = new Array();
$.each(that.products, function (i, item)
{
if(item.ProductBackImage != "")
{
backstetcharray.push("xxxxxxxxxx" + item.ProductBackImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var location;
function callback() {
window.location.href = "#individual/"+id;
// this.deactivate();
};
return {
products: ko.observableArray([]),
activate: function () {
currentpage = "products";
that = this;
return http.get('yyyyyyyyyyyyyyy').then(function (response) {
that.products = response;
loadbackstretchb();
});
},
attached: function () {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
//setTimeout($(".mainmenucont").effect("slide", null, 1000), 1000);
$(document).on("click", ".ind1", function (e) {
// alert("ind1");
id = e.target.id;
// $(".mainmenucont").effect("drop", null, 2000, callback(e.target.id));
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, callback);
});
}
}
});
This is my second page's(with backstretch) viewmodel code.(To where I am navigating)
var recs;
var open;
var i, count;
var backstetcharray;
function loadbackstretchc() {
backstetcharray = new Array();
$.each(recs, function (i, item) {
if (item.BackgroundImage != "") {
backstetcharray.push("xxxxxxxxxx" + item.BackgroundImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var system = require('durandal/system');
var location;
function menucallback() {
window.location.href = location;
// this.deactivate();
};
return {
activate: function (val) {
currentpage = "recipes";
open = val;
that = this;
var pdts;
recs;
var recipeJson = [];
http.get('yyyyyyyyyyyyyy').then(function (response) {
pdts = response;
http.get('yyyyyyyyyyyy').then(function (response1) {
recs = response1;
loadbackstretchc();
$.each(pdts, function (i, item) {
var json = [];
$.each(recs, function (j, jtem) {
if (item.DocumentTypeId == jtem.BelongstoProduct) {
json.push(jtem);
}
});
jsonitem = {}
jsonitem["product"] = item.ProductName;
jsonitem["link"] = "#" + item.UmbracoUrl;
jsonitem["target"] = item.UmbracoUrl;
jsonitem["recipes"] = json;
recipeJson.push(jsonitem);
});
// that.products = recipeJson;
count = recipeJson.length;
i = 0;
return that.products(recipeJson);
});
});
},
attached: function(view) {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
$(document).on("click", ".recipeclick", function (e) {
console.log(e);
location = "#recipe/" + e.target.id;
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, menucallback);
});
$(document).on("click", ".locclick", function (e) {
if (e.handled != true) {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
e.handled = true;
}
});
},
products: ko.observableArray([]),
expand: function() {
++i;
if (i == count) {
$("#" + open).addClass("in");
}
}
};
});