https://freerangerecords.co.uk/js/shop.js

1delusions.shop = {
2
3	init: function() {
4
5		if ($('.shop-wrapper--titles').length > 0) {
6			delusions.shop.setUpEventlisteners();
7			delusions.shop.openShopItem();
8		} else {
9			var jsonText = $("#audio-player").data("musiclist");
10            if(jsonText){
11                delusions.shop.currentShopDetails = {};
12                delusions.shop.initAudioPlayer(jsonText);
13            }
14		}
15
16	},
17	
18	setUpEventlisteners: function(){
19		delusions.shop.currentShopDetails = {el:null, detailEl:$("#shop-record-detail"), currentCols:delusions.shop.workOutShopColumns()};
20		$(".shop-wrapper--titles .shop-item .shop-item__link").on("click", function(e){
21            var el = e.target;
22
23            if(el.type !== "submit") {
24                e.preventDefault();
25                delusions.shop.currentShopDetails.autoPlay = $(el).hasClass('shop-item__sleeve-overlay');
26                delusions.shop.shopItemWasClicked($(this));
27            }
28
29		});
30
31		$(".shop-page .record-detail__info--close-btn").on("click", function(e){
32			delusions.shop.shopItemWasClicked(delusions.shop.currentShopDetails.el);
33		});
34		$(window).on('resize', function(){
35			var newCols = delusions.shop.workOutShopColumns();
36			if(delusions.shop.currentShopDetails.el){
37				if(delusions.shop.currentShopDetails.currentCols !== newCols){
38					$("#shop-list .squeeze-inbetween").hide();
39					$( "#shop-list" ).prepend( $("#shop-list .squeeze-inbetween") );
40					delusions.shop.workOutShopDetail();
41					delusions.shop.currentShopDetails.detailEl.slideDown(500);
42					delusions.shop.currentShopDetails.currentCols = newCols;
43				}
44			}
45			else{
46				delusions.shop.currentShopDetails.currentCols = newCols;
47			}
48		});
49	},
50
51	killAudioPlayer: function(){
52		if(delusions.shop.audioPlayer){
53			delusions.shop.audioPlayer.pause();
54			delusions.shop.audioPlayer = null;
55		}
56		$('#audio-player').empty().hide();
57	},
58
59	initAudioPlayer: function(tracks){
60		
61		delusions.shop.audioPlayer = new APlayer({
62			element: document.getElementById('audio-player'),
63			narrow: false,
64			autoplay: delusions.shop.currentShopDetails.autoPlay,
65			showlrc: false,
66			mutex: true,
67			theme: '#e7e8ea',
68			listmaxheight: '250px',
69			music: tracks
70		});
71		
72		$('#audio-player').show();
73		$("#audio-player .aplayer-list")[0].style.height = 'auto';
74	},
75
76    openShopItem: function(){
77
78        var hash = window.location.hash.replace('#', ''),
79            shopItem;
80        // check if we need to set the current shop item to the one coming in through the hash parameter
81        if (hash.length > 0) {
82            shopItem = $('#shop-list .shop-item a[data-product-uid="'+hash+'"]');
83            if (shopItem.length > 0) {
84                shopItem.trigger('click');
85            } 
86        }
87
88    },
89
90    shopItemWasClicked: function($el){
91
92        if(!delusions.shop.currentShopDetails.el){
93            // open new one
94            delusions.shop.currentShopDetails.el = $el;
95            delusions.shop.workOutShopDetail();
96            delusions.shop.currentShopDetails.detailEl.slideDown(500);
97        }
98        else{
99            
100            delusions.shop.killAudioPlayer();
101            
102            if(delusions.shop.currentShopDetails.el.attr("id") == $el.attr("id")){
103                //close me
104                delusions.shop.currentShopDetails.el.removeClass("shop-item__link--active");
105                delusions.shop.currentShopDetails.el = null;
106                delusions.shop.currentShopDetails.detailEl.slideUp(100);
107                $("#shop-list .squeeze-inbetween").hide();
108                $( "#shop-list" ).prepend( $("#shop-list .squeeze-inbetween") );
109            }
110            else{
111                // close old one, open new
112                delusions.shop.currentShopDetails.el.removeClass("shop-item__link--active");
113                delusions.shop.currentShopDetails.detailEl.slideUp(0);
114                delusions.shop.currentShopDetails.el = $el;
115                delusions.shop.workOutShopDetail();
116                delusions.shop.currentShopDetails.detailEl.slideDown(500);
117            }
118            
119        }
120    },
121
122	workOutShopColumns: function(){
123		var $record = $("#shop-list li:last-child");
124		var item = $record.width() + 20;
125		var w = Math.floor($("#shop-list").width()/item);
126		return w;
127	},
128	
129	workOutShopDetail: function(){
130		var $el = delusions.shop.currentShopDetails.el;
131		var $squeeze = $("#shop-list .squeeze-inbetween");
132		// work out where to place the squeeze
133		var index = $el.parent().index();
134		var recordW = $el.width();
135		var rightSpace = $(document).width() - (recordW+$el.offset().left);
136		if(rightSpace > recordW && rightSpace <= recordW*2){
137			index += 1;

138		}
139		else if(rightSpace > recordW*2 && rightSpace <= recordW*3){
140			index += 2;
141		}
142		else if(rightSpace > recordW*3){
143			index += 3;
144		}
145				
146		$el.addClass("shop-item--active");
147		$squeeze.height(delusions.shop.currentShopDetails.detailEl.height()+55).show();
148		$squeeze.insertAfter($(".shop-item:eq("+index+")"));
149        $(".record-detail__sleeve img", delusions.shop.currentShopDetails.detailEl).attr("alt", $el.data("title-name"));
150		$(".record-detail__sleeve img", delusions.shop.currentShopDetails.detailEl).attr("src", $(".shop-item__sleeve-image", $el).data("large-image"));
151		$(".record-detail__container h2", delusions.shop.currentShopDetails.detailEl).text($el.data("artist-name"));
152		$(".record-detail__container .record-detail__info--artist", delusions.shop.currentShopDetails.detailEl).text($el.data("title-name"));
153		$(".record-detail__container .record-detail__info--cat-no", delusions.shop.currentShopDetails.detailEl).text($el.data("cat-number"));
154		$(".record-detail__container .record-detail__info--price", delusions.shop.currentShopDetails.detailEl).text($el.data("price"));
155		$(".record-detail__container .record-detail__info--format", delusions.shop.currentShopDetails.detailEl).text($el.data("format"));
156		if($el.data("quantity") == "0"){
157			$(".record-detail__form .record-detail__form--buy-button", delusions.shop.currentShopDetails.detailEl).attr('disabled','disabled');
158			$(".record-detail__form .record-detail__form--buy-button", delusions.shop.currentShopDetails.detailEl).attr("value", "Out of stock");
159		}else{
160			$(".record-detail__form .record-detail__form--buy-button", delusions.shop.currentShopDetails.detailEl).removeAttr("disabled");
161			$(".record-detail__form .record-detail__form--buy-button", delusions.shop.currentShopDetails.detailEl).attr("value", "Add to basket");
162		}
163		$(".record-detail__form .item_uid", delusions.shop.currentShopDetails.detailEl).attr("value", $el.data("product-uid"));
164
165		var $clone = $('.record-shop__more li', $el.parent()).clone();
166		$(".record-detail__more ul", delusions.shop.currentShopDetails.detailEl).empty().append($clone);
167
168		var offset = $squeeze.offset().top - $(".shop-wrapper").offset().top -7;
169		delusions.shop.currentShopDetails.detailEl.css("top", Math.ceil(offset)+"px");
170
171		var jsonText = $el.data("musiclist");
172		if($el.data("musiclist").length > 0){
173			delusions.shop.initAudioPlayer(jsonText);
174		} else {
175			delusions.shop.killAudioPlayer();
176		}
177		console.log("quantity = " + $el.data("quantity"));
178			
179		var scrollPos = $squeeze.offset().top-78;
180		$('html, body').stop(true, true)
181		.animate({
182			scrollTop: scrollPos + 'px'
183		}, 500);
184	}
185};