| author | ymh <ymh.work@gmail.com> |
| Thu, 02 Aug 2018 09:09:39 +0200 | |
| changeset 587 | 4a0624a3a549 |
| parent 312 | 44ecdd5a52d4 |
| permissions | -rw-r--r-- |
|
146
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
1 |
<!DOCTYPE html> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
2 |
<html lang="en"> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
3 |
<head> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
4 |
<meta charset="utf-8"> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
5 |
<title>iconolab-bundle</title> |
|
312
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
6 |
<link rel="stylesheet" href="/static/iconolab/css/iconolab.css"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
7 |
<style> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
8 |
body { |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
9 |
margin-top: 40px; |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
10 |
} |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
11 |
</style> |
|
146
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
12 |
</head> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
13 |
<body> |
|
312
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
14 |
<div class="container"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
15 |
<div id="drawing-zone" class="row"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
16 |
<div v-show='!formView' style="display:none" class="editor-wrapper col-md-12"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
17 |
<div class="col-md-12 no-padding"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
18 |
<p @click="cancel" class="pull-right btn btn-default btn-sm"><i class="fa fa-close"></i> Annuler</p> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
19 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
20 |
<div class='col-md-2'> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
21 |
<ul class="form-drawing-wrapper list-inline"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
22 |
<p class='form-drawing pullright'><strong>Type de dessin</strong></p> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
23 |
<li @click="setDrawingMode('RECT')" v-bind:class="{ 'selected': isRect }" class='pull-md-right drawingModeBtn'>Rect.</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
24 |
<li @click="setDrawingMode('FREE')" v-bind:class="{ 'selected': !isRect }" class='pull-md-right drawingModeBtn'>Libre</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
25 |
</ul> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
26 |
|
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
27 |
<zoomview ref="zoomview" :image-url="'img/small-image.jpg'" :image-width="100" :image-height="100"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
28 |
</zoomview> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
29 |
|
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
30 |
<ul class='form-drawing-wrapper list-inline'> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
31 |
<p class='form-drawing pullright'><strong>Actions</strong></p> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
32 |
<li @click="clear" class='pull-md-right drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
33 |
<li id="confirm-fragment-button" @click="showForm" class='pull-md-right drawingModeBtn infos info'><i class='fa fa-plus'></i> Valider</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
34 |
</ul> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
35 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
36 |
<div class="col-md-10"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
37 |
<div ref="image" id="iconolab-image-wrapper"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
38 |
<svg class="cut-canvas" width="850" height="850"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
39 |
<image class="main-image" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/main-image.jpg" x="0" y="0" |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
40 |
width="6208" height="4688"></image> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
41 |
<path class="image-path" d=""></path> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
42 |
</svg> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
43 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
44 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
45 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
46 |
<div v-show="formView" class="col-md-12"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
47 |
<div class="col-md-6"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
48 |
<div class="small-image-wrapper" style="position: relative"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
49 |
<svg ref="smallSvgWrapper" width="477" height="360" version="1.1"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
50 |
<image ref="smallImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" width="477" height="360"></image> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
51 |
<defs> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
52 |
<mask id="smallImage"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
53 |
<rect x="0" y="0" width="477" height="360" fill="white"/> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
54 |
<g v-bind:transform="transformMatrix"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
55 |
<path ref="currentPath" v-bind:d="fragmentPath"></path> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
56 |
</g> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
57 |
</mask> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
58 |
</defs> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
59 |
<g v-show="!displayMask" v-bind:transform="transformMatrix"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
60 |
<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
61 |
</g> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
62 |
<rect v-show="displayMask" ref="smallMask" x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="477" height="360"></rect> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
63 |
</svg> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
64 |
<svg style="display:none" ref="zoomSvg" width="477" height="360" version="1.1"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
65 |
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/image.jpg" x="0" y="0" preserveAspectRatio="none" width="477" height="360"></image> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
66 |
<g v-bind:transform="transformMatrix"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
67 |
<path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
68 |
</g> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
69 |
</svg> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
70 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
71 |
<ul class="list-inline list-unstyled"> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
72 |
<li @click="showEditor" class="showPointer btn btn-default btn-sm"> <i class='fa fa-edit'></i> Sélectionner le détail</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
73 |
<li v-show="!displayMask" @click="highLightZone" class="showPointer show-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Afficher la zone</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
74 |
<li v-show="displayMask" @click="highLightZone" class="showPointer hide-zone btn btn-default btn-sm"> <i class='fa fa-eye-slash'></i> Masquer la zone</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
75 |
<li class="zoom-link btn btn-default btn-sm" v-if="canZoom" @click="zoom('in')"><i class="fa fa-zoom-in"></i>Zoomer</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
76 |
<li class="zoom-link btn btn-default btn-sm" v-if="!canZoom" @click="zoom('out')"><i class="fa fa-zoom-out"></i>Dezoomer</li> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
77 |
</ul> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
78 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
79 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
80 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
81 |
</div> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
82 |
|
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
83 |
<script src="/static/iconolab/js/iconolab.js"></script> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
84 |
<script> |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
85 |
iconolab.Cutout.init(); |
|
44ecdd5a52d4
Configure Webpack dev server for standalone JS development.
Alexandre Segura <mex.zktk@gmail.com>
parents:
299
diff
changeset
|
86 |
</script> |
|
146
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
87 |
</body> |
|
f912b591e1c1
new src_js folder
Harris Baptiste <harris.baptiste@iri.centrepompidou.fr>
parents:
diff
changeset
|
88 |
</html> |