dut
/
projet-php
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

NOTIFICATION_BOX implémentée du HTML au JS en passant par le HTML

This commit is contained in:
xdrm-brackets 2015-12-13 23:17:56 +01:00
parent 9fdcb6ed9f
commit 158b82b62e
10 changed files with 456 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Dashboard.php
View File

@ -23,6 +23,17 @@ if(!Authentification::checkUser(0)){
</head>
<body>
<!-- BARRE DE NOTIFICATIONS -->
<div id='NOTIFBAR'>
<div></div>
<div>
<h3>Oups!</h3>
<p>Certains champs sont incorrects. Veuillez réessayer.</p>
<input type='button' value='Fermer'>
</div>
</div>
<!-- WRAPPER DE LA PAGE -->
<div id='WRAPPER'>
@ -50,7 +61,13 @@ if(!Authentification::checkUser(0)){
</section>
</div>
<script type='text/javascript' src='js/consultations.js'></script>
<script type='text/javascript'>
var notifBar = document.getElementById('NOTIFBAR');
notifBar.children[1].children[2].addEventListener('click', function(e){
remClass(notifBar, 'active');
}, false);
</script>
</body>
</html>

141
css/global.css
View File

@ -28,6 +28,147 @@ body{
/* BOX (POPUP) DE NOTIFICATION DE LA PAGE */
#NOTIFBAR{
/* position */
display: block;
position: fixed;
/*top: calc( 50% - 20em/2 );*/ top: calc( -100% );
left: calc( 50% - 30em/2 );
width: 30em;
height: 20em;
/* border */
border-radius: 5px;
box-shadow: 0 0 30px #aaa;
/* foreground */
font-size: 1em;
color: #333;
text-align: center;
/* animation */
transition: top .5s ease-in-out;
-moz-transition: top .5s ease-in-out;
-webkit-transition: top .5s ease-in-out;
-ms-transition: top .5s ease-in-out;
-o-transition: top .5s ease-in-out;
/* z axis */
z-index: 100;
}
#NOTIFBAR.active{
top: calc( 50% - 20em/2 );
}
#NOTIFBAR > div:nth-child(1){
/* position */
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 55%;
/* border */
border-radius: 5px 5px 0 0 ;
/* background */
background: #e2747d url(../src/svg/notifications/error.svg) center center no-repeat;
background-size: 4em auto;
}
#NOTIFBAR.error > div:nth-child(1){
background-color: #e2747d;
background-image: url(../src/svg/notifications/error.svg);
}
#NOTIFBAR.success > div:nth-child(1){
background-color: #4ccd82;
background-image: url(../src/svg/notifications/success.svg);
}
#NOTIFBAR.info > div:nth-child(1){
background-color: #e0a325;
background-image: url(../src/svg/notifications/info.svg);
}
#NOTIFBAR > div:nth-child(2){
/* position */
display: block;
position: absolute;
top: 55%;
left: 0;
width: 100%;
height: 45%;
/* border */
border-radius: 0 0 5px 5px;
/* background */
background-color: #fff;
}
#NOTIFBAR h3{ margin-top: 1em; }
#NOTIFBAR input[type=button]{
/* position */
display: inline-block;
position: relative;
margin-top: 1em;
padding: .7em 2.5em;
padding-left: 3em;
/* border */
border-radius: 5em;
border: 0;
/* background */
background: #e2747d url(../src/svg/notifications/close.svg) left 1.5em center no-repeat;
background-size: auto 1em;
/* foreground */
color: #fff;
font-size: .9em;
letter-spacing: .1em;
/* extra */
cursor: pointer;
/* animation */
transition: transform .2s ease-in-out;
-moz-transition: transform .2s ease-in-out;
-webkit-transition: transform .2s ease-in-out;
-ms-transition: transform .2s ease-in-out;
-o-transition: transform .2s ease-in-out;
}
#NOTIFBAR.error input[type=button]{
background-color: #e2747d;
}
#NOTIFBAR.success input[type=button]{
background-color: #4ccd82;
}
#NOTIFBAR.info input[type=button]{
background-color: #e0a325;
}
#NOTIFBAR input[type=button]:hover{
transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
/* WRAPPER DE LA PAGE */
#WRAPPER{
/* position */

48
js/adjust.js
View File

