ajout d'un exemple

SINTEF-9012 · Jul 11, 2012 · d34fe85 · d34fe85
1 parent e1b972e
commit d34fe85
Show file tree

Hide file tree

Showing 3 changed files with 212 additions and 0 deletions.
diff --git a/example.css b/example.css
@@ -0,0 +1,91 @@
+body {
+	font-family:sans-serif;
+	margin:0;
+}
+#cadreur_area
+{
+	background:#333;
+	position:absolute;
+	top:1.6em;
+	right:0;
+	bottom:0;
+	left:0;
+	/* Rounds can create sliders, and broke the layout.*/
+	overflow:hidden;
+}
+.buttons
+{
+	list-style:none;
+	padding:0.3em;
+	margin:0;
+background: rgb(59,103,158); /* Old browsers */
+background: -moz-linear-gradient(top,  rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
+background: -ms-linear-gradient(top,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
+background: linear-gradient(to bottom,  rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
+}
+.buttons li
+{
+display:inline-block;
+margin-left:10px;
+}
+.buttons li a
+{
+color:white;
+font-weight:bold;
+text-decoration:none;
+text-shadow:0px 0px 2px rgba(0,0,0,0.55);
+}
+.buttons li a:hover
+{
+color:rgba(255,255,255,0.8);
+}
+
+#button_flip
+{
+	position:absolute;
+	right:0.5em;
+	top:0.3em;
+}
+
+.boxdiv .front, .boxdiv .back {
+position:absolute;
+top:0;
+left:0;
+bottom:0;
+right:0;
+padding:4px;
+overflow:auto;
+}
+
+.boxdiv .back {
+padding-left:14px;
+background: rgb(201,201,201); /* Old browsers */
+background: -moz-linear-gradient(top,  rgba(201,201,201,1) 0%, rgba(150,150,150,1) 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(100%,rgba(150,150,150,1))); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top,  rgba(201,201,201,1) 0%,rgba(150,150,150,1) 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top,  rgba(201,201,201,1) 0%,rgba(150,150,150,1) 100%); /* Opera 11.10+ */
+background: -ms-linear-gradient(top,  rgba(201,201,201,1) 0%,rgba(150,150,150,1) 100%); /* IE10+ */
+background: linear-gradient(to bottom,  rgba(201,201,201,1) 0%,rgba(150,150,150,1) 100%); /* W3C */
+}
+
+.boxdiv .borderLine {
+position:absolute;
+top:0;
+bottom:0;
+left:0;
+width:10px;
+}
+
+.boxdiv .front {
+background: rgb(238,238,238); /* Old browsers */
+background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
+background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
+background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
+}
+
diff --git a/example.html b/example.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Cadreur's example</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+	<link href="Cadreur.css" media="screen" rel="Stylesheet" type="text/css" />
+	<link href="example.css" media="screen" rel="Stylesheet" type="text/css" />
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+	<script type="text/javascript" src="Cadreur.js"></script>
+	<script type="text/javascript" src="example.js"></script>
+</head>
+<body>
+	<ul class="buttons">
+		<li><a href="#" id="button_vertical">Vertical</a></li>
+		<li><a href="#" id="button_horizontal">Horizontal</a></li>
+		<li><a href="#" id="button_grid">Grid</a></li>
+		<li><a href="#" id="button_multi">Multi</a></li>
+		<li><a href="#" id="button_new">New box</a></li>
+		<li><a href="#" id="button_flip">Flip</a></li>
+	</ul>
+	<div id="cadreur_area"></div>
+</body>
+</html>
diff --git a/example.js b/example.js
@@ -0,0 +1,98 @@
+var get_random_color_degrees = [];
+function get_random_color() {
+
+	var degree = 0;
+	for (var i = 0; i < 20; ++i)
+	{
+		degree = Math.round(Math.random() * 360);
+		var j = 0;
+		for (var j = 0; j < get_random_color_degrees.length; ++j)
+			if (Math.abs(get_random_color_degrees[j] - degree) < 
+				30-get_random_color_degrees.length)
+				j = 1000;
+
+		if (j == get_random_color_degrees.length)
+			i = 1000;
+
+	}
+
+	get_random_color_degrees.push(degree);
+
+	var saturation = 80 + Math.round(Math.random() * 4) * 5;
+	var luminosite = 45 + Math.round(Math.random() * 2) * 5;
+
+	return degree+','+saturation+'%,'+luminosite+'%';
+};
+
+
+$(document).ready(function() {
+	var layout = new Cadreur(
+			document.getElementById('cadreur_area'),
+			Cadreur_DIRECTIONS.VERTICAL);
+
+	function create_box() {
+		var box = layout.createBox();
+
+		var data = document.createElement('div');
+		data.className = 'data';
+		box.back.appendChild(data);
+
+		var color = get_random_color();
+		box.box.style.background = 'hsl('+color+')';
+		box.box.id = "box_"+color.slice(1);
+
+		var border_line = document.createElement('div');
+		border_line.className = 'borderLine';
+
+		// Just a gradient
+		var dark_color = color.substr(0, color.length-3)+'25%';
+		border_line.style.background = "-webkit-gradient(linear, left top, right top, color-stop(0%,hsla("+
+			color+",0.6)), color-stop(55%,hsla("+color+",0.6)), color-stop(100%,hsla("+dark_color+",0.65)))";
+		border_line.style.background = "-webkit-linear-gradient(left, hsla("+color+",0.6) 0%,hsla("+color+
+			",0.6) 55%,hsla("+dark_color+",0.65) 100%)";
+
+		border_line.style.background = "linear-gradient(to right, hsla("+
+			color+",0.6) 0%,hsla("+color+",0.6) 55%,hsla("+dark_color+",0.65) 100%)";
+		border_line.style.background = "-moz-linear-gradient(left, hsla("
+				+color+",0.6) 0%, hsla("+color+",0.6) 55%, hsla("
+				+dark_color+",0.65) 100%)";
+		box.back.appendChild(border_line);
+
+		return box;
+	}
+
+	var firstbox = create_box(); 
+	firstbox.front.appendChild(document.createTextNode('Front side. Click on Flip to view the back side, or to drag the boxes'));
+	firstbox.back.appendChild(document.createTextNode('Back side. You can add a new box clicking or dragging the "new box" button.'));
+
+	layout.addBox(firstbox.box);
+	layout.addBox(create_box().box);
+	layout.addBox(create_box().box);
+	layout.addBox(create_box().box);
+
+	setTimeout(function(){layout.changeLayout(layout.layouts.multi);}, 1);
+
+	$('#button_vertical').click(function(){layout.changeLayout(layout.layouts.verticalSplit); return false;});
+	$('#button_horizontal').click(function(){layout.changeLayout(layout.layouts.horizontalSplit); return false;});
+	$('#button_grid').click(function(){layout.changeLayout(layout.layouts.grid); return false;});
+	$('#button_multi').click(function(){layout.changeLayout(layout.layouts.multi); return false;});
+
+	$('#button_flip').click(function(){layout.toggleFrontMode(); return false;});
+
+	$('#button_new').mousedown(function(e){
+		var box = create_box().box;
+
+		box.style.display = 'none';
+		box.className += ' dragged';
+		layout.dragged_box = box;
+		layout.visual_drag.style.display = 'block';
+		layout.visual_drag.style.top = e.clientY-13+'px';
+		layout.visual_drag.style.left = e.clientX-13+'px';
+		layout.visual_drag.style.background = box.style.background;
+
+	}).click(function(){return false;});
+
+
+	b = layout;
+
+});