--- a/src/iconolab/templates/iconolab/fragment_draw.html Thu Jun 16 12:26:13 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,186 +0,0 @@
-{% extends 'iconolab_base.html' %}
-
-{% load staticfiles %}
-
-{% load thumbnail %}
-
-{% block content %}
- <div id="drawing-zone" class="row" style="padding-top: 10px; border:1px solid red">
-
- <div v-show='!formView' class="editor-wrapper col-md-12">
- <div class='col-md-2'>
- <ul class="form-drawing-wrapper list-inline">
- <p class='form-drawing pullright'><strong>Type de dessin</strong></p>
- <li @click="setRectangleMode" v-bind:class="{ 'selected': isRect }" class='pull-md-left drawingModeBtn'>Rect.</li>
- <li @click="setFreeMode" v-bind:class="{ 'selected': !isRect }" class='pull-md-left drawingModeBtn'>Libre</li>
- </ul>
-
- <ul class='form-drawing-wrapper list-inline'>
- <p class='form-drawing pullright'><strong>Actions</strong></p>
-
- <li @click="clear" class='pull-md-left drawingModeBtn'><i class='fa fa-trash'></i> Effacer</li>
-
- <li @click="save" class='pull-md-left drawingModeBtn'><i class='fa fa-plus'></i> Créer le fragment</li>
- </ul>
- </div>
-
- <div class="col-md-8">
- <div v-el:image id="iconolab-image-wrapper">
- {% thumbnail annotation.image.media "x800" crop="center" as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
- {% endthumbnail %}
- </div>
- </div>
-
- </div>
-
- <div v-show="formView" class="col-md-12">
-
- <div class="col-xs-6">
- <div class="small-image-wrapper" style="position: relative">
- {% thumbnail annotation.image.media "x300" crop="center" as im %}
- <img v-el:small-image @click="showEditor" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
-
- <svg width="{{ im.width }}" height="{{ im.height }}" version="1.1" style="position:absolute; top:0px; left: 0px">
-
- <defs>
- <mask xmlns="http://www.w3.org/2000/svg" id="smallImage">
- <rect x="0" y="0" width="{{ im.width }}", height="{{ im.height }}" fill="white"/>
- <g v-bind:transform="transformMatrix">
- <path v-bind:d="fragmentPath"></path>
- </g>
- </mask>
- </defs>
-
- <g v-show="!displayMask" v-bind:transform="transformMatrix">
- <path v-bind:d="fragmentPath" opacity="0.7" fill="orange"></path>
- </g>
-
- <rect v-show="displayMask" v-el:small-mask x="0" y="0" mask="url(#smallImage)" opacity="0.7" fill="white" width="{{ im.width }}" height="{{ im.height }}"></rect>
- </svg>
-
- {% endthumbnail %}
- </div>
- <ul class="inline">
- <a @click="showEditor" class="showPointer"> <i class='fa fa-edit'></i> Editer le fragment</a>
- <a v-show="!displayMask" @click="highLightZone" class="showPointer"> <i class='fa fa-eye-slash'></i>Masquer l'image</a>
- <a v-show="displayMask" @click="highLightZone(1)" class="showPointer"> <i class='fa fa-eye-slash'></i>Afficher la zone</a>
-
- </ul>
- </div>
-
- <div class='col-xs-6' style="">
- <form>
-
- <fieldset class="form-group">
- <label for="formGroupExampleInput">Titre</label>
- <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Titre">
- </fieldset>
-
- <fieldset class="form-group">
- <label for="formGroupExampleInput2">Description</label>
- <textarea></textarea>
- </fieldset>
-
- <fieldset class="form-group">
- <label for="formGroupExampleInput2">Tags</label>
- </fieldset>
-
- <div class="form-group pull-right">
- <button type="submit" class="btn btn-default">Envoyer</button>
- <button type="submit" class="btn btn-default">Annuler</button>
- </div>
-
- </form>
-
- </div>
- </div>
- </div>
-
-{% endblock %}
-
-{% block footer_js %}
- <script>
- var drawingVue = new Vue({
- el: '#drawing-zone',
- MODE_RECT: 'RECT',
- MODE_FREE: 'FREE',
-
- data: {
- mode:"",
- isRect: true,
- normalizePath: "",
- readOnly: false,
- formView: false,
- useClipPath: false,
- transformMatrix: "",
- fragmentPath: "",
- displayMask: false
-
- },
-
- init: function () {
- //this.mode = this.$options.MODE_RECT;
- var self = this;
- self.drawingComponent = iconolab.initCutoutComponent({
- wrapperId: '#iconolab-image-wrapper',
- actionWrapper: '#action-wrapper',
- readOnly: false
- });
- },
-
- methods: {
-
- setRectangleMode: function () {
- this.mode = this.$options.MODE_RECT;
- this.isRect = true;
- },
-
- showEditor: function () {
- this.formView = false;
- console.log(this.$els.smallImage);
- },
-
- highLightZone: function () {
- if (!this.displayMask) {
- this.displayMask = true;
- }
- else {
- this.displayMask = false;
- }
- //this.maskFill = "orange";
- //this.fragmentFill = "none";
- },
-
- setFreeMode: function () {
- this.mode = this.$options.MODE_FREE;
- this.isRect = false;
- this.drawingComponent.setDrawingMode(this.mode);
- },
-
- displayEditedPath: function () {
- /* path to save */
- var normalizePath = this.drawingComponent.getPath();
- },
-
- save: function () {
- this.normalizePath = this.drawingComponent.getPath();
- var smallImage = this.$els.smallImage;
- this.formView = true;
- /* 100x = smallImageHeight && 100x=smallImageWidth | 100 = ViewBoxBound */
- var xRatio = smallImage.width / 100;
- var yRatio = smallImage.height / 100;
- var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');
- this.transformMatrix ="matrix(" + transformMatrix + ")";
- this.fragmentPath = this.normalizePath.split(';')[0];
- console.log(this.fragmentPath);
- console.log(this.transformMatrix);
- },
-
- clear: function () {
- this.drawingComponent.clear();
- }
- }
- });
- </script>
-{% endblock %}
\ No newline at end of file