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

<?php
// everything to do with the enduser experience

class StorePages_View extends View {


	public function store_page_editor() {
		hook_execute('component.add', FALSE, 'mediaManager');
		// product will be inserted as single column, can be resized to two
		$html = <<<BLOCK
<div class="grid-toolbar" ajax="/pages/action" data-auth="{{auth}}">
	<a class="button-d action-toolbar" href="#" data-action="slideshow" title="insert fullwidth slideshow"><i class="fas fa-film"></i></a> 
	<a class="button-d action-toolbar" href="#" data-action="category"  title="insert category link"><i class="fas fa-sitemap"></i></a>
	<a class="button-d action-toolbar" href="#" data-action="product" title="insert specific product"><i class="fas fa-lightbulb"></i></a>
	<a class="button-d action-toolbar" href="#" data-action="static" title="insert static image with static text"><i class="far fa-image"></i></a>
	<a class="button-d" href="{{view}}" title="view page"><i class="fas fa-globe"></i></a>
</div>
<h3>Page Layout Editor</h3>
<div class="grid-stack clearfix"></div>

BLOCK;
		$this('store_page_editor')->html($html)->Title('Page Layout Editor');
		$base = $this->StaticUriModule(dirname(__DIR__));
		$this->IncludeFile("$base/gridstack/gridstack.min.css");
		$this->IncludeFile("$base/page-editor.css");
		$this->IncludeFile("$base/gridstack/gridstack-all.js", 'gridstack');
		$this->IncludeFile("$base/page-editor.js")->Depends('gridstack');
	}

