Warning: chmod(): Operation not permitted in /var/www/hopeinstoughton_www/wp-content/plugins/simple-universal-google-analytics/main.php on line 8
[0] in function chmod in /var/www/hopeinstoughton_www/wp-content/plugins/simple-universal-google-analytics/main.php on line 8
[1] in function include_once in /var/www/hopeinstoughton_www/wp-settings.php on line 560
[2] in function require_once in /var/www/hopeinstoughton_www/wp-config.php on line 85
[3] in function require_once in /var/www/hopeinstoughton_www/wp-load.php on line 50
[4] in function require_once in /var/www/hopeinstoughton_www/wp-blog-header.php on line 13
[5] in function require in /var/www/hopeinstoughton_www/index.php on line 17

var $ = jQuery.noConflict();

function PageEditor() {

	let grid;
	let _this = this;

	function updateGrid(items, priceformat) {
		let widget = [];
		if (items) {
			$.each(items, function(key, item) {
				widget.push(jsonToTile(item, priceformat));
			});
		}
		return widget;
	}

	// take a json definition and convert it to a widget
	// x, y, id, w, h, content
	// 12 columns
	function jsonToTile(item, priceformat) {
		let foreground, background, prices;
		let widget = {w: item.w, h: item.h, id : item.uuid, x: item.x, y: item.y};
		switch(item.type) {
			case 'slideshow':
				widget.minW = 6;
				widget.maxW = 12;
				widget.minH = 5;
				widget.maxH = 8;

				let param = {
					images: [],
					isContinuous:	true,
					stretchImages:	true,
					onRender:		'ostore_render',
					showThumbnails:	false,
					autoAdvance:	5000,
				};
				let items = item.slides ?? [];
				for(let i = 0; i < item.slides.length; i++) {
					let node = item.slides[i];
					param.images.push({
						mainUrl: node.image,
						caption: node.caption,
						target:  node.target,
					});
				}
				param = JSON.stringify(param);
				
				// noclick -> single-click event is handled by browser
				widget.content = `
<div class="page-tile tile-slideshow slideshow-container bind-view imageViewer visible noclick" id="c-${item.uuid}" data-param='${param}'>
	<div class="shadow"></div>
	<div class="container">
		<div class="imagesWrapper touchSurface"></div>
		<button class="arrowButton leftButton" ><div><svg fill="none" stroke="#666" width="44" height="44" viewBox="3 3 18 18" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><polyline points="15 18 9 12 15 6" /></svg></div></button>
		<button class="arrowButton rightButton"><div><svg fill="none" stroke="#666" width="44" height="44" viewBox="3 3 18 18" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><polyline points="9 18 15 12 9 6"  /></svg></div></button>
	</div>
</div>
`;
				break;
				
			case 'category':	 // 	/category-name/c/123545
				widget.minW = 3;
				widget.minH = 5;
				widget.maxH = 5;
				background = item.background_uri ? `background-image:url(${item.background_uri});` : '';
				foreground = item.category_uri ? `<div class="image"><img src="${item.category_uri}"></div>` : '';
				switch(item.layout) {
					case 'list':
						widget.minH = 1;
						widget.content = `
<div class="page-tile tile-category category-heading" id="c-${item.uuid}">
<a class="link" href="${item.uri}"><span class="text" style="color:${item.color_txt}">${item.caption}</span></a>
</div>
`;
						break;
					
					case 'tile':
						widget.content = `
<div class="page-tile tile-category" id="c-${item.uuid}" style="${background}">
	<a class="link" href="${item.uri}"></a>
	<div class="text" style="color:${item.color_txt}">${item.caption}</div>
	${foreground}
</div>
`;
						break;
				}
				break;

			case 'product':
				widget.minW = 3;
				widget.maxW = 6;
				widget.minH = 4;
				widget.maxH = 4;
				// this will be the primary image thumbnail
				if (item.product_override != '') {
					item.thumb = item.product_override;
				}
				foreground = item.thumb ? `<div class="image"><img class="thumb-image" src="${item.thumb}"></div>` : '';
				if (priceformat) {
					prices = `
	<div class="a-section a-spacing-none aok-align-center aok-relative"> <span class="aok-offscreen"> \$${item.price.full} </span>
	<span class="a-price aok-align-center reinventPricePriceToPayMargin priceToPay"><span class="a-offscreen"> </span><span aria-hidden="true"><span class="a-price-symbol">$</span><span class="a-price-whole">${item.price.whole}<span class="a-price-decimal">.</span></span><span class="a-price-fraction">${item.price.frac}</span></span></span></div>
`;
				} else {
					prices = `
	<div class="priceView-hero-price priceView-customer-price" data-testid="customer-price" tabindex="-1">
		<span aria-hidden="true">\$${item.price.full}</span>
		<span class="sr-only">Your price for this item is $
			<!-- -->${item.price.full}
		</span>
	</div>

`;
				}
				
				widget.content = `
<div class="page-tile tile-product" id="c-${item.uuid}">
	<a class="link" href="${item.uri}"></a>
	<div class="text">${item.caption}</div>
	<div class="desc">${item.desc}</div>
	<div class="price">${prices}</div>
	${foreground}
</div>
`;	
				break;
				
			case 'static':
				widget.minW = item.w;
				widget.maxW = item.w;
				widget.minH = 5;
				widget.maxH = 8;
				let content = item.layout;
				let caption = item.caption;
				switch(item.layout) {
					case 'c1t':
					case 'c5t':
						content = `
<div class="static-container single">
	<div class="column-text">
		${item.text}
	</div>
</div>
`;
						break;
					case 'c1i':
					case 'c5i':
						content = `
<div class="static-container single">
	<div class="column-image">
			<img src="${item.image}" alt="">
	</div>
</div>
`;
						break;

					case 'c2t':
						content = `
<div class="static-container double">
	<div class="column-text column col1">
		${item.text}
	</div>
	<div class="column-image column col2">
		<img src="${item.image}" alt="">
	</div>
</div>
`;
						break;
					case 'c2i':
						content = `
<div class="static-container double">
	<div class="column-image column col1">
		<img src="${item.image}" alt="">
	</div>
	<div class="column-text column col2">
		${item.text}
	</div>
</div>
`;
						break;

					case 'c3t':
						content = `
<div class="static-container triple">
	<div class="column-text column col1">
		${item.text}
	</div>
	<div class="column-image column col2">
		<img src="${item.image}" alt="">
	</div>
</div>
`;
						break;
					case 'c3i':
						content = `
<div class="static-container triple">
	<div class="column-image column col1">
		<img src="${item.image}" alt="">
	</div>
	<div class="column-text column col2">
		${item.text}
	</div>
</div>
`;
						break;
				}
				if (caption != '') {
					caption = `<div class="static-caption" style="color:${item.color_txt};">${item.caption}</div>`;
				}
				widget.content = `
<div class="page-tile tile-static" id="c-${item.uuid}" style="background-color: ${item.color_bkg};">
<a class="static-link" href="{item.target}">
${caption}
${content}
</a>
</div>
`;
			
				break;
			
		}
		widget.content += `
<div class="hover-navigation grid-toolbar" style="z-index: 100; user-select: none;" ajax="/pages/action" data-auth="${item.auth}">
<a class="button-d action-toolbar" href="#" data-action="tile-edit" title="edit"><i class="fas fa-edit"></i></a>
<a class="button-d action-toolbar" href="#" data-action="tile-dup" title="duplicate"><i class="far fa-clone"></i></a>
<a class="button-d action-confirm" href="/pages/action/tile-trash/${item.auth}" confirm="Are you sure you wish to trash this tile?" title="trash"><i class="far fa-trash-alt"></i></a>

</div>
`;
		
		return widget;
	}

	function locateItem(griditems, uuid) {
		for(let i = 0; i < griditems.length; i++) {
			if (griditems[i].id == uuid) return i;
		}
		return -1;
	}


	$(document).on('loaded.template', function(e, jsondata, $container) {
		if (!$container.hasClass('bound')) {
			$container.addClass('bound');
			// https://github.com/gridstack/gridstack.js/blob/master/README.md
			// https://github.com/gridstack/gridstack.js/tree/master/doc
			let $grid = $('.grid-stack').first();
			if ($grid.length) {
				grid = GridStack.init({
					cellHeight: '75px', 	// '6rem',
					acceptWidgets: function(el) { return true },
				});
				grid.on('added', function(event, items) {
					console.log('added');
				}).on('dropped', function(event, previousWidget, newWidget) {
					console.log('dropped');
				}).on('change', function(event, items) {
					console.log('change');
					let griditems = grid.save();
					$.each(items, function(key, value) {
						let idx = locateItem(griditems, value.id);
						if (idx > -1) {
							griditems[idx].w = value.w;
							griditems[idx].h = value.h;
						}
					});

					let serialized = [];
					$.each(griditems, function(key, value) {
						serialized.push({id: value.id, w: value.w, h: value.h, x: value.x, y: value.y});
					});
					
					let $toolbar = $('div.grid-toolbar[data-auth]');
					let auth = $toolbar.data('auth');
					$.ajax({
						method:		'POST',
						url: 		'/pages/action',
						dataType:	'json',
						cache:		false,
						data: {
							action: 'layout',
							items:  serialized,
							auth:	auth,
						},
					});
				});		
			}

			$container.on('click', '.action-toolbar', function(e) {
				e.preventDefault();
				let $this = $(this);
				let $container = $this.closest('.grid-toolbar');
				let action = $this.data('action');
				let auth = $container.data('auth');
				let ajax = $container.attr('ajax');
				
				$.ajax({
					dataType: 'json',
					data: {
						action: action,
						auth: auth,
					},
					async: true,
					url: ajax,
					type: 'POST'
				}).done(function(data) {
					main.displayPage(data);
				});
			});
		}
		if (jsondata.items && grid) {
			grid.removeAll();
			grid.load(updateGrid(jsondata.items, jsondata.priceformat));
		}
	});

}

pageEditor = new PageEditor();