Mise en page des formulaires (1re fois)
This commit is contained in:
xdrm-brackets
parent
d94cb13f21
commit
92c915329e
|
|
@ -1,4 +1,8 @@
|
|||
$theme-color: #2138e6;
|
||||
$theme-color: #e63321;
|
||||
|
||||
$sub-menu-color: #5b5e63;
|
||||
|
||||
/* FORMULAIRES */
|
||||
$form-valid-color: #2193e6;
|
||||
$form-invalid-color: #e63321;
|
||||
$form-neutral-color: #7f7f7f;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}
|
||||
#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.active.list{display:flex;flex-direction:column}#WRAPPER>#CONTAINER>section.active.list .inline-box{flex:1 1 1}#WRAPPER>#CONTAINER>section>.inline-box{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box a{text-decoration:none;color:inherit}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups{display:block;margin:1em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .groups svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .groups svg path{fill:#333 !important}#WRAPPER>#CONTAINER>section>.inline-box .groups span{display:inline-block;padding:.1em .5em;margin-right:.2em;border-radius:3px;border:1px solid #bdbdbd;box-shadow:inset 0 0 2px #fafafa;background-color:#f9f9f9;color:#333;cursor:default}#WRAPPER>#CONTAINER>section>form{display:inline-block;position:relative;margin:.3em 0;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>form input[type=text],#WRAPPER>#CONTAINER>section>form input[type=mail],#WRAPPER>#CONTAINER>section>form input[type=password]{display:inline-block;margin:1em 0;padding:.3em .5em;border-radius:0;border:none;border-bottom:1px solid transparent;color:#000}#WRAPPER>#CONTAINER>section>form input[type=text]:focus,#WRAPPER>#CONTAINER>section>form input[type=mail]:focus,#WRAPPER>#CONTAINER>section>form input[type=password]:focus{border-color:#e63321}#WRAPPER>#CONTAINER>section>form button,#WRAPPER>#CONTAINER>section>form button.invalid{display:inline-block;position:relative;left:50%;padding:.5em 1em;border-radius:2px;border:1px solid #e63321;background-color:#fff;color:#e63321;transition:background .2s ease-in-out;transform:translateX(-50%)}#WRAPPER>#CONTAINER>section>form button:hover,#WRAPPER>#CONTAINER>section>form button.invalid:hover{background-color:#e63321;color:#fff}#WRAPPER>#CONTAINER>section>form button.valid{border-color:#2193e6;color:#2193e6}#WRAPPER>#CONTAINER>section>form button.valid:hover{background-color:#2193e6;color:#fff}
|
||||
/*# sourceMappingURL=container.css.map */
|
||||
|
|
|
|||
|
|
@ -2,76 +2,7 @@
|
|||
|
||||
#WRAPPER > #CONTAINER{
|
||||
|
||||
/* [1] Menu interne (sub-menu-side)
|
||||
=========================================================*/
|
||||
|
||||
& > .sub-menu-side{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
// Les liens du menu
|
||||
& > span[data-sublink]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 7.5em;
|
||||
|
||||
padding: .3em 1em .3em 2em;
|
||||
margin: 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
color: $sub-menu-color;
|
||||
text-shadow: 1px 1px white;
|
||||
white-space: nowrap;
|
||||
|
||||
transition: all .2s;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
// Dimension/Position des svg (icones)
|
||||
& > .svg > svg{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
// left: 100%;
|
||||
top: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
// Coloration pour tous les elements du svg
|
||||
& path{
|
||||
fill: $sub-menu-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active{
|
||||
color: darken($sub-menu-color, 30);
|
||||
background-color: #d8deea;
|
||||
box-shadow: inset 0 0 4px #c8ced9;
|
||||
|
||||
& > .svg > svg path{
|
||||
fill: darken($sub-menu-color, 30) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// On decale le premier
|
||||
& > span[data-sublink]:nth-child(1){
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [2] Section (contenu)
|
||||
/* [1] Section (contenu)
|
||||
=========================================================*/
|
||||
& > section{
|
||||
display: none;
|
||||
|
|
@ -97,7 +28,7 @@
|
|||
|
||||
|
||||
|
||||
/* [3] INLINE-BOX pour afficher les listes de donnees
|
||||
/* [2] INLINE-BOX pour afficher les listes de donnees
|
||||
=========================================================*/
|
||||
& > section > .inline-box{
|
||||
display: inline-block;
|
||||
|
|
@ -216,5 +147,77 @@
|
|||
|
||||
}
|
||||
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
& > section > form{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
// width: calc( 100% - 2*1em - 2*1em );
|
||||
margin: .3em 0;
|
||||
padding: 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 1px #b7b7b7;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password]{
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .3em .5em;
|
||||
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
color: #000;
|
||||
|
||||
&:focus{
|
||||
border-color: $theme-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* (2) Boutons */
|
||||
button, button.invalid{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
padding: .5em 1em;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid $form-invalid-color;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
transition: background .2s ease-in-out;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:hover{
|
||||
background-color: $form-invalid-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
button.valid{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
color: $form-valid-color;
|
||||
|
||||
&:hover{
|
||||
background-color: $form-valid-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#00A6EB;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
|
||||
#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#e63321;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important}
|
||||
/*# sourceMappingURL=menu-side.css.map */
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
|
||||
#CONTAINER>.sub-menu-side{display:block;position:relative}#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}
|
||||
/*# sourceMappingURL=submenu-side.css.map */
|
||||
|
|
|
|||
|
|
@ -1 +1,67 @@
|
|||
@import 'constants';
|
||||
|
||||
|
||||
#CONTAINER > .sub-menu-side{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
// Les liens du menu
|
||||
& > span[data-sublink]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 7.5em;
|
||||
|
||||
padding: .3em 1em .3em 2em;
|
||||
margin: 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
color: $sub-menu-color;
|
||||
text-shadow: 1px 1px white;
|
||||
white-space: nowrap;
|
||||
|
||||
transition: all .2s;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
// Dimension/Position des svg (icones)
|
||||
& > .svg > svg{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
// left: 100%;
|
||||
top: 50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
||||
transform: translateY(-50%);
|
||||
|
||||
// Coloration pour tous les elements du svg
|
||||
& path{
|
||||
fill: $sub-menu-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active{
|
||||
color: darken($sub-menu-color, 30);
|
||||
background-color: #d8deea;
|
||||
box-shadow: inset 0 0 4px #c8ced9;
|
||||
|
||||
& > .svg > svg path{
|
||||
fill: darken($sub-menu-color, 30) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// On decale le premier
|
||||
& > span[data-sublink]:nth-child(1){
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
// __ _ _ _
|
||||
// / _| ___ _ __ _ __ ___ __ _| |_ ___| |__ ___ ___| | _____ _ __
|
||||
// | |_ / _ \| '__| '_ ` _ \ / _` | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
|
||||
// | _| (_) | | | | | | | | (_| | ||_____| (__| | | | __/ (__| < __/ |
|
||||
// |_| \___/|_| |_| |_| |_|\__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
|
||||
//
|
||||
function formatChecker(pValue, pPattern, pRules){
|
||||
this.value = pValue;
|
||||
this.pattern = pPattern;
|
||||
this.rules = (arguments.length>2) ? pRules : [];
|
||||
};
|
||||
|
||||
formatChecker.prototype = {
|
||||
value: this.value, // valeur à formater
|
||||
pattern: this.pattern, // format global
|
||||
rules: this.rules, // définition des règles du format global
|
||||
regexp: null, // contiendra la RegExp de validation
|
||||
// règles par défaut
|
||||
default_rules: {
|
||||
'i': '[0-9]', // i = integer
|
||||
'a': '[a-z]', // a = lower case
|
||||
'A': '[A-Z]', // A = upper case
|
||||
'x': '[a-zA-Z]' // x = letter
|
||||
},
|
||||
|
||||
// créé une RegExp en fonction du format global @pattern et des règles @rules
|
||||
compile: function(){
|
||||
var RegExpExpr = '^'; // contiendra les chaines de la regex
|
||||
var RegExpDecomposition = [];
|
||||
|
||||
// on parcours les caractères du pattern
|
||||
for( var i = 0 ; i < this.pattern.length ; i++ ){
|
||||
/* [1] Cas où la règle est définie par l'utilisateur
|
||||
====================================================*/
|
||||
if( this.rules.hasOwnProperty( this.pattern[i] ) ){
|
||||
RegExpExpr += this.rules[ this.pattern[i] ];
|
||||
RegExpDecomposition.push( this.rules[ this.pattern[i] ] );
|
||||
|
||||
/* [2] Cas où la règle est définie par défaut
|
||||
====================================================*/
|
||||
}else if( this.default_rules.hasOwnProperty( this.pattern[i] ) ){
|
||||
RegExpExpr += this.default_rules[ this.pattern[i] ];
|
||||
RegExpDecomposition.push( this.default_rules[ this.pattern[i] ] );
|
||||
|
||||
/* [3] Cas où on prends juste le caractère en compte
|
||||
====================================================*/
|
||||
}else{
|
||||
RegExpExpr += this.pattern[i];
|
||||
RegExpDecomposition.push( this.pattern[i] );
|
||||
}
|
||||
}
|
||||
|
||||
RegExpExpr += '$';
|
||||
|
||||
// on définit la RegExp associée
|
||||
this.regexp = new RegExp( RegExpExpr );
|
||||
// on la complète avec la décomposition par caractère du pattern
|
||||
this.regexp.patternDecomposition = RegExpDecomposition;
|
||||
},
|
||||
|
||||
|
||||
// vérifie la validité en utilisant la RegExp, si elle n'est pas générée, on la génère
|
||||
check: function(pPlotPlate){
|
||||
/* [1] On génère la RegExp si ce n'est pas déjà fait
|
||||
====================================================*/
|
||||
if( this.regexp == null ) this.compile();
|
||||
|
||||
|
||||
/* [2] Gestion de la plaque à trous
|
||||
====================================================*/
|
||||
if( arguments.length > 0 && pPlotPlate instanceof Array){
|
||||
|
||||
// on parcours les caractères du pattern
|
||||
for( var i = 0 ; i < this.pattern.length ; i++ ){
|
||||
|
||||
var RegExpExpr = '^';
|
||||
|
||||
/* [1] Cas où la règle est définie par l'utilisateur
|
||||
====================================================*/
|
||||
if( this.rules.hasOwnProperty( this.pattern[i] ) )
|
||||
RegExpExpr += this.rules[ this.pattern[i] ];
|
||||
|
||||
/* [2] Cas où la règle est définie par défaut
|
||||
====================================================*/
|
||||
else if( this.default_rules.hasOwnProperty( this.pattern[i] ) )
|
||||
RegExpExpr += this.default_rules[ this.pattern[i] ];
|
||||
|
||||
/* [3] Cas où on prends juste le caractère en compte
|
||||
====================================================*/
|
||||
else
|
||||
RegExpExpr += this.pattern[i];
|
||||
|
||||
RegExpExpr += '$';
|
||||
|
||||
pPlotPlate.push( this.value[i].match( new RegExp(RegExpExpr) ) != null );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// on retourne TRUE si c'est bon, FALSE sinon
|
||||
return this.value.match( this.regexp ) != null;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/***********/
|
||||
/* USECASE */
|
||||
/***********/
|
||||
/* [1] On créé une instance du formatChecker()
|
||||
==================================================*/
|
||||
/*HIDDEN*///var instance = new formatChecker(
|
||||
/*HIDDEN*/// 'te2t 1 2 1/23', // la chaîne à vérifier
|
||||
/*HIDDEN*/// 'aava i i i/ii', // le schéma à respecter (cf. règles par défaut)
|
||||
/*HIDDEN*/// {'v': '[0-2]'} // règles spécifiques. Ici, 'v' correspond à un chiffre compris entre 0 et 2
|
||||
/*HIDDEN*///);
|
||||
|
||||
/* [2] On récupère le résultat de la vérification
|
||||
==================================================*/
|
||||
// Note. On passe ici en paramètre un tableau qui va être rempli à TRUE pour les caractères
|
||||
// correspondant au schéma, FALSE pour les erreurs
|
||||
/*HIDDEN*///var respecteSchema = instance.check( plotPlate=[] );
|
||||
/*HIDDEN*///console.log( respecteSchema ); // affichera "true"
|
||||
|
||||
/* [3] On accède à la plotPlate (afin de vérifier d'où vient l'erreur)
|
||||
==================================================*/
|
||||
/*HIDDEN*///console.log( plotPlate ); // affichera "[true, true, true, ..]""
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// _ _ _ _
|
||||
// (_)_ __ _ __ _ _| |_ ___| |__ ___ ___| | _____ _ __
|
||||
// | | '_ \| '_ \| | | | __|____ / __| '_ \ / _ \/ __| |/ / _ \ '__|
|
||||
// | | | | | |_) | |_| | ||_____| (__| | | | __/ (__| < __/ |
|
||||
// |_|_| |_| .__/ \__,_|\__| \___|_| |_|\___|\___|_|\_\___|_|
|
||||
//
|
||||
function inputChecker(){};
|
||||
|
||||
inputChecker.prototype = {
|
||||
input: [], // contiendra les éléments HTML <input>
|
||||
defval: [], // contiendra les valeurs par défaut ou NULL si pas défini
|
||||
checker: [], // contiendra les classes <formatChecker>
|
||||
|
||||
|
||||
/* Ajout d'un champ <input> au vérificateur
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> l'élément <input> à vérifier
|
||||
* @pFormatChecker<formatChecker> l'instance <formatChecker> associée à la valeur voulue du champ
|
||||
* @pDefaultValue<String> [OPT] Valeur par défaut pour l'input
|
||||
*
|
||||
*
|
||||
* @return ajouté<Boolean> retourne TRUE, si le champ a bien été ajouté
|
||||
* retourne FALSE, si une erreur occure
|
||||
*/
|
||||
append: function(pInputElement, pFormatChecker, optDefaultValue){
|
||||
/* [1] Vérification des types
|
||||
====================================================*/
|
||||
if( !(pInputElement instanceof HTMLInputElement) ) return false; // si c'est pas un <input>, retourne FALSE
|
||||
if( !(pFormatChecker instanceof formatChecker) ) return false; // si c'est pas un <formatChecker>, retourne FALSE
|
||||
|
||||
|
||||
/* [2] Référencement des nouvelles données
|
||||
====================================================*/
|
||||
// insertion du <input>
|
||||
var index = this.input.push( pInputElement );
|
||||
|
||||
// insertion du <formatChecker>, si pb d'insertion, retourne FALSE
|
||||
if( index != this.checker.push(pFormatChecker) ) return false;
|
||||
|
||||
// insertion de la valeur par défaut (si définie), si pb d'insetion, retourne FALSE
|
||||
if( index != (this.defval.push((arguments.length>2)?optDefaultValue:null)) ) return false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* Vérifie le format d'un champ <input> de rang spécifié
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> L'élement qu'on veut vérifier
|
||||
*
|
||||
*
|
||||
* @return verification<Boolean> retourne TRUE si la vérification s'avère correcte
|
||||
* retourne FALSE si la vérification est incorrecte
|
||||
*/
|
||||
check: function(pInputElement){
|
||||
// si l'élément n'est pas référencé, retourne FALSE
|
||||
var index = this.input.indexOf( pInputElement );
|
||||
if( index < 0 ) return false;
|
||||
|
||||
/* [1] On remplace la valeur de vérification du <formatChecker> par la valeur actuelle de l'élément <input>
|
||||
====================================================*/
|
||||
this.checker[index].value = this.input[index].value;
|
||||
|
||||
/* [2] On renvoie le résultat du checker
|
||||
====================================================*/
|
||||
return this.checker[index].check();
|
||||
},
|
||||
|
||||
|
||||
|
||||
/* Vérifie le format de tous les champs <input>
|
||||
*
|
||||
* @return verifications<Boolean> retourne TRUE si les vérifications s'avèrent correctes
|
||||
* retourne FALSE si les vérifications sont incorrectes
|
||||
*/
|
||||
checkAll: function(){
|
||||
var checkerCumul = true;
|
||||
|
||||
for( var i = 0 ; i < this.input.length ; i++ )
|
||||
checkerCumul = checkerCumul && this.check(this.input[i]);
|
||||
|
||||
return checkerCumul;
|
||||
},
|
||||
|
||||
|
||||
/* Applique une correction en fonction du schéma
|
||||
*
|
||||
* @pInputElement<HTMLInputElement> l'élément <input> concerné
|
||||
* @pToEnd<Boolean> si on doit corriger jusqu'à la fin ou uniquement jusqu'à l'avancéé actuelle
|
||||
*
|
||||
*
|
||||
* @return correctValue<String> retourne la valeur corrigée
|
||||
* retourne NULL si erreur
|
||||
*/
|
||||
correct: function(pInputElement, pToEnd){
|
||||
/* GESTION PARAMS */
|
||||
|
||||
// on retourne une erreur si l'élément <input> n'est pas référencé
|
||||
if( (index = this.input.indexOf(pInputElement)) < 0 ) return null;
|
||||
|
||||
var pToEnd = (arguments.length>1) ? pToEnd : true;
|
||||
|
||||
|
||||
|
||||
/* [1] On met à jour la valeur du <formatChecker>
|
||||
====================================================*/
|
||||
this.checker[index].value = this.input[index].value;
|
||||
|
||||
|
||||
this.checker[index].compile(); // on génére la RegExp
|
||||
var RegExpByChar = this.checker[index].regexp.patternDecomposition; // on retire "/^" et "$/" de la RegExp
|
||||
var tmpValue = this.input[index].value; // on copie la "value" pour la modifier
|
||||
|
||||
|
||||
if( !this.check(pInputElement) ){ // si la chaîne n'est pas correcte
|
||||
|
||||
var lastChar = null;
|
||||
|
||||
/* [2] Cas 1 : vérification de la chaîne complète
|
||||
====================================================*/
|
||||
for( var i = 0 ; i < RegExpByChar.length ; i++ ){ // on parcours le pattern
|
||||
|
||||
// si on dépasse de la valeur saisie et qu'on doit pas aller jusqu'à la fin, on quitte le FOR
|
||||
if( !pToEnd && i >= this.input[index].value.length )
|
||||
break;
|
||||
|
||||
lastChar = tmpValue[i];
|
||||
|
||||
// RegExp sur le caractère en question
|
||||
var tmpRegExp = new RegExp( '^'+RegExpByChar[i]+'$' );
|
||||
|
||||
/* (1) Valeur inexistante (string.length < schéma.length)
|
||||
-----------------------------------------------------------*/
|
||||
if( tmpValue.length == 0 || tmpValue[i] == null )
|
||||
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
|
||||
|
||||
/* (2) Valeur ne correspond pas au schéma du caractère
|
||||
-----------------------------------------------------------*/
|
||||
else if( tmpValue[i].match(tmpRegExp) == null ){
|
||||
// si le caractère suivant match, on décale d'une position
|
||||
if( tmpValue[i].match(new RegExp( '^'+RegExpByChar[i+1]+'$' )) != null )
|
||||
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i) );
|
||||
// sinon on remplace
|
||||
else
|
||||
tmpValue = tmpValue.slice(0, i).concat( this.defval[index][i] ).concat( tmpValue.slice(i+1) );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// on tronque ce qui dépasse
|
||||
tmpValue = tmpValue.slice(0, RegExpByChar.length);
|
||||
|
||||
// on met à jour la valeur de l'élément input
|
||||
this.input[index].value = tmpValue;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
|
@ -22,8 +22,8 @@ pageManagerClass.prototype = {
|
|||
page: null, // l'indice de la page courante dans pagelist
|
||||
vars: [], // les variables suivant le nom de la page dans l'URL
|
||||
path: '', // le chemin du dossier contenant les pages (.php)
|
||||
jsPath: '/view/jsview', // le chemin du dossier contenant les scripts (.js)
|
||||
cssPath: '/view/cssview', // le chemin du dossier contenant les feuilles de style (.css)
|
||||
jsPath: 'js', // le chemin du dossier contenant les scripts (.js)
|
||||
cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css)
|
||||
pagelist: null, // la liste des pages pouvant être chargées
|
||||
container: null, // élément DOM qui contiendra le contenu des pages à charger
|
||||
/* =======================================================================
|
||||
|
|
|
|||
|
|
@ -78,3 +78,13 @@ Element.prototype.remClass = function(className){
|
|||
====================================================*/
|
||||
this.className = classArray.join(' ').trim();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* DEFINITION DES FORMATS UTILES POUR INPUT-CHECKER
|
||||
*
|
||||
*/
|
||||
var format_code = new formatChecker(null, 'HH-HH-HH-HH', { 'H' : '[0-9A-F]'} )
|
||||
11
todo.md
11
todo.md
|
|
@ -1,14 +1,17 @@
|
|||
###########
|
||||
# A FAIRE #
|
||||
###########
|
||||
- [x] [page-manager] Correction de l'inclusion des dépendances de page-manager
|
||||
- [ ] Dev des managers et de l'API et liste des acces
|
||||
- [ ] Creation de la base des managers et de l'API
|
||||
- [ ] Conception des managers et de l'API
|
||||
- [ ] Definir graphiquement le #CONTAINER
|
||||
- [ ] Structure
|
||||
- [ ] Elements
|
||||
- [ ] Affichages
|
||||
- [ ] Styles globaux
|
||||
- [x] Structure
|
||||
- [x] Elements
|
||||
- [x] Affichages
|
||||
- [x] Styles globaux
|
||||
- [ ] Formulaires
|
||||
- [ ] Buttons
|
||||
|
||||
############
|
||||
# EN COURS #
|
||||
|
|
|
|||
3
view.php
3
view.php
|
|
@ -22,10 +22,9 @@
|
|||
|
||||
|
||||
<!-- Dépendences Javascript -->
|
||||
<script type='text/javascript' src='/js/lib/input-checker.js' ></script> <!-- Gestion dynamique des saisies -->
|
||||
<script type='text/javascript' src='/f/js/reset/js/lib' ></script> <!-- Corrections Javascript natif (ajouts) -->
|
||||
<!-- <script type='text/javascript' src='/js/lib/API.js' ></script> Gestion des dialogues client/serveur -->
|
||||
<script type='text/javascript' src='/f/js/page-manager/js/lib' ></script> <!-- Gestion réseau/chargement/liens/URL -->
|
||||
<!-- <script type='text/javascript' src='/js/lib/shortcut-manager.js' ></script> Gestion des raccourcis clavier -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
// On referencie toutes les sections
|
||||
var section = {
|
||||
view: {
|
||||
text: '#CONTAINER > section[data-sublink="view"] ',
|
||||
element: document.querySelector('#CONTAINER > section[data-sublink="view"]')
|
||||
},
|
||||
|
||||
create: {
|
||||
text: '#CONTAINER > section[data-sublink="create"] ',
|
||||
element: document.querySelector('#CONTAINER > section[data-sublink="create"]')
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* GESTION DE LA CREATION D'UN UTILISATEUR
|
||||
*
|
||||
*/
|
||||
if( section.create.element != null ){
|
||||
|
||||
// On recupere tous les champs
|
||||
section.create.input = {
|
||||
code: document.querySelector(section.create.text + '#create_code'),
|
||||
username: document.querySelector(section.create.text + '#create_username'),
|
||||
firstname: document.querySelector(section.create.text + '#create_firstname'),
|
||||
lasname: document.querySelector(section.create.text + '#create_lasname'),
|
||||
mail: document.querySelector(section.create.text + '#create_mail'),
|
||||
password: document.querySelector(section.create.text + '#create_password'),
|
||||
|
||||
submit: document.querySelector(section.create.text + '#create_submit')
|
||||
}
|
||||
|
||||
// On initialise le gestionnaire des saisies
|
||||
var createChecker = new inputChecker();
|
||||
|
||||
|
||||
/* (1) Gestion du code RFID */
|
||||
createChecker.append( section.create.input.code, format_code, '01-AB-CD-23');
|
||||
section.create.input.code.addEventListener('keyup', function(e){
|
||||
e.target.value = e.target.value.toUpperCase();
|
||||
if( !createChecker.check(e.target) )
|
||||
createChecker.correct(e.target, false);
|
||||
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
|
@ -53,14 +53,9 @@
|
|||
$sublink = $post[0];
|
||||
|
||||
|
||||
/* PAGE DES STATISTIQUES
|
||||
*
|
||||
*/
|
||||
// if( $sublink == 'view' ){
|
||||
|
||||
// On recupere tous les utilisateurs
|
||||
debug();
|
||||
|
||||
/* [1] VIEW -> Liste des utilisateurs
|
||||
=========================================================*/
|
||||
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
|
||||
$answer = $request->dispatch(); // On recupere la reponse
|
||||
|
||||
|
|
@ -118,4 +113,32 @@
|
|||
|
||||
echo '</section>';
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [2] Creation d'utilisateur
|
||||
=========================================================*/
|
||||
$request = new ModuleRequest('userDefault/getAll'); // On utilise la methode 'getAll' du module 'userDefault'
|
||||
$answer = $request->dispatch(); // On recupere la reponse
|
||||
|
||||
echo "<section data-sublink='create'>";
|
||||
|
||||
echo "<form>";
|
||||
echo "<input id='create_code' type='text' placeholder='Code'><br>";
|
||||
echo "<input id='create_username' type='text' placeholder='Username'><br>";
|
||||
echo "<input id='create_firstname' type='text' placeholder='Firstname'><br>";
|
||||
echo "<input id='create_lastname' type='text' placeholder='Lastname'><br>";
|
||||
echo "<input id='create_mail' type='text' placeholder='Mail'><br>";
|
||||
echo "<input id='create_password' type='text' placeholder='Mail'><br>";
|
||||
echo "<button id='create_submit'>Créer</button>";
|
||||
echo "</form>";
|
||||
|
||||
echo '</section>';
|
||||
Loading…
Reference in New Issue