removed obsolete local plugins, now included with CDN
This commit is contained in:
@@ -1,575 +0,0 @@
|
||||
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
||||
'use strict';
|
||||
var immediate = require('immediate');
|
||||
|
||||
/* istanbul ignore next */
|
||||
function INTERNAL() {}
|
||||
|
||||
var handlers = {};
|
||||
|
||||
var REJECTED = ['REJECTED'];
|
||||
var FULFILLED = ['FULFILLED'];
|
||||
var PENDING = ['PENDING'];
|
||||
|
||||
module.exports = exports = Promise;
|
||||
|
||||
function Promise(resolver) {
|
||||
if (typeof resolver !== 'function') {
|
||||
throw new TypeError('resolver must be a function');
|
||||
}
|
||||
this.state = PENDING;
|
||||
this.queue = [];
|
||||
this.outcome = void 0;
|
||||
if (resolver !== INTERNAL) {
|
||||
safelyResolveThenable(this, resolver);
|
||||
}
|
||||
}
|
||||
|
||||
Promise.prototype["catch"] = function (onRejected) {
|
||||
return this.then(null, onRejected);
|
||||
};
|
||||
Promise.prototype.then = function (onFulfilled, onRejected) {
|
||||
if (typeof onFulfilled !== 'function' && this.state === FULFILLED ||
|
||||
typeof onRejected !== 'function' && this.state === REJECTED) {
|
||||
return this;
|
||||
}
|
||||
var promise = new this.constructor(INTERNAL);
|
||||
if (this.state !== PENDING) {
|
||||
var resolver = this.state === FULFILLED ? onFulfilled : onRejected;
|
||||
unwrap(promise, resolver, this.outcome);
|
||||
} else {
|
||||
this.queue.push(new QueueItem(promise, onFulfilled, onRejected));
|
||||
}
|
||||
|
||||
return promise;
|
||||
};
|
||||
function QueueItem(promise, onFulfilled, onRejected) {
|
||||
this.promise = promise;
|
||||
if (typeof onFulfilled === 'function') {
|
||||
this.onFulfilled = onFulfilled;
|
||||
this.callFulfilled = this.otherCallFulfilled;
|
||||
}
|
||||
if (typeof onRejected === 'function') {
|
||||
this.onRejected = onRejected;
|
||||
this.callRejected = this.otherCallRejected;
|
||||
}
|
||||
}
|
||||
QueueItem.prototype.callFulfilled = function (value) {
|
||||
handlers.resolve(this.promise, value);
|
||||
};
|
||||
QueueItem.prototype.otherCallFulfilled = function (value) {
|
||||
unwrap(this.promise, this.onFulfilled, value);
|
||||
};
|
||||
QueueItem.prototype.callRejected = function (value) {
|
||||
handlers.reject(this.promise, value);
|
||||
};
|
||||
QueueItem.prototype.otherCallRejected = function (value) {
|
||||
unwrap(this.promise, this.onRejected, value);
|
||||
};
|
||||
|
||||
function unwrap(promise, func, value) {
|
||||
immediate(function () {
|
||||
var returnValue;
|
||||
try {
|
||||
returnValue = func(value);
|
||||
} catch (e) {
|
||||
return handlers.reject(promise, e);
|
||||
}
|
||||
if (returnValue === promise) {
|
||||
handlers.reject(promise, new TypeError('Cannot resolve promise with itself'));
|
||||
} else {
|
||||
handlers.resolve(promise, returnValue);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handlers.resolve = function (self, value) {
|
||||
var result = tryCatch(getThen, value);
|
||||
if (result.status === 'error') {
|
||||
return handlers.reject(self, result.value);
|
||||
}
|
||||
var thenable = result.value;
|
||||
|
||||
if (thenable) {
|
||||
safelyResolveThenable(self, thenable);
|
||||
} else {
|
||||
self.state = FULFILLED;
|
||||
self.outcome = value;
|
||||
var i = -1;
|
||||
var len = self.queue.length;
|
||||
while (++i < len) {
|
||||
self.queue[i].callFulfilled(value);
|
||||
}
|
||||
}
|
||||
return self;
|
||||
};
|
||||
handlers.reject = function (self, error) {
|
||||
self.state = REJECTED;
|
||||
self.outcome = error;
|
||||
var i = -1;
|
||||
var len = self.queue.length;
|
||||
while (++i < len) {
|
||||
self.queue[i].callRejected(error);
|
||||
}
|
||||
return self;
|
||||
};
|
||||
|
||||
function getThen(obj) {
|
||||
// Make sure we only access the accessor once as required by the spec
|
||||
var then = obj && obj.then;
|
||||
if (obj && typeof obj === 'object' && typeof then === 'function') {
|
||||
return function appyThen() {
|
||||
then.apply(obj, arguments);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function safelyResolveThenable(self, thenable) {
|
||||
// Either fulfill, reject or reject with error
|
||||
var called = false;
|
||||
function onError(value) {
|
||||
if (called) {
|
||||
return;
|
||||
}
|
||||
called = true;
|
||||
handlers.reject(self, value);
|
||||
}
|
||||
|
||||
function onSuccess(value) {
|
||||
if (called) {
|
||||
return;
|
||||
}
|
||||
called = true;
|
||||
handlers.resolve(self, value);
|
||||
}
|
||||
|
||||
function tryToUnwrap() {
|
||||
thenable(onSuccess, onError);
|
||||
}
|
||||
|
||||
var result = tryCatch(tryToUnwrap);
|
||||
if (result.status === 'error') {
|
||||
onError(result.value);
|
||||
}
|
||||
}
|
||||
|
||||
function tryCatch(func, value) {
|
||||
var out = {};
|
||||
try {
|
||||
out.value = func(value);
|
||||
out.status = 'success';
|
||||
} catch (e) {
|
||||
out.status = 'error';
|
||||
out.value = e;
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
exports.resolve = resolve;
|
||||
function resolve(value) {
|
||||
if (value instanceof this) {
|
||||
return value;
|
||||
}
|
||||
return handlers.resolve(new this(INTERNAL), value);
|
||||
}
|
||||
|
||||
exports.reject = reject;
|
||||
function reject(reason) {
|
||||
var promise = new this(INTERNAL);
|
||||
return handlers.reject(promise, reason);
|
||||
}
|
||||
|
||||
exports.all = all;
|
||||
function all(iterable) {
|
||||
var self = this;
|
||||
if (Object.prototype.toString.call(iterable) !== '[object Array]') {
|
||||
return this.reject(new TypeError('must be an array'));
|
||||
}
|
||||
|
||||
var len = iterable.length;
|
||||
var called = false;
|
||||
if (!len) {
|
||||
return this.resolve([]);
|
||||
}
|
||||
|
||||
var values = new Array(len);
|
||||
var resolved = 0;
|
||||
var i = -1;
|
||||
var promise = new this(INTERNAL);
|
||||
|
||||
while (++i < len) {
|
||||
allResolver(iterable[i], i);
|
||||
}
|
||||
return promise;
|
||||
function allResolver(value, i) {
|
||||
self.resolve(value).then(resolveFromAll, function (error) {
|
||||
if (!called) {
|
||||
called = true;
|
||||
handlers.reject(promise, error);
|
||||
}
|
||||
});
|
||||
function resolveFromAll(outValue) {
|
||||
values[i] = outValue;
|
||||
if (++resolved === len && !called) {
|
||||
called = true;
|
||||
handlers.resolve(promise, values);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
exports.race = race;
|
||||
function race(iterable) {
|
||||
var self = this;
|
||||
if (Object.prototype.toString.call(iterable) !== '[object Array]') {
|
||||
return this.reject(new TypeError('must be an array'));
|
||||
}
|
||||
|
||||
var len = iterable.length;
|
||||
var called = false;
|
||||
if (!len) {
|
||||
return this.resolve([]);
|
||||
}
|
||||
|
||||
var i = -1;
|
||||
var promise = new this(INTERNAL);
|
||||
|
||||
while (++i < len) {
|
||||
resolver(iterable[i]);
|
||||
}
|
||||
return promise;
|
||||
function resolver(value) {
|
||||
self.resolve(value).then(function (response) {
|
||||
if (!called) {
|
||||
called = true;
|
||||
handlers.resolve(promise, response);
|
||||
}
|
||||
}, function (error) {
|
||||
if (!called) {
|
||||
called = true;
|
||||
handlers.reject(promise, error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
},{"immediate":2}],2:[function(require,module,exports){
|
||||
(function (global){
|
||||
'use strict';
|
||||
var Mutation = global.MutationObserver || global.WebKitMutationObserver;
|
||||
|
||||
var scheduleDrain;
|
||||
|
||||
{
|
||||
if (Mutation) {
|
||||
var called = 0;
|
||||
var observer = new Mutation(nextTick);
|
||||
var element = global.document.createTextNode('');
|
||||
observer.observe(element, {
|
||||
characterData: true
|
||||
});
|
||||
scheduleDrain = function () {
|
||||
element.data = (called = ++called % 2);
|
||||
};
|
||||
} else if (!global.setImmediate && typeof global.MessageChannel !== 'undefined') {
|
||||
var channel = new global.MessageChannel();
|
||||
channel.port1.onmessage = nextTick;
|
||||
scheduleDrain = function () {
|
||||
channel.port2.postMessage(0);
|
||||
};
|
||||
} else if ('document' in global && 'onreadystatechange' in global.document.createElement('script')) {
|
||||
scheduleDrain = function () {
|
||||
|
||||
// Create a <script> element; its readystatechange event will be fired asynchronously once it is inserted
|
||||
// into the document. Do so, thus queuing up the task. Remember to clean up once it's been called.
|
||||
var scriptEl = global.document.createElement('script');
|
||||
scriptEl.onreadystatechange = function () {
|
||||
nextTick();
|
||||
|
||||
scriptEl.onreadystatechange = null;
|
||||
scriptEl.parentNode.removeChild(scriptEl);
|
||||
scriptEl = null;
|
||||
};
|
||||
global.document.documentElement.appendChild(scriptEl);
|
||||
};
|
||||
} else {
|
||||
scheduleDrain = function () {
|
||||
setTimeout(nextTick, 0);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
var draining;
|
||||
var queue = [];
|
||||
//named nextTick for less confusing stack traces
|
||||
function nextTick() {
|
||||
draining = true;
|
||||
var i, oldQueue;
|
||||
var len = queue.length;
|
||||
while (len) {
|
||||
oldQueue = queue;
|
||||
queue = [];
|
||||
i = -1;
|
||||
while (++i < len) {
|
||||
oldQueue[i]();
|
||||
}
|
||||
len = queue.length;
|
||||
}
|
||||
draining = false;
|
||||
}
|
||||
|
||||
module.exports = immediate;
|
||||
function immediate(task) {
|
||||
if (queue.push(task) === 1 && !draining) {
|
||||
scheduleDrain();
|
||||
}
|
||||
}
|
||||
|
||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{}],3:[function(require,module,exports){
|
||||
(function (global){
|
||||
'use strict';
|
||||
var jsonp = require('./jsonp');
|
||||
var Promise = require('lie');
|
||||
|
||||
module.exports = function (url, options) {
|
||||
options = options || {};
|
||||
if (options.jsonp) {
|
||||
return jsonp(url, options);
|
||||
}
|
||||
var request;
|
||||
var cancel;
|
||||
var out = new Promise(function (resolve, reject) {
|
||||
cancel = reject;
|
||||
if (global.XMLHttpRequest === undefined) {
|
||||
reject('XMLHttpRequest is not supported');
|
||||
}
|
||||
var response;
|
||||
request = new global.XMLHttpRequest();
|
||||
request.open('GET', url);
|
||||
if (options.headers) {
|
||||
Object.keys(options.headers).forEach(function (key) {
|
||||
request.setRequestHeader(key, options.headers[key]);
|
||||
});
|
||||
}
|
||||
request.onreadystatechange = function () {
|
||||
if (request.readyState === 4) {
|
||||
if ((request.status < 400 && options.local) || request.status === 200) {
|
||||
if (global.JSON) {
|
||||
response = JSON.parse(request.responseText);
|
||||
} else {
|
||||
reject(new Error('JSON is not supported'));
|
||||
}
|
||||
resolve(response);
|
||||
} else {
|
||||
if (!request.status) {
|
||||
reject('Attempted cross origin request without CORS enabled');
|
||||
} else {
|
||||
reject(request.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
});
|
||||
out.catch(function (reason) {
|
||||
request.abort();
|
||||
return reason;
|
||||
});
|
||||
out.abort = cancel;
|
||||
return out;
|
||||
};
|
||||
|
||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{"./jsonp":5,"lie":1}],4:[function(require,module,exports){
|
||||
(function (global){
|
||||
'use strict';
|
||||
var L = global.L || require('leaflet');
|
||||
var Promise = require('lie');
|
||||
var ajax = require('./ajax');
|
||||
L.GeoJSON.AJAX = L.GeoJSON.extend({
|
||||
defaultAJAXparams: {
|
||||
dataType: 'json',
|
||||
callbackParam: 'callback',
|
||||
local: false,
|
||||
middleware: function (f) {
|
||||
return f;
|
||||
}
|
||||
},
|
||||
initialize: function (url, options) {
|
||||
this.urls = [];
|
||||
if (url) {
|
||||
if (typeof url === 'string') {
|
||||
this.urls.push(url);
|
||||
} else if (typeof url.pop === 'function') {
|
||||
this.urls = this.urls.concat(url);
|
||||
} else {
|
||||
options = url;
|
||||
url = undefined;
|
||||
}
|
||||
}
|
||||
var ajaxParams = L.Util.extend({}, this.defaultAJAXparams);
|
||||
|
||||
for (var i in options) {
|
||||
if (this.defaultAJAXparams.hasOwnProperty(i)) {
|
||||
ajaxParams[i] = options[i];
|
||||
}
|
||||
}
|
||||
this.ajaxParams = ajaxParams;
|
||||
this._layers = {};
|
||||
L.Util.setOptions(this, options);
|
||||
this.on('data:loaded', function () {
|
||||
if (this.filter) {
|
||||
this.refilter(this.filter);
|
||||
}
|
||||
}, this);
|
||||
var self = this;
|
||||
if (this.urls.length > 0) {
|
||||
new Promise(function (resolve) {
|
||||
resolve();
|
||||
}).then(function () {
|
||||
self.addUrl();
|
||||
});
|
||||
}
|
||||
},
|
||||
clearLayers: function () {
|
||||
this.urls = [];
|
||||
L.GeoJSON.prototype.clearLayers.call(this);
|
||||
return this;
|
||||
},
|
||||
addUrl: function (url) {
|
||||
var self = this;
|
||||
if (url) {
|
||||
if (typeof url === 'string') {
|
||||
self.urls.push(url);
|
||||
} else if (typeof url.pop === 'function') {
|
||||
self.urls = self.urls.concat(url);
|
||||
}
|
||||
}
|
||||
var loading = self.urls.length;
|
||||
var done = 0;
|
||||
self.fire('data:loading');
|
||||
self.urls.forEach(function (url) {
|
||||
if (self.ajaxParams.dataType.toLowerCase() === 'json') {
|
||||
ajax(url, self.ajaxParams).then(function (d) {
|
||||
var data = self.ajaxParams.middleware(d);
|
||||
self.addData(data);
|
||||
self.fire('data:progress', data);
|
||||
}, function (err) {
|
||||
self.fire('data:progress', {
|
||||
error: err
|
||||
});
|
||||
});
|
||||
} else if (self.ajaxParams.dataType.toLowerCase() === 'jsonp') {
|
||||
L.Util.jsonp(url, self.ajaxParams).then(function (d) {
|
||||
var data = self.ajaxParams.middleware(d);
|
||||
self.addData(data);
|
||||
self.fire('data:progress', data);
|
||||
}, function (err) {
|
||||
self.fire('data:progress', {
|
||||
error: err
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
self.on('data:progress', function () {
|
||||
if (++done === loading) {
|
||||
self.fire('data:loaded');
|
||||
}
|
||||
});
|
||||
},
|
||||
refresh: function (url) {
|
||||
url = url || this.urls;
|
||||
this.clearLayers();
|
||||
this.addUrl(url);
|
||||
},
|
||||
refilter: function (func) {
|
||||
if (typeof func !== 'function') {
|
||||
this.filter = false;
|
||||
this.eachLayer(function (a) {
|
||||
a.setStyle({
|
||||
stroke: true,
|
||||
clickable: true
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.filter = func;
|
||||
this.eachLayer(function (a) {
|
||||
if (func(a.feature)) {
|
||||
a.setStyle({
|
||||
stroke: true,
|
||||
clickable: true
|
||||
});
|
||||
} else {
|
||||
a.setStyle({
|
||||
stroke: false,
|
||||
clickable: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
L.Util.Promise = Promise;
|
||||
L.Util.ajax = ajax;
|
||||
L.Util.jsonp = require('./jsonp');
|
||||
L.geoJson.ajax = function (geojson, options) {
|
||||
return new L.GeoJSON.AJAX(geojson, options);
|
||||
};
|
||||
|
||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{"./ajax":3,"./jsonp":5,"leaflet":undefined,"lie":1}],5:[function(require,module,exports){
|
||||
(function (global){
|
||||
'use strict';
|
||||
var L = global.L || require('leaflet');
|
||||
var Promise = require('lie');
|
||||
|
||||
module.exports = function (url, options) {
|
||||
options = options || {};
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var scriptNode = L.DomUtil.create('script', '', head);
|
||||
var cbName, ourl, cbSuffix, cancel;
|
||||
var out = new Promise(function (resolve, reject) {
|
||||
cancel = reject;
|
||||
var cbParam = options.cbParam || 'callback';
|
||||
if (options.callbackName) {
|
||||
cbName = options.callbackName;
|
||||
} else {
|
||||
cbSuffix = '_' + ('' + Math.random()).slice(2);
|
||||
cbName = '_leafletJSONPcallbacks.' + cbSuffix;
|
||||
}
|
||||
scriptNode.type = 'text/javascript';
|
||||
if (cbSuffix) {
|
||||
if (!global._leafletJSONPcallbacks) {
|
||||
global._leafletJSONPcallbacks = {
|
||||
length: 0
|
||||
};
|
||||
}
|
||||
global._leafletJSONPcallbacks.length++;
|
||||
global._leafletJSONPcallbacks[cbSuffix] = function (data) {
|
||||
head.removeChild(scriptNode);
|
||||
delete global._leafletJSONPcallbacks[cbSuffix];
|
||||
global._leafletJSONPcallbacks.length--;
|
||||
if (!global._leafletJSONPcallbacks.length) {
|
||||
delete global._leafletJSONPcallbacks;
|
||||
}
|
||||
resolve(data);
|
||||
};
|
||||
}
|
||||
if (url.indexOf('?') === -1) {
|
||||
ourl = url + '?' + cbParam + '=' + cbName;
|
||||
} else {
|
||||
ourl = url + '&' + cbParam + '=' + cbName;
|
||||
}
|
||||
scriptNode.src = ourl;
|
||||
}).then(null, function (reason) {
|
||||
head.removeChild(scriptNode);
|
||||
delete L.Util.ajax.cb[cbSuffix];
|
||||
return reason;
|
||||
});
|
||||
out.abort = cancel;
|
||||
return out;
|
||||
};
|
||||
|
||||
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
||||
},{"leaflet":undefined,"lie":1}]},{},[4]);
|
||||
@@ -1 +0,0 @@
|
||||
.leaflet-control-minimap{border:rgba(255,255,255,1) solid;box-shadow:0 1px 5px rgba(0,0,0,.65);border-radius:3px;background:#f8f8f9;transition:all .6s}.leaflet-control-minimap a{background-color:rgba(255,255,255,1);background-repeat:no-repeat;z-index:99999;transition:all .6s}.leaflet-control-minimap a.minimized-bottomright{-webkit-transform:rotate(180deg);transform:rotate(180deg);border-radius:0}.leaflet-control-minimap a.minimized-topleft{-webkit-transform:rotate(0deg);transform:rotate(0deg);border-radius:0}.leaflet-control-minimap a.minimized-bottomleft{-webkit-transform:rotate(270deg);transform:rotate(270deg);border-radius:0}.leaflet-control-minimap a.minimized-topright{-webkit-transform:rotate(90deg);transform:rotate(90deg);border-radius:0}.leaflet-control-minimap-toggle-display{background-image:url(images/toggle.svg);background-size:cover;position:absolute;border-radius:3px 0 0}.leaflet-oldie .leaflet-control-minimap-toggle-display{background-image:url(images/toggle.png)}.leaflet-control-minimap-toggle-display-bottomright{bottom:0;right:0}.leaflet-control-minimap-toggle-display-topleft{top:0;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.leaflet-control-minimap-toggle-display-bottomleft{bottom:0;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.leaflet-control-minimap-toggle-display-topright{top:0;right:0;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.leaflet-oldie .leaflet-control-minimap{border:1px solid #999}.leaflet-oldie .leaflet-control-minimap a{background-color:#fff}.leaflet-oldie .leaflet-control-minimap a.minimized{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2)}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 219 B |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18"><defs><marker orient="auto" overflow="visible"><path d="M-2.6-2.828L-5.428 0-2.6 2.828.228 0-2.6-2.828z" fill-rule="evenodd" stroke="#000" stroke-width=".4pt"/></marker><marker orient="auto" overflow="visible"><g fill="none" stroke="#000" stroke-width=".8" stroke-linecap="round"><path d="M4.566 4.75L-.652 0"/><path d="M1.544 4.75L-3.674 0"/><path d="M-1.566 4.75L-6.784 0"/><path d="M4.566-5.013L-.652-.263"/><path d="M1.544-5.013l-5.218 4.75"/><path d="M-1.566-5.013l-5.218 4.75"/></g></marker><marker orient="auto" overflow="visible"><path d="M-5.6-5.657L-11.257 0-5.6 5.657.057 0-5.6-5.657z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M4.616 0l-6.92 4v-8l6.92 4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M-10.69-4.437L1.328-.017l-12.018 4.42c1.92-2.61 1.91-6.18 0-8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker><marker orient="auto" overflow="visible"><path d="M-4.616 0l6.92-4v8l-6.92-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10 0l4-4L0 0l14 4-4-4z" fill-rule="evenodd" stroke="#000" stroke-width=".8pt"/></marker><marker orient="auto" overflow="visible"><path d="M10.69 4.437L-1.328.017l12.018-4.42c-1.92 2.61-1.91 6.18 0 8.84z" font-size="12" fill-rule="evenodd" stroke-width=".6875" stroke-linejoin="round"/></marker></defs><path d="M13.18 13.146v-5.81l-5.81 5.81h5.81z" stroke="#000" stroke-width="1.643"/><path d="M12.762 12.727l-6.51-6.51" fill="none" stroke="#000" stroke-width="2.482" stroke-linecap="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
@@ -1,9 +0,0 @@
|
||||
.leaflet-container .leaflet-control-mouseposition {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 0 5px #bbb;
|
||||
padding: 0 5px;
|
||||
margin:0;
|
||||
color: #333;
|
||||
font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
L.Control.MousePosition = L.Control.extend({
|
||||
options: {
|
||||
position: 'bottomleft',
|
||||
separator: ' : ',
|
||||
emptyString: 'Unavailable',
|
||||
lngFirst: false,
|
||||
numDigits: 5,
|
||||
lngFormatter: undefined,
|
||||
latFormatter: undefined,
|
||||
prefix: ""
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
this._container = L.DomUtil.create('div', 'leaflet-control-mouseposition');
|
||||
L.DomEvent.disableClickPropagation(this._container);
|
||||
map.on('mousemove', this._onMouseMove, this);
|
||||
this._container.innerHTML=this.options.emptyString;
|
||||
return this._container;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
map.off('mousemove', this._onMouseMove)
|
||||
},
|
||||
|
||||
_onMouseMove: function (e) {
|
||||
var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
|
||||
var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits);
|
||||
var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
|
||||
var prefixAndValue = this.options.prefix + ' ' + value;
|
||||
this._container.innerHTML = prefixAndValue;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
L.Map.mergeOptions({
|
||||
positionControl: false
|
||||
});
|
||||
|
||||
L.Map.addInitHook(function () {
|
||||
if (this.options.positionControl) {
|
||||
this.positionControl = new L.Control.MousePosition();
|
||||
this.addControl(this.positionControl);
|
||||
}
|
||||
});
|
||||
|
||||
L.control.mousePosition = function (options) {
|
||||
return new L.Control.MousePosition(options);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
*.min.js
|
||||
@@ -1,19 +0,0 @@
|
||||
module.exports = {
|
||||
extends: 'eslint:recommended',
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { args: 'none' }]
|
||||
},
|
||||
overrides: [{
|
||||
files: ['gulpfile.js'],
|
||||
env: {
|
||||
browser: false,
|
||||
node: true,
|
||||
}
|
||||
}]
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
github: Turbo87
|
||||
custom: https://paypal.me/tobiasbieniek
|
||||
@@ -1,21 +0,0 @@
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
time: "04:00"
|
||||
open-pull-requests-limit: 10
|
||||
versioning-strategy: increase
|
||||
ignore:
|
||||
- dependency-name: eslint
|
||||
versions:
|
||||
- 7.18.0
|
||||
- 7.19.0
|
||||
- 7.20.0
|
||||
- 7.21.0
|
||||
- 7.22.0
|
||||
- 7.23.0
|
||||
- 7.24.0
|
||||
commit-message:
|
||||
prefix: ""
|
||||
@@ -1,20 +0,0 @@
|
||||
lib-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
|
||||
dist
|
||||
build
|
||||
|
||||
.eslintcache
|
||||
@@ -1,11 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'stylelint-scss',
|
||||
],
|
||||
extends: [
|
||||
'stylelint-config-recommended-scss',
|
||||
],
|
||||
rules: {
|
||||
'no-descending-specificity': null,
|
||||
},
|
||||
};
|
||||
@@ -1,24 +0,0 @@
|
||||
language: node_js
|
||||
node_js: stable
|
||||
|
||||
sudo: false
|
||||
|
||||
cache:
|
||||
yarn: true
|
||||
|
||||
before_install:
|
||||
- curl -o- -L https://yarnpkg.com/install.sh | bash
|
||||
- export PATH=$HOME/.yarn/bin:$PATH
|
||||
|
||||
install:
|
||||
- yarn install
|
||||
|
||||
script:
|
||||
- yarn lint:css
|
||||
- yarn lint:js
|
||||
|
||||
# build the processed/minified assets
|
||||
- yarn gulp
|
||||
|
||||
# check that they results match the committed state
|
||||
- git diff --exit-code
|
||||
@@ -1,44 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
## v0.4.0 (2017-10-25)
|
||||
|
||||
- ol3 version without jquery dependency ([#97](https://github.com/Turbo87/sidebar-v2/pull/97))
|
||||
- Allow non-tab links in the sidebar
|
||||
- add type definition for leaflet-sidebar ([#112](https://github.com/Turbo87/sidebar-v2/pull/112))
|
||||
- Remove reference to L.Mixin.Evented ([#124](https://github.com/Turbo87/sidebar-v2/pull/124))
|
||||
- Fix Chrome 62 list-style-type bug ([#127](https://github.com/Turbo87/sidebar-v2/pull/127))
|
||||
|
||||
## v0.3.1 (2016-11-01)
|
||||
|
||||
- fix `ol3` example map layer ([#77](https://github.com/Turbo87/sidebar-v2/pull/77))
|
||||
- leaflet: deprecate `removeFrom()` in favor of `remove()` ([#73](https://github.com/Turbo87/sidebar-v2/pull/73))
|
||||
- leaflet: allow non-tab links on the sidebar ([#87](https://github.com/Turbo87/sidebar-v2/pull/87))
|
||||
- leaflet: fix CDN location on example pages ([#94](https://github.com/Turbo87/sidebar-v2/pull/94))
|
||||
- ol3: move "scale-line" together with the zoom controls ([#93](https://github.com/Turbo87/sidebar-v2/pull/93))
|
||||
|
||||
## v0.3.0 (2016-01-19)
|
||||
|
||||
- ol2: move scale line control too when sidebar opens/closes
|
||||
- hide scrollbars when collapsed ([#21](https://github.com/Turbo87/sidebar-v2/issues/21))
|
||||
- fix tab clicking on devices with touch screen *and* mouse ([#34](https://github.com/Turbo87/sidebar-v2/issues/35))
|
||||
- new `.sidebar-header` CSS class for styled headings
|
||||
- new `.sidebar-close` CSS class for close buttons in headings
|
||||
- fix broken Google Maps code (until Google changes things again...)
|
||||
- allow `.disabled` on `<li>` elements in `.sidebar-tabs` element
|
||||
- allow second tabbar at the bottom
|
||||
- new `position: 'right'` option
|
||||
|
||||
|
||||
## v0.2.1 (2014-09-29)
|
||||
|
||||
- ol2, ol3: fixed sidebar content scrolling
|
||||
|
||||
|
||||
## v0.2.0 (2014-09-29)
|
||||
|
||||
- jQuery API and events
|
||||
|
||||
|
||||
## v0.1.0 (2014-09-12)
|
||||
|
||||
- first beta release
|
||||
@@ -1,20 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Tobias Bieniek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -1,42 +0,0 @@
|
||||
# sidebar-v2
|
||||
|
||||
A responsive sidebar for mapping libraries like [Leaflet](#leaflet) or [OpenLayers](#openlayers-3).
|
||||
|
||||
It is more or less a successor of the [leaflet-sidebar](https://github.com/turbo87/leaflet-sidebar/) plugin, thus the `v2` suffix.
|
||||
|
||||
<a href="https://flattr.com/submit/auto?user_id=turbo&url=https%3A%2F%2Fgithub.com%2FTurbo87%2Fsidebar-v2" target="_blank"><img src="https://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a>
|
||||
|
||||
|
||||
|
||||
|
||||
## [Leaflet](http://leafletjs.com/)
|
||||
|
||||
 
|
||||
|
||||
Example code at [`examples/index.html`](examples/index.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/index.html))
|
||||
|
||||
|
||||
## [OpenLayers 3](http://openlayers.org/)
|
||||
|
||||
 
|
||||
|
||||
Example code at [`examples/ol3.html`](examples/ol3.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol3.html))
|
||||
|
||||
|
||||
## [OpenLayers 2](http://openlayers.org/two/)
|
||||
|
||||
 
|
||||
|
||||
Example code at [`examples/ol2.html`](examples/ol2.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/ol2.html))
|
||||
|
||||
|
||||
## [Google Maps](https://developers.google.com/maps/)
|
||||
|
||||
 
|
||||
|
||||
Example code at [`examples/gmaps.html`](examples/gmaps.html) ([Preview](http://turbo87.github.io/sidebar-v2/examples/gmaps.html))
|
||||
|
||||
|
||||
## License
|
||||
|
||||
sidebar-v2 is free software, and may be redistributed under the [MIT license](LICENSE).
|
||||
@@ -1,30 +0,0 @@
|
||||
{
|
||||
"name": "sidebar-v2",
|
||||
"version": "0.3.1",
|
||||
"homepage": "https://github.com/Turbo87/sidebar-v2",
|
||||
"authors": [
|
||||
"Tobias Bieniek <tobias.bieniek@qsc.de>"
|
||||
],
|
||||
"description": "A responsive sidebar for mapping libraries like Leaflet or OpenLayers",
|
||||
"main": [
|
||||
"css/gmaps-sidebar.css",
|
||||
"css/leaflet-sidebar.css",
|
||||
"css/ol2-sidebar.css",
|
||||
"css/ol3-sidebar.css",
|
||||
"js/jquery-sidebar.js",
|
||||
"js/leaflet-sidebar.js",
|
||||
"js/ol3-sidebar.js"
|
||||
],
|
||||
"keywords": [
|
||||
"gis",
|
||||
"leaflet",
|
||||
"openlayers",
|
||||
"map"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"doc",
|
||||
"examples",
|
||||
".gitignore"
|
||||
]
|
||||
}
|
||||
@@ -1,205 +0,0 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000; }
|
||||
.sidebar.collapsed {
|
||||
width: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
transition: width 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar {
|
||||
width: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar {
|
||||
width: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 460px; } }
|
||||
|
||||
.sidebar-left {
|
||||
left: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
left: 10px; } }
|
||||
|
||||
.sidebar-right {
|
||||
right: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
right: 10px; } }
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background-color: #fff; }
|
||||
.sidebar-left .sidebar-tabs {
|
||||
left: 0; }
|
||||
.sidebar-right .sidebar-tabs {
|
||||
right: 0; }
|
||||
.sidebar-tabs, .sidebar-tabs > ul {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #666;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
transition: all 80ms; }
|
||||
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||
color: #000;
|
||||
background-color: #fff9e6; }
|
||||
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||
color: #000;
|
||||
background-color: #febf00; }
|
||||
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||
color: rgba(102, 102, 102, 0.4); }
|
||||
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||
background: transparent; }
|
||||
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||
cursor: default; }
|
||||
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center; }
|
||||
.sidebar-tabs > ul + ul {
|
||||
bottom: 0; }
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
.sidebar-left .sidebar-content {
|
||||
left: 40px;
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-content {
|
||||
left: 0;
|
||||
right: 40px; }
|
||||
.sidebar.collapsed > .sidebar-content {
|
||||
overflow-y: hidden; }
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px; }
|
||||
.sidebar-pane.active {
|
||||
display: block; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-pane {
|
||||
min-width: 265px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-pane {
|
||||
min-width: 350px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-pane {
|
||||
min-width: 420px; } }
|
||||
|
||||
.sidebar-header {
|
||||
margin: -10px -20px 0;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
font-size: 14.4pt;
|
||||
color: #000;
|
||||
background-color: #febf00; }
|
||||
.sidebar-right .sidebar-header {
|
||||
padding-left: 40px; }
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.sidebar-left .sidebar-close {
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-close {
|
||||
left: 0; }
|
||||
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 0; } }
|
||||
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 0; } }
|
||||
|
||||
.sidebar {
|
||||
border-right: 0;
|
||||
box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
border: 0;
|
||||
border-radius: 2px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
bottom: 35px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
transition: margin-left 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: 325px !important; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: 410px !important; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-left ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: 480px !important; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: 60px !important; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
bottom: 24px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
transition: margin-right 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: 325px !important; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: 410px !important; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-right ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: 480px !important; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: 60px !important; } }
|
||||
@@ -1 +0,0 @@
|
||||
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;border-right:0;box-shadow:rgba(0,0,0,.298039) 0 1px 4px -1px}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#666;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#fff9e6}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#000;background-color:#febf00}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(102,102,102,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#000;background-color:#febf00}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:325px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:325px!important}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:410px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:410px!important}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:480px!important}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:480px!important}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border:0;border-radius:2px}.sidebar-left{bottom:35px}.sidebar-left~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="left: 0px"]{margin-left:60px!important}.sidebar-right{bottom:24px}.sidebar-right~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .gm-style>div.gmnoprint[style*="right: 28px"]{margin-right:60px!important}}
|
||||
@@ -1,200 +0,0 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000; }
|
||||
.sidebar.collapsed {
|
||||
width: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
transition: width 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar {
|
||||
width: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar {
|
||||
width: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 460px; } }
|
||||
|
||||
.sidebar-left {
|
||||
left: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
left: 10px; } }
|
||||
|
||||
.sidebar-right {
|
||||
right: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
right: 10px; } }
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background-color: #fff; }
|
||||
.sidebar-left .sidebar-tabs {
|
||||
left: 0; }
|
||||
.sidebar-right .sidebar-tabs {
|
||||
right: 0; }
|
||||
.sidebar-tabs, .sidebar-tabs > ul {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #333;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
transition: all 80ms; }
|
||||
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||
color: #000;
|
||||
background-color: #eee; }
|
||||
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||
color: rgba(51, 51, 51, 0.4); }
|
||||
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||
background: transparent; }
|
||||
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||
cursor: default; }
|
||||
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center; }
|
||||
.sidebar-tabs > ul + ul {
|
||||
bottom: 0; }
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
.sidebar-left .sidebar-content {
|
||||
left: 40px;
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-content {
|
||||
left: 0;
|
||||
right: 40px; }
|
||||
.sidebar.collapsed > .sidebar-content {
|
||||
overflow-y: hidden; }
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px; }
|
||||
.sidebar-pane.active {
|
||||
display: block; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-pane {
|
||||
min-width: 265px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-pane {
|
||||
min-width: 350px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-pane {
|
||||
min-width: 420px; } }
|
||||
|
||||
.sidebar-header {
|
||||
margin: -10px -20px 0;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
font-size: 14.4pt;
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-right .sidebar-header {
|
||||
padding-left: 40px; }
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.sidebar-left .sidebar-close {
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-close {
|
||||
left: 0; }
|
||||
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 0; } }
|
||||
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 0; } }
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
|
||||
.sidebar.leaflet-touch {
|
||||
box-shadow: none;
|
||||
border-right: 2px solid rgba(0, 0, 0, 0.2); }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
border-radius: 4px; }
|
||||
.sidebar.leaflet-touch {
|
||||
border: 2px solid rgba(0, 0, 0, 0.2); } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
transition: left 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 315px; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 400px; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 470px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
|
||||
left: 50px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
transition: right 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 315px; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 400px; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 470px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
|
||||
right: 50px; } }
|
||||
@@ -1 +0,0 @@
|
||||
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;box-shadow:0 1px 5px rgba(0,0,0,.65)}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#333;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#eee}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(51,51,51,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}.sidebar.leaflet-touch{box-shadow:none;border-right:2px solid rgba(0,0,0,.2)}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .leaflet-left{left:315px}.sidebar-right~.sidebar-map .leaflet-right{right:315px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .leaflet-left{left:400px}.sidebar-right~.sidebar-map .leaflet-right{right:400px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .leaflet-left{left:470px}.sidebar-right~.sidebar-map .leaflet-right{right:470px}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border-radius:4px}.sidebar.leaflet-touch{border:2px solid rgba(0,0,0,.2)}.sidebar-left~.sidebar-map .leaflet-left{transition:left .5s}.sidebar-left.collapsed~.sidebar-map .leaflet-left{left:50px}.sidebar-right~.sidebar-map .leaflet-right{transition:right .5s}.sidebar-right.collapsed~.sidebar-map .leaflet-right{right:50px}}
|
||||
@@ -1,218 +0,0 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000; }
|
||||
.sidebar.collapsed {
|
||||
width: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
transition: width 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar {
|
||||
width: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar {
|
||||
width: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 460px; } }
|
||||
|
||||
.sidebar-left {
|
||||
left: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
left: 8px; } }
|
||||
|
||||
.sidebar-right {
|
||||
right: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
right: 8px; } }
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 60, 136, 0.5); }
|
||||
.sidebar-left .sidebar-tabs {
|
||||
left: 0; }
|
||||
.sidebar-right .sidebar-tabs {
|
||||
right: 0; }
|
||||
.sidebar-tabs, .sidebar-tabs > ul {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
transition: all 80ms; }
|
||||
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 60, 136, 0.6); }
|
||||
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||
color: rgba(255, 255, 255, 0.4); }
|
||||
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||
background: transparent; }
|
||||
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||
cursor: default; }
|
||||
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center; }
|
||||
.sidebar-tabs > ul + ul {
|
||||
bottom: 0; }
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
.sidebar-left .sidebar-content {
|
||||
left: 40px;
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-content {
|
||||
left: 0;
|
||||
right: 40px; }
|
||||
.sidebar.collapsed > .sidebar-content {
|
||||
overflow-y: hidden; }
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px; }
|
||||
.sidebar-pane.active {
|
||||
display: block; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-pane {
|
||||
min-width: 265px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-pane {
|
||||
min-width: 350px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-pane {
|
||||
min-width: 420px; } }
|
||||
|
||||
.sidebar-header {
|
||||
margin: -10px -20px 0;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
font-size: 14.4pt;
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-right .sidebar-header {
|
||||
padding-left: 40px; }
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.sidebar-left .sidebar-close {
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-close {
|
||||
left: 0; }
|
||||
|
||||
.sidebar {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 4px; } }
|
||||
|
||||
.sidebar-left {
|
||||
border-right: 3px solid transparent; }
|
||||
|
||||
.sidebar-right {
|
||||
border-left: 3px solid transparent; }
|
||||
|
||||
.sidebar-tabs {
|
||||
overflow: hidden; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-tabs {
|
||||
border-radius: 4px 0 0 4px; }
|
||||
.collapsed .sidebar-tabs {
|
||||
border-radius: 4px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-content {
|
||||
border-radius: 0 4px 4px 0; } }
|
||||
|
||||
.sidebar-left ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left ~ .sidebar-map .olScaleLine {
|
||||
margin-left: 46px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left ~ .sidebar-map .olScaleLine {
|
||||
transition: margin-left 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-left ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left ~ .sidebar-map .olScaleLine {
|
||||
margin-left: 319px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-left ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left ~ .sidebar-map .olScaleLine {
|
||||
margin-left: 404px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-left ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left ~ .sidebar-map .olScaleLine {
|
||||
margin-left: 474px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left.collapsed ~ .sidebar-map .olControlZoom,
|
||||
.sidebar-left.collapsed ~ .sidebar-map .olScaleLine {
|
||||
margin-left: 54px; } }
|
||||
|
||||
.sidebar-right ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right ~ .sidebar-map .olControlMousePosition {
|
||||
margin-right: 46px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right ~ .sidebar-map .olControlMousePosition {
|
||||
transition: margin-right 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-right ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right ~ .sidebar-map .olControlMousePosition {
|
||||
margin-right: 319px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-right ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right ~ .sidebar-map .olControlMousePosition {
|
||||
margin-right: 404px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-right ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right ~ .sidebar-map .olControlMousePosition {
|
||||
margin-right: 474px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right.collapsed ~ .sidebar-map .olControlAttribution,
|
||||
.sidebar-right.collapsed ~ .sidebar-map .olControlPermalink,
|
||||
.sidebar-right.collapsed ~ .sidebar-map .olControlMousePosition {
|
||||
margin-right: 54px; } }
|
||||
@@ -1 +0,0 @@
|
||||
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:8px;bottom:8px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:8px}.sidebar-right{right:8px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:46px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:319px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:319px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:404px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:404px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{margin-left:474px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{margin-right:474px}}@media (min-width:768px){.sidebar-tabs{border-radius:4px 0 0 4px}.collapsed .sidebar-tabs{border-radius:4px}.sidebar-content{border-radius:0 4px 4px 0}.sidebar-left~.sidebar-map .olControlZoom,.sidebar-left~.sidebar-map .olScaleLine{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .olControlZoom,.sidebar-left.collapsed~.sidebar-map .olScaleLine{margin-left:54px}.sidebar-right~.sidebar-map .olControlAttribution,.sidebar-right~.sidebar-map .olControlMousePosition,.sidebar-right~.sidebar-map .olControlPermalink{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .olControlAttribution,.sidebar-right.collapsed~.sidebar-map .olControlMousePosition,.sidebar-right.collapsed~.sidebar-map .olControlPermalink{margin-right:54px}}
|
||||
@@ -1,212 +0,0 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000; }
|
||||
.sidebar.collapsed {
|
||||
width: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
transition: width 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar {
|
||||
width: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar {
|
||||
width: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 460px; } }
|
||||
|
||||
.sidebar-left {
|
||||
left: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
left: 6px; } }
|
||||
|
||||
.sidebar-right {
|
||||
right: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
right: 6px; } }
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 60, 136, 0.5); }
|
||||
.sidebar-left .sidebar-tabs {
|
||||
left: 0; }
|
||||
.sidebar-right .sidebar-tabs {
|
||||
right: 0; }
|
||||
.sidebar-tabs, .sidebar-tabs > ul {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
transition: all 80ms; }
|
||||
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 60, 136, 0.6); }
|
||||
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||
color: rgba(255, 255, 255, 0.4); }
|
||||
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||
background: transparent; }
|
||||
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||
cursor: default; }
|
||||
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center; }
|
||||
.sidebar-tabs > ul + ul {
|
||||
bottom: 0; }
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
.sidebar-left .sidebar-content {
|
||||
left: 40px;
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-content {
|
||||
left: 0;
|
||||
right: 40px; }
|
||||
.sidebar.collapsed > .sidebar-content {
|
||||
overflow-y: hidden; }
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px; }
|
||||
.sidebar-pane.active {
|
||||
display: block; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-pane {
|
||||
min-width: 265px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-pane {
|
||||
min-width: 350px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-pane {
|
||||
min-width: 420px; } }
|
||||
|
||||
.sidebar-header {
|
||||
margin: -10px -20px 0;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
font-size: 14.4pt;
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-right .sidebar-header {
|
||||
padding-left: 40px; }
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.sidebar-left .sidebar-close {
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-close {
|
||||
left: 0; }
|
||||
|
||||
.sidebar {
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
border: 3px solid transparent;
|
||||
border-radius: 4px; } }
|
||||
|
||||
.sidebar-left {
|
||||
border-right: 3px solid transparent; }
|
||||
|
||||
.sidebar-right {
|
||||
border-left: 3px solid transparent; }
|
||||
|
||||
.sidebar-tabs {
|
||||
overflow: hidden; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-tabs {
|
||||
border-radius: 2px 0 0 2px; }
|
||||
.collapsed .sidebar-tabs {
|
||||
border-radius: 2px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-content {
|
||||
border-radius: 0 2px 2px 0; } }
|
||||
|
||||
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
|
||||
margin-left: 46px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
|
||||
transition: margin-left 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
|
||||
margin-left: 317px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
|
||||
margin-left: 402px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-left ~ .sidebar-map .ol-zoom, .sidebar-left ~ .sidebar-map .ol-scale-line {
|
||||
margin-left: 472px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left.collapsed ~ .sidebar-map .ol-zoom, .sidebar-left.collapsed ~ .sidebar-map .ol-scale-line {
|
||||
margin-left: 52px; } }
|
||||
|
||||
.sidebar-right ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right ~ .sidebar-map .ol-full-screen {
|
||||
margin-right: 46px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right ~ .sidebar-map .ol-full-screen {
|
||||
transition: margin-right 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-right ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right ~ .sidebar-map .ol-full-screen {
|
||||
margin-right: 317px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-right ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right ~ .sidebar-map .ol-full-screen {
|
||||
margin-right: 402px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-right ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right ~ .sidebar-map .ol-full-screen {
|
||||
margin-right: 472px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right.collapsed ~ .sidebar-map .ol-rotate,
|
||||
.sidebar-right.collapsed ~ .sidebar-map .ol-attribution,
|
||||
.sidebar-right.collapsed ~ .sidebar-map .ol-full-screen {
|
||||
margin-right: 52px; } }
|
||||
@@ -1 +0,0 @@
|
||||
.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0;border-right:3px solid transparent}.sidebar-right{right:0;border-left:3px solid transparent}@media (min-width:768px){.sidebar{top:6px;bottom:6px;transition:width .5s;border:3px solid transparent;border-radius:4px}.sidebar-left{left:6px}.sidebar-right{right:6px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:rgba(0,60,136,.5)}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0;list-style-type:none}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#fff;font-size:12pt;overflow:hidden;transition:80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#fff;background-color:rgba(0,60,136,.6)}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(255,255,255,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar{background-color:rgba(255,255,255,.4)}.sidebar-tabs{overflow:hidden}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:46px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:46px}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:317px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:317px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:402px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:402px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{margin-left:472px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{margin-right:472px}}@media (min-width:768px){.sidebar-tabs{border-radius:2px 0 0 2px}.collapsed .sidebar-tabs{border-radius:2px}.sidebar-content{border-radius:0 2px 2px 0}.sidebar-left~.sidebar-map .ol-scale-line,.sidebar-left~.sidebar-map .ol-zoom{transition:margin-left .5s}.sidebar-left.collapsed~.sidebar-map .ol-scale-line,.sidebar-left.collapsed~.sidebar-map .ol-zoom{margin-left:52px}.sidebar-right~.sidebar-map .ol-attribution,.sidebar-right~.sidebar-map .ol-full-screen,.sidebar-right~.sidebar-map .ol-rotate{transition:margin-right .5s}.sidebar-right.collapsed~.sidebar-map .ol-attribution,.sidebar-right.collapsed~.sidebar-map .ol-full-screen,.sidebar-right.collapsed~.sidebar-map .ol-rotate{margin-right:52px}}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 559 KiB |
@@ -1,202 +0,0 @@
|
||||
# sidebar-v2 Documentation
|
||||
|
||||
## Installation
|
||||
|
||||
### NPM
|
||||
|
||||
```
|
||||
npm install sidebar-v2 --save
|
||||
```
|
||||
|
||||
### CDN hosted
|
||||
|
||||
OpenLayers 3+
|
||||
|
||||
```HTML
|
||||
<!-- inside the <head> element -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Turbo87/sidebar-v2@v0.4.0/css/ol3-sidebar.css">
|
||||
<!-- at the end of the <body> element -->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Turbo87/sidebar-v2@v0.4.0/js/ol3-sidebar.js"></script>
|
||||
```
|
||||
|
||||
### Self hosted
|
||||
|
||||
Download the [latest release](https://github.com/Turbo87/sidebar-v2/releases/latest),
|
||||
unpack the downloaded file, and load the CSS and JavaScript into your
|
||||
document, for instance (OpenLayers 3+):
|
||||
|
||||
```HTML
|
||||
<!-- inside the <head> element -->
|
||||
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
|
||||
<!-- at the end of the <body> element -->
|
||||
<script type="text/javascript" src="sidebar-v2/js/ol3-sidebar.js"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
In your HTML ensure that you have loaded the
|
||||
[OpenLayers](https://openlayers.org/) and `sidebar-v2` CSS. In the example
|
||||
code below we also use [FontAwesome](https://fontawesome.com/) so that nice
|
||||
symbols can be used for the sidebar's buttons.
|
||||
|
||||
```HTML
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
Then create the `div` element within the HTML `body` for the map similarly
|
||||
to how one would for plain OpenLayers maps. However note that you need to
|
||||
use `class="sidebar-map"` instead of `class="map"` and the map `div` needs
|
||||
to *follow* the `div` for the sidebar:
|
||||
|
||||
```HTML
|
||||
<!-- follows sidebar div -->
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
```
|
||||
|
||||
Now define the sidebar (by default in a collapsed state) via the `sidebar`
|
||||
and `collapsed` classes:
|
||||
|
||||
```HTML
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
</div>
|
||||
```
|
||||
|
||||
Each sidebar element consists of a navigation tab connected to a tab pane
|
||||
containing the content of the sidebar element.
|
||||
|
||||
The navigation tabs are a simple unordered list of anchors linking to the
|
||||
respective tab pane:
|
||||
|
||||
```HTML
|
||||
<!-- navigation tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
The content of a given tab is contained in a sidebar tab pane (note the `id`
|
||||
attribute pointing back to the relevant navigation tab). A pane includes a
|
||||
header (via the `sidebar-header` class), which contains the `span` element
|
||||
needed to close the pane, and then simple HTML text, for instance `p`
|
||||
elements:
|
||||
|
||||
```HTML
|
||||
<!-- tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
Pane header text
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>Pane text</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Now that the HTML has been set up, we can add the sidebar to the OpenLayers
|
||||
map within JavaScript by adding a `script` element at the end of the `body`.
|
||||
|
||||
Don't forget to load the OpenLayers and sidebar-v2 JavaScript:
|
||||
|
||||
```HTML
|
||||
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.2/build/ol.js"></script>
|
||||
<script src="sidebar-v2/js/ol3-sidebar.js"></script>
|
||||
```
|
||||
|
||||
Then set up the OpenLayers map, in this case using an
|
||||
[OpenStreetMap](https://www.openstreetmap.org/) source:
|
||||
|
||||
```HTML
|
||||
<script>
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
To add the sidebar, simply create a new `Sidebar` object which links to the
|
||||
sidebar `div` created above, and then add it as a new control to the map:
|
||||
|
||||
```javascript
|
||||
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
|
||||
map.addControl(sidebar);
|
||||
```
|
||||
|
||||
Putting it all together we get:
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 usage example</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="sidebar-v2/css/ol3-sidebar.css">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- navigation tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
Pane header text
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>Pane text</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
|
||||
<script src="sidebar-v2/js/ol3-sidebar.js" type="text/javascript"></script>
|
||||
<script>
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
|
||||
map.addControl(sidebar);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
For a more complete examples, have a look at the files in the `examples/`
|
||||
directory of the distribution.
|
||||
@@ -1,99 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 example</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/gmaps-sidebar.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.lorem {
|
||||
font-style: italic;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="initialize()">
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- Nav tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
||||
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist">
|
||||
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
sidebar-v2
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="profile">
|
||||
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="messages">
|
||||
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="settings">
|
||||
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
|
||||
<script src="../js/jquery-sidebar.js"></script>
|
||||
|
||||
<script>
|
||||
function initialize() {
|
||||
var map = new google.maps.Map(document.getElementById("map"), {
|
||||
center: new google.maps.LatLng(51.2, 7),
|
||||
zoom: 5,
|
||||
mapTypeId: google.maps.MapTypeId.TERRAIN,
|
||||
});
|
||||
}
|
||||
|
||||
var sidebar = $('#sidebar').sidebar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,102 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 example</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/leaflet-sidebar.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.lorem {
|
||||
font-style: italic;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- Nav tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
||||
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist">
|
||||
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
sidebar-v2
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="profile">
|
||||
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="messages">
|
||||
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="settings">
|
||||
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
|
||||
<script src="../js/leaflet-sidebar.js"></script>
|
||||
|
||||
<script>
|
||||
var map = L.map('map');
|
||||
map.setView([51.2, 7], 9);
|
||||
|
||||
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
var marker = L.marker([51.2, 7]).addTo(map);
|
||||
|
||||
var sidebar = L.control.sidebar('sidebar').addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,103 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 example</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/ol2-sidebar.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.lorem {
|
||||
font-style: italic;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- Nav tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
||||
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist">
|
||||
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
sidebar-v2
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="profile">
|
||||
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="messages">
|
||||
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="settings">
|
||||
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 5000" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script src="https://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
|
||||
<script src="../js/jquery-sidebar.js"></script>
|
||||
|
||||
<script>
|
||||
var map = new OpenLayers.Map('map');
|
||||
|
||||
var wms = new OpenLayers.Layer.WMS(
|
||||
"OpenLayers WMS",
|
||||
"http://vmap0.tiles.osgeo.org/wms/vmap0", {
|
||||
layers: 'basic'
|
||||
});
|
||||
|
||||
map.addLayer(wms);
|
||||
map.setCenter([7, 51.2], 6);
|
||||
|
||||
var sidebar = $('#sidebar').sidebar();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,107 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 example</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../css/ol3-sidebar.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.lorem {
|
||||
font-style: italic;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- Nav tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
||||
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist">
|
||||
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
sidebar-v2
|
||||
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="profile">
|
||||
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="messages">
|
||||
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="settings">
|
||||
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
|
||||
<script src="../js/ol3-sidebar.js"></script>
|
||||
|
||||
<script>
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' });
|
||||
|
||||
map.addControl(sidebar);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,102 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>sidebar-v2 example</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
|
||||
<!--[if lte IE 8]><link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
|
||||
|
||||
<link rel="stylesheet" href="../css/leaflet-sidebar.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body, #map {
|
||||
height: 100%;
|
||||
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.lorem {
|
||||
font-style: italic;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<!-- Nav tabs -->
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
|
||||
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
|
||||
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<ul role="tablist">
|
||||
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tab panes -->
|
||||
<div class="sidebar-content">
|
||||
<div class="sidebar-pane" id="home">
|
||||
<h1 class="sidebar-header">
|
||||
sidebar-v2
|
||||
<span class="sidebar-close"><i class="fa fa-caret-right"></i></span>
|
||||
</h1>
|
||||
|
||||
<p>A responsive sidebar for mapping libraries like <a href="http://leafletjs.com/">Leaflet</a> or <a href="http://openlayers.org/">OpenLayers</a>.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="profile">
|
||||
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="messages">
|
||||
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="settings">
|
||||
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<a href="https://github.com/Turbo87/sidebar-v2/"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
|
||||
<script src="../js/leaflet-sidebar.js"></script>
|
||||
|
||||
<script>
|
||||
var map = L.map('map');
|
||||
map.setView([51.2, 7], 9);
|
||||
|
||||
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © OpenStreetMap contributors'
|
||||
}).addTo(map);
|
||||
|
||||
var marker = L.marker([51.2, 7]).addTo(map);
|
||||
|
||||
var sidebar = L.control.sidebar('sidebar', {position: 'right'}).addTo(map);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
var gulp = require('gulp');
|
||||
var cleanCSS = require('gulp-clean-css');
|
||||
var sass = require('gulp-sass');
|
||||
var rename = require('gulp-rename');
|
||||
var uglify = require('gulp-uglify');
|
||||
|
||||
// SASS compilation
|
||||
gulp.task('sass', function() {
|
||||
return gulp.src('scss/*sidebar.scss')
|
||||
.pipe(sass())
|
||||
.on('error', sass.logError)
|
||||
.pipe(gulp.dest('css'));
|
||||
});
|
||||
|
||||
// Minify JS + CSS
|
||||
gulp.task('minify:js', function() {
|
||||
return gulp.src('js/*sidebar.js')
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(uglify())
|
||||
.pipe(gulp.dest('js'));
|
||||
});
|
||||
|
||||
gulp.task('minify:css', gulp.series('sass', function() {
|
||||
return gulp.src('css/*sidebar.css')
|
||||
.pipe(rename({ suffix: '.min' }))
|
||||
.pipe(cleanCSS({level: 2}))
|
||||
.pipe(gulp.dest('css'));
|
||||
}));
|
||||
|
||||
gulp.task('minify', gulp.parallel('minify:js', 'minify:css'));
|
||||
|
||||
// Watch JS + CSS Files
|
||||
gulp.task('watch', gulp.series('minify', function() {
|
||||
gulp.watch('js/*.js', ['minify:js']);
|
||||
gulp.watch('scss/*.scss', ['minify:css']);
|
||||
}));
|
||||
|
||||
// Default
|
||||
gulp.task('default', gulp.series('minify'));
|
||||
@@ -1,84 +0,0 @@
|
||||
/* global $ */
|
||||
|
||||
/**
|
||||
* Create a new sidebar on this jQuery object.
|
||||
*
|
||||
* @example
|
||||
* var sidebar = $('#sidebar').sidebar();
|
||||
*
|
||||
* @param {Object} [options] - Optional options object
|
||||
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||
* @returns {jQuery}
|
||||
*/
|
||||
$.fn.sidebar = function(options) {
|
||||
var $sidebar = this;
|
||||
var $tabs = $sidebar.find('ul.sidebar-tabs, .sidebar-tabs > ul');
|
||||
var $container = $sidebar.children('.sidebar-content').first();
|
||||
|
||||
options = $.extend({
|
||||
position: 'left'
|
||||
}, options || {});
|
||||
|
||||
$sidebar.addClass('sidebar-' + options.position);
|
||||
|
||||
$tabs.children('li').children('a[href^="#"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
var $tab = $(this).closest('li');
|
||||
|
||||
if ($tab.hasClass('active'))
|
||||
$sidebar.close();
|
||||
else if (!$tab.hasClass('disabled'))
|
||||
$sidebar.open(this.hash.slice(1), $tab);
|
||||
});
|
||||
|
||||
$sidebar.find('.sidebar-close').on('click', function() {
|
||||
$sidebar.close();
|
||||
});
|
||||
|
||||
/**
|
||||
* Open sidebar (if necessary) and show the specified tab.
|
||||
*
|
||||
* @param {string} id - The id of the tab to show (without the # character)
|
||||
* @param {jQuery} [$tab] - The jQuery object representing the tab node (used internally for efficiency)
|
||||
*/
|
||||
$sidebar.open = function(id, $tab) {
|
||||
if (typeof $tab === 'undefined')
|
||||
$tab = $tabs.find('li > a[href="#' + id + '"]').parent();
|
||||
|
||||
// hide old active contents
|
||||
$container.children('.sidebar-pane.active').removeClass('active');
|
||||
|
||||
// show new content
|
||||
$container.children('#' + id).addClass('active');
|
||||
|
||||
// remove old active highlights
|
||||
$tabs.children('li.active').removeClass('active');
|
||||
|
||||
// set new highlight
|
||||
$tab.addClass('active');
|
||||
|
||||
$sidebar.trigger('content', { 'id': id });
|
||||
|
||||
if ($sidebar.hasClass('collapsed')) {
|
||||
// open sidebar
|
||||
$sidebar.trigger('opening');
|
||||
$sidebar.removeClass('collapsed');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Close the sidebar (if necessary).
|
||||
*/
|
||||
$sidebar.close = function() {
|
||||
// remove old active highlights
|
||||
$tabs.children('li.active').removeClass('active');
|
||||
|
||||
if (!$sidebar.hasClass('collapsed')) {
|
||||
// close sidebar
|
||||
$sidebar.trigger('closing');
|
||||
$sidebar.addClass('collapsed');
|
||||
}
|
||||
};
|
||||
|
||||
return $sidebar;
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
$.fn.sidebar=function(e){var s=this,i=s.find("ul.sidebar-tabs, .sidebar-tabs > ul"),a=s.children(".sidebar-content").first();return e=$.extend({position:"left"},e||{}),s.addClass("sidebar-"+e.position),i.children("li").children('a[href^="#"]').on("click",function(e){e.preventDefault();var i=$(this).closest("li");i.hasClass("active")?s.close():i.hasClass("disabled")||s.open(this.hash.slice(1),i)}),s.find(".sidebar-close").on("click",function(){s.close()}),s.open=function(e,l){void 0===l&&(l=i.find('li > a[href="#'+e+'"]').parent()),a.children(".sidebar-pane.active").removeClass("active"),a.children("#"+e).addClass("active"),i.children("li.active").removeClass("active"),l.addClass("active"),s.trigger("content",{id:e}),s.hasClass("collapsed")&&(s.trigger("opening"),s.removeClass("collapsed"))},s.close=function(){i.children("li.active").removeClass("active"),s.hasClass("collapsed")||(s.trigger("closing"),s.addClass("collapsed"))},s};
|
||||
@@ -1,216 +0,0 @@
|
||||
/* global L */
|
||||
|
||||
/**
|
||||
* @name Sidebar
|
||||
* @class L.Control.Sidebar
|
||||
* @extends L.Control
|
||||
* @param {string} id - The id of the sidebar element (without the # character)
|
||||
* @param {Object} [options] - Optional options object
|
||||
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||
* @see L.control.sidebar
|
||||
*/
|
||||
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
|
||||
includes: (L.Evented.prototype || L.Mixin.Events),
|
||||
|
||||
options: {
|
||||
position: 'left'
|
||||
},
|
||||
|
||||
initialize: function (id, options) {
|
||||
var i, child;
|
||||
|
||||
L.setOptions(this, options);
|
||||
|
||||
// Find sidebar HTMLElement
|
||||
this._sidebar = L.DomUtil.get(id);
|
||||
|
||||
// Attach .sidebar-left/right class
|
||||
L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
|
||||
|
||||
// Attach touch styling if necessary
|
||||
if (L.Browser.touch)
|
||||
L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
|
||||
|
||||
// Find sidebar > div.sidebar-content
|
||||
for (i = this._sidebar.children.length - 1; i >= 0; i--) {
|
||||
child = this._sidebar.children[i];
|
||||
if (child.tagName == 'DIV' &&
|
||||
L.DomUtil.hasClass(child, 'sidebar-content'))
|
||||
this._container = child;
|
||||
}
|
||||
|
||||
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
|
||||
this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
this._tabitems[i]._sidebar = this;
|
||||
}
|
||||
|
||||
// Find sidebar > div.sidebar-content > div.sidebar-pane
|
||||
this._panes = [];
|
||||
this._closeButtons = [];
|
||||
for (i = this._container.children.length - 1; i >= 0; i--) {
|
||||
child = this._container.children[i];
|
||||
if (child.tagName == 'DIV' &&
|
||||
L.DomUtil.hasClass(child, 'sidebar-pane')) {
|
||||
this._panes.push(child);
|
||||
|
||||
var closeButtons = child.querySelectorAll('.sidebar-close');
|
||||
for (var j = 0, len = closeButtons.length; j < len; j++)
|
||||
this._closeButtons.push(closeButtons[j]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add this sidebar to the specified map.
|
||||
*
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
addTo: function (map) {
|
||||
var i, child;
|
||||
|
||||
this._map = map;
|
||||
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
var sub = child.querySelector('a');
|
||||
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
|
||||
L.DomEvent
|
||||
.on(sub, 'click', L.DomEvent.preventDefault )
|
||||
.on(sub, 'click', this._onClick, child);
|
||||
}
|
||||
}
|
||||
|
||||
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||
child = this._closeButtons[i];
|
||||
L.DomEvent.on(child, 'click', this._onCloseClick, this);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
|
||||
* Removes this sidebar from the map.
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
removeFrom: function(map) {
|
||||
console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
|
||||
this.remove(map);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove this sidebar from the map.
|
||||
*
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
remove: function (map) {
|
||||
var i, child;
|
||||
|
||||
this._map = null;
|
||||
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
|
||||
}
|
||||
|
||||
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||
child = this._closeButtons[i];
|
||||
L.DomEvent.off(child, 'click', this._onCloseClick, this);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open sidebar (if necessary) and show the specified tab.
|
||||
*
|
||||
* @param {string} id - The id of the tab to show (without the # character)
|
||||
*/
|
||||
open: function(id) {
|
||||
var i, child;
|
||||
|
||||
// hide old active contents and show new content
|
||||
for (i = this._panes.length - 1; i >= 0; i--) {
|
||||
child = this._panes[i];
|
||||
if (child.id == id)
|
||||
L.DomUtil.addClass(child, 'active');
|
||||
else if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
// remove old active highlights and set new highlight
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
if (child.querySelector('a').hash == '#' + id)
|
||||
L.DomUtil.addClass(child, 'active');
|
||||
else if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
this.fire('content', { id: id });
|
||||
|
||||
// open sidebar (if necessary)
|
||||
if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||
this.fire('opening');
|
||||
L.DomUtil.removeClass(this._sidebar, 'collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the sidebar (if necessary).
|
||||
*/
|
||||
close: function() {
|
||||
// remove old active highlights
|
||||
for (var i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
var child = this._tabitems[i];
|
||||
if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
// close sidebar
|
||||
if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||
this.fire('closing');
|
||||
L.DomUtil.addClass(this._sidebar, 'collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onClick: function() {
|
||||
if (L.DomUtil.hasClass(this, 'active'))
|
||||
this._sidebar.close();
|
||||
else if (!L.DomUtil.hasClass(this, 'disabled'))
|
||||
this._sidebar.open(this.querySelector('a').hash.slice(1));
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onCloseClick: function () {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Creates a new sidebar.
|
||||
*
|
||||
* @example
|
||||
* var sidebar = L.control.sidebar('sidebar').addTo(map);
|
||||
*
|
||||
* @param {string} id - The id of the sidebar element (without the # character)
|
||||
* @param {Object} [options] - Optional options object
|
||||
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||
* @returns {Sidebar} A new sidebar instance
|
||||
*/
|
||||
L.control.sidebar = function (id, options) {
|
||||
return new L.Control.Sidebar(id, options);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
L.Control.Sidebar=L.Control.extend({includes:L.Evented.prototype||L.Mixin.Events,options:{position:"left"},initialize:function(t,s){var i,e;for(L.setOptions(this,s),this._sidebar=L.DomUtil.get(t),L.DomUtil.addClass(this._sidebar,"sidebar-"+this.options.position),L.Browser.touch&&L.DomUtil.addClass(this._sidebar,"leaflet-touch"),i=this._sidebar.children.length-1;i>=0;i--)"DIV"==(e=this._sidebar.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-content")&&(this._container=e);for(this._tabitems=this._sidebar.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),i=this._tabitems.length-1;i>=0;i--)this._tabitems[i]._sidebar=this;for(this._panes=[],this._closeButtons=[],i=this._container.children.length-1;i>=0;i--)if("DIV"==(e=this._container.children[i]).tagName&&L.DomUtil.hasClass(e,"sidebar-pane")){this._panes.push(e);for(var o=e.querySelectorAll(".sidebar-close"),a=0,l=o.length;a<l;a++)this._closeButtons.push(o[a])}},addTo:function(t){var s,i;for(this._map=t,s=this._tabitems.length-1;s>=0;s--){var e=(i=this._tabitems[s]).querySelector("a");e.hasAttribute("href")&&"#"==e.getAttribute("href").slice(0,1)&&L.DomEvent.on(e,"click",L.DomEvent.preventDefault).on(e,"click",this._onClick,i)}for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.on(i,"click",this._onCloseClick,this);return this},removeFrom:function(t){console.log("removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon."),this.remove(t)},remove:function(t){var s,i;for(this._map=null,s=this._tabitems.length-1;s>=0;s--)i=this._tabitems[s],L.DomEvent.off(i.querySelector("a"),"click",this._onClick);for(s=this._closeButtons.length-1;s>=0;s--)i=this._closeButtons[s],L.DomEvent.off(i,"click",this._onCloseClick,this);return this},open:function(t){var s,i;for(s=this._panes.length-1;s>=0;s--)(i=this._panes[s]).id==t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");for(s=this._tabitems.length-1;s>=0;s--)(i=this._tabitems[s]).querySelector("a").hash=="#"+t?L.DomUtil.addClass(i,"active"):L.DomUtil.hasClass(i,"active")&&L.DomUtil.removeClass(i,"active");return this.fire("content",{id:t}),L.DomUtil.hasClass(this._sidebar,"collapsed")&&(this.fire("opening"),L.DomUtil.removeClass(this._sidebar,"collapsed")),this},close:function(){for(var t=this._tabitems.length-1;t>=0;t--){var s=this._tabitems[t];L.DomUtil.hasClass(s,"active")&&L.DomUtil.removeClass(s,"active")}return L.DomUtil.hasClass(this._sidebar,"collapsed")||(this.fire("closing"),L.DomUtil.addClass(this._sidebar,"collapsed")),this},_onClick:function(){L.DomUtil.hasClass(this,"active")?this._sidebar.close():L.DomUtil.hasClass(this,"disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},_onCloseClick:function(){this.close()}}),L.control.sidebar=function(t,s){return new L.Control.Sidebar(t,s)};
|
||||
@@ -1,132 +0,0 @@
|
||||
/* global ol */
|
||||
|
||||
ol.control.Sidebar = function (settings) {
|
||||
|
||||
var defaults = {
|
||||
element: null,
|
||||
position: 'left'
|
||||
}, i, child;
|
||||
|
||||
this._options = Object.assign({}, defaults, settings);
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: document.getElementById(this._options.element),
|
||||
target: this._options.target
|
||||
});
|
||||
|
||||
// Attach .sidebar-left/right class
|
||||
this.element.classList.add('sidebar-' + this._options.position);
|
||||
|
||||
// Find sidebar > div.sidebar-content
|
||||
for (i = this.element.children.length - 1; i >= 0; i--) {
|
||||
child = this.element.children[i];
|
||||
if (child.tagName === 'DIV' &&
|
||||
child.classList.contains('sidebar-content')) {
|
||||
this._container = child;
|
||||
}
|
||||
}
|
||||
|
||||
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
|
||||
this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
this._tabitems[i]._sidebar = this;
|
||||
}
|
||||
|
||||
// Find sidebar > div.sidebar-content > div.sidebar-pane
|
||||
this._panes = [];
|
||||
this._closeButtons = [];
|
||||
for (i = this._container.children.length - 1; i >= 0; i--) {
|
||||
child = this._container.children[i];
|
||||
if (child.tagName == 'DIV' &&
|
||||
child.classList.contains('sidebar-pane')) {
|
||||
this._panes.push(child);
|
||||
|
||||
var closeButtons = child.querySelectorAll('.sidebar-close');
|
||||
for (var j = 0, len = closeButtons.length; j < len; j++) {
|
||||
this._closeButtons.push(closeButtons[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if ('inherits' in ol) {
|
||||
ol.inherits(ol.control.Sidebar, ol.control.Control);
|
||||
} else {
|
||||
ol.control.Sidebar.prototype = Object.create(ol.control.Control.prototype);
|
||||
ol.control.Sidebar.prototype.constructor = ol.control.Sidebar;
|
||||
}
|
||||
|
||||
ol.control.Sidebar.prototype.setMap = function(map) {
|
||||
var i, child;
|
||||
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
var sub = child.querySelector('a');
|
||||
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
|
||||
sub.onclick = this._onClick.bind(child);
|
||||
}
|
||||
}
|
||||
|
||||
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||
child = this._closeButtons[i];
|
||||
child.onclick = this._onCloseClick.bind(this);
|
||||
}
|
||||
};
|
||||
|
||||
ol.control.Sidebar.prototype.open = function(id) {
|
||||
var i, child;
|
||||
|
||||
// hide old active contents and show new content
|
||||
for (i = this._panes.length - 1; i >= 0; i--) {
|
||||
child = this._panes[i];
|
||||
if (child.id == id)
|
||||
child.classList.add('active');
|
||||
else if (child.classList.contains('active'))
|
||||
child.classList.remove('active');
|
||||
}
|
||||
|
||||
// remove old active highlights and set new highlight
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
if (child.querySelector('a').hash == '#' + id)
|
||||
child.classList.add('active');
|
||||
else if (child.classList.contains('active'))
|
||||
child.classList.remove('active');
|
||||
}
|
||||
|
||||
// open sidebar (if necessary)
|
||||
if (this.element.classList.contains('collapsed')) {
|
||||
this.element.classList.remove('collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
ol.control.Sidebar.prototype.close = function() {
|
||||
// remove old active highlights
|
||||
for (var i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
var child = this._tabitems[i];
|
||||
if (child.classList.contains('active'))
|
||||
child.classList.remove('active');
|
||||
}
|
||||
|
||||
// close sidebar
|
||||
if (!this.element.classList.contains('collapsed')) {
|
||||
this.element.classList.add('collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
ol.control.Sidebar.prototype._onClick = function(evt) {
|
||||
evt.preventDefault();
|
||||
if (this.classList.contains('active')) {
|
||||
this._sidebar.close();
|
||||
} else if (!this.classList.contains('disabled')) {
|
||||
this._sidebar.open(this.querySelector('a').hash.slice(1));
|
||||
}
|
||||
};
|
||||
|
||||
ol.control.Sidebar.prototype._onCloseClick = function() {
|
||||
this.close();
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
ol.control.Sidebar=function(t){var e,s;for(this._options=Object.assign({},{element:null,position:"left"},t),ol.control.Control.call(this,{element:document.getElementById(this._options.element),target:this._options.target}),this.element.classList.add("sidebar-"+this._options.position),e=this.element.children.length-1;e>=0;e--)"DIV"===(s=this.element.children[e]).tagName&&s.classList.contains("sidebar-content")&&(this._container=s);for(this._tabitems=this.element.querySelectorAll("ul.sidebar-tabs > li, .sidebar-tabs > ul > li"),e=this._tabitems.length-1;e>=0;e--)this._tabitems[e]._sidebar=this;for(this._panes=[],this._closeButtons=[],e=this._container.children.length-1;e>=0;e--)if("DIV"==(s=this._container.children[e]).tagName&&s.classList.contains("sidebar-pane")){this._panes.push(s);for(var i=s.querySelectorAll(".sidebar-close"),o=0,l=i.length;o<l;o++)this._closeButtons.push(i[o])}},"inherits"in ol?ol.inherits(ol.control.Sidebar,ol.control.Control):(ol.control.Sidebar.prototype=Object.create(ol.control.Control.prototype),ol.control.Sidebar.prototype.constructor=ol.control.Sidebar),ol.control.Sidebar.prototype.setMap=function(t){var e,s;for(e=this._tabitems.length-1;e>=0;e--){var i=(s=this._tabitems[e]).querySelector("a");i.hasAttribute("href")&&"#"==i.getAttribute("href").slice(0,1)&&(i.onclick=this._onClick.bind(s))}for(e=this._closeButtons.length-1;e>=0;e--)(s=this._closeButtons[e]).onclick=this._onCloseClick.bind(this)},ol.control.Sidebar.prototype.open=function(t){var e,s;for(e=this._panes.length-1;e>=0;e--)(s=this._panes[e]).id==t?s.classList.add("active"):s.classList.contains("active")&&s.classList.remove("active");for(e=this._tabitems.length-1;e>=0;e--)(s=this._tabitems[e]).querySelector("a").hash=="#"+t?s.classList.add("active"):s.classList.contains("active")&&s.classList.remove("active");return this.element.classList.contains("collapsed")&&this.element.classList.remove("collapsed"),this},ol.control.Sidebar.prototype.close=function(){for(var t=this._tabitems.length-1;t>=0;t--){var e=this._tabitems[t];e.classList.contains("active")&&e.classList.remove("active")}return this.element.classList.contains("collapsed")||this.element.classList.add("collapsed"),this},ol.control.Sidebar.prototype._onClick=function(t){t.preventDefault(),this.classList.contains("active")?this._sidebar.close():this.classList.contains("disabled")||this._sidebar.open(this.querySelector("a").hash.slice(1))},ol.control.Sidebar.prototype._onCloseClick=function(){this.close()};
|
||||
@@ -1,40 +0,0 @@
|
||||
{
|
||||
"name": "sidebar-v2",
|
||||
"version": "0.4.0",
|
||||
"description": "A responsive sidebar for mapping libraries like Leaflet or OpenLayers",
|
||||
"keywords": [
|
||||
"gis",
|
||||
"leaflet",
|
||||
"map",
|
||||
"openlayers"
|
||||
],
|
||||
"homepage": "https://github.com/turbo87/sidebar-v2",
|
||||
"bugs": "https://github.com/turbo87/sidebar-v2/issues",
|
||||
"license": "MIT",
|
||||
"author": "Tobias Bieniek <tobias.bieniek@gmx.de>",
|
||||
"files": [
|
||||
"css",
|
||||
"js",
|
||||
"scss"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/turbo87/sidebar-v2.git"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:css": "stylelint **/*.scss",
|
||||
"lint:js": "eslint . --cache"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^6.8.0",
|
||||
"gulp": "~4.0.0",
|
||||
"gulp-clean-css": "~4.3.0",
|
||||
"gulp-concat": "~2.6.1",
|
||||
"gulp-rename": "~2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-uglify": "~3.0.2",
|
||||
"stylelint": "^13.12.0",
|
||||
"stylelint-config-recommended-scss": "^4.2.0",
|
||||
"stylelint-scss": "^3.19.0"
|
||||
}
|
||||
}
|
||||
@@ -1,261 +0,0 @@
|
||||
$threshold-lg: 1200px !default;
|
||||
$threshold-md: 992px !default;
|
||||
$threshold-sm: 768px !default;
|
||||
|
||||
$width-lg: 460px !default;
|
||||
$width-md: 390px !default;
|
||||
$width-sm: 305px !default;
|
||||
$width-xs: 100% !default;
|
||||
|
||||
$sidebar-z-index: 2000 !default;
|
||||
$sidebar-transition: 500ms !default;
|
||||
|
||||
$tab-size: 40px !default;
|
||||
$tab-font-size: 12pt !default;
|
||||
$tab-bg: null !default;
|
||||
$tab-transition: 80ms !default;
|
||||
|
||||
$header-fg: $tab-active-fg !default;
|
||||
$header-bg: $tab-active-bg !default;
|
||||
|
||||
$content-bg: rgba(255, 255, 255, 0.95) !default;
|
||||
$content-padding-vertical: 10px !default;
|
||||
$content-padding-horizontal: 20px !default;
|
||||
|
||||
$move-map-in-xs: true !default;
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $width-xs;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
z-index: $sidebar-z-index;
|
||||
|
||||
&.collapsed {
|
||||
width: $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
top: $sidebar-margins;
|
||||
bottom: $sidebar-margins;
|
||||
|
||||
transition: width $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
width: $width-sm;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
width: $width-md;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
width: $width-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
left: 0;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
left: $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
right: 0;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
right: $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
.sidebar-left & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
background-color: $tabs-bg;
|
||||
|
||||
&, & > ul {
|
||||
position: absolute;
|
||||
|
||||
width: $tab-size;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
& > li {
|
||||
width: 100%;
|
||||
height: $tab-size;
|
||||
|
||||
color: $tab-fg;
|
||||
@if $tab-bg { background: $tab-bg; }
|
||||
|
||||
font-size: $tab-font-size;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: all $tab-transition;
|
||||
|
||||
&:hover {
|
||||
color: $tab-hover-fg;
|
||||
background-color: $tab-hover-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $tab-active-fg;
|
||||
background-color: $tab-active-bg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: fade-out($tab-fg, 0.6);
|
||||
|
||||
&:hover {
|
||||
@if $tab-bg {
|
||||
background: $tab-bg;
|
||||
} @else {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
line-height: $tab-size;
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul + ul {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
|
||||
.sidebar-left & {
|
||||
left: $tab-size;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
left: 0;
|
||||
right: $tab-size;
|
||||
}
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
background-color: $content-bg;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.sidebar.collapsed > & {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: $content-padding-vertical $content-padding-horizontal;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
min-width: $width-sm - $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
min-width: $width-md - $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
min-width: $width-lg - $tab-size;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
margin: (-$content-padding-vertical) (-$content-padding-horizontal) 0;
|
||||
height: $tab-size;
|
||||
padding: 0 $content-padding-horizontal;
|
||||
line-height: $tab-size;
|
||||
font-size: $tab-font-size * 1.2;
|
||||
color: $header-fg;
|
||||
background-color: $header-bg;
|
||||
|
||||
.sidebar-right & {
|
||||
padding-left: $tab-size;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $tab-size;
|
||||
height: $tab-size;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.sidebar-left & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $move-map-in-xs {
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: $tab-size;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: $tab-size;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
$sidebar-bg: rgba(255, 255, 255, 0.4) !default;
|
||||
$sidebar-border-width: 3px !default;
|
||||
$sidebar-border-radius: 4px !default;
|
||||
$sidebar-border: $sidebar-border-width solid transparent !default;
|
||||
|
||||
$tab-fg: #fff !default;
|
||||
$tabs-bg: rgba(0, 60, 136, 0.5) !default;
|
||||
$tab-hover-fg: #fff !default;
|
||||
$tab-hover-bg: rgba(0, 60, 136, 0.6) !default;
|
||||
$tab-active-fg: #fff !default;
|
||||
$tab-active-bg: #0074d9 !default;
|
||||
|
||||
$move-map-in-xs: false !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
background-color: $sidebar-bg;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border: $sidebar-border;
|
||||
border-radius: $sidebar-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
border-right: $sidebar-border;
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
border-left: $sidebar-border;
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
overflow: hidden;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: $sidebar-inner-border-radius 0 0 $sidebar-inner-border-radius;
|
||||
|
||||
.collapsed & {
|
||||
border-radius: $sidebar-inner-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: 0 $sidebar-inner-border-radius $sidebar-inner-border-radius 0;
|
||||
}
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
$sidebar-margins: 10px !default;
|
||||
$sidebar-left-bottom-margin: $sidebar-margins + 25px !default;
|
||||
$sidebar-right-bottom-margin: $sidebar-margins + 14px !default;
|
||||
$sidebar-border: 0 !default;
|
||||
$sidebar-border-radius: 2px !default;
|
||||
$sidebar-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px !default;
|
||||
|
||||
$tab-fg: #666 !default;
|
||||
$tabs-bg: #fff !default;
|
||||
$tab-active-fg: #000 !default;
|
||||
$tab-active-bg: #febf00 !default;
|
||||
$tab-hover-fg: #000 !default;
|
||||
$tab-hover-bg: ($tabs-bg * 9 + $tab-active-bg) / 10 !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
border-right: $sidebar-border;
|
||||
box-shadow: $sidebar-shadow;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border: $sidebar-border;
|
||||
border-radius: $sidebar-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
bottom: $sidebar-left-bottom-margin;
|
||||
}
|
||||
|
||||
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: $tab-size + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
bottom: $sidebar-right-bottom-margin;
|
||||
}
|
||||
|
||||
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: $tab-size + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
$sidebar-margins: 10px !default;
|
||||
$sidebar-border-radius: 4px !default;
|
||||
$sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
|
||||
$sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;
|
||||
|
||||
$tab-fg: #333 !default;
|
||||
$tabs-bg: #fff !default;
|
||||
$tab-hover-fg: #000 !default;
|
||||
$tab-hover-bg: #eee !default;
|
||||
$tab-active-fg: #fff !default;
|
||||
$tab-active-bg: #0074d9 !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
box-shadow: $sidebar-shadow;
|
||||
|
||||
&.leaflet-touch {
|
||||
box-shadow: none;
|
||||
border-right: $sidebar-touch-border;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: $sidebar-border-radius;
|
||||
|
||||
&.leaflet-touch {
|
||||
border: $sidebar-touch-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map .leaflet-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
left: $width-sm + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
left: $width-md + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
left: $width-lg + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map .leaflet-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
left: $tab-size + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map .leaflet-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
right: $width-sm + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
right: $width-md + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
right: $width-lg + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map .leaflet-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
right: $tab-size + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
$sidebar-margins: 8px !default;
|
||||
$sidebar-inner-border-radius: 4px !default;
|
||||
|
||||
@import 'ol-base';
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.olControlZoom,
|
||||
.olScaleLine {
|
||||
margin-left: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.olControlZoom,
|
||||
.olScaleLine {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.olControlAttribution,
|
||||
.olControlPermalink,
|
||||
.olControlMousePosition {
|
||||
margin-right: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.olControlAttribution,
|
||||
.olControlPermalink,
|
||||
.olControlMousePosition {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
$sidebar-margins: 6px !default;
|
||||
$sidebar-inner-border-radius: 2px !default;
|
||||
|
||||
@import 'ol-base';
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.ol-zoom, .ol-scale-line {
|
||||
margin-left: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.ol-zoom, .ol-scale-line {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.ol-rotate,
|
||||
.ol-attribution,
|
||||
.ol-full-screen {
|
||||
|
||||
margin-right: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.ol-rotate,
|
||||
.ol-attribution,
|
||||
.ol-full-screen {
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/// <reference types="leaflet" />
|
||||
|
||||
declare namespace L {
|
||||
|
||||
namespace Control {
|
||||
|
||||
interface SidebarOptions {
|
||||
position: string;
|
||||
}
|
||||
|
||||
class Sidebar extends Control {
|
||||
constructor(id: string, options?: SidebarOptions);
|
||||
options: Control.ControlOptions;
|
||||
addTo(map: L.Map): this;
|
||||
remove(map: L.Map): this;
|
||||
open(id: string): this;
|
||||
close(): this;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
namespace control {
|
||||
function sidebar(id: string, options?: Control.SidebarOptions): L.Control.Sidebar;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
.leaflet-sidebar {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
z-index: 2000; }
|
||||
.leaflet-sidebar.left {
|
||||
left: -500px;
|
||||
transition: left 0.5s, width 0.5s;
|
||||
padding-right: 0; }
|
||||
.leaflet-sidebar.left.visible {
|
||||
left: 0; }
|
||||
.leaflet-sidebar.right {
|
||||
right: -500px;
|
||||
transition: right 0.5s, width 0.5s;
|
||||
padding-left: 0; }
|
||||
.leaflet-sidebar.right.visible {
|
||||
right: 0; }
|
||||
.leaflet-sidebar > .leaflet-control {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 24px;
|
||||
font-size: 1.1em;
|
||||
background: white;
|
||||
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px; }
|
||||
.leaflet-touch .leaflet-sidebar > .leaflet-control {
|
||||
box-shadow: none;
|
||||
border: 2px solid rgba(0, 0, 0, 0.2);
|
||||
background-clip: padding-box; }
|
||||
@media (max-width: 767px) {
|
||||
.leaflet-sidebar {
|
||||
width: 100%;
|
||||
padding: 0; }
|
||||
.leaflet-sidebar.left.visible ~ .leaflet-left {
|
||||
left: 100%; }
|
||||
.leaflet-sidebar.right.visible ~ .leaflet-right {
|
||||
right: 100%; }
|
||||
.leaflet-sidebar.left {
|
||||
left: -100%; }
|
||||
.leaflet-sidebar.left.visible {
|
||||
left: 0; }
|
||||
.leaflet-sidebar.right {
|
||||
right: -100%; }
|
||||
.leaflet-sidebar.right.visible {
|
||||
right: 0; }
|
||||
.leaflet-sidebar > .leaflet-control {
|
||||
box-shadow: none;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0; }
|
||||
.leaflet-touch .leaflet-sidebar > .leaflet-control {
|
||||
border: 0; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.leaflet-sidebar {
|
||||
width: 305px; }
|
||||
.leaflet-sidebar.left.visible ~ .leaflet-left {
|
||||
left: 305px; }
|
||||
.leaflet-sidebar.right.visible ~ .leaflet-right {
|
||||
right: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.leaflet-sidebar {
|
||||
width: 390px; }
|
||||
.leaflet-sidebar.left.visible ~ .leaflet-left {
|
||||
left: 390px; }
|
||||
.leaflet-sidebar.right.visible ~ .leaflet-right {
|
||||
right: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.leaflet-sidebar {
|
||||
width: 460px; }
|
||||
.leaflet-sidebar.left.visible ~ .leaflet-left {
|
||||
left: 460px; }
|
||||
.leaflet-sidebar.right.visible ~ .leaflet-right {
|
||||
right: 460px; } }
|
||||
.leaflet-sidebar .close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
color: #333;
|
||||
font-size: 25px;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
background: white;
|
||||
-webkit-border-radius: 16px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
z-index: 1000; }
|
||||
|
||||
.leaflet-left {
|
||||
transition: left 0.5s; }
|
||||
|
||||
.leaflet-right {
|
||||
transition: right 0.5s; }
|
||||
@@ -1,202 +0,0 @@
|
||||
L.Control.Sidebar = L.Control.extend({
|
||||
|
||||
includes: L.Evented.prototype || L.Mixin.Events,
|
||||
|
||||
options: {
|
||||
closeButton: true,
|
||||
position: 'left',
|
||||
autoPan: true,
|
||||
},
|
||||
|
||||
initialize: function (placeholder, options) {
|
||||
L.setOptions(this, options);
|
||||
|
||||
// Find content container
|
||||
var content = this._contentContainer = L.DomUtil.get(placeholder);
|
||||
|
||||
// Remove the content container from its original parent
|
||||
if(content.parentNode != undefined){
|
||||
content.parentNode.removeChild(content);
|
||||
}
|
||||
var l = 'leaflet-';
|
||||
|
||||
// Create sidebar container
|
||||
var container = this._container =
|
||||
L.DomUtil.create('div', l + 'sidebar ' + this.options.position);
|
||||
|
||||
// Style and attach content container
|
||||
L.DomUtil.addClass(content, l + 'control');
|
||||
container.appendChild(content);
|
||||
|
||||
// Create close button and attach it if configured
|
||||
if (this.options.closeButton) {
|
||||
var close = this._closeButton =
|
||||
L.DomUtil.create('a', 'close', container);
|
||||
close.innerHTML = '×';
|
||||
}
|
||||
},
|
||||
|
||||
addTo: function (map) {
|
||||
var container = this._container;
|
||||
var content = this._contentContainer;
|
||||
|
||||
// Attach event to close button
|
||||
if (this.options.closeButton) {
|
||||
var close = this._closeButton;
|
||||
|
||||
L.DomEvent.on(close, 'click', this.hide, this);
|
||||
}
|
||||
|
||||
L.DomEvent
|
||||
.on(container, 'transitionend',
|
||||
this._handleTransitionEvent, this)
|
||||
.on(container, 'webkitTransitionEnd',
|
||||
this._handleTransitionEvent, this);
|
||||
|
||||
// Attach sidebar container to controls container
|
||||
var controlContainer = map._controlContainer;
|
||||
controlContainer.insertBefore(container, controlContainer.firstChild);
|
||||
|
||||
this._map = map;
|
||||
|
||||
// Make sure we don't drag the map when we interact with the content
|
||||
var stop = L.DomEvent.stopPropagation;
|
||||
var fakeStop = L.DomEvent._fakeStop || stop;
|
||||
L.DomEvent
|
||||
.on(content, 'contextmenu', stop)
|
||||
.on(content, 'click', fakeStop)
|
||||
.on(content, 'mousedown', stop)
|
||||
.on(content, 'touchstart', stop)
|
||||
.on(content, 'dblclick', fakeStop)
|
||||
.on(content, 'mousewheel', stop)
|
||||
.on(content, 'wheel', stop)
|
||||
.on(content, 'scroll', stop)
|
||||
.on(content, 'MozMousePixelScroll', stop);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
removeFrom: function (map) {
|
||||
//if the control is visible, hide it before removing it.
|
||||
this.hide();
|
||||
|
||||
var container = this._container;
|
||||
var content = this._contentContainer;
|
||||
|
||||
// Remove sidebar container from controls container
|
||||
var controlContainer = map._controlContainer;
|
||||
controlContainer.removeChild(container);
|
||||
|
||||
//disassociate the map object
|
||||
this._map = null;
|
||||
|
||||
// Unregister events to prevent memory leak
|
||||
var stop = L.DomEvent.stopPropagation;
|
||||
var fakeStop = L.DomEvent._fakeStop || stop;
|
||||
L.DomEvent
|
||||
.off(content, 'contextmenu', stop)
|
||||
.off(content, 'click', fakeStop)
|
||||
.off(content, 'mousedown', stop)
|
||||
.off(content, 'touchstart', stop)
|
||||
.off(content, 'dblclick', fakeStop)
|
||||
.off(content, 'mousewheel', stop)
|
||||
.off(content, 'wheel', stop)
|
||||
.off(content, 'scroll', stop)
|
||||
.off(content, 'MozMousePixelScroll', stop);
|
||||
|
||||
L.DomEvent
|
||||
.off(container, 'transitionend',
|
||||
this._handleTransitionEvent, this)
|
||||
.off(container, 'webkitTransitionEnd',
|
||||
this._handleTransitionEvent, this);
|
||||
|
||||
if (this._closeButton && this._close) {
|
||||
var close = this._closeButton;
|
||||
|
||||
L.DomEvent.off(close, 'click', this.hide, this);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
isVisible: function () {
|
||||
return L.DomUtil.hasClass(this._container, 'visible');
|
||||
},
|
||||
|
||||
show: function () {
|
||||
if (!this.isVisible()) {
|
||||
L.DomUtil.addClass(this._container, 'visible');
|
||||
if (this.options.autoPan) {
|
||||
this._map.panBy([-this.getOffset() / 2, 0], {
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
this.fire('show');
|
||||
}
|
||||
},
|
||||
|
||||
hide: function (e) {
|
||||
if (this.isVisible()) {
|
||||
L.DomUtil.removeClass(this._container, 'visible');
|
||||
if (this.options.autoPan) {
|
||||
this._map.panBy([this.getOffset() / 2, 0], {
|
||||
duration: 0.5
|
||||
});
|
||||
}
|
||||
this.fire('hide');
|
||||
}
|
||||
if(e) {
|
||||
L.DomEvent.stopPropagation(e);
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function () {
|
||||
if (this.isVisible()) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
},
|
||||
|
||||
getContainer: function () {
|
||||
return this._contentContainer;
|
||||
},
|
||||
|
||||
getCloseButton: function () {
|
||||
return this._closeButton;
|
||||
},
|
||||
|
||||
setContent: function (content) {
|
||||
var container = this.getContainer();
|
||||
|
||||
if (typeof content === 'string') {
|
||||
container.innerHTML = content;
|
||||
} else {
|
||||
// clean current content
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
|
||||
container.appendChild(content);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
getOffset: function () {
|
||||
if (this.options.position === 'right') {
|
||||
return -this._container.offsetWidth;
|
||||
} else {
|
||||
return this._container.offsetWidth;
|
||||
}
|
||||
},
|
||||
|
||||
_handleTransitionEvent: function (e) {
|
||||
if (e.propertyName == 'left' || e.propertyName == 'right')
|
||||
this.fire(this.isVisible() ? 'shown' : 'hidden');
|
||||
}
|
||||
});
|
||||
|
||||
L.control.sidebar = function (placeholder, options) {
|
||||
return new L.Control.Sidebar(placeholder, options);
|
||||
};
|
||||
@@ -1,200 +0,0 @@
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000; }
|
||||
.sidebar.collapsed {
|
||||
width: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
transition: width 500ms; } }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar {
|
||||
width: 305px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar {
|
||||
width: 390px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar {
|
||||
width: 460px; } }
|
||||
|
||||
.sidebar-left {
|
||||
left: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left {
|
||||
left: 10px; } }
|
||||
|
||||
.sidebar-right {
|
||||
right: 0; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right {
|
||||
right: 10px; } }
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background-color: #fff; }
|
||||
.sidebar-left .sidebar-tabs {
|
||||
left: 0; }
|
||||
.sidebar-right .sidebar-tabs {
|
||||
right: 0; }
|
||||
.sidebar-tabs, .sidebar-tabs > ul {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.sidebar-tabs > li, .sidebar-tabs > ul > li {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: #333;
|
||||
font-size: 12pt;
|
||||
overflow: hidden;
|
||||
transition: all 80ms; }
|
||||
.sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
|
||||
color: #000;
|
||||
background-color: #eee; }
|
||||
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
|
||||
color: rgba(51, 51, 51, 0.4); }
|
||||
.sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
|
||||
background: transparent; }
|
||||
.sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
|
||||
cursor: default; }
|
||||
.sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center; }
|
||||
.sidebar-tabs > ul + ul {
|
||||
bottom: 0; }
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; }
|
||||
.sidebar-left .sidebar-content {
|
||||
left: 40px;
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-content {
|
||||
left: 0;
|
||||
right: 40px; }
|
||||
.sidebar.collapsed > .sidebar-content {
|
||||
overflow-y: hidden; }
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px; }
|
||||
.sidebar-pane.active {
|
||||
display: block; }
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-pane {
|
||||
min-width: 265px; } }
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-pane {
|
||||
min-width: 350px; } }
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-pane {
|
||||
min-width: 420px; } }
|
||||
|
||||
.sidebar-header {
|
||||
margin: -10px -20px 0;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
font-size: 14.4pt;
|
||||
color: #fff;
|
||||
background-color: #0074d9; }
|
||||
.sidebar-right .sidebar-header {
|
||||
padding-left: 40px; }
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.sidebar-left .sidebar-close {
|
||||
right: 0; }
|
||||
.sidebar-right .sidebar-close {
|
||||
left: 0; }
|
||||
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: 0; } }
|
||||
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 40px; }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: 0; } }
|
||||
|
||||
.sidebar {
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
|
||||
.sidebar.leaflet-touch {
|
||||
box-shadow: none;
|
||||
border-right: 2px solid rgba(0, 0, 0, 0.2); }
|
||||
@media (min-width: 768px) {
|
||||
.sidebar {
|
||||
border-radius: 4px; }
|
||||
.sidebar.leaflet-touch {
|
||||
border: 2px solid rgba(0, 0, 0, 0.2); } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
transition: left 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 315px; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 400px; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-left ~ .sidebar-map .leaflet-left {
|
||||
left: 470px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
|
||||
left: 50px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
transition: right 500ms; } }
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 315px; } }
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 400px; } }
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sidebar-right ~ .sidebar-map .leaflet-right {
|
||||
right: 470px; } }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
|
||||
right: 50px; } }
|
||||
@@ -1,216 +0,0 @@
|
||||
/* global L */
|
||||
|
||||
/**
|
||||
* @name Sidebar
|
||||
* @class L.Control.Sidebar
|
||||
* @extends L.Control
|
||||
* @param {string} id - The id of the sidebar element (without the # character)
|
||||
* @param {Object} [options] - Optional options object
|
||||
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||
* @see L.control.sidebar
|
||||
*/
|
||||
L.Control.Sidebar = L.Control.extend(/** @lends L.Control.Sidebar.prototype */ {
|
||||
includes: (L.Evented.prototype || L.Mixin.Events),
|
||||
|
||||
options: {
|
||||
position: 'left'
|
||||
},
|
||||
|
||||
initialize: function (id, options) {
|
||||
var i, child;
|
||||
|
||||
L.setOptions(this, options);
|
||||
|
||||
// Find sidebar HTMLElement
|
||||
this._sidebar = L.DomUtil.get(id);
|
||||
|
||||
// Attach .sidebar-left/right class
|
||||
L.DomUtil.addClass(this._sidebar, 'sidebar-' + this.options.position);
|
||||
|
||||
// Attach touch styling if necessary
|
||||
if (L.Browser.touch)
|
||||
L.DomUtil.addClass(this._sidebar, 'leaflet-touch');
|
||||
|
||||
// Find sidebar > div.sidebar-content
|
||||
for (i = this._sidebar.children.length - 1; i >= 0; i--) {
|
||||
child = this._sidebar.children[i];
|
||||
if (child.tagName == 'DIV' &&
|
||||
L.DomUtil.hasClass(child, 'sidebar-content'))
|
||||
this._container = child;
|
||||
}
|
||||
|
||||
// Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li
|
||||
this._tabitems = this._sidebar.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li');
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
this._tabitems[i]._sidebar = this;
|
||||
}
|
||||
|
||||
// Find sidebar > div.sidebar-content > div.sidebar-pane
|
||||
this._panes = [];
|
||||
this._closeButtons = [];
|
||||
for (i = this._container.children.length - 1; i >= 0; i--) {
|
||||
child = this._container.children[i];
|
||||
if (child.tagName == 'DIV' &&
|
||||
L.DomUtil.hasClass(child, 'sidebar-pane')) {
|
||||
this._panes.push(child);
|
||||
|
||||
var closeButtons = child.querySelectorAll('.sidebar-close');
|
||||
for (var j = 0, len = closeButtons.length; j < len; j++)
|
||||
this._closeButtons.push(closeButtons[j]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add this sidebar to the specified map.
|
||||
*
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
addTo: function (map) {
|
||||
var i, child;
|
||||
|
||||
this._map = map;
|
||||
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
var sub = child.querySelector('a');
|
||||
if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') {
|
||||
L.DomEvent
|
||||
.on(sub, 'click', L.DomEvent.preventDefault )
|
||||
.on(sub, 'click', this._onClick, child);
|
||||
}
|
||||
}
|
||||
|
||||
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||
child = this._closeButtons[i];
|
||||
L.DomEvent.on(child, 'click', this._onCloseClick, this);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @deprecated - Please use remove() instead of removeFrom(), as of Leaflet 0.8-dev, the removeFrom() has been replaced with remove()
|
||||
* Removes this sidebar from the map.
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
removeFrom: function(map) {
|
||||
console.log('removeFrom() has been deprecated, please use remove() instead as support for this function will be ending soon.');
|
||||
this.remove(map);
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove this sidebar from the map.
|
||||
*
|
||||
* @param {L.Map} map
|
||||
* @returns {Sidebar}
|
||||
*/
|
||||
remove: function (map) {
|
||||
var i, child;
|
||||
|
||||
this._map = null;
|
||||
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
L.DomEvent.off(child.querySelector('a'), 'click', this._onClick);
|
||||
}
|
||||
|
||||
for (i = this._closeButtons.length - 1; i >= 0; i--) {
|
||||
child = this._closeButtons[i];
|
||||
L.DomEvent.off(child, 'click', this._onCloseClick, this);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Open sidebar (if necessary) and show the specified tab.
|
||||
*
|
||||
* @param {string} id - The id of the tab to show (without the # character)
|
||||
*/
|
||||
open: function(id) {
|
||||
var i, child;
|
||||
|
||||
// hide old active contents and show new content
|
||||
for (i = this._panes.length - 1; i >= 0; i--) {
|
||||
child = this._panes[i];
|
||||
if (child.id == id)
|
||||
L.DomUtil.addClass(child, 'active');
|
||||
else if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
// remove old active highlights and set new highlight
|
||||
for (i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
child = this._tabitems[i];
|
||||
if (child.querySelector('a').hash == '#' + id)
|
||||
L.DomUtil.addClass(child, 'active');
|
||||
else if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
this.fire('content', { id: id });
|
||||
|
||||
// open sidebar (if necessary)
|
||||
if (L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||
this.fire('opening');
|
||||
L.DomUtil.removeClass(this._sidebar, 'collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the sidebar (if necessary).
|
||||
*/
|
||||
close: function() {
|
||||
// remove old active highlights
|
||||
for (var i = this._tabitems.length - 1; i >= 0; i--) {
|
||||
var child = this._tabitems[i];
|
||||
if (L.DomUtil.hasClass(child, 'active'))
|
||||
L.DomUtil.removeClass(child, 'active');
|
||||
}
|
||||
|
||||
// close sidebar
|
||||
if (!L.DomUtil.hasClass(this._sidebar, 'collapsed')) {
|
||||
this.fire('closing');
|
||||
L.DomUtil.addClass(this._sidebar, 'collapsed');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onClick: function() {
|
||||
if (L.DomUtil.hasClass(this, 'active'))
|
||||
this._sidebar.close();
|
||||
else if (!L.DomUtil.hasClass(this, 'disabled'))
|
||||
this._sidebar.open(this.querySelector('a').hash.slice(1));
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_onCloseClick: function () {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Creates a new sidebar.
|
||||
*
|
||||
* @example
|
||||
* var sidebar = L.control.sidebar('sidebar').addTo(map);
|
||||
*
|
||||
* @param {string} id - The id of the sidebar element (without the # character)
|
||||
* @param {Object} [options] - Optional options object
|
||||
* @param {string} [options.position=left] - Position of the sidebar: 'left' or 'right'
|
||||
* @returns {Sidebar} A new sidebar instance
|
||||
*/
|
||||
L.control.sidebar = function (id, options) {
|
||||
return new L.Control.Sidebar(id, options);
|
||||
};
|
||||
7
public/source/jquery-ui.min.css
vendored
7
public/source/jquery-ui.min.css
vendored
File diff suppressed because one or more lines are too long
6
public/source/jquery-ui.min.js
vendored
6
public/source/jquery-ui.min.js
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user