@ -21,4 +21,52 @@ function addClass(el, pClass){
function remClass(el, pClass){
if( el.className.indexOf(pClass) > -1 ) // si la class de l'élement contient la classe à enlever
el.className = el.className.substr(0, el.className.indexOf(pClass)) + '' + el.className.substr(el.className.indexOf(pClass)+pClass.length);
}
var notifState = false; // VRAI si affiché, sinon FAUX
function notif(pType, pTitle, pMessage){
/* [0] Variables globales
======================================================*/
var notifElement = document.getElementById('NOTIFBAR');
var lTitle = [
'Oups!', // error
'Cool!', // success
'Tout va bien!', // info
];
var lMessage = [
'Un erreur a eu lieu. Veuillez réessayer.', // error
'Tout s\'est bien passé.', // success
'On va tout vous expliquer.' // info
];
/* [1] On formatte et vérifie les variables
======================================================*/
if( arguments.length == 0 ) return false; // si pas de param, on quitte
var pTitle = (arguments.length>1) ? pTitle : null;
var pMessage = (arguments.length>2) ? pMessage : null;
var index = ['error', 'success', 'info'].indexOf(pType)
if( index == -1 ) return false; // si pType incorrect, on quitte
/* [2] On initialise la box et les variables
======================================================*/
notifElement.className = ''; // on supprime toute classe existante
addClass(notifElement, pType); // on met en page en fonction du type
if( pTitle == null ) pTitle = lTitle[index];
if( pMessage == null ) pMessage = lMessage[index];
/* [3] On met en page et on affiche
======================================================*/
notifElement.children[1].children[0].innerHTML = pTitle; // on attribue le titre
notifElement.children[1].children[1].innerHTML = pMessage; // on attribue le texte
addClass(notifElement, 'active'); // on affiche la boite
}

7
js/consultations.js
View File

@ -1,3 +1,10 @@
var notifBar = document.getElementById('NOTIFBAR');
notifBar.children[1].children[2].addEventListener('click', function(e){
remClass(notifBar, 'active');
}, false);
/* [1] On récupère les 2 <select> de création de RDV
===============================================================*/
var newRDVPatient = document.getElementById('newRDVPatient');

9
js/medecins.js
View File

@ -1,3 +1,12 @@
var notifBar = document.getElementById('NOTIFBAR');
notifBar.children[1].children[2].addEventListener('click', function(e){
remClass(notifBar, 'active');
}, false);
var crPrenom = document.getElementById('crPrenom');
var crNom = document.getElementById('crNom');
var sbCreer = document.getElementById('sbCreer');

8
js/patients.js
View File

@ -1,3 +1,11 @@
var notifBar = document.getElementById('NOTIFBAR');
notifBar.children[1].children[2].addEventListener('click', function(e){
remClass(notifBar, 'active');
}, false);
var inPrenom = document.getElementById('crPrenom');
var inNom = document.getElementById('crNom');
var inAdr = document.getElementById('crAdr');

65
src/svg/notifications/close.svg Normal file
View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="13.40625"
id="svg2"
version="1.1"
width="13.4375"
inkscape:version="0.48.4 r9939"
sodipodi:docname="1450050381_button_close.svg">
<metadata
id="metadata9">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview7"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="14.75"
inkscape:cx="6.71875"
inkscape:cy="6.6875"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs4" />
<g
id="layer1"
transform="translate(-1.28125,-1037.6435)"
style="fill:#ffffff">
<path
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="M 2.71875,1.28125 1.28125,2.6875 6.5625,8 1.28125,13.28125 2.71875,14.6875 8,9.40625 13.28125,14.6875 14.71875,13.28125 9.4375,8 14.71875,2.6875 13.28125,1.28125 8,6.5625 2.71875,1.28125 z"
transform="translate(0,1036.3622)"
id="path2985"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

51
src/svg/notifications/error.svg Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 500 500"
id="Layer_1"
version="1.1"
viewBox="0 0 410.40625 410.40625"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="error.svg"><metadata
id="metadata15"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs13" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview11"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.944"
inkscape:cx="133.9153"
inkscape:cy="214.17755"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
style="stroke:none;stroke-miterlimit:10;fill:#ffffff"
d="M 205.21875 0.5 C 92.166063 0.5 0.5 92.166063 0.5 205.21875 C 0.5 318.27144 92.166063 409.90625 205.21875 409.90625 C 318.27144 409.90625 409.90625 318.27144 409.90625 205.21875 C 409.90625 92.166063 318.27144 0.5 205.21875 0.5 z M 205.21875 16.65625 C 309.35719 16.65625 393.75 101.08031 393.75 205.21875 C 393.75 309.35719 309.35719 393.75 205.21875 393.75 C 101.08031 393.75 16.65625 309.35719 16.65625 205.21875 C 16.65625 101.08031 101.08031 16.65625 205.21875 16.65625 z "
id="circle3" /><path
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:22;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="M 117.1875 103.1875 A 11.0011 11.0011 0 0 0 109.53125 122.09375 L 189.65625 202.21875 L 109.53125 282.34375 A 11.004349 11.004349 0 0 0 125.09375 297.90625 L 205.21875 217.78125 L 285.34375 297.90625 A 11.004349 11.004349 0 0 0 300.90625 282.34375 L 220.78125 202.21875 L 300.90625 122.09375 A 11.0011 11.0011 0 0 0 292.90625 103.21875 A 11.0011 11.0011 0 0 0 285.34375 106.53125 L 205.21875 186.65625 L 125.09375 106.53125 A 11.0011 11.0011 0 0 0 117.1875 103.1875 z "
id="line7" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

59
src/svg/notifications/info.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 50 50"
height="50"
id="Layer_1"
version="1.1"
viewBox="0 0 50 50"
width="50"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
sodipodi:docname="1450066316_info.svg"><metadata
id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview9"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="13.350176"
inkscape:cx="36.421681"
inkscape:cy="19.71649"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
d="M 25,0 C 11.204726,0 0,11.204726 0,25 0,38.795274 11.204726,50 25,50 38.795274,50 50,38.795274 50,25 50,11.204726 38.795274,0 25,0 z m 0,2 C 37.714394,2 48,12.285606 48,25 48,37.714394 37.714394,48 25,48 12.285606,48 2,37.714394 2,25 2,12.285606 12.285606,2 25,2 z"
id="circle3"
inkscape:connector-curvature="0" /><rect
height="50"
width="50"
id="rect5"
x="0"
y="0"
style="fill:none" /><path
d="m 23.779,16.241 c -0.216,0 -0.357,-0.144 -0.357,-0.359 v -2.618 c 0,-0.215 0.142,-0.359 0.357,-0.359 h 2.439 c 0.215,0 0.359,0.144 0.359,0.359 v 2.618 c 0,0.215 -0.145,0.359 -0.359,0.359 h -2.439 z m 0.073,21.052 c -0.215,0 -0.358,-0.143 -0.358,-0.358 V 20.473 c 0,-0.215 0.144,-0.359 0.358,-0.359 h 2.295 c 0.216,0 0.359,0.144 0.359,0.359 v 16.462 c 0,0.216 -0.144,0.358 -0.359,0.358 h -2.295 z"
id="path7"
style="fill:#ffffff;stroke:none"
inkscape:connector-curvature="0" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

49
src/svg/notifications/success.svg Normal file
View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 512 512"
height="512px"
id="Layer_1"
version="1.1"
viewBox="0 0 512 512"
width="512px"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
sodipodi:docname="1449753614_tick.svg"><metadata
id="metadata3001"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs2999" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="765"
inkscape:window-height="480"
id="namedview2997"
showgrid="false"
inkscape:zoom="0.4609375"
inkscape:cx="256"
inkscape:cy="256"
inkscape:window-x="-1"
inkscape:window-y="24"
inkscape:window-maximized="0"
inkscape:current-layer="Layer_1" /><path
d="M256,6.998c-137.533,0-249,111.467-249,249c0,137.534,111.467,249,249,249s249-111.467,249-249 C505,118.464,393.533,6.998,256,6.998z M256,485.078c-126.309,0-229.08-102.771-229.08-229.081 c0-126.31,102.771-229.08,229.08-229.08c126.31,0,229.08,102.771,229.08,229.08C485.08,382.307,382.31,485.078,256,485.078z"
fill="#425661"
id="path2993"
style="fill:#ffffff" /><polygon
fill="#425661"
points="384.235,158.192 216.919,325.518 127.862,236.481 113.72,250.624 216.919,353.803 398.28,172.334 "
id="polygon2995"
style="fill:#ffffff" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB