mirror of
https://github.com/a2nt/silverstripe-mapboxfield.git
synced 2024-10-22 12:05:53 +00:00
FIX: Render map when not contained in tabset
This commit is contained in:
Loz Calver
parent
fcee9fd879
commit
2d0b23cbc3
209
client/dist/js/bundle.js
vendored
209
client/dist/js/bundle.js
vendored
@ -1,208 +1 @@
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/
|
||||
/******/ // Check if module is in cache
|
||||
/******/ if(installedModules[moduleId]) {
|
||||
/******/ return installedModules[moduleId].exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = installedModules[moduleId] = {
|
||||
/******/ i: moduleId,
|
||||
/******/ l: false,
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Flag the module as loaded
|
||||
/******/ module.l = true;
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/******/
|
||||
/******/ // expose the modules object (__webpack_modules__)
|
||||
/******/ __webpack_require__.m = modules;
|
||||
/******/
|
||||
/******/ // expose the module cache
|
||||
/******/ __webpack_require__.c = installedModules;
|
||||
/******/
|
||||
/******/ // identity function for calling harmony imports with the correct context
|
||||
/******/ __webpack_require__.i = function(value) { return value; };
|
||||
/******/
|
||||
/******/ // define getter function for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, name, getter) {
|
||||
/******/ if(!__webpack_require__.o(exports, name)) {
|
||||
/******/ Object.defineProperty(exports, name, {
|
||||
/******/ configurable: false,
|
||||
/******/ enumerable: true,
|
||||
/******/ get: getter
|
||||
/******/ });
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function getDefault() { return module['default']; } :
|
||||
/******/ function getModuleExports() { return module; };
|
||||
/******/ __webpack_require__.d(getter, 'a', getter);
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Object.prototype.hasOwnProperty.call
|
||||
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
||||
/******/
|
||||
/******/ // __webpack_public_path__
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = "./client/src/bundles/bundle.js");
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./client/src/bundles/bundle.js":
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
|
||||
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_components_MapboxField_MapboxField__ = __webpack_require__("./client/src/components/MapboxField/MapboxField.js");
|
||||
|
||||
|
||||
|
||||
__WEBPACK_IMPORTED_MODULE_0_jquery___default.a.entwine('ss', function ($) {
|
||||
$('.cms-edit-form .mapbox').entwine({
|
||||
MapboxField: null,
|
||||
|
||||
onmatch: function onmatch() {
|
||||
if (!this.getMapboxField()) {
|
||||
this.setMapboxField(new __WEBPACK_IMPORTED_MODULE_1_components_MapboxField_MapboxField__["a" /* default */](this));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-edit-form [aria-hidden="false"] .mapbox').entwine({
|
||||
onmatch: function onmatch() {
|
||||
this._super();
|
||||
|
||||
this.getMapboxField().render();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./client/src/components/MapboxField/MapboxField.js":
|
||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var MapboxField = function () {
|
||||
function MapboxField($container) {
|
||||
_classCallCheck(this, MapboxField);
|
||||
|
||||
this.$container = $container;
|
||||
this.rendered = false;
|
||||
}
|
||||
|
||||
_createClass(MapboxField, [{
|
||||
key: '_getLngLatValue',
|
||||
value: function _getLngLatValue() {
|
||||
return [this._getLngField().val(), this._getLatField().val()];
|
||||
}
|
||||
}, {
|
||||
key: '_setLngLatValue',
|
||||
value: function _setLngLatValue(coords) {
|
||||
this._getLngField().val(coords[0]).change();
|
||||
this._getLatField().val(coords[1]).change();
|
||||
}
|
||||
}, {
|
||||
key: '_getLngField',
|
||||
value: function _getLngField() {
|
||||
return this.$container.find('input[data-mapbox-field="Longitude"]');
|
||||
}
|
||||
}, {
|
||||
key: '_getLatField',
|
||||
value: function _getLatField() {
|
||||
return this.$container.find('input[data-mapbox-field="Latitude"]');
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
var _this = this;
|
||||
|
||||
if (this.rendered) {
|
||||
return;
|
||||
}
|
||||
|
||||
mapboxgl.accessToken = MapboxField._getAccessToken();
|
||||
var map = new mapboxgl.Map({
|
||||
center: this._getLngLatValue(),
|
||||
container: this.$container.find('.mapbox__map').get(0),
|
||||
style: 'mapbox://styles/mapbox/basic-v9',
|
||||
zoom: 15
|
||||
});
|
||||
|
||||
var marker = new mapboxgl.Marker({
|
||||
draggable: true
|
||||
}).setLngLat(this._getLngLatValue()).addTo(map);
|
||||
|
||||
marker.on('dragend', function () {
|
||||
_this._onMarkerUpdate(marker);
|
||||
});
|
||||
|
||||
var geocoder = new MapboxGeocoder({
|
||||
accessToken: MapboxField._getAccessToken()
|
||||
});
|
||||
map.addControl(geocoder);
|
||||
|
||||
geocoder.on('result', function (event) {
|
||||
marker.setLngLat(event.result.geometry.coordinates);
|
||||
_this._onMarkerUpdate(marker);
|
||||
});
|
||||
|
||||
map.addControl(new mapboxgl.NavigationControl());
|
||||
|
||||
this.rendered = true;
|
||||
}
|
||||
}, {
|
||||
key: '_onMarkerUpdate',
|
||||
value: function _onMarkerUpdate(marker) {
|
||||
var lngLat = marker.getLngLat();
|
||||
this._setLngLatValue([lngLat.lng, lngLat.lat]);
|
||||
}
|
||||
}], [{
|
||||
key: '_getAccessToken',
|
||||
value: function _getAccessToken() {
|
||||
return window.mapboxAccessToken;
|
||||
}
|
||||
}]);
|
||||
|
||||
return MapboxField;
|
||||
}();
|
||||
|
||||
/* harmony default export */ __webpack_exports__["a"] = (MapboxField);
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 0:
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = jQuery;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
//# sourceMappingURL=bundle.js.map
|
||||
!function(e){function n(a){if(t[a])return t[a].exports;var o=t[a]={i:a,l:!1,exports:{}};return e[a].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:a})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s="./client/src/bundles/bundle.js")}({"./client/src/bundles/bundle.js":function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a=t(0),o=t.n(a),i=t("./client/src/components/MapboxField/MapboxField.js");o.a.entwine("ss",function(e){e(".cms-edit-form .mapbox").entwine({MapboxField:null,onmatch:function(){this.getMapboxField()||this.setMapboxField(new i.a(this))}}),e('.cms-edit-form [aria-hidden="false"] .mapbox').entwine({onmatch:function(){this._super(),this.getMapboxField().render()}}),e(".cms-edit-form .mapbox:not(.tabset .mapbox)").entwine({onmatch:function(){this._super(),this.getMapboxField().render()}})})},"./client/src/components/MapboxField/MapboxField.js":function(e,n,t){"use strict";function a(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,n){for(var t=0;t<n.length;t++){var a=n[t];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(n,t,a){return t&&e(n.prototype,t),a&&e(n,a),n}}(),i=function(){function e(n){a(this,e),this.$container=n,this.rendered=!1}return o(e,[{key:"_getLngLatValue",value:function(){return[this._getLngField().val(),this._getLatField().val()]}},{key:"_setLngLatValue",value:function(e){this._getLngField().val(e[0]).change(),this._getLatField().val(e[1]).change()}},{key:"_getLngField",value:function(){return this.$container.find('input[data-mapbox-field="Longitude"]')}},{key:"_getLatField",value:function(){return this.$container.find('input[data-mapbox-field="Latitude"]')}},{key:"render",value:function(){var n=this;if(!this.rendered){mapboxgl.accessToken=e._getAccessToken();var t=new mapboxgl.Map({center:this._getLngLatValue(),container:this.$container.find(".mapbox__map").get(0),style:"mapbox://styles/mapbox/basic-v9",zoom:15}),a=new mapboxgl.Marker({draggable:!0}).setLngLat(this._getLngLatValue()).addTo(t);a.on("dragend",function(){n._onMarkerUpdate(a)});var o=new MapboxGeocoder({accessToken:e._getAccessToken()});t.addControl(o),o.on("result",function(e){a.setLngLat(e.result.geometry.coordinates),n._onMarkerUpdate(a)}),t.addControl(new mapboxgl.NavigationControl),this.rendered=!0}}},{key:"_onMarkerUpdate",value:function(e){var n=e.getLngLat();this._setLngLatValue([n.lng,n.lat])}}],[{key:"_getAccessToken",value:function(){return window.mapboxAccessToken}}]),e}();n.a=i},0:function(e,n){e.exports=jQuery}});
|
||||
3
client/dist/styles/bundle.css
vendored
3
client/dist/styles/bundle.css
vendored
@ -1,2 +1 @@
|
||||
.mapbox__map-outer{position:relative;height:0;padding-bottom:56.25%}.mapbox__map-inner{position:absolute;top:0;left:0}.mapbox__map,.mapbox__map-inner{width:100%;height:100%}
|
||||
/*# sourceMappingURL=bundle.css.map*/
|
||||
.mapbox__map-outer{position:relative;height:0;padding-bottom:56.25%}.mapbox__map-inner{position:absolute;top:0;left:0}.mapbox__map,.mapbox__map-inner{width:100%;height:100%}
|
||||
@ -12,10 +12,18 @@ jQuery.entwine('ss', ($) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Render when tab containing field is selected
|
||||
$('.cms-edit-form [aria-hidden="false"] .mapbox').entwine({
|
||||
onmatch() {
|
||||
this._super();
|
||||
this.getMapboxField().render();
|
||||
}
|
||||
});
|
||||
|
||||
// Assume field not contained in a tabset is already visible
|
||||
$('.cms-edit-form .mapbox:not(.tabset .mapbox)').entwine({
|
||||
onmatch() {
|
||||
this._super();
|
||||
this.getMapboxField().render();
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user