diff --git a/dist/Leaflet.mpk b/dist/Leaflet.mpk index 9d15779..8c330e5 100644 Binary files a/dist/Leaflet.mpk and b/dist/Leaflet.mpk differ diff --git a/package.json b/package.json index 6df8177..cfd8980 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "filesFolder": "widget", "libraries": false, "core": false, - "path": "./test/" + "path": "/Volumes/C/Projects/MX/Leaflet/test/" }, "keywords": [ "widget", @@ -74,6 +74,7 @@ "leaflet-fullscreen": "^1.0.2", "leaflet-providers": "^1.1.17", "leaflet.locatecontrol": "^0.62.0", - "whatwg-fetch": "^2.0.3" + "whatwg-fetch": "^2.0.3", + "widget-base-helpers": "^1.0.14" } } diff --git a/src/Leaflet/widget/Leaflet.js b/src/Leaflet/widget/Leaflet.js index 1793090..73fc289 100644 --- a/src/Leaflet/widget/Leaflet.js +++ b/src/Leaflet/widget/Leaflet.js @@ -1,6 +1,4 @@ -import { defineWidget } from '@/helpers/widget'; -import { log, runCallback } from '@/helpers'; -import { execute } from '@/helpers/microflow'; +import { defineWidget, log, runCallback, execute } from 'widget-base-helpers'; import template from './Leaflet.template.html'; @@ -20,6 +18,12 @@ import 'leaflet-fullscreen/dist/leaflet.fullscreen.css'; import 'leaflet.locatecontrol/dist/L.Control.Locate.css'; import 'leaflet.locatecontrol/dist/L.Control.Locate.mapbox.css'; +// The following code will be stripped with our webpack loader and should only be used if you plan on doing styling +/* develblock:start */ +import loadcss from 'loadcss'; +loadcss(`/widgets/Leaflet/widget/ui/Leaflet.css`); +/* develblock:end */ + Leaflet.Icon.Default.imagePath = window.require.toUrl('Leaflet/widget/ui/').split('?')[ 0 ]; export default defineWidget('Leaflet', template, { @@ -36,45 +40,45 @@ export default defineWidget('Leaflet', template, { lowestZoom: 10, updateRefresh: false, - mapEntity: "", - xpathConstraint: "", - markerDisplayAttr: "", - latAttr: "", - lngAttr: "", - markerCategory: "", - onClickMarkerMf: "", + mapEntity: '', + xpathConstraint: '', + markerDisplayAttr: '', + latAttr: '', + lngAttr: '', + markerCategory: '', + onClickMarkerMf: '', - mapHeight: "", - mapWidth: "", - markerTemplate: "
{Marker}
", - markerDefaultImage: "", - markerImageAttr: "", + mapHeight: '', + mapWidth: '', + markerTemplate: '{Marker}
', + markerDefaultImage: '', + markerImageAttr: '', markerImages: [], - mapType: "OpenStreetMap_Mapnik", + mapType: 'OpenStreetMap_Mapnik', customMapType: false, - customMapTypeUrl: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", - customMapTypOptions: "{subdomains:'abc'}", + customMapTypeUrl: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + customMapTypOptions: '{subdomains:\'abc\'}', controlDragging: true, controlTouchZoom: true, controlScrollWheelZoom: true, controlZoomControl: true, - controlZoomControlPosition: "topleft", + controlZoomControlPosition: 'topleft', controlAttribution: true, - controlAttributionPosition: "bottomright", + controlAttributionPosition: 'bottomright', controlFullscreen: false, - controlFullscreenPosition: "topright", + controlFullscreenPosition: 'topright', controlCategories: false, - controlCategoriesPosition: "topright", + controlCategoriesPosition: 'topright', locateControl: false, - locateControlPosition: "topleft", + locateControlPosition: 'topleft', locateControlDrawCircle: true, locateControlKeepZoomLevel: false, scaleControl: false, - scaleControlPosition: "bottomleft", + scaleControlPosition: 'bottomleft', scaleControlMetric: true, scaleControlImperial: true, scaleControlMaxWidth: 100, @@ -163,16 +167,16 @@ export default defineWidget('Leaflet', template, { try { options = JSON.parse(this.customMapTypeOptions); } catch (e) { - console.warn(this.id + "._getMapLayer error parsing Custom Map Options: " + e.toString() + ", not using these options"); + console.warn(this.id + '._getMapLayer error parsing Custom Map Options: ' + e.toString() + ', not using these options'); options = {}; } } tileLayer = Leaflet.tileLayer(this.customMapTypeUrl, options); } else { - const providerName = this.mapType.replace(/_/g, "."); + const providerName = this.mapType.replace(/_/g, '.'); - if (0 === providerName.indexOf("HERE")) { + if (0 === providerName.indexOf('HERE')) { if ('' !== this.hereAppId && '' !== this.hereAppCode) { tileLayer = Leaflet.tileLayer.provider(providerName, { app_id: this.hereAppId, // eslint-disable-line camelcase @@ -181,7 +185,7 @@ export default defineWidget('Leaflet', template, { } else { console.error(`${this.id} for HERE maps you need to provide a valid app ID and key. Get one: http://developer.here.com/`); - tileLayer = Leaflet.tileLayer.provider("OpenStreetMap.Mapnik"); + tileLayer = Leaflet.tileLayer.provider('OpenStreetMap.Mapnik'); } } else { tileLayer = Leaflet.tileLayer.provider(providerName); @@ -210,9 +214,9 @@ Get one: http://developer.here.com/`); width: this.mapWidth, }); - this.mapContainer.id = this.id + "_container"; + this.mapContainer.id = this.id + '_container'; - this._map = Leaflet.map(this.id + "_container", { + this._map = Leaflet.map(this.id + '_container', { dragging: this.controlDragging, touchZoom: this.controlTouchZoom, scrollWheelZoom: this.controlScrollWheelZoom, @@ -249,8 +253,8 @@ Get one: http://developer.here.com/`); position: this.locateControlPosition, drawCircle: this.locateControlDrawCircle, keepCurrentZoomLevel: this.locateControlKeepZoomLevel, - icon: "glyphicon glyphicon-screenshot", // Using glyphicons that are part of Mendix - iconLoading: "glyphicon glyphicon-refresh", + icon: 'glyphicon glyphicon-screenshot', // Using glyphicons that are part of Mendix + iconLoading: 'glyphicon glyphicon-refresh', }).addTo(this._map); } @@ -345,7 +349,7 @@ Get one: http://developer.here.com/`); if (!this.controlCategories) { return; } - logger.debug(this.id + "._updateLayerControls"); + logger.debug(this.id + '._updateLayerControls'); if (this._map) { if (this._layerController) { @@ -360,7 +364,7 @@ Get one: http://developer.here.com/`); .keys(this._layerCategoryGroups) .forEach(key => { add = true; - layerCategoryGroups[ key.replace("_" + this.id, "") ] = this._layerCategoryGroups[ key ]; + layerCategoryGroups[ key.replace('_' + this.id, '') ] = this._layerCategoryGroups[ key ]; }); if (add) { @@ -402,7 +406,7 @@ Get one: http://developer.here.com/`); } else { const la = this.checkAttrForDecimal(obj, this.latAttr); const lo = this.checkAttrForDecimal(obj, this.lngAttr); - logger.error(this.id + ": " + "Incorrect coordinates (" + la + "," + lo + ")"); + logger.error(this.id + ': ' + 'Incorrect coordinates (' + la + ',' + lo + ')'); } }); @@ -413,27 +417,27 @@ Get one: http://developer.here.com/`); this._map.fitBounds(positions); } - runCallback.call(this, callback, "_refreshMap"); + runCallback.call(this, callback, '_refreshMap'); }, _fetchFromDB(callback) { this.log('_fetchFromDB'); - let xpath = "//" + this.mapEntity + this.xpathConstraint; + let xpath = '//' + this.mapEntity + this.xpathConstraint; this._removeAllMarkers(); if (this._contextObj) { - xpath = xpath.replace("[%CurrentObject%]", this._contextObj.getGuid()); + xpath = xpath.replace('[%CurrentObject%]', this._contextObj.getGuid()); mx.data.get({ xpath: xpath, callback: objs => { this._refreshMap(objs, callback); }, }); - } else if (!this._contextObj && -1 < xpath.indexOf("[%CurrentObject%]")) { - console.warn("No context for xpath, not fetching."); - runCallback.call(this, callback, "_fetchFromDB"); + } else if (!this._contextObj && -1 < xpath.indexOf('[%CurrentObject%]')) { + console.warn('No context for xpath, not fetching.'); + runCallback.call(this, callback, '_fetchFromDB'); } else { mx.data.get({ xpath: xpath, @@ -472,7 +476,7 @@ Get one: http://developer.here.com/`); if (!cached) { this._fetchFromDB(callback); } else { - runCallback.call(this, callback, "_fetchFromCache"); + runCallback.call(this, callback, '_fetchFromCache'); } }, @@ -509,16 +513,16 @@ Get one: http://developer.here.com/`); } if ('' !== this.onClickMarkerMf) { - marker.on("click", () => { - console.log(this, obj, obj.getGuid()); + marker.on('click', () => { + // console.log(this, obj, obj.getGuid()); execute.call(this, this.onClickMarkerMf, obj.getGuid()); }); } if (this.markerDisplayAttr) { const markerTemplate = '' !== this.markerTemplate ? - this.markerTemplate.replace("{Marker}", obj.get(this.markerDisplayAttr)) : - "" + obj.get(this.markerDisplayAttr) + "
"; + this.markerTemplate.replace('{Marker}', obj.get(this.markerDisplayAttr)) : + '' + obj.get(this.markerDisplayAttr) + '
'; marker.bindPopup(markerTemplate, { closeButton: false, @@ -528,9 +532,9 @@ Get one: http://developer.here.com/`); if (this.markerCategory && this.controlCategories) { const category = obj.get(this.markerCategory); if (category) { - let layerCategory = this._layerCategoryGroups[ category + "_" + this.id ]; + let layerCategory = this._layerCategoryGroups[ category + '_' + this.id ]; if (!layerCategory) { - layerCategory = this._layerCategoryGroups[ category + "_" + this.id ] = new Leaflet.layerGroup(); + layerCategory = this._layerCategoryGroups[ category + '_' + this.id ] = new Leaflet.layerGroup(); this._layerGroup.addLayer(layerCategory); } layerCategory.addLayer(marker); @@ -599,12 +603,12 @@ Get one: http://developer.here.com/`); if (this._contextObj) { objs = [ this._contextObj ]; } else { - logger.error(this.id + "._goToContext: no Context object while you have set" + - " \"Pan to context\" in the Modeler! Showing default position"); + logger.error(this.id + '._goToContext: no Context object while you have set' + + ' \'Pan to context\' in the Modeler! Showing default position'); } this._refreshMap(objs, callback); } else { - runCallback.call(this, callback, "_goToContext"); + runCallback.call(this, callback, '_goToContext'); } }, diff --git a/src/Leaflet/widget/Leaflet.scss b/src/Leaflet/widget/Leaflet.scss deleted file mode 100644 index 3dd12fa..0000000 --- a/src/Leaflet/widget/Leaflet.scss +++ /dev/null @@ -1,3 +0,0 @@ -.widget { - background: #CCC; -} diff --git a/src/helpers/data.js b/src/helpers/data.js deleted file mode 100644 index ae1bdd0..0000000 --- a/src/helpers/data.js +++ /dev/null @@ -1,17 +0,0 @@ -import Promise from 'dojo/promise/Promise'; - -export const getData = params => new Promise((resolve, reject) => { - mx.data.get({ - params, - callback: resolve, - error: reject, - }); -}); - -export const fetchAttr = (obj, attr) => new Promise((resolve, reject) => { - try { - obj.fetch(attr, val => resolve(val)); - } catch (e) { - reject(e); - } -}); diff --git a/src/helpers/index.js b/src/helpers/index.js deleted file mode 100644 index c3ae333..0000000 --- a/src/helpers/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/*eslint no-invalid-this: 0*/ - -/** - * Logs using the Mendix logger - * - * @export - * @param {string} methodName - * @param {...any} args - */ -export function log(methodName, ...args) { - logger.debug(`${this.id}.${methodName}`, args.length ? args[ 0 ] : ''); -} - -/** - * Runs a callback and logs the method where it comes from - * - * @export - * @param {() => {}} cb - * @param {string} from - */ -export function runCallback(cb, from) { - log.call(this, '_callback', from ? `from ${from}` : ''); - if (cb && 'function' === typeof cb) { - cb(); - } -} diff --git a/src/helpers/microflow.js b/src/helpers/microflow.js deleted file mode 100644 index 9fdb8de..0000000 --- a/src/helpers/microflow.js +++ /dev/null @@ -1,44 +0,0 @@ -/*eslint no-invalid-this: 0*/ -import lang from 'dojo/_base/lang'; -import { log } from '@/helpers'; - -export function execute(microflow, guid, cb, errCb) { - if (microflow) { - log.call(this, 'execute microflow', `microflow: ${microflow}:${guid}`); - - const action = { - params: { - applyto: 'selection', - guids: [], - actionname: microflow, - }, - callback: lang.hitch(this, objs => { - if (cb && 'function' == typeof cb) { - cb(objs); - } - }), - error: lang.hitch(this, error => { - if (errCb && 'function' == typeof errCb) { - errCb(error); - } else { - mx.ui.error(`Error executing microflow ${microflow} : ${error.message}`); - console.error(this.id + "._execMf", error); - } - }), - }; - - if (guid) { - action.params.guids = [guid]; - } - - if (!mx.version || mx.version && 7 > parseInt(mx.version.split(".")[ 0 ], 10)) { - action.store = { - caller: this.mxform, - }; - } else { - action.origin = this.mxform; - } - - mx.data.action(action, this); - } -} diff --git a/src/helpers/widget.js b/src/helpers/widget.js deleted file mode 100644 index 8748760..0000000 --- a/src/helpers/widget.js +++ /dev/null @@ -1,39 +0,0 @@ -import declare from 'dojoBaseDeclare'; -import widgetBase from 'widgetBase'; -import templateMixin from 'dijit/_TemplatedMixin'; - -const { packageName, version, widgetFolder } = config; - -/** - * Defines a widget. Use this when you have multiple sub widgets. For a single widget this might be overkill - * - * @export - * @param {string} id - * @param {string} template - * @param {{}}} obj - * @param {any} base - * @returns - */ -export function defineWidget(id, template, obj, base) { - const widgetObj = obj; - - widgetObj._WIDGET_VERSION = version; - - const mixins = []; - if ('undefined' !== typeof base) { - if (null !== base) { - mixins.push(base); - } - } else { - mixins.push(widgetBase); - } - - if (template) { - mixins.push(templateMixin); - } - if ('boolean' !== typeof template){ - widgetObj.templateString = template; - } - - return declare(`${packageName}.${widgetFolder}.${id}`, mixins, widgetObj); -} diff --git a/webpack.config.js b/webpack.config.js index e6a8809..7429263 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -117,7 +117,10 @@ const webpackConfig = { loaders: [ { test: /\.jsx?$/, - exclude: /node_modules/, + include: [ + path.resolve(__dirname, 'src'), + path.resolve('node_modules', 'widget-base-helpers') + ], loader: [ 'babel-loader', 'eslint-loader' @@ -137,35 +140,7 @@ const webpackConfig = { { test: /\.(jpe?g|png|gif|svg)$/i, loader: [ - 'url-loader?limit=10000', - { - loader: 'img-loader', - options: { - // enabled: process.env.NODE_ENV === 'production', - gifsicle: { - interlaced: false - }, - mozjpeg: { - progressive: true, - arithmetic: false - }, - optipng: true, // disabled - pngquant: { - floyd: 0.5, - speed: 2 - }, - svgo: { - plugins: [ - { - removeTitle: true - }, - { - convertPathData: false - } - ] - } - } - } + 'url-loader' ] } ] @@ -223,4 +198,3 @@ if (env !== 'production') { } module.exports = webpackConfig; -