Bläddra i källkod

Add a Download Svg Button

Fixed: Download Svg Button

Merge pull request #195 from DanielHabenicht:download
dev_h
Ophir LOJKINE 4 år sedan
förälder
incheckning
ab83c7f6e2
Inget konto är kopplat till bidragsgivarens mejladress

+ 1
- 0
client-data/board.html Visa fil

@@ -100,6 +100,7 @@
100 100
 	<script src="../tools/eraser/eraser.js"></script>
101 101
 	<script src="../tools/hand/hand.js"></script>
102 102
 	<script src="../tools/grid/grid.js"></script>
103
+	<script src="../tools/download/download.js"></script>
103 104
 	<script src="../tools/zoom/zoom.js"></script>
104 105
 	<script src="../js/canvascolor.js"></script>
105 106
 </body>

+ 82
- 0
client-data/tools/download/download.js Visa fil

@@ -0,0 +1,82 @@
1
+/**
2
+ *                        WHITEBOPHIR
3
+ *********************************************************
4
+ * @licstart  The following is the entire license notice for the
5
+ *  JavaScript code in this page.
6
+ *
7
+ * Copyright (C) 2020  Ophir LOJKINE
8
+ *
9
+ *
10
+ * The JavaScript code in this page is free software: you can
11
+ * redistribute it and/or modify it under the terms of the GNU
12
+ * General Public License (GNU GPL) as published by the Free Software
13
+ * Foundation, either version 3 of the License, or (at your option)
14
+ * any later version.  The code is distributed WITHOUT ANY WARRANTY;
15
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
16
+ * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
17
+ *
18
+ * As additional permission under GNU GPL version 3 section 7, you
19
+ * may distribute non-source (e.g., minimized or compacted) forms of
20
+ * that code without the copy of the GNU GPL normally required by
21
+ * section 4, provided you include this license notice and a URL
22
+ * through which recipients can access the Corresponding Source.
23
+ *
24
+ * @licend
25
+ */
26
+
27
+(function download() { //Code isolation
28
+
29
+    function downloadSVGFile() {
30
+        var canvasCopy = Tools.svg.cloneNode(true);
31
+        canvasCopy.removeAttribute("style", ""); // Remove css transform
32
+        var styleNode = document.createElement("style");
33
+
34
+        // Copy the stylesheets from the whiteboard to the exported SVG
35
+        styleNode.innerHTML = Array.from(document.styleSheets)
36
+            .filter(function (stylesheet) {
37
+                if (stylesheet.href && (stylesheet.href.match(/boards\/tools\/.*\.css/)
38
+                    || stylesheet.href.match(/board\.css/))) {
39
+                    // This is a Stylesheet from a Tool or the Board itself, so we should include it
40
+                    return true;
41
+                }
42
+                // Not a stylesheet of the tool, so we can ignore it for export
43
+                return false;
44
+            })
45
+            .map(function (stylesheet) {
46
+                return Array.from(stylesheet.cssRules)
47
+                    .map(function (rule) { return rule.cssText })
48
+            }).join("\n")
49
+
50
+        canvasCopy.appendChild(styleNode);
51
+        var outerHTML = canvasCopy.outerHTML || new XMLSerializer().serializeToString(canvasCopy);
52
+        var blob = new Blob([outerHTML], { type: 'image/svg+xml;charset=utf-8' });
53
+        downloadContent(blob, Tools.boardName + ".svg");
54
+    }
55
+
56
+    function downloadContent(blob, filename) {
57
+        if (window.navigator.msSaveBlob) { // Internet Explorer
58
+            window.navigator.msSaveBlob(blob, filename);
59
+        } else {
60
+            const url = URL.createObjectURL(blob);
61
+            var element = document.createElement('a');
62
+            element.setAttribute('href', url);
63
+            element.setAttribute('download', filename);
64
+            element.style.display = 'none';
65
+            document.body.appendChild(element);
66
+            element.click();
67
+            document.body.removeChild(element);
68
+            window.URL.revokeObjectURL(url);
69
+        }
70
+    }
71
+
72
+    Tools.add({ //The new tool
73
+        "name": "Download",
74
+        "shortcut": "d",
75
+        "listeners": {},
76
+        "icon": "tools/download/download.svg",
77
+        "oneTouch": true,
78
+        "onstart": downloadSVGFile,
79
+        "mouseCursor": "crosshair",
80
+    });
81
+
82
+})(); //End of code isolation

+ 10
- 0
client-data/tools/download/download.svg Visa fil

