Skip to content

Instantly share code, notes, and snippets.

@mdunbavan

mdunbavan/index.js

Created April 5, 2017 15:02
Show Gist options
  • Save mdunbavan/59f5390f56b0197a197028dd5a7b0843 to your computer and use it in GitHub Desktop.
Save mdunbavan/59f5390f56b0197a197028dd5a7b0843 to your computer and use it in GitHub Desktop.
Download ZIP
Vue
Raw
index.js
'use strict';
function findUpTag(el, tag) {
while (el.parentNode) {
el = el.parentNode;
if (el.tagName === tag)
return el;
}
return null;
}
function getSiblings(el, filter) {
var siblings = [];
el = el.parentNode.firstChild;
do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
return siblings;
}
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
var packeryInit = function(){
window.isiPad = navigator.userAgent.match(/iPad/i);
if($(window).width() > 599 && !isiPad) {
// init packery
var $grid = $('#start-grid').packery({
gutter: 0,
itemSelector: '.grid__item-home',
percentPosition: true
});
$grid.imagesLoaded().progress( function() {
$grid.packery();
});
var orderItems = function() {
var itemElems = $($grid.packery('getItemElements'));
$(itemElems).each(function(i, itemElem) {
$(itemElem).attr('data-module-index', i);
});
};
orderItems();
$grid.on( 'layoutComplete',function( event, laidOutItems ) {
$('#start-grid').removeClass('opacity-0').addClass('opacity-1');
});
} else {
// no packery
}
};
// Slick slider component
const Slick = {
template: `<div>
<slot></slot>
</div>`,
props: {
options: {
type: Object,
default() {
return {};
},
},
},
mounted() {
const $slick = $(this.$el);
$slick.on('afterChange', this.afterChange);
$slick.on('beforeChange', this.beforeChange);
$slick.on('breakpoint', this.breakpoint);
$slick.on('destroy', this.destroy);
$slick.on('edge', this.edge);
$slick.on('init', this.init);
$slick.on('reInit', this.reInit);
$slick.on('setPosition', this.setPosition);
$slick.on('swipe', this.swipe);
$slick.on('lazyLoaded', this.lazyLoaded);
$slick.on('lazyLoadError', this.lazyLoadError);
$slick.slick(this.options);
},
beforeDestroy() {
$(this.$el).slick('unslick');
},
methods: {
next() {
$(this.$el).slick('slickNext');
},
prev() {
$(this.$el).slick('slickPrev');
},
pause() {
$(this.$el).slick('slickPause');
},
play() {
$(this.$el).slick('slickPlay');
},
goTo(index, dontAnimate) {
$(this.$el).slick('slickGoTo', index, dontAnimate);
},
currentSlide() {
$(this.$el).slick('slickCurrentSlide');
},
add(element, index, addBefore) {
$(this.$el).slick('slickAdd', element, index, addBefore);
},
remove(index, removeBefore) {
$(this.$el).slick('slickRemove', index, removeBefore);
},
filter(filter) {
$(this.$el).slick('slickFilter', filter);
},
unfilter() {
$(this.$el).slick('slickUnfilter');
},
getOption(option) {
$(this.$el).slick('slickGetOption', option);
},
setOption(option, value, refresh) {
$(this.$el).slick('slickSetOption', option, value, refresh);
},
// Events
afterChange(event, slick, currentSlide) {
this.$emit('afterChange', event, slick, currentSlide);
},
beforeChange(event, slick, currentSlide, nextSlide) {
this.$emit('beforeChange', event, slick, currentSlide, nextSlide);
},
breakpoint(event, slick, breakpoint) {
this.$emit('breakpoint', event, slick, breakpoint);
},
destroy(event, slick) {
this.$emit('destroy', event, slick);
},
edge(event, slick, direction) {
this.$emit('edge', event, slick, direction);
},
init(event, slick) {
this.$emit('init', event, slick);
},
reInit(event, slick) {
this.$emit('reInit', event, slick);
},
setPosition(event, slick) {
this.$emit('setPosition', event, slick);
},
swipe(event, slick, direction) {
this.$emit('swipe', event, slick, direction);
},
lazyLoaded(event, slick, image, imageSource) {
this.$emit('lazyLoaded', event, slick, image, imageSource);
},
lazyLoadError(event, slick, image, imageSource) {
this.$emit('lazyLoadError', event, slick, image, imageSource);
},
},
};
const store = new Vuex.Store({
state: {
products: [],
productsAll: [],
posts: [],
pages: []
},
getters:{
productsOrdered: state => {
return _.orderBy(state.products, ['published_at'], ['desc']);
}
},
mutations: {
addProducts (state, product) {
state.products.push(product)
state.productsAll.push(product)
},
addPosts (state, post) {
state.products.push(post)
state.posts.push(post)
},
addPages (state, page) {
state.products.push(page)
state.pages.push(page)
}
},
methods: {
disabled (event){
event.preventDefault();
}
}
})
store.dispatch('addProducts');
store.dispatch('addPosts');
store.dispatch('addPages');
Vue.component('navigation', {
template: `
<ul class="site-nav" id="AccessibleNav">
<router-link tag="li" active-class="active" :to="'/'">
<a @click.native="prevent($event)" class="site-nav__link univers uppercase body-size">In-Grid</a>
</router-link>
<router-link tag="li" active-class="active" :to="'/shop'">
<a @click.native="prevent($event)" class="site-nav__link univers uppercase body-size">Shop</a>
</router-link>
<router-link tag="li" active-class="active" :to="'/influence'">
<a @click.native="prevent($event)" class="site-nav__link univers uppercase body-size">Influence</a>
</router-link>
<router-link tag="li" active-class="active" :to="'/about-us'">
<a @click.native="prevent($event)" class="site-nav__link univers uppercase body-size">Story</a>
</router-link>
</ul>
`,
methods: {
prevent: function(e){
e.preventDefault()
}
}
});
const ListComp = {
props: ['products'],
template: `
<div id="start-grid" class="">
<div class="grid__item-home no-padding" data-height="" v-for="(key, index) in productsOrderBy" :class="{ influence: productsOrderBy[index].influence === true, about: productsOrderBy[index].about === true, product_item: productsOrderBy[index].vendor}">
<div v-if="productsOrderBy[index].vendor" class="shop-item">
<router-link v-bind:data-id="productsOrderBy[index].id" :to="'/products/'+ index" active-class="active" class="product grow">
<div class="inner-container relative">
<div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info">
<p class="univers uppercase smaller body-size">
Shop
</p>
<p class="lyon-text">{{productsOrderBy[index].title}}</p>
<p class="univers uppercase smaller body-size buy">
Buy now
</p>
</div>
<div @click="setActive($event)" v-bind:data-id="productsOrderBy[index].id" class="z-1 relative gallery grow" v-bind:id="productsOrderBy[index].id">
<img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].images[0].src" v-bind:alt="productsOrderBy[index].images[0].id">
</div>
</div>
<transition
v-if="$route.params.id == index"
appear
name="slide-fade">
<div class="absolute z-3 top-0 grid__item large--one-whole card">
<router-view :key="$route.params.id"></router-view>
</div>
</transition>
</router-link>
</div>
<div v-else-if="productsOrderBy[index].about" :style="{ 'background-color': '+productsOrderBy[index].tags+' }" class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">
<div @click="playVideo($event)" class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
{{ productsOrderBy[index].title }}
</p>
<p class="lyon-text" v-html="productsOrderBy[index].content.html">
{{ productsOrderBy[index].content.html }}
</p>
</div>
</div>
<div v-else class="inner-container relative blog-index__block" :data-color="productsOrderBy[index].tags">
<div class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
Influence
</p>
<p class="lyon-text">
{{ productsOrderBy[index].title }}
</p>
</div>
<img class="scale-with-grid archives-image" v-bind:src="productsOrderBy[index].media.image">
</div>
</div>
</div>
`,
data() {
return {
fade: true
};
},
computed: {
productsOrderBy() {
//return this.store.getters.productsOrdered;
return this.$store.getters.productsOrdered;
},
products() {
return this.$store.state.products;
},
posts() {
return this.$store.state.posts;
}
},
methods: {
initPackery() {
setTimeout(function(){
packeryInit();
}, 1000);
},
setActive(event) {
// dirty as fuck hack for now
var topMostParent = event.target.parentNode.parentNode.parentNode.parentNode.parentNode;
var sibs = getSiblings(topMostParent);
$(sibs).each(function(){
$(topMostParent).addClass('is-active').removeClass('inactive');
var el = $(this).find('a');
if(!el.hasClass('active')){
$(this).addClass('inactive');
}
});
var hash = event.target.parentNode.getAttribute('data-id'),
hashValue = $('#'+hash);
hashValue.velocity('scroll', {
duration: 500,
offset: -80,
easing: 'ease-in-out'
});
this.initPackery();
},
scrollTo(element) {
var hash = element.target.getAttribute('data-id'),
hashValue = $('#'+hash);
var addHash = function() {
};
if(hashValue){
$('html,body').animate({ 'scrollTop': hashValue.offset().top -80 }, 1000, addHash);
}
element.preventDefault();
},
convertColour (element){
setTimeout(function(){
$('#start-grid .grid__item-home .blog-index__block').each(function(item){
var _this = $(this);
var blog_block = _this.data('color');
$(_this).wrap('<div style="background-color:#'+_this.data('color')+';"></div>');
//console.log(_this);
});
}, 1000);
},
setHeights(element){
setTimeout(function(){
$('#start-grid .grid__item-home').each(function(item){
$(this).attr('data-height', $(this).outerHeight(true));
$(this).css('height', 'auto');
});
}, 2000);
},
unsetActive(event){
$('div').removeClass('inactive is-active');
},
playVideo(element){
element.preventDefault();
var parentDiv = element.target.parentNode;
var hasAnchor = parentDiv.querySelector('a') !== null;
if (hasAnchor === true){
var uri = parentDiv.querySelector('a').getAttribute('href');
$('body').append('<iframe src="https://player.vimeo.com/video/' + uri.match(/[^\/]*$/) + '?byline=0&portrait=0&badge=0" class="vimeoIframe"></iframe>');
}
},
waypointScroller(){
var continuousElements = document.getElementsByClassName('continuous-true')
for (var i = 0; i < continuousElements.length; i++) {
new Waypoint({
element: continuousElements[i],
handler: function() {
notify(this.element.innerHTML + ' hit')
}
})
}
},
},
mounted: function() {
this.initPackery();
this.convertColour();
this.unsetActive();
this.setHeights();
}
};
// render the list for pages component
const pageList = {
template: `
<div class="grid" id="start-grid">
<div class="grid__item-home list-complete-item no-padding about" v-for="(key, index) in pagesList">
<div :style="{ 'background-color': '+pagesList[index].tags+' }" class="inner-container relative blog-index__block" :data-color="pagesList[index].tags">
<div class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
{{ pagesList[index].title }}
</p>
<p class="lyon-text" v-html="pagesList[index].content.html">
{{ pagesList[index].content.html }}
</p>
</div>
</div>
</div>
</div>
`,
data() {
return {
fade: true
};
},
computed: {
pagesList() {
return this.$store.state.pages;
}
},
methods: {
convertColour (element){
setTimeout(function(){
$('#start-grid .grid__item-home .blog-index__block').each(function(item){
var _this = $(this);
var blog_block = _this.data('color');
$(_this).wrap('<div style="background-color:#'+_this.data('color')+';"></div>');
//console.log(_this);
});
}, 1000);
},
initPackery() {
// // init Packery
// setTimeout(function(){
// packeryInit();
// }, 100);
},
},
mounted: function() {
// this.initPackery();
this.convertColour();
}
};
const influenceList = {
template: `
<div class="grid" id="start-grid">
<div class="grid__item large--one-third medium--one-whole no-padding" v-for="(key, index) in posts">
<div class="inner-container relative blog-index__block" :data-color="posts[index].tags">
<div class="pad-normal z-1 large--one-whole">
<p class="univers uppercase smaller body-size">
Influence
</p>
<p class="lyon-text">
{{ posts[index].title }}
</p>
</div>
<img class="scale-with-grid archives-image" v-bind:src="posts[index].media.image">
</div>
</div>
</div>
`,
data() {
return {
fade: true,
params: {
title: 'Influence',
description: 'website description',
image: false
}
};
},
head: {
// To use "this" in the component, it is necessary to return the object through a function
// this.params.title
title: function () {
return {
inner: `${this.$route.params.title}`,
separator: '-'
}
},
meta: function () {
return [
{ name: 'application-name', content: this.params.app },
{ name: 'description', content: this.params.description },
{ p: 'og:image', c: this.params.image },
]
},
link: [
{ rel: 'canonical', h: 'http://example.com/influence', id: 'canonical'}
]
},
computed: {
posts() {
return this.$store.state.posts;
}
},
methods: {
convertColour (element){
setTimeout(function(){
$('#start-grid .grid__item .blog-index__block').each(function(item){
var _this = $(this);
var blog_block = _this.data('color');
$(_this).wrap('<div style="background-color:#'+_this.data('color')+';"></div>');
//console.log(_this);
});
}, 100);
},
initPackery() {
// init Packery
// setTimeout(function(){
// packeryInit();
// }, 1000);
},
},
mounted: function() {
//this.initPackery();
this.convertColour();
}
};
const fullProductList = {
template: `
<div class="grid" id="start-grid">
<div class="grid__item-home no-padding product_item" v-for="(key, index) in allProducts">
<div class="shop-item">
<router-link v-bind:data-id="allProducts.id" :to="'/shop/products/'+ index" active-class="active" class="product grow">
<div class="inner-container relative">
<div class="pad-normal absolute top-0 left-0 z-2 large--one-whole product-color product-info">
<p class="univers uppercase smaller body-size">
Shop
</p>
<p class="lyon-text">{{allProducts[index].title}}</p>
<p class="univers uppercase smaller body-size buy">
Buy now
</p>
</div>
<div @click="setActive($event)" v-bind:data-id="allProducts[index].id" class="z-1 relative gallery grow" v-bind:id="allProducts[index].id">
<img class="scale-with-grid archives-image" v-bind:src="allProducts[index].images[0].src" v-bind:alt="allProducts[index].images[0].id">
</div>
</div>
<transition
v-if="$route.params.id == index"
appear
name="slide-fade">
<div class="absolute z-3 top-0 grid__item large--one-whole card">
<router-view :key="$route.params.id"></router-view>
</div>
</transition>
</router-link>
</div>
</div>
</div>
`,
data() {
return {
fade: true
};
},
computed: {
allProducts() {
return this.$store.state.productsAll;
}
},
methods: {
convertColour (element){
setTimeout(function(){
$('#start-grid .grid__item .blog-index__block').each(function(item){
var _this = $(this);
var blog_block = _this.data('color');
$(_this).wrap('<div style="background-color:#'+_this.data('color')+';"></div>');
//console.log(_this);
});
}, 1000);
},
initPackery() {
// setTimeout(function(){
// packeryInit();
// }, 1000);
},
},
mounted: function() {
this.initPackery();
this.convertColour();
}
};
const DetailsComp = {
props: ['id','title','productDescription'],
data: function () {
return {
baseCost:[],
slickOptions: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
adaptiveHeight: false,
infinite: true,
centerMode: false,
focusOnSelect: true,
speed: 700,
useTransform: true,
easing: 'ease-in-out',
prevArrow: '.prev-slider',
nextArrow: '.next-slider',
responsive: [
{
breakpoint: 980,
settings: {
variableWidth: true,
slidesToShow: 1
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
dots: true,
arrows: false,
centerPadding: '0px',
variableWidth: false,
adaptiveHeight: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
dots: true,
arrows: false,
centerPadding: '0px',
variableWidth: false,
adaptiveHeight: false
}
}
]
},
params: {
title: this.$store.getters.productsOrdered[this.id || this.$route.meta.defaultId],
description: 'website description'
},
}
},
components: { 'slick': Slick },
// <form action="/cart/add" method="post" @submit.prevent="greet()" data-cart-submit="data-cart-submit" enctype="multipart/form-data" class="AddToCartForm">
// v-on:click.native="unSlick($event)"
//v-on:click="unSlick($event)"
template: `
<div class="product-main">
<a href="#" @onclick="prev" class="slider-arrows prev-slider"></a>
<slick class="z-1 relative slider" ref="slick" v-bind:id="product.id" :options="slickOptions">
<div v-for="image in product.images">
<img class="scale-with-grid archives-image" v-bind:src="image.src" v-bind:alt="image.id">
</div>
</slick>
<a href="#" @onclick="next" class="slider-arrows next-slider"></a>
<form @submit.prevent="add()" data-cart-submit="data-cart-submit">
<div class="pad-normal relative">
<div class="close-button selected"><router-link v-on:click.native="unsetActive($event)" v-bind:data-id="product.id" :to="'/'"><span></span><span></span></router-link></div>
<div class="product-title">
<h5 class="lyon-text">{{product.title}}, <span class="js-cost" v-for="variant in product.variants" v-if="variant.position == 1">£{{ variant.price }}</span></h5>
</div>
<div class="product-description">
<p class="univers uppercase smaller body-size">description</p>
<p class="lyon-text body-size">{{product.body_html}}</p>
</div>
<div class="grid__item large--one-half medium--one-half small--one-whole size">
<p class="univers uppercase smaller body-size">size</p>
<select name="id" class="productSelect univers uppercase smaller body-size">
<option v-for="variant in product.variants" v-bind:data-sku="variant.sku" v-bind:data-price="variant.price" v-bind:value="variant.id">{{ variant.title }}</option>
</select>
</div>
<div class="grid__item large--one-half medium--one-half small--one-whole size js-qty univers uppercase smaller body-size">
<p class="univers uppercase smaller body-size">quantity</p>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector univers uppercase smaller body-size">
</div>
<button v-on:click="add" type="submit" name="add" id="AddToCart" class="btn addToCartButton">
<span id="AddToCartText" class="univers uppercase smaller body-size text-black">Add to bag</span>
</button>
</div>
</form>
</div>
`,
computed: {
product() {
return this.$store.getters.productsOrdered[this.id || this.$route.meta.defaultId];
}
},
mounted: function() {
this.setParentHeight();
},
methods: {
add: function (event) {
var selectedOption = [];
$('.productSelect').find('option:selected').each(function(){
selectedOption.push($(this).val());
});
var qty = $('.js-qty input').val();
if (selectedOption) {
CartJS.addItem(selectedOption, qty);
}
},
setParentHeight(){
$('.product.active .card').css('height',$('.product.active .card').find('.product-main').outerHeight(true));
if ($(window).width() <= 768) {
$('.grid__item-home.is-active').css('height',$('.product.active .card').find('.product-main').outerHeight(true));
}
},
unsetActive(event){
$('div').removeClass('inactive is-active');
$('.grid__item-home').css('height','auto');
},
theCost(){
var baseCost = $('.productSelect option:first-child').attr('data-price');
return this.baseCost;
},
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
}
}
};
const ShopDetailsComp = {
props: ['id','title','productDescription'],
data: function () {
return {
baseCost:[],
slickOptions: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
adaptiveHeight: false,
infinite: true,
centerMode: false,
focusOnSelect: true,
speed: 700,
useTransform: true,
easing: 'ease-in-out',
prevArrow: '.prev-slider',
nextArrow: '.next-slider',
responsive: [
{
breakpoint: 980,
settings: {
variableWidth: true,
slidesToShow: 1
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 1,
dots: true,
arrows: false,
centerPadding: '0px',
variableWidth: false,
adaptiveHeight: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
dots: true,
arrows: false,
centerPadding: '0px',
variableWidth: false,
adaptiveHeight: false
}
}
]
},
params: {
title: this.$store.state.productsAll[this.id || this.$route.meta.defaultId],
description: 'website description'
},
}
},
components: { 'slick': Slick },
// <form action="/cart/add" method="post" @submit.prevent="greet()" data-cart-submit="data-cart-submit" enctype="multipart/form-data" class="AddToCartForm">
// v-on:click.native="unSlick($event)"
//v-on:click="unSlick($event)"
template: `
<div class="product-main">
<a href="#" @onclick="prev" class="slider-arrows prev-slider"></a>
<slick class="z-1 relative slider" ref="slick" v-bind:id="product.id" :options="slickOptions">
<div v-for="image in product.images">
<img class="scale-with-grid archives-image" v-bind:src="image.src" v-bind:alt="image.id">
</div>
</slick>
<a href="#" @onclick="next" class="slider-arrows next-slider"></a>
<form @submit.prevent="add()" data-cart-submit="data-cart-submit">
<div class="pad-normal relative">
<div class="close-button selected"><router-link v-on:click.native="unsetActive($event)" v-bind:data-id="product.id" :to="'/shop'"><span></span><span></span></router-link></div>
<div class="product-title">
<h5 class="lyon-text">{{product.title}}, <span class="js-cost" v-for="variant in product.variants" v-if="variant.position == 1">£{{ variant.price }}</span></h5>
</div>
<div class="product-description">
<p class="univers uppercase smaller body-size">description</p>
<p class="lyon-text body-size">{{product.body_html}}</p>
</div>
<div class="grid__item large--one-half medium--one-half small--one-whole size">
<p class="univers uppercase smaller body-size">size</p>
<select name="id" class="productSelect univers uppercase smaller body-size">
<option v-for="variant in product.variants" v-bind:data-sku="variant.sku" v-bind:data-price="variant.price" v-bind:value="variant.id">{{ variant.title }}</option>
</select>
</div>
<div class="grid__item large--one-half medium--one-half small--one-whole size js-qty univers uppercase smaller body-size">
<p class="univers uppercase smaller body-size">quantity</p>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector univers uppercase smaller body-size">
</div>
<button v-on:click="add" type="submit" name="add" id="AddToCart" class="btn addToCartButton">
<span id="AddToCartText" class="univers uppercase smaller body-size text-black">Add to bag</span>
</button>
</div>
</form>
</div>
`,
computed: {
product() {
return this.$store.state.productsAll[this.id || this.$route.meta.defaultId];
}
},
mounted: function() {
this.setParentHeight();
},
methods: {
add: function (event) {
var selectedOption = [];
$('.productSelect').find('option:selected').each(function(){
selectedOption.push($(this).val());
});
var qty = $('.js-qty input').val();
if (selectedOption) {
CartJS.addItem(selectedOption, qty);
}
},
setParentHeight(){
$('.product.active .card').css('height',$('.product.active .card').find('.product-main').outerHeight(true));
if ($(window).width() <= 768) {
$('.grid__item-home.is-active').css('height',$('.product.active .card').find('.product-main').outerHeight(true));
}
},
unsetActive(event){
$('div').removeClass('inactive is-active');
},
theCost(){
var baseCost = $('.productSelect option:first-child').attr('data-price');
return this.baseCost;
},
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
}
}
};
const pageComp = {
props: ['id'],
data: function () {
return {
baseCost:[]
}
},
// <form action="/cart/add" method="post" @submit.prevent="greet()" data-cart-submit="data-cart-submit" enctype="multipart/form-data" class="AddToCartForm">
template: `
<div class="page">
</div>
`,
computed: {
product() {
return this.$store.state.products[this.id || this.$route.meta.defaultId];
}
},
methods: {
add: function (event) {
var selectedOption = [];
$('.productSelect').find('option:selected').each(function(){
selectedOption.push($(this).val());
});
var qty = $('.js-qty input').val();
if (selectedOption) {
CartJS.addItem(selectedOption, qty);
}
},
theCost(){
var baseCost = $('.productSelect option:first-child').attr('data-price');
//console.log(baseCost);
return this.baseCost;
}
}
};
const routes = [
{
path: '/', component: ListComp,
children: [
{path: '/products/:id', component: DetailsComp, props: true},
//{path: '', redirect: '/details/0'} // show detail 0 by default --> comment if not needed
]
},
{path: '/about-us', component: pageList},
{path: '/influence', component: influenceList},
{path: '/shop', component: fullProductList, children: [
{ path: '/shop/products/:id', component: ShopDetailsComp, props: true },
]
}
];
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
el: '#app',
router,
store,
data() {
return {
toggle: false
};
},
mounted: function() {
this.theProducts();
this.thePosts();
this.thePages();
this.convertColour();
this.unsetActive();
},
methods: {
unsetActive(event){
$('div').removeClass('inactive is-active');
},
theProducts() {
this.$http.get('/collections/homepage/products.json').then(function (response) {
$.each(response.data.products, function(key, value) {
var product = value;
store.commit('addProducts', product)
}.bind(this));
}.bind(this), function (response) {
console.log('error');
});
},
thePosts() {
$.each(influenceFeed.entries, function(key, value) {
store.commit('addPosts', influenceFeed.entries[key])
}.bind(this));
},
thePages() {
$.each(aboutFeed.entries, function(key, value) {
store.commit('addPages', aboutFeed.entries[key])
}.bind(this));
},
convertColour (element){
setTimeout(function(){
$('#start-grid .grid__item .blog-index__block').each(function(item){
var _this = $(this);
var blog_block = _this.data('color');
$(_this).wrap('<div style="background-color:#'+_this.data('color')+';"></div>');
//console.log(_this);
});
}, 1000);
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment