[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Noalyss-commit] [noalyss] 01/01: Task #1153 - Boite de dialogue modale
|
From: |
Dany De Bontridder |
|
Subject: |
[Noalyss-commit] [noalyss] 01/01: Task #1153 - Boite de dialogue modale #1153 Dialog box : confirm_form in javascript , use of smoke, add style |
|
Date: |
Mon, 24 Aug 2015 23:02:58 +0000 |
sparkyx pushed a commit to branch master
in repository noalyss.
commit bfeafc5f10828bb713d32f2d180aae300650ad14
Author: Dany De Bontridder <address@hidden>
Date: Tue Aug 25 00:57:39 2015 +0200
Task #1153 - Boite de dialogue modale
#1153 Dialog box : confirm_form in javascript , use of smoke, add style
---
html/js/smoke.js | 519 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
html/smoke.css | 118 ++++++++++++
2 files changed, 637 insertions(+), 0 deletions(-)
diff --git a/html/js/smoke.js b/html/js/smoke.js
new file mode 100644
index 0000000..aab68fa
--- /dev/null
+++ b/html/js/smoke.js
@@ -0,0 +1,519 @@
+/*
+ SMOKE.JS - 0.1.3
+ (c) 2011-2013 Jonathan Youngblood
+ demos / documentation: http://smoke-js.com/
+*/
+
+;(function(window, document) {
+
+ /*jslint browser: true, onevar: true, undef: true, nomen: false,
eqeqeq: true, bitwise: true, regexp: true, newcap: true, immed: true */
+
+ var smoke = {
+ smoketimeout: [],
+ init: false,
+ zindex: 1000,
+ i: 0,
+
+ bodyload: function(id) {
+ var ff = document.createElement('div');
+ ff.setAttribute('id','smoke-out-'+id);
+ ff.className = 'smoke-base';
+ ff.style.zIndex = smoke.zindex;
+ smoke.zindex++;
+ document.body.appendChild(ff);
+ },
+
+ newdialog: function() {
+ var newid = new Date().getTime();
+ newid = Math.random(1,99) + newid;
+
+ if (!smoke.init) {
+ smoke.listen(window,"load", function() {
+ smoke.bodyload(newid);
+ });
+ }else{
+ smoke.bodyload(newid);
+ }
+
+ return newid;
+ },
+
+ forceload: function() {},
+
+ build: function (e, f) {
+ smoke.i++;
+
+ f.stack = smoke.i;
+
+ e = e.replace(/\n/g,'<br />');
+ e = e.replace(/\r/g,'<br />');
+
+ var prompt = '',
+ ok = 'OK',
+ cancel = 'Cancel',
+ classname = '',
+ buttons = '',
+ box;
+
+ if (f.type === 'prompt') {
+ prompt =
+ '<div class="dialog-prompt">'+
+ '<input
id="dialog-input-'+f.newid+'" type="text" ' + (f.params.value ? 'value="' +
f.params.value + '"' : '') + ' />'+
+ '</div>';
+ }
+
+ if (f.params.ok) {
+ ok = f.params.ok;
+ }
+
+ if (f.params.cancel) {
+ cancel = f.params.cancel;
+ }
+
+ if (f.params.classname) {
+ classname = f.params.classname;
+ }
+
+ if (f.type !== 'signal') {
+ buttons = '<div class="dialog-buttons">';
+ if (f.type === 'alert') {
+ buttons +=
+ '<button
id="alert-ok-'+f.newid+'">'+ok+'</button>';
+ }
+ else if (f.type === 'quiz') {
+
+ if (f.params.button_1) {
+ buttons +=
+ '<button
class="quiz-button"
id="'+f.type+'-ok1-'+f.newid+'">'+f.params.button_1+'</button>';
+ }
+
+ if (f.params.button_2) {
+ buttons +=
+ '<button
class="quiz-button"
id="'+f.type+'-ok2-'+f.newid+'">'+f.params.button_2+'</button>';
+ }
+
+ if (f.params.button_3) {
+ buttons +=
+ '<button
class="quiz-button"
id="'+f.type+'-ok3-'+f.newid+'">'+f.params.button_3+'</button>';
+ }
+ if (f.params.button_cancel) {
+ buttons +=
+ '<button
id="'+f.type+'-cancel-'+f.newid+'"
class="cancel">'+f.params.button_cancel+'</button>';
+ }
+
+ }
+
+ else if (f.type === 'prompt' || f.type ===
'confirm') {
+ if (f.params.reverseButtons) {
+ buttons +=
+ '<button
id="'+f.type+'-ok-'+f.newid+'">'+ok+'</button>' +
+ '<button
id="'+f.type+'-cancel-'+f.newid+'" class="cancel">'+cancel+'</button>';
+ } else {
+ buttons +=
+ '<button
id="'+f.type+'-cancel-'+f.newid+'" class="cancel">'+cancel+'</button>'+
+ '<button
id="'+f.type+'-ok-'+f.newid+'">'+ok+'</button>';
+ }
+ }
+ buttons += '</div>';
+ }
+
+
+ box =
+ '<div id="smoke-bg-'+f.newid+'"
class="smokebg"></div>'+
+ '<div class="dialog smoke '+classname+'">'+
+ '<div class="dialog-inner">'+
+ e+
+ prompt+
+ buttons+
+ '</div>'+
+ '</div>';
+
+ if (!smoke.init) {
+ smoke.listen(window,"load", function() {
+ smoke.finishbuild(e,f,box);
+ });
+ } else{
+ smoke.finishbuild(e,f,box);
+ }
+
+ },
+
+ finishbuild: function(e, f, box) {
+
+ var ff = document.getElementById('smoke-out-'+f.newid);
+
+ ff.className = 'smoke-base smoke-visible smoke-' +
f.type;
+ ff.innerHTML = box;
+
+ while (ff.innerHTML === "") {
+ ff.innerHTML = box;
+ }
+
+ if (smoke.smoketimeout[f.newid]) {
+ clearTimeout(smoke.smoketimeout[f.newid]);
+ }
+
+ smoke.listen(
+ document.getElementById('smoke-bg-'+f.newid),
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ if (f.type === 'prompt' || f.type ===
'confirm' || f.type === 'quiz') {
+ f.callback(false);
+ } else if (f.type === 'alert' && typeof
f.callback !== 'undefined') {
+ f.callback();
+ }
+ }
+ );
+
+
+ switch (f.type) {
+ case 'alert':
+ smoke.finishbuildAlert(e, f, box);
+ break;
+ case 'confirm':
+ smoke.finishbuildConfirm(e, f, box);
+ break;
+ case 'quiz':
+ smoke.finishbuildQuiz(e, f, box);
+ break;
+ case 'prompt':
+ smoke.finishbuildPrompt(e, f, box);
+ break;
+ case 'signal':
+ smoke.finishbuildSignal(e, f, box);
+ break;
+ default:
+ throw "Unknown type: " + f.type;
+ }
+ },
+
+ finishbuildAlert: function (e, f, box) {
+ smoke.listen(
+ document.getElementById('alert-ok-'+f.newid),
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ if (typeof f.callback !== 'undefined') {
+ f.callback();
+ }
+ }
+ );
+
+ document.onkeyup = function (e) {
+ if (!e) {
+ e = window.event;
+ }
+ if (e.keyCode === 13 || e.keyCode === 32 ||
e.keyCode === 27) {
+ smoke.destroy(f.type, f.newid);
+ if (typeof f.callback !== 'undefined') {
+ f.callback();
+ }
+ }
+ };
+ },
+
+ finishbuildConfirm: function (e, f, box) {
+ smoke.listen(
+ document.getElementById('confirm-cancel-' +
f.newid),
+ "click",
+ function ()
+ {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ );
+
+ smoke.listen(
+ document.getElementById('confirm-ok-' +
f.newid),
+ "click",
+ function ()
+ {
+ smoke.destroy(f.type, f.newid);
+ f.callback(true);
+ }
+ );
+
+ document.onkeyup = function (e) {
+ if (!e) {
+ e = window.event;
+ }
+ /*if (e.keyCode === 13 || e.keyCode === 32) {
+ smoke.destroy(f.type, f.newid);
+ f.callback(true);
+ } else*/
+ if (e.keyCode === 27) {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ };
+ },
+
+ finishbuildQuiz: function (e, f, box) {
+ var a, b, c;
+
+ smoke.listen(
+ document.getElementById('quiz-cancel-' +
f.newid),
+ "click",
+ function ()
+ {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ );
+
+
+ if (a = document.getElementById('quiz-ok1-'+f.newid))
+ smoke.listen(
+ a,
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ f.callback(a.innerHTML);
+ }
+ );
+
+
+ if (b = document.getElementById('quiz-ok2-'+f.newid))
+ smoke.listen(
+ b,
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ f.callback(b.innerHTML);
+ }
+ );
+
+
+ if (c = document.getElementById('quiz-ok3-'+f.newid))
+ smoke.listen(
+ c,
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ f.callback(c.innerHTML);
+ }
+ );
+
+ document.onkeyup = function (e) {
+ if (!e) {
+ e = window.event;
+ }
+ if (e.keyCode === 27) {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ };
+
+ },
+
+ finishbuildPrompt: function (e, f, box) {
+ var pi =
document.getElementById('dialog-input-'+f.newid);
+
+ setTimeout(function () {
+ pi.focus();
+ pi.select();
+ }, 100);
+
+ smoke.listen(
+
document.getElementById('prompt-cancel-'+f.newid),
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ );
+
+ smoke.listen(
+ document.getElementById('prompt-ok-'+f.newid),
+ "click",
+ function () {
+ smoke.destroy(f.type, f.newid);
+ f.callback(pi.value);
+ }
+ );
+
+ document.onkeyup = function (e) {
+ if (!e) {
+ e = window.event;
+ }
+
+ if (e.keyCode === 13) {
+ smoke.destroy(f.type, f.newid);
+ f.callback(pi.value);
+ } else if (e.keyCode === 27) {
+ smoke.destroy(f.type, f.newid);
+ f.callback(false);
+ }
+ };
+ },
+
+ finishbuildSignal: function (e, f, box) {
+
+
+ document.onkeyup = function (e) {
+ if (!e) {
+ e = window.event;
+ }
+ if (e.keyCode === 27) {
+ smoke.destroy(f.type, f.newid);
+ if (typeof f.callback !== 'undefined') {
+ f.callback();
+ }
+ }
+ };
+
+ smoke.smoketimeout[f.newid] = setTimeout(function () {
+ smoke.destroy(f.type, f.newid);
+ if (typeof f.callback !== 'undefined') {
+ f.callback();
+ }
+ }, f.timeout);
+ },
+
+
+ destroy: function (type,id) {
+
+ var box = document.getElementById('smoke-out-'+id);
+
+ if (type !== 'quiz') {
+ var okButton =
document.getElementById(type+'-ok-'+id);
+ }
+
+ var cancelButton = document.getElementById(type+'-cancel-'+id);
+ box.className = 'smoke-base';
+
+ if (okButton) {
+ smoke.stoplistening(okButton, "click",
function() {});
+ document.onkeyup = null;
+ }
+
+ if (type === 'quiz') {
+ var quiz_buttons =
document.getElementsByClassName("quiz-button");
+ for (var i = 0; i < quiz_buttons.length; i++) {
+ smoke.stoplistening(quiz_buttons[i], "click",
function() {});
+ document.onkeyup = null;
+ }
+ }
+
+ if (cancelButton) {
+ smoke.stoplistening(cancelButton, "click",
function() {});
+ }
+
+ smoke.i = 0;
+ document.body.removeChild(box);
+ },
+
+ alert: function (e, f, g) {
+ if (typeof g !== 'object') {
+ g = false;
+ }
+
+ var id = smoke.newdialog();
+
+ smoke.build(e, {
+ type: 'alert',
+ callback: f,
+ params: g,
+ newid: id
+ });
+ },
+
+ signal: function (e, f, g) {
+ if (typeof g !== 'object') {
+ g = false;
+ }
+
+ var duration = 5000;
+ if (g.duration !== 'undefined'){
+ duration = g.duration;
+ }
+
+ var id = smoke.newdialog();
+ smoke.build(e, {
+ type: 'signal',
+ callback: f,
+ timeout: duration,
+ params: g,
+ newid: id
+ });
+ },
+
+ confirm: function (e, f, g) {
+ if (typeof g !== 'object') {
+ g = false;
+ }
+
+ var id = smoke.newdialog();
+ smoke.build(e, {
+ type: 'confirm',
+ callback: f,
+ params: g,
+ newid: id
+ });
+ },
+
+ quiz: function (e, f, g) {
+ if (typeof g !== 'object') {
+ g = false;
+ }
+
+ var id = smoke.newdialog();
+ smoke.build(e, {
+ type: 'quiz',
+ callback: f,
+ params: g,
+ newid: id
+ });
+ },
+
+ prompt: function (e, f, g) {
+ if (typeof g !== 'object') {
+ g = false;
+ }
+
+ var id = smoke.newdialog();
+ return
smoke.build(e,{type:'prompt',callback:f,params:g,newid:id});
+ },
+
+ listen: function (e, f, g) {
+ if (e.addEventListener) {
+ return e.addEventListener(f, g, false);
+ }
+
+ if (e.attachEvent) {
+ return e.attachEvent('on'+f, g);
+ }
+
+ return false;
+ },
+
+ stoplistening: function (e, f, g) {
+ if (e.removeEventListener) {
+ return e.removeEventListener(f, g, false);
+ }
+
+ if (e.detachEvent) {
+ return e.detachEvent('on'+f, g);
+ }
+
+ return false;
+ }
+ };
+
+
+ smoke.init = true;
+
+ if (typeof module != 'undefined' && module.exports) {
+ module.exports = smoke;
+ }
+ else if (typeof define === 'function' && define.amd) {
+ define('smoke', [], function() {
+ return smoke;
+ });
+ }
+ else {
+ this.smoke = smoke;
+ }
+
+})(window, document);
diff --git a/html/smoke.css b/html/smoke.css
new file mode 100644
index 0000000..9133d54
--- /dev/null
+++ b/html/smoke.css
@@ -0,0 +1,118 @@
+.smoke-base {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ right: 0px;
+ visibility: hidden;
+ opacity: 0;
+ background: rgba(0,0,0,.3);
+ filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000);
+}
+
+.smoke-base.smoke-visible {
+ opacity: 1;
+ visibility: visible;
+}
+
+.smokebg {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ right: 0px;
+}
+
+.smoke-base .dialog {
+ position: absolute;
+ top: 25%;
+ width: 40%;
+ left: 50%;
+ margin-left: -20%;
+}
+
+.dialog-prompt {
+ margin-top: 15px;
+ text-align: center;
+}
+
+.dialog-buttons {
+ margin: 20px 0px 5px 0px
+}
+
+.smoke {
+ text-align: center;
+ background-color: #DCE1EF;
+ font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
+ font-family: 'openSansRegular';
+
+ padding:2px;
+ margin:0px;
+ overflow:hidden;
+ z-index:3;
+ position:absolute;
+ left:10%;
+ border:1px solid #00008B;
+-moz-box-shadow: 10px 10px 5px #888;
+-webkit-box-shadow: 10px 10px 5px #888;
+box-shadow: 10px 10px 5px #888;
+font-size:14.4px;
+font-size:0.90rem;
+width: 85%;
+}
+.dialog-buttons button:hover{
+ color:beige;
+ font-weight: bold;
+}
+.dialog-buttons button {
+ color:#FFFFFF;
+ font-weight: normal;
+ text-decoration:none;
+ background: #606c88; /* Old browsers */
+ background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%); /* FF3.6+
*/
+ background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#606c88), color-stop(100%,#3f4c6b)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /*
Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* Opera
11.10+ */
+ background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%); /* IE10+ */
+ background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
+ border-color: #605D5D;
+ border-width:0px;
+ padding:4px;
+ margin:3px;
+ cursor:pointer;
+ margin:1px 2px 1px 2px;
+ border-radius: 5px;
+ moz-border-radius:5px;
+ width:7em;
+ width:7rem;
+}
+
+.dialog-prompt input {
+ margin: 0;
+ border: 0;
+ font-family: sans-serif;
+ outline: none;
+ font-family: Menlo, 'Andale Mono', monospace;
+ border: 1px solid #aaa;
+ width: 75%;
+ display: inline-block;
+ background-color: transparent;
+ font-size: 16px;
+ padding: 8px;
+}
+
+.smoke-base .dialog-inner {
+ padding: 15px;
+
+ color:#202020;
+}
+
+button.cancel {
+ background-color: rgba(0,0,0,.40);
+ filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444);
+}
+
+.queue{
+ display:none;
+}