@@ -0,0 +1,10 @@
1
+<?xml version='1.0' encoding='utf-8'?>
2
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
3
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
4
+  <g>
5
+    <g>
6
+      <path d="M 470 319 C 461 319 461 328 461 339 V 471 H 50 V 339 C 50 329 50 319 41 319 C 32 319 32 329 32 339 V 481 C 32 491 37 491 47 491 H 464 C 474 491 479 491 479 481 V 339 C 479 327 479 319 470 319 Z"/>
7
+      <path d="M 247 317 C 255 321 257 321 265 317 L 380 214 C 384 210 383 203 381 200 C 378 198 370 196 366 200 L 266 295 V 19 C 266 13 260 9 256 9 C 252 9 246 13 246 19 V 295 L 146 200 C 142 196 135 197 132 199 C 130 202 128 210 132 214 L 247 317 Z"/>
8
+    </g>
9
+  </g>
10
+</svg>

+ 1
- 1
package.json Visa fil

@@ -1,7 +1,7 @@
1 1
 {
2 2
   "name": "whitebophir",
3 3
   "description": "Online collaborative whiteboard",
4
-  "version": "1.11.0",
4
+  "version": "1.12.0",
5 5
   "keywords": [
6 6
     "collaborative",
7 7
     "whiteboard"

+ 5
- 1
server/translations.json Visa fil

@@ -12,6 +12,7 @@
12 12
     "eraser": "Radierer",
13 13
     "grid": "Gitter",
14 14
     "hand": "Hand",
15
+    "download": "Herunterladen",
15 16
     "index_title": "Wilkommen bei WBO!",
16 17
     "introduction_paragraph": "WBO ist ein <a href=\"https://github.com/lovasoa/whitebophir\" title=\"Frei im Sinne von Redefreiheit, nicht Freibier. Diese Software wird unter der AGPL Lizenz veröffentlicht.\">freies und quelloffenes</a> kollaboratives Online-Whiteboard das vielen Nutzern erlaubt gleichzeitig auf einem großen virtuellen Whiteboard zu zeichnen. Das Whiteboard wird in Echtzeit für alle Nutzer aktualisiert und sein Inhalt wird gespeichert. Es kann für verschiedenste Anwendungen genutzt werden, z.B. Kunst, Unterhaltung, Design, Unterricht und Lehre.",
17 18
     "keyboard_shortcut": "Tastenkombination",
@@ -52,6 +53,7 @@
52 53
     "eraser": "Eraser",
53 54
     "grid": "Grid",
54 55
     "hand": "Hand",
56
+    "download": "Download",
55 57
     "index_title": "Welcome to the free online whiteboard WBO!",
56 58
     "introduction_paragraph": "WBO is a <a href=\"https://github.com/lovasoa/whitebophir\" title=\"Free as in free speech, not free beer. This software is released under the AGPL license\">free and open-source</a> online collaborative whiteboard that allows many users to draw simultaneously on a large virtual board. The board is updated in real time for all connected users, and its state is always persisted. It can be used for many different purposes, including art, entertainment, design and teaching.",
57 59
     "keyboard_shortcut": "keyboard shortcut",
@@ -128,6 +130,7 @@
128 130
     "eraser": "Gomme",
129 131
     "grid": "Grille",
130 132
     "hand": "Main",
133
+    "download": "Télécharger",
131 134
     "index_title": "Bienvenue sur le tableau blanc collaboratif WBO !",
132 135
     "introduction_paragraph": "WBO est un logiciel <a href=\"https://github.com/lovasoa/whitebophir\" title=\"voir le code sous license AGPL\">libre et gratuit</a> de dessin collaboratif en ligne qui permet à plusieurs utilisateurs de collaborer simultanément sur un tableau blanc. Le tableau est mis à jour en temps réel pour tous les utilisateurs connectés, et reste disponible après votre déconnexion. Il peut être utilisé notamment pour l'enseignement, l'art, le design ou juste pour s'amuser.",
133 136
     "keyboard_shortcut": "raccourci clavier",
@@ -321,6 +324,7 @@
321 324
     "eraser": "Ластик",
322 325
     "grid": "Сетка",
323 326
     "hand": "Рука",
327
+    "download": "Скачать",
324 328
     "index_title": "Добро пожаловать на WBO !",
325 329
     "introduction_paragraph": "WBO это бесплатная и <a href=\"https://github.com/lovasoa/whitebophir\" title=\"открытый исходный код\">открытая</a> виртуальная онлайн доска, позволяющая рисовать одновременно сразу нескольким пользователям. С WBO вы сможете рисовать, работать с коллегами над будущими проектами, проводить онлайн встречи, подкреплять ваши обучающие материалы и даже пробовать себя в дизайне. WBO доступен без регистрации.",
326 330
     "keyboard_shortcut": "горячая клавиша",
@@ -464,4 +468,4 @@
464 468
     "white-out": "修正液",
465 469
     "zoom": "放大"
466 470
   }
467
-}
471
+}

Laddar…
Avbryt
Spara