From 2fd5b507365d671e9633e68a2ec629f5c84e97b4 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Wed, 26 May 2021 19:37:37 -0500 Subject: [PATCH 01/11] adding sponsors --- src/css/menu.css | 5 ++ src/css/sponsors.css | 125 +++++++++++++++++++++++++++++++++++++++++++ src/index.html | 18 +++++++ src/js/Menu.js | 6 ++- 4 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 src/css/sponsors.css diff --git a/src/css/menu.css b/src/css/menu.css index 5a15cfc..ffd9c35 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -3,6 +3,7 @@ position: relative; z-index: 2; height: var(--x8); + display: flex; } #menu_bar.active .menu.open .menu_list { @@ -122,3 +123,7 @@ .menu_list .menu_item:not(.disabled):hover span { background: var(--d13); } + +#modal_donate { + display: none; +} diff --git a/src/css/sponsors.css b/src/css/sponsors.css new file mode 100644 index 0000000..3193a83 --- /dev/null +++ b/src/css/sponsors.css @@ -0,0 +1,125 @@ +#sponsors { + display: none; + margin-left: auto; + margin-right: calc(var(--panel-width) + var(--x4)); +} + +.sponsor a { + transition: all 200ms ease; + background: var(--z2); + line-height: var(--x6); + margin: var(--x1) 0; + border-radius: var(--x1); + display: inline-block; + text-decoration: none; + text-transform: uppercase; + font-weight: 600; + color: var(--z12); + padding: 0 var(--x2); + font-size: 12px; + position: relative; +} + +.sponsor a:hover { + color: var(--z15); + background: var(--d7); +} + +.sponsor .deta { + padding-left: var(--x7); + position: relative; +} + +.sponsor .deta span { + display: block; + position: absolute; + border-radius: 100%; + top: 2px; + left: var(--x1); + transform: scale(0.6); + transition: transform var(--transition-duration) ease; +} + +.sponsors .deta span:nth-child(1) { + width: var(--x5); + height: var(--x5); + background-color: #EF39A8; + margin: 0; + transition-delay: 0; +} + +.sponsors .deta span:nth-child(2) { + width: var(--x4); + height: var(--x4); + background-color: #BD399C; + margin: 2px; + transition-delay: 100ms; +} + +.sponsors .deta span:nth-child(3) { + width: var(--x3); + height: var(--x3); + background-color: #93388E; + margin: 4px; + transition-delay: 200ms; +} + +.sponsors .deta span:nth-child(4) { + width: var(--x2); + height: var(--x2); + background-color: rgb(96, 48, 162); + margin: 6px; + transition-delay: 300ms; +} + +.sponsors .deta:hover span { + transform: scale(0.9); +} + +.sponsor a:hover { + color: var(--z15); + background: var(--d7); +} + +.sponsor a:hover + .sponsor-description { + opacity: 1; + transform: translate(0,0); + transform: translate3d(0,0,0); +} + +.sponsor-description { + transition: all var(--transition-duration) ease; + position: absolute; + right: calc(var(--panel-width) + var(--x4)); + top: var(--x10); + width: calc(var(--x16)*4); + z-index: 100; + background: var(--z15); + padding: var(--x6); + border-radius: var(--x1); + line-height: 150%; + box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2); + margin-left: 0; + opacity: 0; + pointer-events: none; + transform: translate(0,8px); + transform: translate3d(0,8px,0); +} + +.sponsor-description:after { + content: ''; + border: solid transparent var(--x2); + border-bottom-color: var(--z15); + position: absolute; + top: calc(var(--x4)*-1); + right: var(--x10); +} + +.sponsor-description p { + color: var(--z6); +} + +.sponsor-description strong { + display: block; + margin-bottom: var(--x2); +} diff --git a/src/index.html b/src/index.html index a9e3a92..7f85788 100644 --- a/src/index.html +++ b/src/index.html @@ -35,6 +35,7 @@ + @@ -125,6 +126,23 @@ + +
+ + +
diff --git a/src/js/Menu.js b/src/js/Menu.js index c3c090a..de327c1 100644 --- a/src/js/Menu.js +++ b/src/js/Menu.js @@ -9,8 +9,10 @@ MD.Menu = function(){ $('#tool_group').on("click", editor.groupSelected); $('#tool_ungroup').on("click", editor.ungroupSelected); $('#tool_ungroup').on("click", editor.ungroupSelected); - if (window.location.host !== "editor.method.ac") - $('#modal_donate').hide(); + if (window.location.host !== "editor.method.ac") { + $('#modal_donate').show(); + $('#sponsors').show(); + } // top dropdown menus $('.menu_title') .on('mousedown', function() { From b9023934691d3eaebdaa06293ece5aa212c656f0 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Wed, 26 May 2021 19:41:20 -0500 Subject: [PATCH 02/11] netlify.toml --- src/css/netlify.toml | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/css/netlify.toml diff --git a/src/css/netlify.toml b/src/css/netlify.toml new file mode 100644 index 0000000..a28a154 --- /dev/null +++ b/src/css/netlify.toml @@ -0,0 +1,5 @@ +[build] + command = "gulp" + publish = "dist/" +[dev] + publish="src/" From 320a9f395d78996c12770808ffd62f95ae8503ea Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Wed, 26 May 2021 19:43:22 -0500 Subject: [PATCH 03/11] build trigger --- src/css/netlify.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/netlify.toml b/src/css/netlify.toml index a28a154..65242d2 100644 --- a/src/css/netlify.toml +++ b/src/css/netlify.toml @@ -2,4 +2,4 @@ command = "gulp" publish = "dist/" [dev] - publish="src/" + publish="src/" \ No newline at end of file From 59eba184bfb7019691f4c4170ed6f01cd32af916 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Wed, 26 May 2021 19:53:52 -0500 Subject: [PATCH 04/11] sponsorship message --- src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.html b/src/index.html index 7f85788..cd4f5c6 100644 --- a/src/index.html +++ b/src/index.html @@ -138,6 +138,7 @@ Deta Space allows you to run Method Draw in your own Micro Server, for free.

You can save, load and share svg files in the cloud. You also have full control over the availability of the application which is run securely in your own sandboxed personal cloud.

+
Deta is a sponsor of Method Draw
From 1f99479ea638360a83faf8aa04cd8fefc46a66c1 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Thu, 27 May 2021 16:27:43 -0500 Subject: [PATCH 05/11] clean --- src/js/method-draw.js | 1 - src/js/sanitize.js | 2 +- src/js/svgcanvas.js | 29 +++++++++++------------------ 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/js/method-draw.js b/src/js/method-draw.js index 480ee32..a84449e 100644 --- a/src/js/method-draw.js +++ b/src/js/method-draw.js @@ -898,7 +898,6 @@ window.methodDraw = function() { }; var clickSave = function(){ - console.log("hi") flash($('#file_menu')); svgCanvas.save(); }; diff --git a/src/js/sanitize.js b/src/js/sanitize.js index 5f9e1d7..77e231a 100644 --- a/src/js/sanitize.js +++ b/src/js/sanitize.js @@ -50,7 +50,7 @@ var svgWhiteList_ = { "circle": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "r", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "clipPath": ["class", "clipPathUnits", "id"], "defs": [], - "style" : ["type"], + "style" : ["type"], "desc": [], "ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"], "feGaussianBlur": ["class", "color-interpolation-filters", "id", "requiredFeatures", "stdDeviation"], diff --git a/src/js/svgcanvas.js b/src/js/svgcanvas.js index 59473c2..60e0315 100644 --- a/src/js/svgcanvas.js +++ b/src/js/svgcanvas.js @@ -5128,13 +5128,6 @@ this.svgCanvasToString = function() { pathActions.clear(true); - // Keep SVG-Edit comment on top - $.each(svgcontent.childNodes, function(i, node) { - if(i && node.nodeType === 8 && node.data.indexOf('Created with') >= 0) { - svgcontent.insertBefore(node, svgcontent.firstChild); - } - }); - // Move out of in-group editing mode if(current_group) { leaveContext(); @@ -5162,6 +5155,7 @@ this.svgCanvasToString = function() { $(this).replaceWith(svg); } }); + var output = this.svgToString(svgcontent, 0); // Rewrap gsvg @@ -5202,17 +5196,6 @@ this.svgToString = function(elem, indent) { var res = getResolution(); var vb = ""; - // TODO: Allow this by dividing all values by current baseVal - // Note that this also means we should properly deal with this on import -// if(curConfig.baseUnit !== "px") { -// var unit = curConfig.baseUnit; -// var unit_m = svgedit.units.getTypeMap()[unit]; -// res.w = svgedit.units.shortFloat(res.w / unit_m) -// res.h = svgedit.units.shortFloat(res.h / unit_m) -// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"'; -// res.w += unit; -// res.h += unit; -// } if(unit !== "px") { res.w = svgedit.units.convertUnit(res.w, unit) + unit; @@ -5780,6 +5763,13 @@ var convertToGroup = this.convertToGroup = function(elem) { } } +this.styleToAttributes = function(doc) { + const docEl = doc.documentElement; + + return doc; + +} + // // Function: setSvgString // This function sets the current drawing as the input SVG XML. @@ -5797,6 +5787,9 @@ this.setSvgString = function(xmlString) { var batchCmd = new BatchCommand("Change Source"); + newDoc = this.styleToAttributes(newDoc); + + // remove old svg document var nextSibling = svgcontent.nextSibling; var oldzoom = svgroot.removeChild(svgcontent); From 96291302cfe0b32d4f9ce4d83da628882baa0145 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Fri, 28 May 2021 11:47:03 -0500 Subject: [PATCH 06/11] adding install deta to readme --- readme.md | 9 ++++++++- src/css/sponsors.css | 12 ++++++++++++ src/index.html | 8 ++++---- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 9512bff..ab6ca27 100644 --- a/readme.md +++ b/readme.md @@ -2,12 +2,19 @@ Method Draw is a web based vector drawing application. -### [Try Method Draw](https://editor.method.ac) online. +#### [Try Method Draw](https://editor.method.ac) online. ![Method Draw](https://method.ac/img/method-draw2021.png) The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit). + +## Online sync and sharing + +Cloud sync and sharing are available on Method Draw for Deta. + +[](http://google.com.au/) + ## Development Develop and run a local web server under `src`; diff --git a/src/css/sponsors.css b/src/css/sponsors.css index 3193a83..d6702c7 100644 --- a/src/css/sponsors.css +++ b/src/css/sponsors.css @@ -123,3 +123,15 @@ display: block; margin-bottom: var(--x2); } + +.sponsor-logo { + display: block; + width: 180px; + margin: var(--x4) auto var(--x1); +} + +.sponsor-disclaimer { + color: var(--z11); + text-align: center; + font-size: 0.8em; +} diff --git a/src/index.html b/src/index.html index cd4f5c6..6e42656 100644 --- a/src/index.html +++ b/src/index.html @@ -135,10 +135,10 @@ From 391e4efe7a9862d5f15444d227a4b437044d2abc Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Fri, 28 May 2021 11:52:20 -0500 Subject: [PATCH 07/11] sponsorship link --- readme.md | 13 ++++++------- src/index.html | 2 +- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/readme.md b/readme.md index ab6ca27..8ed6028 100644 --- a/readme.md +++ b/readme.md @@ -2,19 +2,18 @@ Method Draw is a web based vector drawing application. +## Online sync and sharing + +Cloud sync and sharing are available on Method Draw for Deta. + +[](https://deta.space/discovery/method-draw?ref=method.ac) + #### [Try Method Draw](https://editor.method.ac) online. ![Method Draw](https://method.ac/img/method-draw2021.png) The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit). - -## Online sync and sharing - -Cloud sync and sharing are available on Method Draw for Deta. - -[](http://google.com.au/) - ## Development Develop and run a local web server under `src`; diff --git a/src/index.html b/src/index.html index 6e42656..37e643e 100644 --- a/src/index.html +++ b/src/index.html @@ -129,7 +129,7 @@