From bf3847219714d71e59bfa04569089ab52f852960 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 4 Dec 2014 17:10:49 +0100 Subject: Finished tool for checking downtime --- down/ajax.php | 60 ++++ down/http.php | 31 ++ down/index.php | 18 + down/ping.php | 26 ++ down/view/templ-index.php | 117 +++++++ down/view/templ-noscript.php | 87 +++++ isup/ajax.php | 48 --- isup/http.php | 31 -- isup/index.php | 25 -- isup/ping.php | 26 -- tools/footer.php | 2 +- tools/navbar.php | 3 + tools/static/sweet-alert.css | 564 +++++++++++++++++++++++++++++++ tools/static/sweet-alert.js | 711 ++++++++++++++++++++++++++++++++++++++++ tools/static/sweet-alert.min.js | 1 + tools/style.css | 2 +- 16 files changed, 1620 insertions(+), 132 deletions(-) create mode 100644 down/ajax.php create mode 100644 down/http.php create mode 100644 down/index.php create mode 100644 down/ping.php create mode 100644 down/view/templ-index.php create mode 100644 down/view/templ-noscript.php delete mode 100644 isup/ajax.php delete mode 100644 isup/http.php delete mode 100644 isup/index.php delete mode 100644 isup/ping.php create mode 100644 tools/static/sweet-alert.css create mode 100755 tools/static/sweet-alert.js create mode 100644 tools/static/sweet-alert.min.js diff --git a/down/ajax.php b/down/ajax.php new file mode 100644 index 0000000..63a63d1 --- /dev/null +++ b/down/ajax.php @@ -0,0 +1,60 @@ + $_REQUEST["url"]); + +switch($_REQUEST["action"]){ + case("ping"): + require 'ping.php'; + if ( ping( sanitizeHost($_REQUEST["url"]), ipv6($_REQUEST["url"]) ) ){ + $r["status"] = "Looks like it's up from here."; + $r["data"] = 1; + } else { + $r["status"] = "Seems down. :("; + $r["data"] = 0; + } + break; + case("http"): + require 'http.php'; + if ( !ipv6($_REQUEST["url"]) && filter_var(sanitizeUrl($_REQUEST["url"]), FILTER_VALIDATE_URL, FILTER_FLAG_HOST_REQUIRED) === false ){ + echo "not valid"; + } else { + if( isUp($_REQUEST["url"]) ){ + $r["status"] = "Looks like it's up from here."; + $r["data"] = 1; + } else { + $r["status"] = "Seems down. :("; + $r["data"] = 0; + } + } + break; + default: + header($_SERVER["SERVER_PROTOCOL"] . " 400 Bad Request"); + header("X-Debug: Please define a valid action."); + $r["status"] = "not valid"; + $r["data"] = 0; + break; +} + +echo json_encode($r); diff --git a/down/http.php b/down/http.php new file mode 100644 index 0000000..9973cb4 --- /dev/null +++ b/down/http.php @@ -0,0 +1,31 @@ +=200 && $httpcode<400 ) + return true; + else + return false; +} + +function sanitizeUrl($url){ + if ( ! preg_match("|^[a-zA-Z]+://|", $url) ) + $url = "http://" . $url; + if ( preg_match("|^[a-zA-Z]+://.+\.[a-zA-Z]+(?/.*)|", $url, $match) ) + $url = str_replace($match["query"], "", $url); + + return $url; +} diff --git a/down/index.php b/down/index.php new file mode 100644 index 0000000..e71e76a --- /dev/null +++ b/down/index.php @@ -0,0 +1,18 @@ + /dev/null 2>&1", $ret); + + if ( $ret != 0 ) + return false; + + return true; +} + +function sanitizeHost($host){ + + if ( preg_match("|^[a-zA-Z]+://|", $host, $match) ) + $host = str_replace($match[0], "", $host); + if ( preg_match("|(?/.*)|", $host, $match) ) + $host = str_replace($match["query"], "", $host); + + return escapeshellarg($host); +} diff --git a/down/view/templ-index.php b/down/view/templ-index.php new file mode 100644 index 0000000..cc554e1 --- /dev/null +++ b/down/view/templ-index.php @@ -0,0 +1,117 @@ + + + + + + + + + + Is it down? | iamfabulous.de + + + + + +
+
+
+ +
+
+ + + +

Uptime is the game

+

Is your favourite website down?

+ + + +
+ +
+ + autofocus> + + + +
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
+
+ +
+
+ +
+
+
+ + + + diff --git a/down/view/templ-noscript.php b/down/view/templ-noscript.php new file mode 100644 index 0000000..d15b665 --- /dev/null +++ b/down/view/templ-noscript.php @@ -0,0 +1,87 @@ + + + + + + + + + Is it down? | iamfabulous.de + + + + + +
+
+
+ + +

Uptime is the game

+

Is your favourite website down?