	public function store_page_popup_category() {
		hook_execute('component.add', FALSE, 'colorpicker');
		$html = <<<BLOCK
<form method="post" class="frm json" action="/pages/action">
	<input type="hidden" name="action" value="set-category">
	<input type="hidden" name="auth" value="{{auth}}">
	<input type="hidden" name="w" value="{{w}}">
	<input type="hidden" name="h" value="{{h}}">
	<input type="hidden" name="x" value="{{x}}">
	<input type="hidden" name="y" value="{{y}}">
	<div class="control-group cf-public required">
		<label for="category_id">Product Category</label>
		<div class="controls">
			<select id="category_id" name="category_id">
				<option value="">(select a product category)</option>
				{{#each list_category}}<option value="{{key}}"{{#ifeq key @root/category_id}} selected{{/ifeq}}>{{value}}</option>{{/each}}
			</select> 
		</div>
		<div class="status-message" for="category_id"></div>
	</div>

	<div class="control-group cf-layout">
		<label for="layout">Tile Layout</label>
		<div class="controls">
			<select id="layout" class="action-category" name="layout">
				{{#each list_layout}}<option value="{{key}}"{{#ifeq key @root/layout}} selected{{/ifeq}}>{{value}}</option>{{/each}}
			</select> 
		</div>
	</div>

	<fieldset class="layout-option" data-key="tile"><legend>&nbsp;Category Tile&nbsp;</legend>

		<div class="control-group cf-color required">
			<label for="color_txt">Text Color</label>
			<div class="controls">
				<input id="color_txt" name="color_txt" size="20" type="text" value="{{color_txt}}" style="width:100px" class="component-colorpicker">
			</div>
			<div class="status-message" for="color_txt"></div>
		</div>

		<div class="control-group cf-title">
			<label for="category_uri">Category Image (URL)</label>
			<div class="controls">
				<input id="category_uri" class="bind-library" name="category_uri" size="30" type="text" value="{{category_uri}}">
			</div>
			<div class="status-message" for="category_uri"></div>
		</div>

		<div class="control-group sp-category required">
			<label for="background">Background Image</label>
			<div class="controls"> 
				<select id="background" name="background">
					<option value="">(none)</option>
					{{#each list_background}}<option value="{{key}}"{{#ifeq key @root/background}} selected{{/ifeq}}>{{value}}</option>{{/each}}
				</select>
			</div>
			<div class="status-message" for="background"></div>
		</div>
	</fieldset>

	<fieldset class="layout-option" data-key="list"><legend>&nbsp;Product List&nbsp;</legend>
		<div class="control-group cf-checkbox">
			<label>&nbsp;</label>
			<div class="controls">
				<div class="control-checkbox" style="width:300px">
					<input type="checkbox" id="featured" name="featured" value="1"{{#if featured}} checked{{/if}}> 
					<label for="featured">List only Featured Products</label>
				</div>
			</div>
		</div>
	</fieldset>

</form>
BLOCK;
		$this('store_page_popup_category')->html($html);
	}

	public function store_page_popup_slideshow() {
		$html = <<<BLOCK
<form method="post" class="frm json" action="/pages/action">
	<input type="hidden" name="action" value="set-slideshow">
	<input type="hidden" name="auth" value="{{auth}}">
	<input type="hidden" name="w" value="{{w}}">
	<input type="hidden" name="h" value="{{h}}">
	<input type="hidden" name="x" value="{{x}}">
	<input type="hidden" name="y" value="{{y}}">
{{#if new}}
<p>This will create a placeholder tile for a Slide Show.&nbsp; Upload images to the slideshow folder using Media Library.&nbsp; Once added, click on Edit icon to add/remove slides.</p>
{{else}}
<div class="slideshow-panel">
{{#each slides}}
	<div class="slide-panel slide-existing">
		<div class="control-group cf-image">
			<label for="image_{{id}}">Image URL (871px x 505px - 12:7)</label>
			<div class="controls">
				<input id="image_{{id}}" class="bind-library" style="width:610px" name="image[{{id}}]" size="30" type="text" value="{{image}}">
			</div>
		</div>

		<div class="control-group cf-caption">
			<label for="caption_{{id}}">Caption (Optional)</label>
			<div class="controls">
				<input id="caption_{{id}}" name="caption[{{id}}]"  style="width:610px" size="30" type="text" value="{{caption}}">
			</div>
		</div>

		<label for="target_{{id}}">Target URL</label>
		<div class="controls">
			<select id="target_{{id}}" name="target[{{id}}]" style="width:610px">
				{{#each @root/list_homepage}}<option value="{{key}}"{{#ifeq key ../target}} selected{{/ifeq}}>{{value}}</option>{{/each}}
			</select>
		</div>
		<div class="status-message" for="target_{{id}}"></div>
		
	</div>
{{/each}}
</div>
{{/if}}
</form>

BLOCK;
		$this('store_page_popup_slideshow')->html($html);
	}
	
	public function store_page_popup_product() {
		$html = <<<BLOCK
<form method="post" class="frm json" action="/pages/action">
	<input type="hidden" name="action" value="set-product">
	<input type="hidden" name="auth" value="{{auth}}">
	<input type="hidden" name="w" value="{{w}}">
	<input type="hidden" name="h" value="{{h}}">
	<input type="hidden" name="x" value="{{x}}">
	<input type="hidden" name="y" value="{{y}}">
	<div class="control-group cf-public required">
		<label for="product_id">Product</label>
		<div class="controls">
			<select id="product_id" name="product_id">
				<option value="">(select a product)</option>
				{{#each list_product}}<option value="{{key}}"{{#ifeq key @root/product_id}} selected{{/ifeq}}>{{value}}</option>{{/each}}
			</select> 
		</div>
		<div class="status-message" for="product_id"></div>
	</div>

	<div class="control-group sp-desc">
		<label for="sp_desc">Short Description</label>
		<div class="controls"><textarea id="sp_desc" name="sp_desc" class="admin-textarea" wrap="physical" style="height:75px">{{sp_desc}}</textarea></div>
	</div> 
	
	<div class="control-group cf-title" title="If specified, this will override the primary product image">
		<label for="product_override">Product Image (URL, Optional)</label>
		<div class="controls">
			<input id="product_override" name="product_override" size="30" type="text" value="{{product_override}}" placeholder="https://...">
		</div>
		<div class="status-message" for="product_override"></div>
	</div>
	
</form>

BLOCK;
		$this('store_page_popup_product')->html($html);
	}
	
	public function store_page_popup_static() {
		hook_execute('component.add', '', 'htmledit');
		hook_execute('component.add', FALSE, 'colorpicker');
		$html = <<<BLOCK
<form method="post" class="frm json" action="/pages/action">
	<input type="hidden" name="action" value="set-static">
	<input type="hidden" name="auth" value="{{auth}}">
	<input type="hidden" name="h" value="{{h}}">
	<input type="hidden" name="x" value="{{x}}">
	<input type="hidden" name="y" value="{{y}}">

	
	<div class="component-tabs" style="min-height:550px;">
		<ul>
			<li><a href="#general">General</a></li>
			<li><a href="#second">Text</a></li>
		</ul>
		<div id="general">

			<div class="control-group cf-layout">
				<label for="layout">Tile Layout</label>
				<div class="controls">
					<select id="layout" name="layout">
						{{#each list_layout}}<option value="{{key}}"{{#ifeq key @root/layout}} selected{{/ifeq}}>{{value}}</option>{{/each}}
					</select> 
				</div>
			</div>

			<div class="control-group cf-caption">
				<label for="caption" title="this will only appear on two-column tiles">Caption (Optional)</label>
				<div class="controls">
					<input id="caption" name="caption" style="width:408px" size="30" type="text" value="{{caption}}">
				</div>
			</div>

			<div>
				<div class="control-group cf-color" style="display:inline-block;width:250px;">
					<label for="color_txt" title="for caption">Text Color</label>
					<div class="controls">
						<input id="color_txt" name="color_txt" size="20" type="text" value="{{color_txt}}" style="width:100px" class="component-colorpicker">
					</div>
					<div class="status-message" for="color_txt"></div>
				</div>

				<div class="control-group cf-color" style="display:inline-block">
					<label for="color_bkg">Background&nbsp;Color</label>
					<div class="controls">
						<input id="color_bkg" name="color_bkg" size="20" type="text" value="{{color_bkg}}" style="width:100px" class="component-colorpicker action-colorchange">
					</div>
					<div class="status-message" for="color_bkg"></div>
				</div>
			</div>

			<div class="control-group cf-image">
				<label for="image">Image URL</label>
				<div class="controls">
					<input id="image" class="bind-library" style="width:408px" name="image" size="30" type="text" value="{{image}}">
				</div>
			</div>

			<div class="control-group sp-homepage">
				<label for="target">Target URL</label>
				<div class="controls">
					<select id="target" name="target" style="width:408px">
						{{#each list_homepage}}<option value="{{key}}"{{#ifeq key @root/target}} selected{{/ifeq}}>{{value}}</option>{{/each}}
					</select>
				</div>
				<div class="status-message" for="target"></div>
			</div>


		</div>
		<div id="second">

			<div class="control-group cf-text">
				<label for="text">Text</label>
				<div class="controls"><textarea 
					id="text" name="text" class="htmledit" wrap="physical" style="height:350px"
					default='{"content_style":"body { background-color:{{color_bkg}};}"}'
				>{{text}}</textarea></div>
			</div> 

	  </div>
	</div>	

</form>
BLOCK;
		$this('store_page_popup_static')->html($html); // admin-textarea 
	}
	
	// display cell - display-on-hover close
	//  move/resize component
/*
				foreground = item.category_uri ? `<div class="image"><img src="${item.category_uri}"></div>` : '';
<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>

*/
	public function store_page_view() {
		$html = <<<'BLOCK'

<div class="storepage-container" style="position:relative;font-size:0">
{{#if edit}}
<div style="text-align:right; position:absolute;top:0;right:0">
 // <a href="{{edit}}">edit</a>
</div>
{{/if}}
{{#each tiles}}
	{{#ifeq type "category"}}
		{{#ifeq layout "list"}}
			<div class="tile-break tile-view"></div>
		{{/ifeq}}
	{{/ifeq}}
		<div class="tile-view tilew-{{w}} tileh-{{h}} type-{{type}} layout{{layout}}">
		{{#ifeq type "category"}}
			{{#ifeq layout "list"}}
			<div class="page-tile tile-category category-heading" id="c-{{uuid}}">
				<a class="head" href="{{uri}}" style="color:{{color_txt}}">{{caption}}</a>
			</div>
			{{/ifeq}}{{#ifeq layout "tile"}}
			<div class="page-tile tile-category" id="c-{{uuid}}"{{#if background_uri}} style="background-image:url({{background_uri}});"{{else}} style="background-color: rgba(135, 149, 150, 0.3);"{{/if}}>
				<a class="link" href="{{uri}}"></a>
				<div class="text" style="color:{{color_txt}}">{{caption}}</div>
				{{#if category_uri}}<div class="image"><img src="{{category_uri}}"></div>{{/if}}
			</div>
			{{/ifeq}}
		{{/ifeq}}{{#ifeq type "product"}}
			<div class="page-tile tile-product" id="c-{{uuid}}">
				<a class="link" href="{{uri}}"></a>
				<div class="text">{{caption}}</div>
				<div class="desc">{{desc}}</div>
				<div class="price">
				{{#if @root/priceformat}}
					<div class="a-section a-spacing-none aok-align-center aok-relative"> <span class="aok-offscreen"> \${{price.full}} </span>
					<span class="a-price aok-align-center priceToPay"><span class="a-offscreen"> </span><span aria-hidden="true"><span class="a-price-symbol">$</span><span class="a-price-whole">{{price.whole}}<span class="a-price-decimal">.</span></span><span class="a-price-fraction">{{price.frac}}</span></span></span></div>
				{{else}}
					<div class="priceView-hero-price" data-testid="customer-price" tabindex="-1">
						<span aria-hidden="true">${{price.full}}</span>
						<span class="sr-only">Your price for this item is $
							<!-- -->{{price.full}}
						</span>
					</div>
				{{/if}}
				</div>
				{{#if thumb}}<div class="image"><img class="thumb-image" src="{{thumb}}"></div>{{/if}}
			</div>
		{{/ifeq}}{{#ifeq type "slideshow"}}
			<div class="page-tile tile-slideshow slideshow-container bind-view imageViewer visible noclick" id="c-{{uuid}}" data-param='{{{param}}}'>
				<div class="shadow"></div>
				<div class="container">
					<div class="imagesWrapper"></div>
					<button class="touchSurface"></button>
					<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>

		{{/ifeq}}{{#ifeq type "static"}}

			<div class="page-tile tile-static" id="c-{{uuid}}" href="{{target}}" style="background-color: {{color_bkg}};">
				<a class="static-link" href="{{target}}">
					{{#if caption}}
						<div class="static-caption" style="color:{{color_txt}};">{{caption}}</div>
					{{/if}}
					{{#ifeq layout "c1t"}}
						<div class="static-container single" >
							<div class="column-text">
							{{{text}}}
							</div>
						</div>
					
					{{/ifeq}}{{#ifeq layout "c1i"}}
						<div class="static-container single">
							<div class="column-image">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
						</div>

					{{/ifeq}}{{#ifeq layout "c5t"}}
						<div class="static-container single">
							<div class="column-text">
							{{{text}}}
							</div>
						</div>

					{{/ifeq}}{{#ifeq layout "c5i"}}
						<div class="static-container single">
							<div class="column-image">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
						</div>

					{{/ifeq}}{{#ifeq layout "c2t"}}
						<div class="static-container double">
							<div class="column-text column col1">
								{{{text}}}
							</div>
							<div class="column-image column col2">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
						</div>

					{{/ifeq}}{{#ifeq layout "c2i"}}
						<div class="static-container double">
							<div class="column-image column col1">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
							<div class="column-text column col2">
								{{{text}}}
							</div>
						</div>
					{{/ifeq}}{{#ifeq layout "c3t"}}
						<div class="static-container triple">
							<div class="column-text column col1">
								{{{text}}}
							</div>
							<div class="column-image column col2">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
						</div>

					{{/ifeq}}{{#ifeq layout "c3i"}}
						<div class="static-container triple">
							<div class="column-image column col1">
								<img src="{{image}}" alt="" nopin="nopin">
							</div>
							<div class="column-text column col2">
								{{{text}}}
							</div>
						</div>
					{{/ifeq}}
				</a>
			</div>
		
		{{/ifeq}}
	</div>
	{{#ifeq type "category"}}
		{{#ifeq layout "list"}}
			<div class="tile-break tile-view"></div>
		{{/ifeq}}
	{{/ifeq}}
{{/each}}
</div>
BLOCK;
		return $this('store_page_view')->html($html)->Title('Pages');
	}
}