From a6148e5f40c2ed948f683551b132d0ad1d6c6cfc Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 9 Sep 2020 14:06:48 +0100 Subject: [PATCH 1/2] Added HTML export option to export modal. --- package-lock.json | 6 +-- package.json | 2 +- src/components/ModalExport.jsx | 85 +++++++++++++++++++++++++++------- src/styles/_modal.scss | 9 ++++ 4 files changed, 82 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 61d9b02..2405e15 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16633,9 +16633,9 @@ } }, "slugify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.0.tgz", - "integrity": "sha512-FtLNsMGBSRB/0JOE2A0fxlqjI6fJsgHGS13iTuVT28kViI4JjUiNqp/vyis0ZXYcMnpR3fzGNkv+6vRlI2GwdQ==" + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz", + "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ==" }, "snapdragon": { "version": "0.8.2", diff --git a/package.json b/package.json index 4faa04e..1164145 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "react-motion": "^0.5.2", "react-sortable-hoc": "^1.11.0", "reconnecting-websocket": "^4.4.0", - "slugify": "^1.3.6", + "slugify": "^1.4.5", "string-hash": "^1.1.3", "url": "^0.11.0" }, diff --git a/src/components/ModalExport.jsx b/src/components/ModalExport.jsx index 5af01cc..0eabd57 100644 --- a/src/components/ModalExport.jsx +++ b/src/components/ModalExport.jsx @@ -2,6 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import Slugify from 'slugify' import { saveAs } from 'file-saver' +import pkgLockJson from '../../package-lock.json' import {format} from '@mapbox/mapbox-gl-style-spec' import FieldString from './FieldString' @@ -13,6 +14,8 @@ import style from '../libs/style' import fieldSpecAdditional from '../libs/field-spec-additional' +const MAPBOX_GL_VERSION = pkgLockJson.dependencies["mapbox-gl"].version; + export default class ModalExport extends React.Component { static propTypes = { @@ -26,23 +29,65 @@ export default class ModalExport extends React.Component { super(props); } - downloadStyle() { - const tokenStyle = format( + tokenizedStyle () { + return format( style.stripAccessTokens( style.replaceAccessTokens(this.props.mapStyle) ) ); + } - const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"}); - let exportName; + exportName () { if(this.props.mapStyle.name) { - exportName = Slugify(this.props.mapStyle.name, { - replacement: '_', - lower: true - }) + return Slugify(this.props.mapStyle.name, { + replacement: '_', + remove: /[*\-+~.()'"!:]/g, + lower: true + }); } else { - exportName = this.props.mapStyle.id + return this.props.mapStyle.id } + } + + downloadHtml() { + const tokenStyle = this.tokenizedStyle(); + const htmlTitle = this.props.mapStyle.name || "Map"; + const html = ` + + + + ${htmlTitle} + + + + + + +
+ + + +`; + + const blob = new Blob([html], {type: "text/html;charset=utf-8"}); + const exportName = this.exportName(); + saveAs(blob, exportName + ".html"); + } + + downloadStyle() { + const tokenStyle = this.tokenizedStyle(); + const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"}); + const exportName = this.exportName(); saveAs(blob, exportName + ".json"); } @@ -94,13 +139,21 @@ export default class ModalExport extends React.Component { /> - - - Download - +
+ + + Download Style + + + + + Download HTML + +
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 6baf76b..b322f88 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -331,3 +331,12 @@ .modal-settings { width: 400px; } + +.maputnik-modal-export-buttons { + display: flex; + justify-content: flex-end; + + .maputnik-button { + margin-left: 4px; + } +} From 25e2554412bc8949af714d863cc79e656c16d9ea Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 10 Sep 2020 18:07:47 +0100 Subject: [PATCH 2/2] Another commit to force a rebuild --- src/styles/_modal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index b322f88..3b08ded 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -340,3 +340,4 @@ margin-left: 4px; } } +