Lorolem upravena verze - LittleFS, FSBrowser pro offline, pouziti PROGMEM.
This commit is contained in:
2
examples/SmartSwitch/data_src/js_css_src/.exclude.files
Normal file
2
examples/SmartSwitch/data_src/js_css_src/.exclude.files
Normal file
@ -0,0 +1,2 @@
|
||||
/*.js.gz
|
||||
/.exclude.files
|
||||
14
examples/SmartSwitch/data_src/js_css_src/ace-drafts/ace.js
Normal file
14
examples/SmartSwitch/data_src/js_css_src/ace-drafts/ace.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
14
examples/SmartSwitch/data_src/js_css_src/ace.js
Normal file
14
examples/SmartSwitch/data_src/js_css_src/ace.js
Normal file
File diff suppressed because one or more lines are too long
5787
examples/SmartSwitch/data_src/js_css_src/app.js
Normal file
5787
examples/SmartSwitch/data_src/js_css_src/app.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inline Timepicker Example</title>
|
||||
<!-- [1 - LOAD THE LIBRARIES] -->
|
||||
<link href="tpick-light.css" rel="stylesheet">
|
||||
<script src="tpick.js"></script>
|
||||
<style>
|
||||
html, body {font-family: arial;}
|
||||
.myrow{display:block;float:left}
|
||||
#pick-inline-on{width:45%}#t0{width:10%}#pick-inline-off{width:45%}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Inline Time Picker</h1>
|
||||
<!-- [2 - DEFINE YOUR TEXT INPUT + CONTAINER] -->
|
||||
<div id="pick-inline-on" class="myrow"><input type="text" id="input-inline-on"/> TIME ON</div>
|
||||
<div id="t0" class="myrow"></div>
|
||||
<div id="pick-inline-off" class="myrow"><input type="text" id="input-inline-off"/> TIME OFF</div>
|
||||
|
||||
<!-- [3 - ATTACH DATE PICKER ON LOAD] -->
|
||||
<script>
|
||||
window.addEventListener("load", function(){
|
||||
// container + target input
|
||||
tpick.attach("pick-inline-on", "input-inline-on");
|
||||
tpick.attach("pick-inline-off", "input-inline-off");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Popup Timeicker Example</title>
|
||||
<!-- [1 - LOAD LIBRARIES] -->
|
||||
<link href="tpick-light-pop.css" rel="stylesheet">
|
||||
<script src="tpick-pop.js"></script>
|
||||
<style>
|
||||
html, body { font-family: arial; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Popup Time Picker</h1>
|
||||
|
||||
<!-- [2 - DEFINE YOUR TEXT INPUT + CONTAINER] -->
|
||||
<input type="text" id="input-popup-start"/> ON/OFF <input type="text" id="input-popup-stop"/> <button id="set" type="button" onclick="buttonClick(this);">SET</button>
|
||||
<p>Line</p>
|
||||
|
||||
<!-- [3 - ATTACH DATE PICKER] -->
|
||||
<script>
|
||||
window.addEventListener("load", function(){
|
||||
tpick.attach("input-popup-start");
|
||||
tpick.attach("input-popup-stop");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
||||
LICENSE
|
||||
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
||||
|
||||
Copyright 2018 by Code Boxx
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
|
||||
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
||||
MORE
|
||||
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
|
||||
Please visit https://code-boxx.com/ for more!
|
||||
@ -0,0 +1,65 @@
|
||||
/* [CONTAINER] */
|
||||
.tpop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transition: all 0.5s;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.tpop.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.tpicker {
|
||||
background: #f2f2f2;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
white-space: nowrap;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.tpop .tpicker {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
/* [HR + MIN + AM/PM] */
|
||||
.tpicker-h, .tpicker-m, .tpicker-ap {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
}
|
||||
.tpicker input[type=text] {
|
||||
box-sizing: border-box;
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.tpicker-up, .tpicker-down {
|
||||
text-align: center;
|
||||
color: #ff853f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* [CANCEL + OK BUTTON] */
|
||||
.tpicker-btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.tpicker-btn input[type=button] {
|
||||
width: 50%;
|
||||
padding: 10px 0;
|
||||
border: 0;
|
||||
background: #a83a0b;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/* [CONTAINER] */
|
||||
.tpicker {
|
||||
background: #f2f2f2;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
white-space: nowrap;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* [HR + MIN + AM/PM] */
|
||||
.tpicker-h, .tpicker-m, .tpicker-ap {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
}
|
||||
.tpicker input[type=text] {
|
||||
box-sizing: border-box;
|
||||
width: 70%;
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
.tpicker-up, .tpicker-down {
|
||||
text-align: center;
|
||||
color: #ff853f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* [CANCEL + OK BUTTON] */
|
||||
.tpicker-btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.tpicker-btn input[type=button] {
|
||||
width: 50%;
|
||||
padding: 10px 0;
|
||||
border: 0;
|
||||
background: #a83a0b;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -0,0 +1,136 @@
|
||||
var tpick = {
|
||||
attach : function (target) {
|
||||
// attach() : attach time picker to target
|
||||
|
||||
// Generate a unique random ID for the time picker
|
||||
var uniqueID = 0;
|
||||
while (document.getElementById("tpick-" + uniqueID) != null) {
|
||||
uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
|
||||
}
|
||||
|
||||
// Create wrapper
|
||||
var tw = document.createElement("div");
|
||||
tw.id = "tpick-" + uniqueID;
|
||||
tw.classList.add("tpop");
|
||||
tw.dataset.target = target;
|
||||
tw.addEventListener("click", function (evt) {
|
||||
if (evt.target.classList.contains("tpop")) {
|
||||
this.classList.remove("show");
|
||||
}
|
||||
});
|
||||
|
||||
// Create new time picker
|
||||
var tp = document.createElement("div");
|
||||
tp.classList.add("tpicker");
|
||||
|
||||
// Create hour picker
|
||||
tp.appendChild(this.draw("h"));
|
||||
tp.appendChild(this.draw("m"));
|
||||
tp.appendChild(this.draw("ap"));
|
||||
|
||||
// OK button
|
||||
var bottom = document.createElement("div"),
|
||||
ok = document.createElement("input");
|
||||
ok.setAttribute("type", "button");
|
||||
ok.value = "OK";
|
||||
ok.addEventListener("click", function(){ tpick.set(this); });
|
||||
bottom.classList.add("tpicker-btn");
|
||||
bottom.appendChild(ok);
|
||||
tp.appendChild(bottom);
|
||||
|
||||
// Attach time picker to body
|
||||
tw.appendChild(tp);
|
||||
document.body.appendChild(tw);
|
||||
|
||||
// Attach on focus event
|
||||
var target = document.getElementById(target);
|
||||
target.dataset.dp = uniqueID;
|
||||
target.onfocus = function () {
|
||||
document.getElementById("tpick-" + this.dataset.dp).classList.add("show");
|
||||
};
|
||||
},
|
||||
|
||||
draw : function (type) {
|
||||
// draw() : support function to create the hr, min, am/pm selector
|
||||
|
||||
// Create the controls
|
||||
var docket = document.createElement("div"),
|
||||
up = document.createElement("div"),
|
||||
down = document.createElement("div"),
|
||||
text = document.createElement("input");
|
||||
docket.classList.add("tpicker-" + type);
|
||||
up.classList.add("tpicker-up");
|
||||
down.classList.add("tpicker-down");
|
||||
up.innerHTML = "︿";
|
||||
down.innerHTML = "﹀";
|
||||
text.readOnly = true;
|
||||
text.setAttribute("type", "text");
|
||||
|
||||
// Default values + click event
|
||||
// You can do your own modifications here
|
||||
if (type=="h") {
|
||||
text.value = "12";
|
||||
up.addEventListener("click", function(){ tpick.spin("h", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("h", 0, this); });
|
||||
} else if (type=="m") {
|
||||
text.value = "10";
|
||||
up.addEventListener("click", function(){ tpick.spin("m", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("m", 0, this); });
|
||||
} else {
|
||||
text.value = "AM";
|
||||
up.addEventListener("click", function(){ tpick.spin("ap", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("ap", 0, this); });
|
||||
}
|
||||
|
||||
// Complete + return the docket
|
||||
docket.appendChild(up);
|
||||
docket.appendChild(text);
|
||||
docket.appendChild(down);
|
||||
return docket;
|
||||
},
|
||||
|
||||
spin : function (type, direction, el) {
|
||||
// spin() : when the up/down button is pressed
|
||||
|
||||
// Get current field + value
|
||||
var parent = el.parentElement,
|
||||
field = parent.getElementsByTagName("input")[0],
|
||||
value = field.value;
|
||||
|
||||
// Spin it
|
||||
if (type=="h") {
|
||||
value = parseInt(value);
|
||||
if (direction) { value++; } else { value--; }
|
||||
if (value==0) { value = 12; }
|
||||
else if (value>12) { value = 1; }
|
||||
} else if (type=="m") {
|
||||
value = parseInt(value);
|
||||
if (direction) { value+=5; } else { value-=5; }
|
||||
if (value<0) { value = 55; }
|
||||
else if (value>60) { value = 0; }
|
||||
if (value<10) { value = "0" + value; }
|
||||
}
|
||||
else {
|
||||
value = value=="PM" ? "AM" : "PM";
|
||||
}
|
||||
field.value = value;
|
||||
},
|
||||
|
||||
set : function (el) {
|
||||
// set() : set the selected time on the target
|
||||
|
||||
// Get the parent container
|
||||
var parent = el.parentElement;
|
||||
while (parent.classList.contains("tpop") == false) {
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
// Formulate + set selected time
|
||||
var input = parent.querySelectorAll("input[type=text]");
|
||||
var time = input[0].value + ":" + input[1].value + " " + input[2].value;
|
||||
document.getElementById(parent.dataset.target).value = time;
|
||||
|
||||
// Close popup
|
||||
parent.classList.remove("show");
|
||||
}
|
||||
};
|
||||
116
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick.js
Normal file
116
examples/SmartSwitch/data_src/js_css_src/js-time-picker/tpick.js
Normal file
@ -0,0 +1,116 @@
|
||||
var tpick = {
|
||||
attach : function (container, target) {
|
||||
// attach() : attach time picker to target
|
||||
|
||||
// Generate a unique random ID for the time picker
|
||||
var uniqueID = 0;
|
||||
while (document.getElementById("tpick-" + uniqueID) != null) {
|
||||
uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
|
||||
}
|
||||
|
||||
// Create new time picker
|
||||
var tp = document.createElement("div");
|
||||
tp.id = "tpick-" + uniqueID;
|
||||
tp.dataset.target = target;
|
||||
tp.classList.add("tpicker");
|
||||
|
||||
// Create hour picker
|
||||
tp.appendChild(this.draw("h"));
|
||||
tp.appendChild(this.draw("m"));
|
||||
tp.appendChild(this.draw("ap"));
|
||||
|
||||
// OK button
|
||||
var bottom = document.createElement("div"),
|
||||
ok = document.createElement("input");
|
||||
ok.setAttribute("type", "button");
|
||||
ok.value = "OK";
|
||||
ok.addEventListener("click", function(){ tpick.set(this); });
|
||||
bottom.classList.add("tpicker-btn");
|
||||
bottom.appendChild(ok);
|
||||
tp.appendChild(bottom);
|
||||
|
||||
// Attach time picker to target container
|
||||
document.getElementById(container).appendChild(tp);
|
||||
},
|
||||
|
||||
draw : function (type) {
|
||||
// draw() : support function to create the hr, min, am/pm selector
|
||||
|
||||
// Create the controls
|
||||
var docket = document.createElement("div"),
|
||||
up = document.createElement("div"),
|
||||
down = document.createElement("div"),
|
||||
text = document.createElement("input");
|
||||
docket.classList.add("tpicker-" + type);
|
||||
up.classList.add("tpicker-up");
|
||||
down.classList.add("tpicker-down");
|
||||
up.innerHTML = "︿";
|
||||
down.innerHTML = "﹀";
|
||||
text.readOnly = true;
|
||||
text.setAttribute("type", "text");
|
||||
|
||||
// Default values + click event
|
||||
// You can do your own modifications here
|
||||
if (type=="h") {
|
||||
text.value = "12";
|
||||
up.addEventListener("click", function(){ tpick.spin("h", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("h", 0, this); });
|
||||
} else if (type=="m") {
|
||||
text.value = "10";
|
||||
up.addEventListener("click", function(){ tpick.spin("m", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("m", 0, this); });
|
||||
} else {
|
||||
text.value = "AM";
|
||||
up.addEventListener("click", function(){ tpick.spin("ap", 1, this); });
|
||||
down.addEventListener("click", function(){ tpick.spin("ap", 0, this); });
|
||||
}
|
||||
|
||||
// Complete + return the docket
|
||||
docket.appendChild(up);
|
||||
docket.appendChild(text);
|
||||
docket.appendChild(down);
|
||||
return docket;
|
||||
},
|
||||
|
||||
spin : function (type, direction, el) {
|
||||
// spin() : when the up/down button is pressed
|
||||
|
||||
// Get current field + value
|
||||
var parent = el.parentElement,
|
||||
field = parent.getElementsByTagName("input")[0],
|
||||
value = field.value;
|
||||
|
||||
// Spin it
|
||||
if (type=="h") {
|
||||
value = parseInt(value);
|
||||
if (direction) { value++; } else { value--; }
|
||||
if (value==0) { value = 12; }
|
||||
else if (value>12) { value = 1; }
|
||||
} else if (type=="m") {
|
||||
value = parseInt(value);
|
||||
if (direction) { value+=5; } else { value-=5; }
|
||||
if (value<0) { value = 55; }
|
||||
else if (value>60) { value = 0; }
|
||||
if (value<10) { value = "0" + value; }
|
||||
}
|
||||
else {
|
||||
value = value=="PM" ? "AM" : "PM";
|
||||
}
|
||||
field.value = value;
|
||||
},
|
||||
|
||||
set : function (el) {
|
||||
// set() : set the selected time on the target
|
||||
|
||||
// Get the parent container
|
||||
var parent = el.parentElement;
|
||||
while (parent.classList.contains("tpicker") == false) {
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
// Formulate + set selected time
|
||||
var input = parent.querySelectorAll("input[type=text]");
|
||||
var time = input[0].value + ":" + input[1].value + " " + input[2].value;
|
||||
document.getElementById(parent.dataset.target).value = time;
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,94 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Auto-adjust</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#g1 {
|
||||
width:400px; height:320px;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#g2, #g3, #g4 {
|
||||
width:100px; height:80px;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
width: 450px;
|
||||
margin: 2em auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="g1"></div>
|
||||
<div id="g2"></div>
|
||||
<div id="g3"></div>
|
||||
<div id="g4"></div>
|
||||
<p>
|
||||
JustGage auto-adjusts to the size of containing element. And to the screen zoom level. And screen density. Nice. This means you’ll get clean, sharp and nice looking gauge at all times. Try zooming the page to see the results.
|
||||
</p>
|
||||
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
var g1, g2, g3, g4;
|
||||
|
||||
window.onload = function(){
|
||||
var g1 = new JustGage({
|
||||
id: "g1",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Big Fella",
|
||||
label: "pounds"
|
||||
});
|
||||
|
||||
var g2 = new JustGage({
|
||||
id: "g2",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Small Buddy",
|
||||
label: "oz"
|
||||
});
|
||||
|
||||
var g3 = new JustGage({
|
||||
id: "g3",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Tiny Lad",
|
||||
label: "oz"
|
||||
});
|
||||
|
||||
var g4 = new JustGage({
|
||||
id: "g4",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Little Pal",
|
||||
label: "oz"
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
g1.refresh(getRandomInt(50, 100));
|
||||
g2.refresh(getRandomInt(50, 100));
|
||||
g3.refresh(getRandomInt(0, 50));
|
||||
g4.refresh(getRandomInt(0, 50));
|
||||
}, 2500);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Counter</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="g1" class="gauge"></div>
|
||||
<a href="#" id="g1_refresh">Random Refresh</a>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
var g1;
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
g1 = new JustGage({
|
||||
id: "g1",
|
||||
value: 72,
|
||||
min: 0,
|
||||
max: 100,
|
||||
donut: true,
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true,
|
||||
hideInnerShadow: true
|
||||
});
|
||||
|
||||
document.getElementById('g1_refresh').addEventListener('click', function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom interval</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#g1,
|
||||
#g2,
|
||||
#g3 {
|
||||
width: 200px;
|
||||
height: 160px;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
width: 450px;
|
||||
margin: 2em auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="g1"></div>
|
||||
<div id="g2"></div>
|
||||
<div id="g3"></div>
|
||||
<p>
|
||||
You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.
|
||||
</p>
|
||||
<p>
|
||||
Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
|
||||
</p>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
var g1, g2, g3;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
g1 = new JustGage({
|
||||
id: "g1",
|
||||
value: getRandomInt(350, 980),
|
||||
min: 350,
|
||||
max: 980,
|
||||
title: "Lone Ranger",
|
||||
label: "miles traveled"
|
||||
});
|
||||
|
||||
g2 = new JustGage({
|
||||
id: "g2",
|
||||
value: 32,
|
||||
min: 50,
|
||||
max: 100,
|
||||
title: "Empty Tank",
|
||||
label: ""
|
||||
});
|
||||
|
||||
g3 = new JustGage({
|
||||
id: "g3",
|
||||
value: 120,
|
||||
min: 50,
|
||||
max: 100,
|
||||
title: "Meltdown",
|
||||
label: ""
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
g1.refresh(getRandomInt(350, 980));
|
||||
g2.refresh(getRandomInt(0, 49));
|
||||
g3.refresh(getRandomInt(101, 200));
|
||||
}, 2500);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Custom Node</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
button {
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 850px;
|
||||
margin: 20px auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 20px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="cont" class="container">
|
||||
<div id="gauge2" class="gauge"></div>
|
||||
<div id="gauge3" class="gauge" data-title="#3" data-value="75" data-counter="true"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button type="button" id="g1_show">Show G1</button>
|
||||
<button type="button" id="g4_show">Show G4</button>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button type="button" id="g1_refresh">Refresh G1</button>
|
||||
<button type="button" id="g2_refresh">Refresh G2</button>
|
||||
<button type="button" id="g3_refresh">Refresh G3</button>
|
||||
<button type="button" id="g4_refresh">Refresh G4</button>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gNode1 = document.createElement('div');
|
||||
gNode1.setAttribute("class", "gauge");
|
||||
|
||||
var gNode4 = document.createElement('div');
|
||||
gNode4.setAttribute("class", "gauge");
|
||||
gNode4.setAttribute("data-title", "#4");
|
||||
gNode4.setAttribute("data-value", "100");
|
||||
gNode4.setAttribute("data-counter", "true");
|
||||
|
||||
var gauge1 = new JustGage({
|
||||
parentNode: gNode1,
|
||||
width: 150,
|
||||
height: 150,
|
||||
title: "#1",
|
||||
value: 25,
|
||||
min: 0,
|
||||
max: 100,
|
||||
decimals: 0,
|
||||
counter: true
|
||||
});
|
||||
|
||||
var gauge2 = new JustGage({
|
||||
id: "gauge2",
|
||||
title: "#2",
|
||||
value: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
humanFriendly: false,
|
||||
decimals: 0,
|
||||
counter: true
|
||||
});
|
||||
|
||||
var gauge3 = new JustGage({
|
||||
id: "gauge3"
|
||||
});
|
||||
|
||||
var gauge4 = new JustGage({
|
||||
parentNode: gNode4,
|
||||
width: 150,
|
||||
height: 150
|
||||
});
|
||||
|
||||
document.getElementById('g1_refresh').addEventListener('click', function() {
|
||||
gauge1.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('g2_refresh').addEventListener('click', function() {
|
||||
gauge2.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('g3_refresh').addEventListener('click', function() {
|
||||
gauge3.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('g4_refresh').addEventListener('click', function() {
|
||||
gauge4.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('g1_show').addEventListener('click', function() {
|
||||
var container = document.getElementById("cont");
|
||||
container.insertBefore(gNode1, container.childNodes[0]);
|
||||
container = null;
|
||||
});
|
||||
|
||||
document.getElementById('g4_show').addEventListener('click', function() {
|
||||
var container = document.getElementById("cont");
|
||||
container.appendChild(gNode4, container.childNodes[0]);
|
||||
container = null;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Custom Sectors</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div id="gg1" class="gauge"></div>
|
||||
<p id="gg1_text">0-50 is green, 51-100 is red</p>
|
||||
<a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
|
||||
<a href="#" id="gg1_update" class="button grey">Update Sectors</a>
|
||||
</div>
|
||||
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gg1 = new JustGage({
|
||||
id: "gg1",
|
||||
value : 72.15,
|
||||
min: 0,
|
||||
max: 100,
|
||||
decimals: 2,
|
||||
gaugeWidthScale: 0.6,
|
||||
customSectors: [{
|
||||
color : "#00ff00",
|
||||
lo : 0,
|
||||
hi : 50
|
||||
},{
|
||||
color : "#ff0000",
|
||||
lo : 50,
|
||||
hi : 100
|
||||
}],
|
||||
counter: true
|
||||
});
|
||||
|
||||
document.getElementById('gg1_refresh').addEventListener('click', function() {
|
||||
gg1.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('gg1_update').addEventListener('click', function() {
|
||||
gg1.update({
|
||||
value: getRandomInt(0, 100),
|
||||
customSectors: [{
|
||||
color : "#00ff00",
|
||||
lo : 0,
|
||||
hi : 25
|
||||
},{
|
||||
color : "#ff0000",
|
||||
lo : 25,
|
||||
hi : 100
|
||||
}]
|
||||
});
|
||||
document.getElementById('gg1_text').innerHTML = "<b>UPDATE</b>: 0-25 is green, 26-100 is red"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,116 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Custom Render Function</title>
|
||||
<style>
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge_container {
|
||||
text-align: left;
|
||||
height: 450px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
margin: 40px 5px 0 5px;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
li.refresh {
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
width: 65px;
|
||||
margin: 0 0 5px 0;
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
color: #919191;
|
||||
}
|
||||
|
||||
input {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
input[disabled=disabled] {
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
padding: 0 0 0 10px;
|
||||
margin: 0px;
|
||||
color: #777777;
|
||||
border-color: transparent;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 0px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="gg1" style="width: 200px; height: 150px;"></div>
|
||||
<a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gg1 = new JustGage({
|
||||
id: "gg1",
|
||||
value: 50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Target",
|
||||
label: "temperature",
|
||||
textRenderer: customValue
|
||||
});
|
||||
|
||||
document.getElementById('gg1_refresh').addEventListener('click', function() {
|
||||
gg1.refresh(getRandomInt(0, 100));
|
||||
return false;
|
||||
});
|
||||
|
||||
function customValue(val) {
|
||||
if (val < 50) {
|
||||
return 'low';
|
||||
} else if (val > 50) {
|
||||
return 'high';
|
||||
} else if (val === 50) {
|
||||
return 'ideal';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Customize style</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#g1, #g2, #g3, #g4, #g5, #g6 {
|
||||
width:200px; height:160px;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
width: 450px;
|
||||
margin: 2em auto;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="g1"></div>
|
||||
<div id="g2"></div>
|
||||
<div id="g3"></div>
|
||||
<div id="g4"></div>
|
||||
<div id="g5"></div>
|
||||
<div id="g6"></div>
|
||||
<p>
|
||||
Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc.
|
||||
</p>
|
||||
<p>
|
||||
Check non-minified version of justgage.js for list of all setup parameters.
|
||||
</p>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<!--<script src="../justgage-1.0.1.js"></script>-->
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
var g1, g2, g3, g4, g5, g6;
|
||||
|
||||
var g1 = new JustGage({
|
||||
id: "g1",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Custom Width",
|
||||
label: "",
|
||||
gaugeWidthScale: 0.2
|
||||
});
|
||||
|
||||
var g2 = new JustGage({
|
||||
id: "g2",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Custom Shadow",
|
||||
label: "",
|
||||
shadowOpacity: 1,
|
||||
shadowSize: 5,
|
||||
shadowVerticalOffset: 10
|
||||
});
|
||||
|
||||
var g3 = new JustGage({
|
||||
id: "g3",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Custom Colors",
|
||||
label: "",
|
||||
levelColors: [
|
||||
"#00fff6",
|
||||
"#ff00fc",
|
||||
"#1200ff"
|
||||
]
|
||||
});
|
||||
|
||||
var g4 = new JustGage({
|
||||
id: "g4",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Hide Labels",
|
||||
hideMinMax: true
|
||||
});
|
||||
|
||||
|
||||
var g5 = new JustGage({
|
||||
id: "g5",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Animation Type",
|
||||
label: "",
|
||||
startAnimationTime: 2000,
|
||||
startAnimationType: ">",
|
||||
refreshAnimationTime: 1000,
|
||||
refreshAnimationType: "bounce"
|
||||
});
|
||||
|
||||
var g6 = new JustGage({
|
||||
id: "g6",
|
||||
value: getRandomInt(0, 100),
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: "Minimal",
|
||||
label: "",
|
||||
hideMinMax: true,
|
||||
gaugeColor: "#fff",
|
||||
levelColors: ["#000"],
|
||||
hideInnerShadow: true,
|
||||
startAnimationTime: 1,
|
||||
startAnimationType: "linear",
|
||||
refreshAnimationTime: 1,
|
||||
refreshAnimationType: "linear"
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
g2.refresh(getRandomInt(0, 100));
|
||||
g3.refresh(getRandomInt(0, 100));
|
||||
g4.refresh(getRandomInt(0, 100));
|
||||
g5.refresh(getRandomInt(0, 100));
|
||||
g6.refresh(getRandomInt(0, 100));
|
||||
}, 2500);
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Defaults</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.container {
|
||||
width: 600px;
|
||||
margin: 100px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="gg1" class="gauge"></div>
|
||||
<div id="gg2" class="gauge" data-value="25"></div>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
var dflt = {
|
||||
min: 0,
|
||||
max: 200,
|
||||
donut: true,
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true,
|
||||
hideInnerShadow: true
|
||||
}
|
||||
|
||||
var gg1 = new JustGage({
|
||||
id: 'gg1',
|
||||
value: 125,
|
||||
title: 'javascript call',
|
||||
defaults: dflt
|
||||
});
|
||||
|
||||
var gg2 = new JustGage({
|
||||
id: 'gg2',
|
||||
title: 'data-attributes',
|
||||
defaults: dflt
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Counter</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="g1" class="gauge"></div>
|
||||
<a href="#" id="g1_refresh">Random Refresh</a>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
var g1;
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
g1 = new JustGage({
|
||||
id: "g1",
|
||||
title: "Font Options",
|
||||
value: 72,
|
||||
min: 0,
|
||||
max: 100,
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true,
|
||||
titleFontColor: "red",
|
||||
titleFontFamily: "Georgia",
|
||||
titlePosition: "below",
|
||||
valueFontColor: "blue",
|
||||
valueFontFamily: "Georgia"
|
||||
});
|
||||
|
||||
document.getElementById('g1_refresh').addEventListener('click', function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Counter</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="gg1" class="gauge"></div>
|
||||
<a href="#" id="gg1_refresh">Random Refresh</a>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gg1 = new JustGage({
|
||||
id: "gg1",
|
||||
value: 40960,
|
||||
min: 1024,
|
||||
max: 1000000,
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true,
|
||||
formatNumber: true
|
||||
});
|
||||
|
||||
document.getElementById('gg1_refresh').addEventListener('click', function() {
|
||||
gg1.refresh(getRandomInt(1024, 1000000));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>html5 data-attribute setup</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 320px;
|
||||
margin: 30px auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div id="gg1" class="gauge" data-value="1200" data-min="0" data-max="1000000" data-gaugeWidthScale="0.6"></div>
|
||||
<input type="button" id="gg1_refresh" class="btn" value="Random Refresh" />
|
||||
</div>
|
||||
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gg1 = new JustGage({
|
||||
id: "gg1",
|
||||
formatNumber: true,
|
||||
counter: true
|
||||
});
|
||||
|
||||
document.getElementById('gg1_refresh').addEventListener('click', function() {
|
||||
gg1.refresh(getRandomInt(0, 1000000));
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Guage</title>
|
||||
<style>
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge_container {
|
||||
text-align: left;
|
||||
height: 450px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
margin: 40px 5px 0 5px;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
|
||||
li.refresh {
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: Arial;
|
||||
display: inline-block;
|
||||
width: 65px;
|
||||
margin: 0 0 5px 0;
|
||||
text-align: right;
|
||||
padding: 5px;
|
||||
color: #919191;
|
||||
}
|
||||
|
||||
input {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
input[disabled=disabled] {
|
||||
font-weight: normal;
|
||||
font-size: 11px;
|
||||
padding: 0 0 0 10px;
|
||||
margin: 0px;
|
||||
color: #777777;
|
||||
border-color: transparent;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 0px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="gg1" style="width: 200px; height: 150px;"></div>
|
||||
<a href="#" id="gg1_refresh" class="button grey">Random Refresh</a>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var gg1 = new JustGage({
|
||||
id: "gg1",
|
||||
value: 10.1,
|
||||
min: -40,
|
||||
max: 50,
|
||||
title: "Target",
|
||||
label: "",
|
||||
humanFriendly: true,
|
||||
startAnimationTime: 10000,
|
||||
refreshAnimationTime: 10000
|
||||
});
|
||||
|
||||
document.getElementById('gg1_refresh').addEventListener('click', function() {
|
||||
gg1.refresh(getRandomInt(0, 1000000));
|
||||
console.log(gg1);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,168 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Pointer</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
margin: 50px auto 0 auto;
|
||||
padding-bottom: 30px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
background: #34aadc;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="box">
|
||||
<div id="g1" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g2" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g3" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g4" class="gauge"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button type="button" id="gauge_refresh">Refresh Gauges</button>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
var g1 = new JustGage({
|
||||
id: 'g1',
|
||||
value: 65,
|
||||
min: 0,
|
||||
max: 100,
|
||||
symbol: '%',
|
||||
pointer: true,
|
||||
gaugeWidthScale: 0.6,
|
||||
customSectors: [{
|
||||
color: '#ff0000',
|
||||
lo: 50,
|
||||
hi: 100
|
||||
}, {
|
||||
color: '#00ff00',
|
||||
lo: 0,
|
||||
hi: 50
|
||||
}],
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g2 = new JustGage({
|
||||
id: 'g2',
|
||||
value: 45,
|
||||
min: 0,
|
||||
max: 100,
|
||||
symbol: '%',
|
||||
pointer: true,
|
||||
pointerOptions: {
|
||||
toplength: -15,
|
||||
bottomlength: 10,
|
||||
bottomwidth: 12,
|
||||
color: '#8e8e93',
|
||||
stroke: '#ffffff',
|
||||
stroke_width: 3,
|
||||
stroke_linecap: 'round'
|
||||
},
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g3 = new JustGage({
|
||||
id: 'g3',
|
||||
value: 40,
|
||||
min: 0,
|
||||
max: 100,
|
||||
symbol: '%',
|
||||
donut: true,
|
||||
pointer: true,
|
||||
gaugeWidthScale: 0.4,
|
||||
pointerOptions: {
|
||||
toplength: 10,
|
||||
bottomlength: 10,
|
||||
bottomwidth: 8,
|
||||
color: '#000'
|
||||
},
|
||||
customSectors: [{
|
||||
color: "#ff0000",
|
||||
lo: 50,
|
||||
hi: 100
|
||||
}, {
|
||||
color: "#00ff00",
|
||||
lo: 0,
|
||||
hi: 50
|
||||
}],
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g4 = new JustGage({
|
||||
id: 'g4',
|
||||
value: 70,
|
||||
min: 0,
|
||||
max: 100,
|
||||
symbol: '%',
|
||||
pointer: true,
|
||||
pointerOptions: {
|
||||
toplength: 8,
|
||||
bottomlength: -20,
|
||||
bottomwidth: 6,
|
||||
color: '#8e8e93'
|
||||
},
|
||||
gaugeWidthScale: 0.1,
|
||||
counter: true
|
||||
});
|
||||
|
||||
document.getElementById('gauge_refresh').addEventListener('click', function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
g2.refresh(getRandomInt(0, 100));
|
||||
g3.refresh(getRandomInt(0, 100));
|
||||
g4.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Donuts, baby!</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 50px auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
a:link.button,
|
||||
a:active.button,
|
||||
a:visited.button,
|
||||
a:hover.button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="g1" class="gauge"></div>
|
||||
<a href="#" id="g1_refresh" class="button grey">Random Refresh</a>
|
||||
<br />
|
||||
<a href="#" id="g1_setmax100" class="button grey">Set Max 100</a>
|
||||
<a href="#" id="g1_setmax200" class="button grey">Set Max 200</a>
|
||||
<a href="#" id="g1_setmax400" class="button grey">Set Max 400</a>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
var g1 = new JustGage({
|
||||
id: "g1",
|
||||
title: "Max is 100.",
|
||||
value: -27.1,
|
||||
min: -40.0,
|
||||
max: 50,
|
||||
decimals: 1,
|
||||
gaugeWidthScale: 0.6,
|
||||
textRenderer: customValue
|
||||
});
|
||||
|
||||
document.getElementById('g1_refresh').addEventListener('click', function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
|
||||
document.getElementById('g1_setmax100').addEventListener('click', function() {
|
||||
g1.refresh(g1.originalValue, 100);
|
||||
g1.txtTitle.attr({
|
||||
"text": "Max is 100."
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('g1_setmax200').addEventListener('click', function() {
|
||||
g1.refresh(g1.originalValue, 200);
|
||||
g1.txtTitle.attr({
|
||||
"text": "Whoops, max jumped to 200."
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
document.getElementById('g1_setmax400').addEventListener('click', function() {
|
||||
g1.refresh(g1.originalValue, 400);
|
||||
g1.txtTitle.attr({
|
||||
"text": "Blimey, max blasted to 400!"
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
function customValue(val) {
|
||||
return val + "°C";
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,71 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Dynamic Resize</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<style>
|
||||
body{text-align:center;padding:0;margin:0}
|
||||
.clear:after,.clear:before{content:"";display:table}
|
||||
.clear:after{clear:both}
|
||||
.wrapper{position:absolute;top:0;right:0;bottom:0;left:0;margin:30px;border:1px solid #ccc}
|
||||
.gauge{display:block;float:left}
|
||||
#g1{width:33%}#g2{width:33%}#g3{width:33%}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper clear">
|
||||
<div id="g1" class="gauge"></div>
|
||||
<div id="g2" class="gauge"></div>
|
||||
<div id="g3" class="gauge"></div>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
var g1, g2, g3;
|
||||
|
||||
var g1 = new JustGage({
|
||||
id: "g1",
|
||||
value: -5.5,
|
||||
min: -40.1,
|
||||
max: 50.1,
|
||||
title: "Temperature",
|
||||
titlePosition: "below",
|
||||
label: "°C",
|
||||
relativeGaugeSize: true,
|
||||
pointer: true,
|
||||
formatNumber: true
|
||||
});
|
||||
|
||||
var g2 = new JustGage({
|
||||
id: "g2",
|
||||
value: 40.8,
|
||||
min: 0,
|
||||
max: 99.9,
|
||||
title: "Humidity",
|
||||
titlePosition: "below",
|
||||
label: "%",
|
||||
relativeGaugeSize: true,
|
||||
pointer: true,
|
||||
formatNumber: true
|
||||
});
|
||||
|
||||
var g3 = new JustGage({
|
||||
id: "g3",
|
||||
value: 980.7,
|
||||
min: 800.1,
|
||||
max: 1300.1,
|
||||
title: "Pressure",
|
||||
titlePosition: "below",
|
||||
label: "hPa",
|
||||
relativeGaugeSize: true,
|
||||
pointer: true,
|
||||
formatNumber: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,144 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Reverse</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
margin: 50px auto 0 auto;
|
||||
padding-bottom: 30px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.box {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gauge {
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 30px 5px 0 2px;
|
||||
padding: 16px 40px;
|
||||
border-radius: 5px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
background: #34aadc;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="box">
|
||||
<div id="g1" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g2" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g3" class="gauge"></div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div id="g4" class="gauge"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<button type="button" id="gauge_refresh">Refresh Gauges</button>
|
||||
</div>
|
||||
<script src="../raphael-2.1.4.min.js"></script>
|
||||
<script src="../justgage.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
|
||||
var g1 = new JustGage({
|
||||
id: 'g1',
|
||||
value: 65,
|
||||
min: 0,
|
||||
max: 100,
|
||||
reverse: true,
|
||||
gaugeWidthScale: 0.6,
|
||||
customSectors: [{
|
||||
color: '#ff0000',
|
||||
lo: 50,
|
||||
hi: 100
|
||||
}, {
|
||||
color: '#00ff00',
|
||||
lo: 0,
|
||||
hi: 50
|
||||
}],
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g2 = new JustGage({
|
||||
id: 'g2',
|
||||
value: 45,
|
||||
min: 0,
|
||||
max: 500,
|
||||
reverse: true,
|
||||
gaugeWidthScale: 0.6,
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g3 = new JustGage({
|
||||
id: 'g3',
|
||||
value: 25000,
|
||||
min: 0,
|
||||
max: 100000,
|
||||
humanFriendly : true,
|
||||
reverse: true,
|
||||
gaugeWidthScale: 1.3,
|
||||
customSectors: [{
|
||||
color: "#ff0000",
|
||||
lo: 50000,
|
||||
hi: 100000
|
||||
}, {
|
||||
color: "#00ff00",
|
||||
lo: 0,
|
||||
hi: 50000
|
||||
}],
|
||||
counter: true
|
||||
});
|
||||
|
||||
var g4 = new JustGage({
|
||||
id: 'g4',
|
||||
value: 90,
|
||||
min: 0,
|
||||
max: 100,
|
||||
symbol: '%',
|
||||
reverse: true,
|
||||
gaugeWidthScale: 0.1,
|
||||
counter: true
|
||||
});
|
||||
|
||||
document.getElementById('gauge_refresh').addEventListener('click', function() {
|
||||
g1.refresh(getRandomInt(0, 100));
|
||||
g2.refresh(getRandomInt(0, 100));
|
||||
g3.refresh(getRandomInt(0, 100000));
|
||||
g4.refresh(getRandomInt(0, 100));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1220
examples/SmartSwitch/data_src/js_css_src/justgage-1.2.2/justgage.js
Normal file
1220
examples/SmartSwitch/data_src/js_css_src/justgage-1.2.2/justgage.js
Normal file
File diff suppressed because it is too large
Load Diff
12
examples/SmartSwitch/data_src/js_css_src/justgage-1.2.2/raphael-2.1.4.min.js
vendored
Normal file
12
examples/SmartSwitch/data_src/js_css_src/justgage-1.2.2/raphael-2.1.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["es2015"]
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"commonjs": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
"tab"
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"windows"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"single"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
],
|
||||
"no-console": 0,
|
||||
"no-undef": 0
|
||||
}
|
||||
};
|
||||
30
examples/SmartSwitch/data_src/js_css_src/styled-notifications/.gitignore
vendored
Normal file
30
examples/SmartSwitch/data_src/js_css_src/styled-notifications/.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# IDE files
|
||||
.idea/
|
||||
.DS_Store
|
||||
|
||||
# Build directories
|
||||
build/
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Lock files
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
@ -0,0 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "7"
|
||||
@ -0,0 +1,7 @@
|
||||
# Notifications license
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,104 @@
|
||||
const { partial, append, isString, createElement, createParagraph } = require('../src/helpers');
|
||||
|
||||
const addNumbers = (x, y) => x + y;
|
||||
|
||||
const sum = (...numbers) => numbers.reduce((total, current) => total + current, 0);
|
||||
|
||||
describe('Helpers', () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
describe('Partial', () => {
|
||||
it('should return a partially applied function', () => {
|
||||
expect(typeof partial(addNumbers, 10)).toEqual('function');
|
||||
});
|
||||
|
||||
it('should execute function when partially applied function is called', () => {
|
||||
expect(partial(addNumbers, 20)(10)).toEqual(30);
|
||||
});
|
||||
|
||||
it('should gather argument', () => {
|
||||
expect(partial(sum, 5, 10)(15, 20, 25)).toEqual(75);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Append', () => {
|
||||
const container = document.createElement('div');
|
||||
document.body.appendChild(container);
|
||||
|
||||
const elementToAppend = document.createElement('h1');
|
||||
elementToAppend.classList.add('heading');
|
||||
elementToAppend.innerText = 'working';
|
||||
|
||||
append(container, elementToAppend);
|
||||
|
||||
const element = document.querySelector('.heading');
|
||||
expect(element);
|
||||
|
||||
expect(element.innerText).toEqual('working');
|
||||
});
|
||||
|
||||
describe('Is string', () => {
|
||||
expect(isString(1)).toEqual(false);
|
||||
expect(isString(null)).toEqual(false);
|
||||
expect(isString(undefined)).toEqual(false);
|
||||
expect(isString({})).toEqual(false);
|
||||
|
||||
expect(isString('')).toEqual(true);
|
||||
expect(isString('a')).toEqual(true);
|
||||
expect(isString('1')).toEqual(true);
|
||||
expect(isString('some string')).toEqual(true);
|
||||
});
|
||||
|
||||
describe('Create element', () => {
|
||||
it('should create an element', () => {
|
||||
expect(createElement('p')).toEqual(document.createElement('p'));
|
||||
expect(createElement('h1')).toEqual(document.createElement('h1'));
|
||||
expect(createElement('ul')).toEqual(document.createElement('ul'));
|
||||
expect(createElement('li')).toEqual(document.createElement('li'));
|
||||
expect(createElement('div')).toEqual(document.createElement('div'));
|
||||
expect(createElement('span')).toEqual(document.createElement('span'));
|
||||
});
|
||||
|
||||
it('should add class names', () => {
|
||||
expect(createElement('div', 'someclass1', 'someclass2').classList.contains('someclass2'));
|
||||
expect(createElement('p', 'para', 'test').classList.contains('para'));
|
||||
|
||||
const mockUl = document.createElement('ul');
|
||||
mockUl.classList.add('nav');
|
||||
mockUl.classList.add('foo');
|
||||
|
||||
expect(createElement('ul', 'nav', 'foo').classList).toEqual(mockUl.classList);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Create paragraph', () => {
|
||||
it('should create a paragraph', () => {
|
||||
const p = document.createElement('p');
|
||||
p.innerText = 'Some text';
|
||||
expect(createParagraph()('Some text')).toEqual(p);
|
||||
});
|
||||
|
||||
it('should add class names', () => {
|
||||
const p = document.createElement('p');
|
||||
p.classList.add('body-text');
|
||||
p.classList.add('para');
|
||||
|
||||
expect(createParagraph('body-text', 'para')('')).toEqual(p);
|
||||
});
|
||||
|
||||
it('should set inner text', () => {
|
||||
const p = document.createElement('p');
|
||||
p.innerText = 'Hello world!';
|
||||
p.classList.add('text');
|
||||
|
||||
expect(createParagraph('text')('Hello world!')).toEqual(p);
|
||||
});
|
||||
|
||||
it('should append to DOM', () => {
|
||||
append(document.body, createParagraph('text')('hello'));
|
||||
expect(document.querySelector('.text').innerText).toEqual('hello');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,144 @@
|
||||
require('../src/index');
|
||||
|
||||
describe('Notifications', () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = '';
|
||||
});
|
||||
|
||||
it('should display a console warning if no title or message is passed', () => {
|
||||
jest.spyOn(global.console, 'warn');
|
||||
window.createNotification()();
|
||||
expect(console.warn).toBeCalled();
|
||||
});
|
||||
|
||||
it('should render a default notification', () => {
|
||||
const notification = window.createNotification();
|
||||
|
||||
const title = 'I am a title';
|
||||
|
||||
// Should initially not contain any notifications
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(0);
|
||||
|
||||
// Create a notification instance with a title
|
||||
notification({ title });
|
||||
|
||||
// Should be one notification with the title passed in
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
expect(document.querySelector('.ncf-title').innerText).toEqual(title);
|
||||
|
||||
// Create a second instance so there should now be two instances
|
||||
notification({ title });
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should close on click if the option is enabled', () => {
|
||||
const notification = window.createNotification({
|
||||
closeOnClick: true
|
||||
});
|
||||
|
||||
// Create a notification with a generic body
|
||||
notification({ message: 'some text' });
|
||||
|
||||
// Should be one notification instance
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
|
||||
// Click the notification
|
||||
document.querySelector('.ncf').click();
|
||||
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(0);
|
||||
});
|
||||
|
||||
it('should not close on click if the option is disabled', () => {
|
||||
const notification = window.createNotification({
|
||||
closeOnClick: false
|
||||
});
|
||||
|
||||
// Create a notification with a generic body
|
||||
notification({ message: 'some text' });
|
||||
|
||||
// Should be one notification instance
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
|
||||
// Click the notification
|
||||
document.querySelector('.ncf').click();
|
||||
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should set position class if valid', () => {
|
||||
const validPositions = [
|
||||
'nfc-top-left',
|
||||
'nfc-top-right',
|
||||
'nfc-bottom-left',
|
||||
'nfc-bottom-right'
|
||||
];
|
||||
|
||||
validPositions.forEach(position => {
|
||||
const notification = window.createNotification({
|
||||
positionClass: position
|
||||
});
|
||||
|
||||
notification({ title: 'title here' });
|
||||
|
||||
const className = `.${position}`;
|
||||
|
||||
expect(document.querySelectorAll(className).length).toEqual(1);
|
||||
|
||||
const container = document.querySelector(className);
|
||||
expect(container.querySelectorAll('.ncf').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('should revert to default to default position and warn if class is invalid', () => {
|
||||
const notification = window.createNotification({
|
||||
positionClass: 'invalid-name'
|
||||
});
|
||||
|
||||
jest.spyOn(global.console, 'warn');
|
||||
|
||||
notification({ message: 'test' });
|
||||
|
||||
expect(console.warn).toBeCalled();
|
||||
|
||||
expect(document.querySelectorAll('.nfc-top-right').length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should allow a custom onclick callback', () => {
|
||||
let a = 'not clicked';
|
||||
|
||||
const notification = window.createNotification({
|
||||
onclick: () => {
|
||||
a = 'clicked';
|
||||
}
|
||||
});
|
||||
|
||||
notification({ message: 'click test' });
|
||||
|
||||
expect(a).toEqual('not clicked');
|
||||
|
||||
// Click the notification
|
||||
document.querySelector('.ncf').click();
|
||||
|
||||
expect(a).toEqual('clicked');
|
||||
});
|
||||
|
||||
it('should show for correct duration', () => {
|
||||
const notification = window.createNotification({
|
||||
showDuration: 500
|
||||
});
|
||||
|
||||
notification({ message: 'test' });
|
||||
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
|
||||
// Should exist after 400ms
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(1);
|
||||
}, 400);
|
||||
|
||||
// Should delete after 500ms
|
||||
setTimeout(() => {
|
||||
expect(document.querySelectorAll('.ncf').length).toEqual(0);
|
||||
});
|
||||
}, 501);
|
||||
});
|
||||
@ -0,0 +1,34 @@
|
||||
'use strict';
|
||||
|
||||
// Written using ES5 JS for browser support
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
var form = document.querySelector('form');
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Form elements
|
||||
var title = form.querySelector('#title').value;
|
||||
var message = form.querySelector('#message').value;
|
||||
var position = form.querySelector('#position').value;
|
||||
var duration = form.querySelector('#duration').value;
|
||||
var theme = form.querySelector('#theme').value;
|
||||
var closeOnClick = form.querySelector('#close').checked;
|
||||
var displayClose = form.querySelector('#closeButton').checked;
|
||||
|
||||
if(!message) {
|
||||
message = 'You did not enter a message...';
|
||||
}
|
||||
|
||||
window.createNotification({
|
||||
closeOnClick: closeOnClick,
|
||||
displayCloseButton: displayClose,
|
||||
positionClass: position,
|
||||
showDuration: duration,
|
||||
theme: theme
|
||||
})({
|
||||
title: title,
|
||||
message: message
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
</hea>
|
||||
<meta charset="UTF-8">
|
||||
<title>Notifications</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
background-color: floralwhite;
|
||||
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: left;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, select {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
background: #2f96b4;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Notifications styling -->
|
||||
<link rel="stylesheet" href="../dist/notifications.css" type="text/css">
|
||||
<head>
|
||||
<body>
|
||||
<h1>Notifications</h1>
|
||||
<form>
|
||||
<label for="title">Title (optional)</label>
|
||||
<br/>
|
||||
<input type="text" id="title" placeholder="Enter a title..." value="Notification">
|
||||
|
||||
<label for="message">Message</label>
|
||||
<br/>
|
||||
<input type="text" id="message" placeholder="Enter a message..." value="I am a default message">
|
||||
|
||||
<label for="position">Notification position:</label>
|
||||
<br/>
|
||||
<select id="position">
|
||||
<option value="nfc-top-right">Top Right</option>
|
||||
<option value="nfc-bottom-right">Bottom Right</option>
|
||||
<option value="nfc-top-left">Top Left</option>
|
||||
<option value="nfc-bottom-left">Bottom Left</option>
|
||||
</select>
|
||||
|
||||
<label for="duration">Show Duration (ms)</label>
|
||||
<br/>
|
||||
<input id="duration" type="number" value="3000"/>
|
||||
|
||||
<label for="theme">Theme</label>
|
||||
<br/>
|
||||
<select id="theme">
|
||||
<option value="success">Success</option>
|
||||
<option value="info">Information</option>
|
||||
<option value="warning">Warning</option>
|
||||
<option value="error">Error</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
|
||||
<label for="close">Close on click</label>
|
||||
<input id="close" type="checkbox" value="Close on click" checked>
|
||||
|
||||
<br/>
|
||||
|
||||
<label for="closeButton">Display a close button</label>
|
||||
<input id="closeButton" type="checkbox" value="Display close button">
|
||||
|
||||
<input type="submit" value="Display notification">
|
||||
</form>
|
||||
|
||||
<script src="../dist/notifications.js" type="text/javascript"></script>
|
||||
<script src="./demo.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Notifications</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="../dist/notifications.css" type="text/css">
|
||||
<script src="../dist/notifications.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button id="not" type="button" class="tbu" onclick="button2Click(this);">Notify</button>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
const successNotification = window.createNotification({
|
||||
positionClass: 'nfc-bottom-right',
|
||||
theme: 'info',
|
||||
showDuration: 2000
|
||||
});
|
||||
|
||||
function button2Click(e) {
|
||||
// Invoke success notification
|
||||
successNotification({
|
||||
message: 'Simple success notification ' + e.id
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.css
vendored
Normal file
1
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.ncf-container{font-size:14px;box-sizing:border-box;position:fixed;z-index:999999}.ncf-container.nfc-top-left{top:12px;left:12px}.ncf-container.nfc-top-right{top:12px;right:12px}.ncf-container.nfc-bottom-right{bottom:12px;right:12px}.ncf-container.nfc-bottom-left{bottom:12px;left:12px}@media (max-width:767px){.ncf-container{left:0;right:0}}.ncf-container .ncf{background:#fff;transition:.3s ease;position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:30px;width:300px;border-radius:3px 3px 3px 3px;box-shadow:0 0 12px #999;color:#000;opacity:.9;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);filter:alpha(opacity=90);background-position:15px!important;background-repeat:no-repeat!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ncf-container .ncf:hover{box-shadow:0 0 12px #000;opacity:1;cursor:pointer}.ncf-container .ncf .ncf-title{font-weight:700;font-size:16px;text-align:left;margin-top:0;margin-bottom:6px;word-wrap:break-word}.ncf-container .ncf .nfc-message{margin:0;text-align:left;word-wrap:break-word}.ncf-container .success{background:#51a351;color:#fff;padding:15px 15px 15px 50px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==")}.ncf-container .info{background:#2f96b4;color:#fff;padding:15px 15px 15px 50px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=")}.ncf-container .warning{background:#f87400;color:#fff;padding:15px 15px 15px 50px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=")}.ncf-container .error{background:#bd362f;color:#fff;padding:15px 15px 15px 50px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=")!important}.ncf-container button{position:relative;right:-.3em;top:-.3em;float:right;font-weight:700;color:#fff;text-shadow:0 1px 0 #fff;opacity:.8;line-height:1;font-size:16px;padding:0;cursor:pointer;background:transparent;border:0}.ncf-container button:hover{opacity:1}
|
||||
BIN
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.css.gz
vendored
Normal file
BIN
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.css.gz
vendored
Normal file
Binary file not shown.
1
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.js
vendored
Normal file
1
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
!function(t){function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=0)}([function(t,n,e){e(1),t.exports=e(4)},function(t,n,e){"use strict";var i=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e(2);var o=e(3);!function(t){function n(t){return t=i({},c,t),function(t){return["nfc-top-left","nfc-top-right","nfc-bottom-left","nfc-bottom-right"].indexOf(t)>-1}(t.positionClass)||(console.warn("An invalid notification position class has been specified."),t.positionClass=c.positionClass),t.onclick&&"function"!=typeof t.onclick&&(console.warn("Notification on click must be a function."),t.onclick=c.onclick),"number"!=typeof t.showDuration&&(t.showDuration=c.showDuration),(0,o.isString)(t.theme)&&0!==t.theme.length||(console.warn("Notification theme must be a string with length"),t.theme=c.theme),t}function e(t){return t=n(t),function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=n.title,i=n.message,c=r(t.positionClass);if(!e&&!i)return console.warn("Notification must contain a title or a message!");var a=(0,o.createElement)("div","ncf",t.theme);if(!0===t.closeOnClick&&a.addEventListener("click",function(){return c.removeChild(a)}),t.onclick&&a.addEventListener("click",function(n){return t.onclick(n)}),t.displayCloseButton){var s=(0,o.createElement)("button");s.innerText="X",!1===t.closeOnClick&&s.addEventListener("click",function(){return c.removeChild(a)}),(0,o.append)(a,s)}if((0,o.isString)(e)&&e.length&&(0,o.append)(a,(0,o.createParagraph)("ncf-title")(e)),(0,o.isString)(i)&&i.length&&(0,o.append)(a,(0,o.createParagraph)("nfc-message")(i)),(0,o.append)(c,a),t.showDuration&&t.showDuration>0){var l=setTimeout(function(){c.removeChild(a),0===c.querySelectorAll(".ncf").length&&document.body.removeChild(c)},t.showDuration);(t.closeOnClick||t.displayCloseButton)&&a.addEventListener("click",function(){return clearTimeout(l)})}}}function r(t){var n=document.querySelector("."+t);return n||(n=(0,o.createElement)("div","ncf-container",t),(0,o.append)(document.body,n)),n}var c={closeOnClick:!0,displayCloseButton:!1,positionClass:"nfc-top-right",onclick:!1,showDuration:3500,theme:"success"};t.createNotification?console.warn("Window already contains a create notification function. Have you included the script twice?"):t.createNotification=e}(window)},function(t,n,e){"use strict";!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}if(!(void 0===window.Element||"classList"in document.documentElement)){var n=Array.prototype,e=n.push,i=n.splice,o=n.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);i.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,function(t,n,e){Object.defineProperty?Object.defineProperty(t,n,{get:e}):t.__defineGetter__(n,e)}(Element.prototype,"classList",function(){return new t(this)})}}()},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var i=n.partial=function(t){for(var n=arguments.length,e=Array(n>1?n-1:0),i=1;i<n;i++)e[i-1]=arguments[i];return function(){for(var n=arguments.length,i=Array(n),o=0;o<n;o++)i[o]=arguments[o];return t.apply(void 0,e.concat(i))}},o=(n.append=function(t){for(var n=arguments.length,e=Array(n>1?n-1:0),i=1;i<n;i++)e[i-1]=arguments[i];return e.forEach(function(n){return t.appendChild(n)})},n.isString=function(t){return"string"==typeof t},n.createElement=function(t){for(var n=arguments.length,e=Array(n>1?n-1:0),i=1;i<n;i++)e[i-1]=arguments[i];var o=document.createElement(t);return e.length&&e.forEach(function(t){return o.classList.add(t)}),o}),r=function(t,n){return t.innerText=n,t},c=function(t){for(var n=arguments.length,e=Array(n>1?n-1:0),c=1;c<n;c++)e[c-1]=arguments[c];return i(r,o.apply(void 0,[t].concat(e)))};n.createParagraph=function(){for(var t=arguments.length,n=Array(t),e=0;e<t;e++)n[e]=arguments[e];return c.apply(void 0,["p"].concat(n))}},function(t,n){}]);
|
||||
BIN
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.js.gz
vendored
Normal file
BIN
examples/SmartSwitch/data_src/js_css_src/styled-notifications/dist/notifications.js.gz
vendored
Normal file
Binary file not shown.
@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "styled-notifications",
|
||||
"version": "1.0.1",
|
||||
"description": "A simple JavaScript notifications library",
|
||||
"main": "dist/notifications.js",
|
||||
"scripts": {
|
||||
"start": "webpack --watch",
|
||||
"build": "webpack -p",
|
||||
"test": "jest",
|
||||
"prepare": "yarn run test && yarn run build"
|
||||
},
|
||||
"pre-commit": [
|
||||
"prepare"
|
||||
],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/JamieLivingstone/Notifications.git"
|
||||
},
|
||||
"keywords": [
|
||||
"notification",
|
||||
"popup",
|
||||
"alert",
|
||||
"toast"
|
||||
],
|
||||
"author": "Jamie Livingstone",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Jamie Livingstone (https://github.com/JamieLivingstone)"
|
||||
},
|
||||
{
|
||||
"name": "cavebeavis (https://github.com/cavebeavis)"
|
||||
}
|
||||
],
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/JamieLivingstone/Notifications/issues"
|
||||
},
|
||||
"homepage": "https://github.com/JamieLivingstone/Notifications#readme",
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-jest": "^21.0.2",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-es2015-ie": "^6.7.0",
|
||||
"css-loader": "^0.28.7",
|
||||
"eslint": "^4.6.1",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"jest": "^21.0.2",
|
||||
"node-sass": "^4.5.3",
|
||||
"pre-commit": "^1.2.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"style-loader": "^0.18.2",
|
||||
"webpack": "^3.5.6"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,82 @@
|
||||
[](https://travis-ci.org/JamieLivingstone/Notifications)
|
||||
|
||||
# Notifications
|
||||
**Notifications** is a Javascript library for notifications heavily inspired by toastr but does not require any dependencies such as jQuery.
|
||||
|
||||
Works on browsers: IE9+, Safari, Chrome, FireFox, opera, edge
|
||||
|
||||
## npm Installation
|
||||
Do either
|
||||
```
|
||||
npm i styled-notifications
|
||||
```
|
||||
or add the following to your `package.json`:
|
||||
```
|
||||
"dependencies": {
|
||||
"styled-notifications": "^1.0.1"
|
||||
},
|
||||
```
|
||||
|
||||
## Installation
|
||||
Download files from the dist folder and then:
|
||||
1. Link to notifications.css `<link href="notifications.css" rel="stylesheet"/>`
|
||||
|
||||
2. Link to notifications.js `<script src="notifications.js"></script>`
|
||||
|
||||
## Usage
|
||||
### Custom options
|
||||
- closeOnClick <bool> - Close the notification dialog when a click is invoked.
|
||||
- displayCloseButton <bool> - Display a close button in the top right hand corner of the notification.
|
||||
- positionClass <string> - Set the position of the notification dialog. Accepted positions: ('nfc-top-right', 'nfc-bottom-right', 'nfc-bottom-left', 'nfc-top-left').
|
||||
- onClick <function(event)> - Call a callback function when a click is invoked on a notification.
|
||||
- showDuration <integer> - Milliseconds the notification should be visible (0 for a notification that will remain open until clicked)
|
||||
- theme <string> - Set the position of the notification dialog. Accepted positions: ('success', 'info', 'warning', 'error', 'A custom clasName').
|
||||
```
|
||||
const defaultOptions = {
|
||||
closeOnClick: true,
|
||||
displayCloseButton: false,
|
||||
positionClass: 'nfc-top-right',
|
||||
onclick: false,
|
||||
showDuration: 3500,
|
||||
theme: 'success'
|
||||
};
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
### Success notification
|
||||
```
|
||||
// Create a success notification instance
|
||||
const successNotification = window.createNotification({
|
||||
theme: 'success',
|
||||
showDuration: 5000
|
||||
});
|
||||
|
||||
// Invoke success notification
|
||||
successNotification({
|
||||
message: 'Simple success notification'
|
||||
});
|
||||
|
||||
// Use the same instance but pass a title
|
||||
successNotification({
|
||||
title: 'Working',
|
||||
message: 'Simple success notification'
|
||||
});
|
||||
```
|
||||
|
||||
### Information notification
|
||||
```
|
||||
// Only running it once? Invoke immediately like this
|
||||
window.createNotification({
|
||||
theme: 'success',
|
||||
showDuration: 5000
|
||||
})({
|
||||
message: 'I have some information for you...'
|
||||
});
|
||||
```
|
||||
|
||||
### Todo
|
||||
~~1. Add to NPM~~
|
||||
2. Improve documentation
|
||||
3. Further device testing
|
||||
4. Add contributor instructions
|
||||
@ -0,0 +1,24 @@
|
||||
export const partial = (fn, ...presetArgs) => (...laterArgs) => fn(...presetArgs, ...laterArgs);
|
||||
|
||||
export const append = (el, ...children) => children.forEach(child => el.appendChild(child));
|
||||
|
||||
export const isString = input => typeof input === 'string';
|
||||
|
||||
export const createElement = (elementType, ...classNames) => {
|
||||
const element = document.createElement(elementType);
|
||||
|
||||
if(classNames.length) {
|
||||
classNames.forEach(currentClass => element.classList.add(currentClass));
|
||||
}
|
||||
|
||||
return element;
|
||||
};
|
||||
|
||||
const setInnerText = (element, text) => {
|
||||
element.innerText = text;
|
||||
return element;
|
||||
};
|
||||
|
||||
const createTextElement = (elementType, ...classNames) => partial(setInnerText, createElement(elementType, ...classNames));
|
||||
|
||||
export const createParagraph = (...classNames) => createTextElement('p', ...classNames);
|
||||
@ -0,0 +1,148 @@
|
||||
'use strict';
|
||||
|
||||
// Polyfills
|
||||
import './polyfills/classList';
|
||||
|
||||
import {
|
||||
append,
|
||||
createElement,
|
||||
createParagraph,
|
||||
isString
|
||||
} from './helpers';
|
||||
|
||||
(function Notifications(window) {
|
||||
// Default notification options
|
||||
const defaultOptions = {
|
||||
closeOnClick: true,
|
||||
displayCloseButton: false,
|
||||
positionClass: 'nfc-top-right',
|
||||
onclick: false,
|
||||
showDuration: 3500,
|
||||
theme: 'success'
|
||||
};
|
||||
|
||||
function configureOptions(options) {
|
||||
// Create a copy of options and merge with defaults
|
||||
options = Object.assign({}, defaultOptions, options);
|
||||
|
||||
// Validate position class
|
||||
function validatePositionClass(className) {
|
||||
const validPositions = [
|
||||
'nfc-top-left',
|
||||
'nfc-top-right',
|
||||
'nfc-bottom-left',
|
||||
'nfc-bottom-right'
|
||||
];
|
||||
|
||||
return validPositions.indexOf(className) > -1;
|
||||
}
|
||||
|
||||
// Verify position, if invalid reset to default
|
||||
if (!validatePositionClass(options.positionClass)) {
|
||||
console.warn('An invalid notification position class has been specified.');
|
||||
options.positionClass = defaultOptions.positionClass;
|
||||
}
|
||||
|
||||
// Verify onClick is a function
|
||||
if (options.onclick && typeof options.onclick !== 'function') {
|
||||
console.warn('Notification on click must be a function.');
|
||||
options.onclick = defaultOptions.onclick;
|
||||
}
|
||||
|
||||
// Verify show duration
|
||||
if(typeof options.showDuration !== 'number') {
|
||||
options.showDuration = defaultOptions.showDuration;
|
||||
}
|
||||
|
||||
// Verify theme
|
||||
if(!isString(options.theme) || options.theme.length === 0) {
|
||||
console.warn('Notification theme must be a string with length');
|
||||
options.theme = defaultOptions.theme;
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
|
||||
// Create a new notification instance
|
||||
function createNotification(options) {
|
||||
// Validate options and set defaults
|
||||
options = configureOptions(options);
|
||||
|
||||
// Return a notification function
|
||||
return function notification({ title, message } = {}) {
|
||||
const container = createNotificationContainer(options.positionClass);
|
||||
|
||||
if(!title && !message) {
|
||||
return console.warn('Notification must contain a title or a message!');
|
||||
}
|
||||
|
||||
// Create the notification wrapper
|
||||
const notificationEl = createElement('div', 'ncf', options.theme);
|
||||
|
||||
// Close on click
|
||||
if(options.closeOnClick === true) {
|
||||
notificationEl.addEventListener('click', () => container.removeChild(notificationEl));
|
||||
}
|
||||
|
||||
// Custom click callback
|
||||
if(options.onclick) {
|
||||
notificationEl.addEventListener('click', (e) => options.onclick(e));
|
||||
}
|
||||
|
||||
// Display close button
|
||||
if(options.displayCloseButton) {
|
||||
const closeButton = createElement('button');
|
||||
closeButton.innerText = 'X';
|
||||
|
||||
// Use the wrappers close on click to avoid useless event listeners
|
||||
if(options.closeOnClick === false){
|
||||
closeButton.addEventListener('click', () =>container.removeChild(notificationEl));
|
||||
}
|
||||
|
||||
append(notificationEl, closeButton);
|
||||
}
|
||||
|
||||
// Append title and message
|
||||
isString(title) && title.length && append(notificationEl, createParagraph('ncf-title')(title));
|
||||
isString(message) && message.length && append(notificationEl, createParagraph('nfc-message')(message));
|
||||
|
||||
// Append to container
|
||||
append(container, notificationEl);
|
||||
|
||||
// Remove element after duration
|
||||
if(options.showDuration && options.showDuration > 0) {
|
||||
const timeout = setTimeout(() => {
|
||||
container.removeChild(notificationEl);
|
||||
|
||||
// Remove container if empty
|
||||
if(container.querySelectorAll('.ncf').length === 0) {
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
}, options.showDuration);
|
||||
|
||||
// If close on click is enabled and the user clicks, cancel timeout
|
||||
if(options.closeOnClick || options.displayCloseButton) {
|
||||
notificationEl.addEventListener('click', () => clearTimeout(timeout));
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function createNotificationContainer(position) {
|
||||
let container = document.querySelector(`.${position}`);
|
||||
|
||||
if(!container) {
|
||||
container = createElement('div', 'ncf-container', position);
|
||||
append(document.body, container);
|
||||
}
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
// Add Notifications to window to make globally accessible
|
||||
if (window.createNotification) {
|
||||
console.warn('Window already contains a create notification function. Have you included the script twice?');
|
||||
} else {
|
||||
window.createNotification = createNotification;
|
||||
}
|
||||
})(window);
|
||||
@ -0,0 +1,68 @@
|
||||
(function () {
|
||||
if (typeof window.Element === 'undefined' || 'classList' in document.documentElement) return;
|
||||
|
||||
var prototype = Array.prototype,
|
||||
push = prototype.push,
|
||||
splice = prototype.splice,
|
||||
join = prototype.join;
|
||||
|
||||
function DOMTokenList(el) {
|
||||
this.el = el;
|
||||
// The className needs to be trimmed and split on whitespace
|
||||
// to retrieve a list of classes.
|
||||
var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
|
||||
for (var i = 0; i < classes.length; i++) {
|
||||
push.call(this, classes[i]);
|
||||
}
|
||||
}
|
||||
|
||||
DOMTokenList.prototype = {
|
||||
add: function(token) {
|
||||
if(this.contains(token)) return;
|
||||
push.call(this, token);
|
||||
this.el.className = this.toString();
|
||||
},
|
||||
contains: function(token) {
|
||||
return this.el.className.indexOf(token) != -1;
|
||||
},
|
||||
item: function(index) {
|
||||
return this[index] || null;
|
||||
},
|
||||
remove: function(token) {
|
||||
if (!this.contains(token)) return;
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == token) break;
|
||||
}
|
||||
splice.call(this, i, 1);
|
||||
this.el.className = this.toString();
|
||||
},
|
||||
toString: function() {
|
||||
return join.call(this, ' ');
|
||||
},
|
||||
toggle: function(token) {
|
||||
if (!this.contains(token)) {
|
||||
this.add(token);
|
||||
} else {
|
||||
this.remove(token);
|
||||
}
|
||||
|
||||
return this.contains(token);
|
||||
}
|
||||
};
|
||||
|
||||
window.DOMTokenList = DOMTokenList;
|
||||
|
||||
function defineElementGetter (obj, prop, getter) {
|
||||
if (Object.defineProperty) {
|
||||
Object.defineProperty(obj, prop,{
|
||||
get : getter
|
||||
});
|
||||
} else {
|
||||
obj.__defineGetter__(prop, getter);
|
||||
}
|
||||
}
|
||||
|
||||
defineElementGetter(Element.prototype, 'classList', function () {
|
||||
return new DOMTokenList(this);
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,134 @@
|
||||
// Base colors
|
||||
$success: #51A351;
|
||||
$info: #2F96B4;
|
||||
$warning: #f87400;
|
||||
$error: #BD362F;
|
||||
$grey: #999999;
|
||||
|
||||
.ncf-container {
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
|
||||
&.nfc-top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
&.nfc-top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
&.nfc-bottom-right {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
&.nfc-bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ncf {
|
||||
background: #ffffff;
|
||||
transition: .3s ease;
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 30px;
|
||||
width: 300px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
box-shadow: 0 0 12px $grey;
|
||||
color: #000000;
|
||||
opacity: 0.9;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
|
||||
filter: alpha(opacity=90);
|
||||
background-position: 15px center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
// Prevent annoying text selection
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none; /* Likely future */
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 12px #000000;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ncf-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.nfc-message {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// Themes
|
||||
.success {
|
||||
background: $success;
|
||||
color: #ffffff;
|
||||
padding: 15px 15px 15px 50px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==");
|
||||
}
|
||||
|
||||
.info {
|
||||
background: $info;
|
||||
color: #ffffff;
|
||||
padding: 15px 15px 15px 50px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: $warning;
|
||||
color: #ffffff;
|
||||
padding: 15px 15px 15px 50px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=");
|
||||
}
|
||||
|
||||
.error {
|
||||
background: $error;
|
||||
color: #ffffff;
|
||||
padding: 15px 15px 15px 50px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
const webpack = require('webpack');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
const extractSass = new ExtractTextPlugin({
|
||||
filename: 'notifications.css',
|
||||
disable: process.env.NODE_ENV === 'development'
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
entry: ['./src/index.js', './src/style.scss'],
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
filename: 'notifications.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: ['babel-preset-es2015', 'es2015-ie']
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: extractSass.extract({
|
||||
use: [{
|
||||
loader: 'css-loader'
|
||||
}, {
|
||||
loader: 'sass-loader'
|
||||
}],
|
||||
// use style-loader in development
|
||||
fallback: 'style-loader'
|
||||
})
|
||||
}
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
extractSass
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user