-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
executable file
·115 lines (96 loc) · 3.38 KB
/
example.html
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
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Assets Helper Example</title>
</head>
<body>
<!-- alert element -->
<div id="alert">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro debitis odio nisi. Odit eligendi necessitatibus maxime ab deleniti in voluptatem, obcaecati exercitationem ducimus adipisci soluta hic laboriosam dolorem animi. Facere.
</p>
</div>
<!-- alert preivew ( showing alert template rendering ) -->
<div id="alert-preview"></div>
<!-- alert template -->
<QuixTemplate id="alert-template">
<style>
body {
background: white
}
</style>
<QuixStyle>
// loading css ( JS WAY )
var alert = Object.assign({}, Assets);
alert.desktop("#alert-2", "background: {{ color }}");
</QuixStyle>
<QuixHtml>
<div id="alerts">
<!-- you can use twig sytax -->
{% for alert in alerts %}
<div id="{{ alert }}">
<p>{{ alert }}</p>
</div>
{% endfor %}
</div>
</QuixHtml>
<QuixScript dependencies="
http://example.com/js/foo.js,
http://example.com/js/bar.js
">
// you have access jQuery and lodash :)
// $("#alert-1").html("updated element")
</QuixScript>
</QuixTemplate>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<!-- assets-helper lib -->
<script src="css.js"></script>
<script src="image.js"></script>
<script src="template.js"></script>
<!-- assets-helper API -->
<script>
/////////////////////////////////////////////////////////
//
// Loading Alert element assets
//
/////////////////////////////////////////////////////////
var AlertAssets = Object.assign({}, Assets);
let imgUrl = 'http://via.placeholder.com/460x200?text=QUIX';
let background = {
'color' : '',
'background-image': 'url(' + imgUrl + ')',
'font-size' : '20px'
};
// css calling
AlertAssets.css('#alert', background)
//AlertAssets.css("#alert", "background: red; color: white; padding: 100px;");
AlertAssets.padding("#alert", {
top: 10, bottom: 20, right: 10, left: 15, // desktop
responsive: true, // want responsive
tablet: {
top: 10, bottom: 20, right: 10, left: 15 // tablet
},
phone: {
top: 10, bottom: 20, right: 10, left: 15 // phone
}
})
// width prop
AlertAssets.width('#alert', {
desktop: 20,
responsive: true,
tablet: 10,
phone: 18
})
// loading alert assets
AlertAssets.load("#alert");
// rendering template
AlertAssets.render("#alert-template", {
alerts: ["alert-1", "alert-2"],
color: "green"
}, "#alert-preview");
</script>
</body>
</html>