ProductPlayer/index.html at master · GuardCat/ProductPlayer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype HTML>
<html>
<head>
	<title>Комиссионные продукты POS</title>
	<link rel="stylesheet" id="mainstyle"></link>
	<link rel="stylesheet" id="cardstyle"></link>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">

</head>

<body>

<div class="searchPanel">
	<input type="search" id="textSearch" placeholder="поиск по имени и описанию">
	<div class="clearer" >&times;</div>

	<div class="searchButton" data-searchkey="type" data-searchval="SA">SA</div>
	<div class="searchButton" data-searchkey="type" data-searchval="BOX">BOX</div>
	<span> </span>
</div>

<div class="cardContainer">

</div>

<script type="text/javascript" id="observer"	></script>
<script type="text/javascript" id="base"		></script>
<script type="text/javascript" id="cardmaker"	></script>
<script type="text/javascript" id="filters"		></script>
<script type="text/javascript" id="loadlist" src="https://guardcat.github.io/GCLibraries/loadlistclass.js"></script>


<script type="text/javascript">

const
	data = {
		forLoad: {
			observer:	{attribute:	"src",	value:	"js/observer.js"},
			cardmaker:	{attribute: "src",	value:	"js/cardmaker.js"},
			filters:	{attribute:	"src",	value:	"js/filters.js"},
			base:		{attribute:	"src",	value:	"base.jsonp"},
			mainstyle:	{attribute:	"href",	value:	"css/mainstyle.css"},
			cardstyle:	{attribute:	"href",	value:	"css/card.css"}
		}
	}
;


function director( ) {
	const
		buttons 	= document.querySelectorAll(".searchButton"),
		clearer 	= document.querySelector(".clearer"),
		input		= document.querySelector("#textSearch"),
		panel		= document.querySelector(".searchPanel"),
		container 	= document.querySelector(".cardContainer"),
		count		= panel.querySelector("span")
	;

	function searchPanelClicked(e) {
		if(e.target.classList.contains("searchButton")) {
			e.target.classList.toggle("disabled");
			complexFilter(base.desc, input, buttons);
		}
	}

	function letsCount( ) {
		count.innerHTML = "Продуктов: " + base.desc.reduce( (res, el) => {
			return el.html.html.classList.contains("hidden") ? res : res + 1;
		}, 0 );
	}

	base = JSON.parse( decodeURIComponent(base) ); /* переменная декларирована в jsonp */

	/* Actions */

	/* Actions: генерируем карточки */
	base.desc.forEach( ( e, i ) => {
		container.appendChild( (new SACard(e, i, base)).html );
	} );

	/* Actions: считаем карточки */
	letsCount( );


	/* Events */
	clearer.addEventListener("click", clearFilters.bind(false, input, buttons, base.desc), false);

	panel.addEventListener("click", searchPanelClicked, false);
	panel.addEventListener("click", letsCount, false);
	panel.addEventListener("keyup", letsCount, false);

	input.addEventListener("keyup", complexFilter.bind(false, base.desc, input, buttons), false);

}


new LoadList(data.forLoad, director);


</script>

</body>
</html>