Design (scss) + gestion pour `input.phone` de la matrice en 'couples'au lieu d'une 'matrice'

public_html/css/container.scss

@@ -80,7 +80,6 @@
 				content: '';
 				display: inline-block;
 				position: relative;
-					top: .1em;
 					left: -.8em;
 					width: calc( 1em - 2*.15em );
 					height: calc( 1em - 2*.15em );

public_html/css/global.scss

@@ -18,7 +18,6 @@
 		& > td{
 			padding: .8em;
 
-
 			color: #888;
 			font-weight: normal;
 			text-align: center;
@@ -33,7 +32,6 @@
 		& > td.hidden:before{
 			content: '+';
 			color: #ddd;
-			font-weight: bold;
 		}
 
 	}

public_html/css/timeline-form.scss

@@ -479,43 +479,77 @@
 	}
 
 
-	/* (14) Switch entre Nom et Prénom */
-	& span.switch-both{
-		display: inline-block;
+	div.matrice{
+
+		input[type='checkbox']{
+			display: none;
+		}
+
+		input[type='checkbox'] + label.matrice-content{
+			display: table;
 			position: relative;
-			width: 1em;
-			height: 1em;
+			margin: .5em 0;
+			padding: 1em;
 
-		margin-right: 15px;
+			border-radius: 3px;
+			border: 1px solid #ddd;
 
-		background: url('/src/static/container/switch-both@4e4e50.svg') center center no-repeat;
-		background-size: 1em auto;
+			background: #fff;
 
-		font-size: .8em;
+			color: #555;
+			font-size: 1.1em;
+
+			@include transition( all .2s ease-in-out );
+			cursor: pointer;
+
+			font-style: italic;
+
+			// REMOVE DEFAULT STYLE
+			padding-left: 2em;
+			&:before{
+				// content: '';
+				// display: inline-block;
+				// position: relative;
+				// 	top: .1em;
+				// 	left: -.8em;
+				// 	width: calc( 1em - 2*.15em );
+				// 	height: calc( 1em - 2*.15em );
+
+				border-radius: 50% / 50%;
+				border: 0;
+
+				background: #aaa;
 
 				cursor: pointer;
 			}
+			&:hover{  text-decoration: none; }
 
-
-	/* (15) Switch Prénom+Nom = Pseudo */
-	& span.switch-left{
-		display: inline-block;
-		position: relative;
-			width: 1em;
-			height: 1em;
-
-		margin-right: 15px;
-
-		background: url('/src/static/container/switch-left@4e4e50.svg') center center no-repeat;
-		background-size: 1em auto;
-
-		font-size: .8em;
-
-		cursor: pointer;
+			span{
+				color: #000;
+				font-style: normal;
 			}
 
+			&:hover{
+				border-color: darken(#e2e2e2, 15);
+				background-color: darken(#fff, 5);
+			}
 
+		}
 
+		input[type='checkbox']:checked + label{
+			border-color: #07ca64;
+
+			&:before{
+				background: #07ca64;
+			}
+
+			&:hover{
+				border-color: darken(#07ca64, 15);
+				background-color: lighten(#07ca64, 50);
+			}
+		}
+
+	}
 
 
 

public_html/js/includes/input-phone-matrice.js

@@ -22,12 +22,11 @@ inputPhoneMatrice.prototype.fieldsToStorage = function(){
 
 	// {2} On extrait les données //
 	var deflated = deflater.deflate();
+
 	// On crée le hash
 	var deflatedHash = crc32(JSON.stringify(deflated));
 
 
-	// console.log(deflated);
-
 	/* (3) On crée l'objet et on le remplit avec les relations */
 	var obj = {};
 
@@ -44,7 +43,7 @@ inputPhoneMatrice.prototype.fieldsToStorage = function(){
 				obj[i].push( parseInt(deflated[i][O]) );
 			}
 
-		// {2} Si il n'y O qu'un sujet //
+		// {2} Si il n'y qu'un sujet //
 		}else if( deflated[i] !== null ){
 			if( obj[i] == null )
 				obj[i] = [];
@@ -100,53 +99,38 @@ inputPhoneMatrice.prototype.storageToFields = function(){
 
 	/* (2) On construit le HTML de la matrice */
 	// Contiendra le HTML
-	var matrice_html = ["<table class='line'>"];
+	var matrice_html = ["<div class='line matrice'>"];
+	var conA, conB, L, Ll, C, Cl;
 
 	// {1} Pour chaque ligne //
-	for( var L = 0 ; L < contacts.length ; L++ ){
-		var conA = contactData[L];
-
-
-		matrice_html.push( '<tr>' );
-
-		if( L > 0 ){ // Noms sur la première ligne (abscisses)
-			matrice_html.push( '<td style="text-align: right;">' );
-				matrice_html.push( !isNaN(conA.existing) ? lsi.get('p_friends', conA.existing).name : conA.username );
-			matrice_html.push( '</td>' );
-		}else // Sinon,
-			matrice_html.push( '<td></td>' );
+	for( L = 0, Ll = contacts.length ; L < Ll ; L++ ){
+		conA = contactData[L];
 
 		// {2} Pour chaque case //
-		for( var C = 0 ; C < contacts.length ; C++ ){ if( C < contacts.length-1 ){
-			var conC = contactData[C];
+		for( C = L+1, Cl = contacts.length ; C < Cl ; C++ ){
+			conB = contactData[C];
 
-			// {3} Première colonne -> Intitulé des ordonnées //
-			if( L == 0 ){
-				matrice_html.push( '<td>' );
-					matrice_html.push( '<span style="writing-mode: vertical-lr; text-align: right;">' );
-						matrice_html.push( !isNaN(conC.existing) ? lsi.get('p_friends', conC.existing).name : conC.username );
-					matrice_html.push( '</span>' );
+			// {3} Insertion //
+			matrice_html.push( "<input type='checkbox' data-name='"+conA.uid+"' value='"+conB.uid+"' id='f_matrice_"+conA.uid+"_"+conB.uid+"'" );
+
+			// Si lien actif, on le restitue
+			if( matriceData.hasOwnProperty(conA.uid) && matriceData[conA.uid].indexOf(conB.uid) > -1 )
+				matrice_html.push( "checked='checked'");
 
-			// {4} Valeurs des relations (boutons) //
-		}else if( C < L ){
-				matrice_html.push( "<td>" );
-					matrice_html.push( "<input type='checkbox' name='matrice_"+conA.uid+"_"+conC.uid+"' data-name='"+conA.uid+"' value='"+conC.uid+"' id='p_matrice_"+conA.uid+"_"+conC.uid+"'" );
-					// Si la relation existe, on active le bouton
-					if( matriceData[L] != null && matriceData[L].indexOf(C) > -1 )
-						matrice_html.push( " checked" );
 			matrice_html.push( ">" );
-					matrice_html.push( "<label for='p_matrice_"+conA.uid+"_"+conC.uid+"'></label>" );
 
-			// {5} Cases vides (moitié supérieure droite) //
-			}else
-				matrice_html.push( "<td class='hidden'>" );
+			matrice_html.push( "<label class='matrice-content' for='f_matrice_"+conA.uid+"_"+conB.uid+"'>")
+				matrice_html.push( "Est-ce que <span>" );
+				matrice_html.push( !isNaN(conA.existing) ? lsi.get('p_friends', conA.existing).name : conA.username );
+				matrice_html.push( '</span> et <span>' );
+				matrice_html.push( !isNaN(conB.existing) ? lsi.get('p_friends', conB.existing).name : conB.username );
+				matrice_html.push( '</span> se connaissant ?' );
+			matrice_html.push( "</label>" );
 
-			matrice_html.push( '</td>' );
-		}}
-
-		matrice_html.push( '</tr>' );
 		}
-	matrice_html.push( '</table>' );
+
+	}
+	matrice_html.push( '</div>' );
 
 
 	/* (3) On affiche la matrice */

public_html/js/includes/min/input-phone-matrice.js

@@ -1,6 +1,6 @@
 var inputPhoneMatrice=function(a){this.container=a};inputPhoneMatrice.prototype={container:this.container};
 inputPhoneMatrice.prototype.fieldsToStorage=function(){console.group("[phone.matrice] fields to storage");var a=(new FormDeflater(this.container,["input"],["data-name"])).deflate();crc32(JSON.stringify(a));var c={},b;for(b in a)if(a[b]instanceof Array)for(var e in a[b])null==c[b]&&(c[b]=[]),c[b].push(parseInt(a[b][e]));else null!==a[b]&&(null==c[b]&&(c[b]=[]),c[b].push(parseInt(a[b])));lsi.set("p_matrice",0,c);console.groupEnd()};
-inputPhoneMatrice.prototype.storageToFields=function(){console.group("[phone.matrice] storage to fields");var a=lsi["export"]("p_fiches"),c=lsi.get("p_matrice",0),b=lsi["export"]("p_contacts"),e=[],d;for(d in a)-1==e.indexOf(a[d].contact)&&e.push(a[d].contact);a=["<table class='line'>"];for(d=0;d<e.length;d++){var f=b[d];a.push("<tr>");0<d?(a.push('<td style="text-align: right;">'),a.push(isNaN(f.existing)?f.username:lsi.get("p_friends",f.existing).name),a.push("</td>")):a.push("<td></td>");for(var h=
-0;h<e.length;h++)if(h<e.length-1){var g=b[h];0==d?(a.push("<td>"),a.push('<span style="writing-mode: vertical-lr; text-align: right;">'),a.push(isNaN(g.existing)?g.username:lsi.get("p_friends",g.existing).name),a.push("</span>")):h<d?(a.push("<td>"),a.push("<input type='checkbox' name='matrice_"+f.uid+"_"+g.uid+"' data-name='"+f.uid+"' value='"+g.uid+"' id='p_matrice_"+f.uid+"_"+g.uid+"'"),null!=c[d]&&-1<c[d].indexOf(h)&&a.push(" checked"),a.push(" >"),a.push("<label for='p_matrice_"+f.uid+"_"+g.uid+
-"'></label>")):a.push("<td class='hidden'>");a.push("</td>")}a.push("</tr>")}a.push("</table>");this.container.innerHTML=a.join("");console.groupEnd()};inputPhoneMatrice.prototype.attach=function(){console.group("[phone.matrice] attaching events");lsi.createDataset("p_matrice");this.storageToFields();var a=this;this.container.addEventListener("click",function(c){a.fieldsToStorage();setTimeout(function(){a.storageToFields()},500)},!1);console.groupEnd()};
+inputPhoneMatrice.prototype.storageToFields=function(){console.group("[phone.matrice] storage to fields");var a=lsi["export"]("p_fiches"),c=lsi.get("p_matrice",0),b=lsi["export"]("p_contacts"),e=[],d;for(d in a)-1==e.indexOf(a[d].contact)&&e.push(a[d].contact);var a=["<div class='line matrice'>"],f,g,k,h,l;g=0;for(k=e.length;g<k;g++)for(d=b[g],h=g+1,l=e.length;h<l;h++)f=b[h],a.push("<input type='checkbox' data-name='"+d.uid+"' value='"+f.uid+"' id='f_matrice_"+d.uid+"_"+f.uid+"'"),c.hasOwnProperty(d.uid)&&
+-1<c[d.uid].indexOf(f.uid)&&a.push("checked='checked'"),a.push(">"),a.push("<label class='matrice-content' for='f_matrice_"+d.uid+"_"+f.uid+"'>"),a.push("Est-ce que <span>"),a.push(isNaN(d.existing)?d.username:lsi.get("p_friends",d.existing).name),a.push("</span> et <span>"),a.push(isNaN(f.existing)?f.username:lsi.get("p_friends",f.existing).name),a.push("</span> se connaissant ?"),a.push("</label>");a.push("</div>");this.container.innerHTML=a.join("");console.groupEnd()};
+inputPhoneMatrice.prototype.attach=function(){console.group("[phone.matrice] attaching events");lsi.createDataset("p_matrice");this.storageToFields();var a=this;this.container.addEventListener("click",function(c){a.fieldsToStorage();setTimeout(function(){a.storageToFields()},500)},!1);console.groupEnd()};
 inputPhoneMatrice.prototype.parseGrid=function(){var a=$$(".matrice-panel input[data-name][value]"),c;for(c in a)if(a[c]instanceof Element){var b=a[c].getData("name"),e=a[c].value;this.sGrid[b]instanceof Array||(this.sGrid[b]=[]);this.sGrid[b][e]=a[c]}};

public_html/view/js/input.js

@@ -178,7 +178,6 @@ var phoneRoutine = function(){
 		lsi.clear('p_matrice');
 		lsi.clear('p_friends');
 
-
 		/* (2) On met à jour l'affichage */
 		pSubjectManager.storageToFields();
 		pContactManager.storageToFields();