index.html 2.87 KB
Newer Older
antoine's avatar
antoine committed
1
<html>
2
3
4
5
6
	<head>
		<meta charset="UTF-8">
		<title>- </title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<style type="text/css" media="screen">
antoine's avatar
antoine committed
7
8
9
	    img {
	       height: 200px;;
	       width: auto;
10
		 			overflow: visible;
antoine's avatar
antoine committed
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
	    }
	    footer{
	       bottom: 0px;
	       width: 100%;
	       position: fixed;
	       font-family: courier;
	       border-top: 1px solid blue;
	       color: blue;
	       text-transform: uppercase;
	       background: white;
	    }
	    .cadra{
	       width: auto;
	       height: 80px
	       padding: 0px;
	       float: left;
	       overflow: visible;
	       outline: red solid 1px;
	    }
	    .compare{
	       position: absolute;
	       opacity: 0.1;
	    }
	    .cadra span{
	       font-family: courier;
	       font-size: 7pt;
		  color: grey;
	    }
	 </style>
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
	</head>
	<body>
		<footer>
			<button onclick="Zoom('up')">+</button>
			<button onclick="Zoom('down')">-</button>
			<button onclick="Compare()">Compare</button>
			<span id="type"></span>
		</footer>
		<script>
			var elt = [];
			function splitHash(){
				var startImg = window.location.hash;
				startImg = startImg.substring(2);
				elt = startImg.split("-");
			}
			
			splitHash();
antoine's avatar
antoine committed
57

58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
			if(elt.length > 0){
				for(i=0; i < elt.length; i++){
					console.log(elt[i]);
						$( "body" ).append('<img id="letter_'+i+'" title="cliquez pour imprimer" src="svg/'+elt[i]+'.svg?'+ (new Date()).getTime() + '" />');
				}
			}
						
			function Zoom(valZ){
				var imgH = $('img').height();
				if(valZ == 'up'){
						imgH = imgH + 50;
				}else if (valZ == 'down'){
						imgW = imgW - 50;
				}
				$('img').css("height", imgH);
			}
antoine's avatar
antoine committed
74

75
76
77
			function Compare(){
				$('img').toggleClass('compare');
			}
antoine's avatar
antoine committed
78

79
80
81
82
83
84
85
86
87
			function testing () {
				$("body").keydown( function( event ) {
						if (event.key == "Backspace" ) {
							var startImg = window.location.hash;
							var newUrl = startImg.lastIndexOf('-');
							window.location.hash = startImg.substring(0, newUrl);
							$('img').last().remove();
						}
				})
antoine's avatar
antoine committed
88

89
90
91
92
93
94
95
96
97
98
				$( "body"  ).keypress(function(event) {
					var savehash = window.location.hash;
					savehash = savehash.substring(1);
					$( "body" ).append('<img src="svg/'+event.keyCode+'.svg?'+ (new Date()).getTime() + '" />');
					console.log(event.keyCode);
					savehash += '-'+event.keyCode;
					window.location.hash = savehash;
					Zoom();
				});
			}
antoine's avatar
antoine committed
99

100
101
			$("body").on("click", "img", function(){
				var result = window.confirm('voulez-vous imprimer ce glyph ?');
antoine's avatar
antoine committed
102

103
104
				if(result){
					var path = $(this).attr('src').replace(/svg/g, 'eps');
antoine's avatar
antoine committed
105

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
					$.get('/api/ploteps/', { epsfile : path });
				}
			});
		
			setInterval(function(){
				stamp = (new Date).getTime();
				$("img").each(function () {
					var src = $(this).attr('src').split('?')[0];
					$(this).attr('src', src + '?' + stamp);
				});
			}, 5000);
			
			testing();
		</script>
	</body>
</html>