+
+ + + +
+
+ + diff --git a/isup/ajax.php b/isup/ajax.php deleted file mode 100644 index 3e21a20..0000000 --- a/isup/ajax.php +++ /dev/null @@ -1,48 +0,0 @@ -=200 && $httpcode<400 ) - return true; - else - return false; -} - -function sanitizeUrl($url){ - if ( ! preg_match("|^[a-zA-Z]+://|", $url) ) - $url = "http://" . $url; - if ( preg_match("|^[a-zA-Z]+://.+\.[a-zA-Z]+(?/.*)|", $url, $match) ) - $url = str_replace($match["query"], "", $url); - - return $url; -} diff --git a/isup/index.php b/isup/index.php deleted file mode 100644 index 9c856c8..0000000 --- a/isup/index.php +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - IsUP | iamfabulous.de - - - - - -
-
-
- -
-
-
- - diff --git a/isup/ping.php b/isup/ping.php deleted file mode 100644 index 4c1bea7..0000000 --- a/isup/ping.php +++ /dev/null @@ -1,26 +0,0 @@ - /dev/null 2>&1", $ret); - - if ( $ret != 0 ) - return false; - - return true; -} - -function sanitizeHost($host){ - - if ( preg_match("|^[a-zA-Z]+://|", $host, $match) ) - $host = str_replace($match[0], "", $host); - if ( preg_match("|(?/.*)|", $host, $match) ) - $host = str_replace($match["query"], "", $host); - - return escapeshellarg($host); -} diff --git a/tools/footer.php b/tools/footer.php index 81978a4..fb8df47 100644 --- a/tools/footer.php +++ b/tools/footer.php @@ -25,5 +25,5 @@ } addClass("", "actives"); - + diff --git a/tools/navbar.php b/tools/navbar.php index d0b9108..1e483e4 100644 --- a/tools/navbar.php +++ b/tools/navbar.php @@ -19,6 +19,9 @@
  • ifconfig
    • +
  • + Up Or Down? +
    • diff --git a/tools/static/sweet-alert.css b/tools/static/sweet-alert.css new file mode 100644 index 0000000..7075866 --- /dev/null +++ b/tools/static/sweet-alert.css @@ -0,0 +1,564 @@ +@-webkit-keyframes showSweetAlert { + 0% { + transform: scale(0.7); + -webkit-transform: scale(0.7); + } + 45% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } + 80% { + transform: scale(0.95); + -webkit-tranform: scale(0.95); + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@keyframes showSweetAlert { + 0% { + transform: scale(0.7); + -webkit-transform: scale(0.7); + } + 45% { + transform: scale(1.05); + -webkit-transform: scale(1.05); + } + 80% { + transform: scale(0.95); + -webkit-tranform: scale(0.95); + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + } +} +@-webkit-keyframes hideSweetAlert { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + 100% { + transform: scale(0.5); + -webkit-transform: scale(0.5); + } +} +@keyframes hideSweetAlert { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + } + 100% { + transform: scale(0.5); + -webkit-transform: scale(0.5); + } +} +.showSweetAlert { + -webkit-animation: showSweetAlert 0.3s; + animation: showSweetAlert 0.3s; +} +.hideSweetAlert { + -webkit-animation: hideSweetAlert 0.2s; + animation: hideSweetAlert 0.2s; +} +@-webkit-keyframes animateSuccessTip { + 0% { + width: 0; + left: 1px; + top: 19px; + } + 54% { + width: 0; + left: 1px; + top: 19px; + } + 70% { + width: 50px; + left: -8px; + top: 37px; + } + 84% { + width: 17px; + left: 21px; + top: 48px; + } + 100% { + width: 25px; + left: 14px; + top: 45px; + } +} +@keyframes animateSuccessTip { + 0% { + width: 0; + left: 1px; + top: 19px; + } + 54% { + width: 0; + left: 1px; + top: 19px; + } + 70% { + width: 50px; + left: -8px; + top: 37px; + } + 84% { + width: 17px; + left: 21px; + top: 48px; + } + 100% { + width: 25px; + left: 14px; + top: 45px; + } +} +@-webkit-keyframes animateSuccessLong { + 0% { + width: 0; + right: 46px; + top: 54px; + } + 65% { + width: 0; + right: 46px; + top: 54px; + } + 84% { + width: 55px; + right: 0px; + top: 35px; + } + 100% { + width: 47px; + right: 8px; + top: 38px; + } +} +@keyframes animateSuccessLong { + 0% { + width: 0; + right: 46px; + top: 54px; + } + 65% { + width: 0; + right: 46px; + top: 54px; + } + 84% { + width: 55px; + right: 0px; + top: 35px; + } + 100% { + width: 47px; + right: 8px; + top: 38px; + } +} +@-webkit-keyframes rotatePlaceholder { + 0% { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + 5% { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + 12% { + transform: rotate(-405deg); + -webkit-transform: rotate(-405deg); + } + 100% { + transform: rotate(-405deg); + -webkit-transform: rotate(-405deg); + } +} +@keyframes rotatePlaceholder { + 0% { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + 5% { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + } + 12% { + transform: rotate(-405deg); + -webkit-transform: rotate(-405deg); + } + 100% { + transform: rotate(-405deg); + -webkit-transform: rotate(-405deg); + } +} +.animateSuccessTip { + -webkit-animation: animateSuccessTip 0.75s; + animation: animateSuccessTip 0.75s; +} +.animateSuccessLong { + -webkit-animation: animateSuccessLong 0.75s; + animation: animateSuccessLong 0.75s; +} +.icon.success.animate::after { + -webkit-animation: rotatePlaceholder 4.25s ease-in; + animation: rotatePlaceholder 4.25s ease-in; +} +@-webkit-keyframes animateErrorIcon { + 0% { + transform: rotateX(100deg); + -webkit-transform: rotateX(100deg); + opacity: 0; + } + 100% { + transform: rotateX(0deg); + -webkit-transform: rotateX(0deg); + opacity: 1; + } +} +@keyframes animateErrorIcon { + 0% { + transform: rotateX(100deg); + -webkit-transform: rotateX(100deg); + opacity: 0; + } + 100% { + transform: rotateX(0deg); + -webkit-transform: rotateX(0deg); + opacity: 1; + } +} +.animateErrorIcon { + -webkit-animation: animateErrorIcon 0.5s; + animation: animateErrorIcon 0.5s; +} +@-webkit-keyframes animateXMark { + 0% { + transform: scale(0.4); + -webkit-transform: scale(0.4); + margin-top: 26px; + opacity: 0; + } + 50% { + transform: scale(0.4); + -webkit-transform: scale(0.4); + margin-top: 26px; + opacity: 0; + } + 80% { + transform: scale(1.15); + -webkit-transform: scale(1.15); + margin-top: -6px; + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + margin-top: 0; + opacity: 1; + } +} +@keyframes animateXMark { + 0% { + transform: scale(0.4); + -webkit-transform: scale(0.4); + margin-top: 26px; + opacity: 0; + } + 50% { + transform: scale(0.4); + -webkit-transform: scale(0.4); + margin-top: 26px; + opacity: 0; + } + 80% { + transform: scale(1.15); + -webkit-transform: scale(1.15); + margin-top: -6px; + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + margin-top: 0; + opacity: 1; + } +} +.animateXMark { + -webkit-animation: animateXMark 0.5s; + animation: animateXMark 0.5s; +} +@-webkit-keyframes pulseWarning { + 0% { + border-color: #F8D486; + } + 100% { + border-color: #F8BB86; + } +} +@keyframes pulseWarning { + 0% { + border-color: #F8D486; + } + 100% { + border-color: #F8BB86; + } +} +.pulseWarning { + -webkit-animation: pulseWarning 0.75s infinite alternate; + animation: pulseWarning 0.75s infinite alternate; +} +@-webkit-keyframes pulseWarningIns { + 0% { + background-color: #F8D486; + } + 100% { + background-color: #F8BB86; + } +} +@keyframes pulseWarningIns { + 0% { + background-color: #F8D486; + } + 100% { + background-color: #F8BB86; + } +} +.pulseWarningIns { + -webkit-animation: pulseWarningIns 0.75s infinite alternate; + animation: pulseWarningIns 0.75s infinite alternate; +} +.sweet-overlay { + background-color: rgba(0, 0, 0, 0.4); + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + display: none; + z-index: 1040; +} +.sweet-alert { + background-color: #ffffff; + width: 478px; + padding: 17px; + border-radius: 5px; + text-align: center; + position: fixed; + left: 50%; + top: 50%; + margin-left: -256px; + margin-top: -200px; + overflow: hidden; + display: none; + z-index: 2000; +} +@media all and (max-width: 767px) { + .sweet-alert { + width: auto; + margin-left: 0; + margin-right: 0; + left: 15px; + right: 15px; + } +} +.sweet-alert .icon { + width: 80px; + height: 80px; + border: 4px solid gray; + border-radius: 50%; + margin: 20px auto; + position: relative; + box-sizing: content-box; +} +.sweet-alert .icon.error { + border-color: #d43f3a; +} +.sweet-alert .icon.error .x-mark { + position: relative; + display: block; +} +.sweet-alert .icon.error .line { + position: absolute; + height: 5px; + width: 47px; + background-color: #d9534f; + display: block; + top: 37px; + border-radius: 2px; +} +.sweet-alert .icon.error .line.left { + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + left: 17px; +} +.sweet-alert .icon.error .line.right { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + right: 16px; +} +.sweet-alert .icon.warning { + border-color: #eea236; +} +.sweet-alert .icon.warning .body { + position: absolute; + width: 5px; + height: 47px; + left: 50%; + top: 10px; + border-radius: 2px; + margin-left: -2px; + background-color: #f0ad4e; +} +.sweet-alert .icon.warning .dot { + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + margin-left: -3px; + left: 50%; + bottom: 10px; + background-color: #f0ad4e; +} +.sweet-alert .icon.info { + border-color: #46b8da; +} +.sweet-alert .icon.info::before { + content: ""; + position: absolute; + width: 5px; + height: 29px; + left: 50%; + bottom: 17px; + border-radius: 2px; + margin-left: -2px; + background-color: #5bc0de; +} +.sweet-alert .icon.info::after { + content: ""; + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + margin-left: -3px; + top: 19px; + background-color: #5bc0de; +} +.sweet-alert .icon.success { + border-color: #4cae4c; +} +.sweet-alert .icon.success::before, +.sweet-alert .icon.success::after { + content: ''; + border-radius: 50%; + position: absolute; + width: 60px; + height: 120px; + background: white; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.sweet-alert .icon.success::before { + border-radius: 120px 0 0 120px; + top: -7px; + left: -33px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-transform-origin: 60px 60px; + transform-origin: 60px 60px; +} +.sweet-alert .icon.success::after { + border-radius: 0 120px 120px 0; + top: -11px; + left: 30px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-transform-origin: 0px 60px; + transform-origin: 0px 60px; +} +.sweet-alert .icon.success .placeholder { + width: 80px; + height: 80px; + border: 4px solid rgba(92, 184, 92, 0.2); + border-radius: 50%; + box-sizing: content-box; + position: absolute; + left: -4px; + top: -4px; + z-index: 2; +} +.sweet-alert .icon.success .fix { + width: 5px; + height: 90px; + background-color: #ffffff; + position: absolute; + left: 28px; + top: 8px; + z-index: 1; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.sweet-alert .icon.success .line { + height: 5px; + background-color: #5cb85c; + display: block; + border-radius: 2px; + position: absolute; + z-index: 2; +} +.sweet-alert .icon.success .line.tip { + width: 25px; + left: 14px; + top: 46px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.sweet-alert .icon.success .line.long { + width: 47px; + right: 8px; + top: 38px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.sweet-alert .icon.custom { + background-size: contain; + border-radius: 0; + border: none; + background-position: center center; + background-repeat: no-repeat; +} +.sweet-alert .btn-default:focus { + border-color: #cccccc; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(204, 204, 204, 0.6); +} +.sweet-alert .btn-success:focus { + border-color: #4cae4c; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(76, 174, 76, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(76, 174, 76, 0.6); +} +.sweet-alert .btn-info:focus { + border-color: #46b8da; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 184, 218, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(70, 184, 218, 0.6); +} +.sweet-alert .btn-danger:focus { + border-color: #d43f3a; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 63, 58, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(212, 63, 58, 0.6); +} +.sweet-alert .btn-warning:focus { + border-color: #eea236; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 162, 54, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(238, 162, 54, 0.6); +} +.sweet-alert button::-moz-focus-inner { + border: 0; +} diff --git a/tools/static/sweet-alert.js b/tools/static/sweet-alert.js new file mode 100755 index 0000000..ee598d5 --- /dev/null +++ b/tools/static/sweet-alert.js @@ -0,0 +1,711 @@ +// SweetAlert +// 2014 (c) - Tristan Edwards +// github.com/t4t5/sweetalert +(function(window, document) { + + var modalClass = '.sweet-alert', + overlayClass = '.sweet-overlay', + alertTypes = ['error', 'warning', 'info', 'success'], + defaultParams = { + title: '', + text: '', + type: null, + allowOutsideClick: false, + showCancelButton: false, + closeOnConfirm: true, + closeOnCancel: true, + confirmButtonText: 'OK', + confirmButtonClass: 'btn-primary', + cancelButtonText: 'Cancel', + cancelButtonClass: 'btn-default', + imageUrl: null, + imageSize: null, + timer: null + }; + + + /* + * Manipulate DOM + */ + + var getModal = function() { + return document.querySelector(modalClass); + }, + getOverlay = function() { + return document.querySelector(overlayClass); + }, + hasClass = function(elem, className) { + return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); + }, + addClass = function(elem, className) { + if (!hasClass(elem, className)) { + elem.className += ' ' + className; + } + }, + removeClass = function(elem, className) { + var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; + if (hasClass(elem, className)) { + while (newClass.indexOf(' ' + className + ' ') >= 0) { + newClass = newClass.replace(' ' + className + ' ', ' '); + } + elem.className = newClass.replace(/^\s+|\s+$/g, ''); + } + }, + escapeHtml = function(str) { + var div = document.createElement('div'); + div.appendChild(document.createTextNode(str)); + return div.innerHTML; + }, + _show = function(elem) { + elem.style.opacity = ''; + elem.style.display = 'block'; + }, + show = function(elems) { + if (elems && !elems.length) { + return _show(elems); + } + for (var i = 0; i < elems.length; ++i) { + _show(elems[i]); + } + }, + _hide = function(elem) { + elem.style.opacity = ''; + elem.style.display = 'none'; + }, + hide = function(elems) { + if (elems && !elems.length) { + return _hide(elems); + } + for (var i = 0; i < elems.length; ++i) { + _hide(elems[i]); + } + }, + isDescendant = function(parent, child) { + var node = child.parentNode; + while (node !== null) { + if (node === parent) { + return true; + } + node = node.parentNode; + } + return false; + }, + getTopMargin = function(elem) { + elem.style.left = '-9999px'; + elem.style.display = 'block'; + + var height = elem.clientHeight; + var padding = parseInt(getComputedStyle(elem).getPropertyValue('padding'), 10); + + elem.style.left = ''; + elem.style.display = 'none'; + return ('-' + parseInt(height / 2 + padding) + 'px'); + }, + fadeIn = function(elem, interval) { + if(+elem.style.opacity < 1) { + interval = interval || 16; + elem.style.opacity = 0; + elem.style.display = 'block'; + var last = +new Date(); + var tick = function() { + elem.style.opacity = +elem.style.opacity + (new Date() - last) / 100; + last = +new Date(); + + if (+elem.style.opacity < 1) { + setTimeout(tick, interval); + } + }; + tick(); + } + }, + fadeOut = function(elem, interval) { + interval = interval || 16; + elem.style.opacity = 1; + var last = +new Date(); + var tick = function() { + elem.style.opacity = +elem.style.opacity - (new Date() - last) / 100; + last = +new Date(); + + if (+elem.style.opacity > 0) { + setTimeout(tick, interval); + } else { + elem.style.display = 'none'; + } + }; + tick(); + }, + fireClick = function(node) { + // Taken from http://www.nonobtrusive.com/2011/11/29/programatically-fire-crossbrowser-click-event-with-javascript/ + // Then fixed for today's Chrome browser. + if (MouseEvent) { + // Up-to-date approach + var mevt = new MouseEvent('click', { + view: window, + bubbles: false, + cancelable: true + }); + node.dispatchEvent(mevt); + } else if ( document.createEvent ) { + // Fallback + var evt = document.createEvent('MouseEvents'); + evt.initEvent('click', false, false); + node.dispatchEvent(evt); + } else if( document.createEventObject ) { + node.fireEvent('onclick') ; + } else if (typeof node.onclick === 'function' ) { + node.onclick(); + } + }, + stopEventPropagation = function(e) { + // In particular, make sure the space bar doesn't scroll the main window. + if (typeof e.stopPropagation === 'function') { + e.stopPropagation(); + e.preventDefault(); + } else if (window.event && window.event.hasOwnProperty('cancelBubble')) { + window.event.cancelBubble = true; + } + }; + + // Remember state in cases where opening and handling a modal will fiddle with it. + var previousActiveElement, + previousDocumentClick, + previousWindowKeyDown, + lastFocusedButton; + + /* + * Add modal + overlay to DOM + */ + + window.sweetAlertInitialize = function() { + var sweetHTML = '

    Title

    Text

    ', + sweetWrap = document.createElement('div'); + + sweetWrap.innerHTML = sweetHTML; + + // For readability: check sweet-alert.html + document.body.appendChild(sweetWrap); + + // For development use only! + /*jQuery.ajax({ + url: '../lib/sweet-alert.html', // Change path depending on file location + dataType: 'html' + }) + .done(function(html) { + jQuery('body').append(html); + });*/ + } + + /* + * Global sweetAlert function + */ + + window.sweetAlert = window.swal = function() { + if (arguments[0] === undefined) { + window.console.error('sweetAlert expects at least 1 attribute!'); + return false; + } + + var params = extend({}, defaultParams); + + switch (typeof arguments[0]) { + + case 'string': + params.title = arguments[0]; + params.text = arguments[1] || ''; + params.type = arguments[2] || ''; + + break; + + case 'object': + if (arguments[0].title === undefined) { + window.console.error('Missing "title" argument!'); + return false; + } + + params.title = arguments[0].title; + params.text = arguments[0].text || defaultParams.text; + params.type = arguments[0].type || defaultParams.type; + params.allowOutsideClick = arguments[0].allowOutsideClick || defaultParams.allowOutsideClick; + params.showCancelButton = arguments[0].showCancelButton !== undefined ? arguments[0].showCancelButton : defaultParams.showCancelButton; + params.closeOnConfirm = arguments[0].closeOnConfirm !== undefined ? arguments[0].closeOnConfirm : defaultParams.closeOnConfirm; + params.closeOnCancel = arguments[0].closeOnCancel !== undefined ? arguments[0].closeOnCancel : defaultParams.closeOnCancel; + params.timer = arguments[0].timer || defaultParams.timer; + + // Show "Confirm" instead of "OK" if cancel button is visible + params.confirmButtonText = (defaultParams.showCancelButton) ? 'Confirm' : defaultParams.confirmButtonText; + params.confirmButtonText = arguments[0].confirmButtonText || defaultParams.confirmButtonText; + params.confirmButtonClass = arguments[0].confirmButtonClass || defaultParams.confirmButtonClass; + params.cancelButtonText = arguments[0].cancelButtonText || defaultParams.cancelButtonText; + params.cancelButtonClass = arguments[0].cancelButtonClass || defaultParams.cancelButtonClass; + params.imageUrl = arguments[0].imageUrl || defaultParams.imageUrl; + params.imageSize = arguments[0].imageSize || defaultParams.imageSize; + params.doneFunction = arguments[1] || null; + + break; + + default: + window.console.error('Unexpected type of argument! Expected "string" or "object", got ' + typeof arguments[0]); + return false; + + } + + setParameters(params); + fixVerticalPosition(); + openModal(); + + + // Modal interactions + var modal = getModal(); + + // Mouse interactions + var onButtonEvent = function(e) { + + var target = e.target || e.srcElement, + targetedConfirm = (target.className.indexOf('confirm') > -1), + modalIsVisible = hasClass(modal, 'visible'), + doneFunctionExists = (params.doneFunction && modal.getAttribute('data-has-done-function') === 'true'); + + switch (e.type) { + case ("click"): + if (targetedConfirm && doneFunctionExists && modalIsVisible) { // Clicked "confirm" + + params.doneFunction(true); + + if (params.closeOnConfirm) { + closeModal(); + } + } else if (doneFunctionExists && modalIsVisible) { // Clicked "cancel" + + // Check if callback function expects a parameter (to track cancel actions) + var functionAsStr = String(params.doneFunction).replace(/\s/g, ''); + var functionHandlesCancel = functionAsStr.substring(0, 9) === "function(" && functionAsStr.substring(9, 10) !== ")"; + + if (functionHandlesCancel) { + params.doneFunction(false); + } + + if (params.closeOnCancel) { + closeModal(); + } + } else { + closeModal(); + } + + break; + } + }; + + var $buttons = modal.querySelectorAll('button'); + for (var i = 0; i < $buttons.length; i++) { + $buttons[i].onclick = onButtonEvent; + } + + // Remember the current document.onclick event. + previousDocumentClick = document.onclick; + document.onclick = function(e) { + var target = e.target || e.srcElement; + + var clickedOnModal = (modal === target), + clickedOnModalChild = isDescendant(modal, e.target), + modalIsVisible = hasClass(modal, 'visible'), + outsideClickIsAllowed = modal.getAttribute('data-allow-ouside-click') === 'true'; + + if (!clickedOnModal && !clickedOnModalChild && modalIsVisible && outsideClickIsAllowed) { + closeModal(); + } + }; + + + // Keyboard interactions + var $okButton = modal.querySelector('button.confirm'), + $cancelButton = modal.querySelector('button.cancel'), + $modalButtons = modal.querySelectorAll('button:not([type=hidden])'); + + + function handleKeyDown(e) { + var keyCode = e.keyCode || e.which; + + if ([9,13,32,27].indexOf(keyCode) === -1) { + // Don't do work on keys we don't care about. + return; + } + + var $targetElement = e.target || e.srcElement; + + var btnIndex = -1; // Find the button - note, this is a nodelist, not an array. + for (var i = 0; i < $modalButtons.length; i++) { + if ($targetElement === $modalButtons[i]) { + btnIndex = i; + break; + } + } + + if (keyCode === 9) { + // TAB + if (btnIndex === -1) { + // No button focused. Jump to the confirm button. + $targetElement = $okButton; + } else { + // Cycle to the next button + if (btnIndex === $modalButtons.length - 1) { + $targetElement = $modalButtons[0]; + } else { + $targetElement = $modalButtons[btnIndex + 1]; + } + } + + stopEventPropagation(e); + $targetElement.focus(); + + } else { + if (keyCode === 13 || keyCode === 32) { + if (btnIndex === -1) { + // ENTER/SPACE clicked outside of a button. + $targetElement = $okButton; + } else { + // Do nothing - let the browser handle it. + $targetElement = undefined; + } + } else if (keyCode === 27 && !($cancelButton.hidden || $cancelButton.style.display === 'none')) { + // ESC to cancel only if there's a cancel button displayed (like the alert() window). + $targetElement = $cancelButton; + } else { + // Fallback - let the browser handle it. + $targetElement = undefined; + } + + if ($targetElement !== undefined) { + fireClick($targetElement, e); + } + } + } + + previousWindowKeyDown = window.onkeydown; + window.onkeydown = handleKeyDown; + + function handleOnBlur(e) { + var $targetElement = e.target || e.srcElement, + $focusElement = e.relatedTarget, + modalIsVisible = hasClass(modal, 'visible'); + + if (modalIsVisible) { + var btnIndex = -1; // Find the button - note, this is a nodelist, not an array. + + if ($focusElement !== null) { + // If we picked something in the DOM to focus to, let's see if it was a button. + for (var i = 0; i < $modalButtons.length; i++) { + if ($focusElement === $modalButtons[i]) { + btnIndex = i; + break; + } + } + + if (btnIndex === -1) { + // Something in the dom, but not a visible button. Focus back on the button. + $targetElement.focus(); + } + } else { + // Exiting the DOM (e.g. clicked in the URL bar); + lastFocusedButton = $targetElement; + } + } + } + + $okButton.onblur = handleOnBlur; + $cancelButton.onblur = handleOnBlur; + + window.onfocus = function() { + // When the user has focused away and focused back from the whole window. + window.setTimeout(function() { + // Put in a timeout to jump out of the event sequence. Calling focus() in the event + // sequence confuses things. + if (lastFocusedButton !== undefined) { + lastFocusedButton.focus(); + lastFocusedButton = undefined; + } + }, 0); + }; + }; + + /** + * Set default params for each popup + * @param {Object} userParams + */ + window.swal.setDefaults = function(userParams) { + if (!userParams) { + throw new Error('userParams is required'); + } + if (typeof userParams !== 'object') { + throw new Error('userParams has to be a object'); + } + + extend(defaultParams, userParams); + }; + + /* + * Set type, text and actions on modal + */ + + function setParameters(params) { + var modal = getModal(); + + var $title = modal.querySelector('h2'), + $text = modal.querySelector('p'), + $cancelBtn = modal.querySelector('button.cancel'), + $confirmBtn = modal.querySelector('button.confirm'); + + // Title + $title.innerHTML = escapeHtml(params.title).split("\n").join("
    "); + + // Text + $text.innerHTML = escapeHtml(params.text || '').split("\n").join("
    "); + if (params.text) { + show($text); + } + + // Icon + hide(modal.querySelectorAll('.icon')); + if (params.type) { + var validType = false; + for (var i = 0; i < alertTypes.length; i++) { + if (params.type === alertTypes[i]) { + validType = true; + break; + } + } + if (!validType) { + window.console.error('Unknown alert type: ' + params.type); + return false; + } + var $icon = modal.querySelector('.icon.' + params.type); + show($icon); + + // Animate icon + switch (params.type) { + case "success": + addClass($icon, 'animate'); + addClass($icon.querySelector('.tip'), 'animateSuccessTip'); + addClass($icon.querySelector('.long'), 'animateSuccessLong'); + break; + case "error": + addClass($icon, 'animateErrorIcon'); + addClass($icon.querySelector('.x-mark'), 'animateXMark'); + break; + case "warning": + addClass($icon, 'pulseWarning'); + addClass($icon.querySelector('.body'), 'pulseWarningIns'); + addClass($icon.querySelector('.dot'), 'pulseWarningIns'); + break; + } + + } + + // Custom image + if (params.imageUrl) { + var $customIcon = modal.querySelector('.icon.custom'); + + $customIcon.style.backgroundImage = 'url(' + params.imageUrl + ')'; + show($customIcon); + + var _imgWidth = 80, + _imgHeight = 80; + + if (params.imageSize) { + var imgWidth = params.imageSize.split('x')[0]; + var imgHeight = params.imageSize.split('x')[1]; + + if (!imgWidth || !imgHeight) { + window.console.error("Parameter imageSize expects value with format WIDTHxHEIGHT, got " + params.imageSize); + } else { + _imgWidth = imgWidth; + _imgHeight = imgHeight; + + $customIcon.css({ + 'width': imgWidth + 'px', + 'height': imgHeight + 'px' + }); + } + } + $customIcon.setAttribute('style', $customIcon.getAttribute('style') + 'width:' + _imgWidth + 'px; height:' + _imgHeight + 'px'); + } + + // Cancel button + modal.setAttribute('data-has-cancel-button', params.showCancelButton); + if (params.showCancelButton) { + $cancelBtn.style.display = 'inline-block'; + } else { + hide($cancelBtn); + } + + // Edit text on cancel and confirm buttons + if (params.cancelButtonText) { + $cancelBtn.innerHTML = escapeHtml(params.cancelButtonText); + } + if (params.confirmButtonText) { + $confirmBtn.innerHTML = escapeHtml(params.confirmButtonText); + } + + // Reset confirm buttons to default class (Ugly fix) + $confirmBtn.className = 'confirm btn btn-lg' + + // Set confirm button to selected class + addClass($confirmBtn, params.confirmButtonClass); + + // Set cancel button to selected class + addClass($cancelBtn, params.cancelButtonClass); + + // Allow outside click? + modal.setAttribute('data-allow-ouside-click', params.allowOutsideClick); + + // Done-function + var hasDoneFunction = (params.doneFunction) ? true : false; + modal.setAttribute('data-has-done-function', hasDoneFunction); + + // Close timer + modal.setAttribute('data-timer', params.timer); + } + + + /* + * Set hover, active and focus-states for buttons (source: http://www.sitepoint.com/javascript-generate-lighter-darker-color) + */ + + function colorLuminance(hex, lum) { + // Validate hex string + hex = String(hex).replace(/[^0-9a-f]/gi, ''); + if (hex.length < 6) { + hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; + } + lum = lum || 0; + + // Convert to decimal and change luminosity + var rgb = "#", c, i; + for (i = 0; i < 3; i++) { + c = parseInt(hex.substr(i*2,2), 16); + c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16); + rgb += ("00"+c).substr(c.length); + } + + return rgb; + } + + function extend(a, b){ + for (var key in b) { + if (b.hasOwnProperty(key)) { + a[key] = b[key]; + } + } + + return a; + } + + function hexToRgb(hex) { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) : null; + } + + // Add box-shadow style to button (depending on its chosen bg-color) + function setFocusStyle($button, bgColor) { + var rgbColor = hexToRgb(bgColor); + $button.style.boxShadow = '0 0 2px rgba(' + rgbColor +', 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.05)'; + } + + + /* + * Animations + */ + + function openModal() { + var modal = getModal(); + fadeIn(getOverlay(), 10); + show(modal); + addClass(modal, 'showSweetAlert'); + removeClass(modal, 'hideSweetAlert'); + + previousActiveElement = document.activeElement; + var $okButton = modal.querySelector('button.confirm'); + $okButton.focus(); + + setTimeout(function() { + addClass(modal, 'visible'); + }, 500); + + var timer = modal.getAttribute('data-timer'); + if (timer !== "null" && timer !== "") { + setTimeout(function() { + closeModal(); + }, timer); + } + } + + function closeModal() { + var modal = getModal(); + fadeOut(getOverlay(), 5); + fadeOut(modal, 5); + removeClass(modal, 'showSweetAlert'); + addClass(modal, 'hideSweetAlert'); + removeClass(modal, 'visible'); + + + // Reset icon animations + + var $successIcon = modal.querySelector('.icon.success'); + removeClass($successIcon, 'animate'); + removeClass($successIcon.querySelector('.tip'), 'animateSuccessTip'); + removeClass($successIcon.querySelector('.long'), 'animateSuccessLong'); + + var $errorIcon = modal.querySelector('.icon.error'); + removeClass($errorIcon, 'animateErrorIcon'); + removeClass($errorIcon.querySelector('.x-mark'), 'animateXMark'); + + var $warningIcon = modal.querySelector('.icon.warning'); + removeClass($warningIcon, 'pulseWarning'); + removeClass($warningIcon.querySelector('.body'), 'pulseWarningIns'); + removeClass($warningIcon.querySelector('.dot'), 'pulseWarningIns'); + + + // Reset the page to its previous state + window.onkeydown = previousWindowKeyDown; + document.onclick = previousDocumentClick; + if (previousActiveElement) { + previousActiveElement.focus(); + } + lastFocusedButton = undefined; + } + + + /* + * Set "margin-top"-property on modal based on its computed height + */ + + function fixVerticalPosition() { + var modal = getModal(); + modal.style.marginTop = getTopMargin(getModal()); + } + + + /* + * If library is injected after page has loaded + */ + + (function () { + if (document.readyState === "complete" || document.readyState === "interactive" && document.body) { + sweetAlertInitialize(); + } else { + if (document.addEventListener) { + document.addEventListener('DOMContentLoaded', function factorial() { + document.removeEventListener('DOMContentLoaded', arguments.callee, false); + sweetAlertInitialize(); + }, false); + } else if (document.attachEvent) { + document.attachEvent('onreadystatechange', function() { + if (document.readyState === 'complete') { + document.detachEvent('onreadystatechange', arguments.callee); + sweetAlertInitialize(); + } + }); + } + } + })(); + +})(window, document); diff --git a/tools/static/sweet-alert.min.js b/tools/static/sweet-alert.min.js new file mode 100644 index 0000000..3940548 --- /dev/null +++ b/tools/static/sweet-alert.min.js @@ -0,0 +1 @@ +!function(a,b){function c(b){var c=p(),d=c.querySelector("h2"),e=c.querySelector("p"),f=c.querySelector("button.cancel"),g=c.querySelector("button.confirm");if(d.innerHTML=u(b.title).split("\n").join("
    "),e.innerHTML=u(b.text||"").split("\n").join("
    "),b.text&&w(e),y(c.querySelectorAll(".icon")),b.type){for(var h=!1,i=0;i=0;)c=c.replace(" "+b+" "," ");a.className=c.replace(/^\s+|\s+$/g,"")}},u=function(a){var c=b.createElement("div");return c.appendChild(b.createTextNode(a)),c.innerHTML},v=function(a){a.style.opacity="",a.style.display="block"},w=function(a){if(a&&!a.length)return v(a);for(var b=0;b0?setTimeout(d,b):a.style.display="none"};d()},D=function(c){if(MouseEvent){var d=new MouseEvent("click",{view:a,bubbles:!1,cancelable:!0});c.dispatchEvent(d)}else if(b.createEvent){var e=b.createEvent("MouseEvents");e.initEvent("click",!1,!1),c.dispatchEvent(e)}else b.createEventObject?c.fireEvent("onclick"):"function"==typeof c.onclick&&c.onclick()},E=function(b){"function"==typeof b.stopPropagation?(b.stopPropagation(),b.preventDefault()):a.event&&a.event.hasOwnProperty("cancelBubble")&&(a.event.cancelBubble=!0)};a.sweetAlertInitialize=function(){var a='

    Title

    Text

    ',c=b.createElement("div");c.innerHTML=a,b.body.appendChild(c)},a.sweetAlert=a.swal=function(){function h(a){var b=a.keyCode||a.which;if(-1!==[9,13,32,27].indexOf(b)){for(var c=a.target||a.srcElement,d=-1,e=0;e-1,d=r(n,"visible"),e=m.doneFunction&&"true"===n.getAttribute("data-has-done-function");switch(a.type){case"click":if(c&&e&&d)m.doneFunction(!0),m.closeOnConfirm&&f();else if(e&&d){var g=String(m.doneFunction).replace(/\s/g,""),h="function("===g.substring(0,9)&&")"!==g.substring(9,10);h&&m.doneFunction(!1),m.closeOnCancel&&f()}else f()}},s=n.querySelectorAll("button"),t=0;t