course example
@@ -0,0 +1 @@
|
||||
*.min.js
|
||||
19
plugins/sidebar-v2-master/sidebar-v2-master/.eslintrc.js
Normal file
@@ -0,0 +1,19 @@
|
||||
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,
|
||||
}
|
||||
}]
|
||||
};
|
||||
2
plugins/sidebar-v2-master/sidebar-v2-master/.github/FUNDING.yml
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
github: Turbo87
|
||||
custom: https://paypal.me/tobiasbieniek
|
||||
21
plugins/sidebar-v2-master/sidebar-v2-master/.github/dependabot.yml
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
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: ""
|
||||
20
plugins/sidebar-v2-master/sidebar-v2-master/.gitignore
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
lib-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
|
||||
dist
|
||||
build
|
||||
|
||||
.eslintcache
|
||||
11
plugins/sidebar-v2-master/sidebar-v2-master/.stylelintrc.js
Normal file
@@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'stylelint-scss',
|
||||
],
|
||||
extends: [
|
||||
'stylelint-config-recommended-scss',
|
||||
],
|
||||
rules: {
|
||||
'no-descending-specificity': null,
|
||||
},
|
||||
};
|
||||
24
plugins/sidebar-v2-master/sidebar-v2-master/.travis.yml
Normal file
@@ -0,0 +1,24 @@
|
||||
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
|
||||
44
plugins/sidebar-v2-master/sidebar-v2-master/CHANGELOG.md
Normal file
@@ -0,0 +1,44 @@
|
||||
# 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
|
||||
20
plugins/sidebar-v2-master/sidebar-v2-master/LICENSE
Normal file
@@ -0,0 +1,20 @@
|
||||
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.
|
||||
42
plugins/sidebar-v2-master/sidebar-v2-master/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 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).
|
||||
30
plugins/sidebar-v2-master/sidebar-v2-master/bower.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
.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
plugins/sidebar-v2-master/sidebar-v2-master/css/gmaps-sidebar.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.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}}
|
||||
@@ -0,0 +1,200 @@
|
||||
.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
plugins/sidebar-v2-master/sidebar-v2-master/css/leaflet-sidebar.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.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}}
|
||||
218
plugins/sidebar-v2-master/sidebar-v2-master/css/ol2-sidebar.css
Normal file
@@ -0,0 +1,218 @@
|
||||
.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
plugins/sidebar-v2-master/sidebar-v2-master/css/ol2-sidebar.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.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}}
|
||||
212
plugins/sidebar-v2-master/sidebar-v2-master/css/ol3-sidebar.css
Normal file
@@ -0,0 +1,212 @@
|
||||
.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
plugins/sidebar-v2-master/sidebar-v2-master/css/ol3-sidebar.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.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}}
|
||||
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/gmaps-1.png
Normal file
|
After Width: | Height: | Size: 145 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/gmaps-2.png
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/leaflet-1.png
Normal file
|
After Width: | Height: | Size: 185 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/leaflet-2.png
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/ol2-1.png
Normal file
|
After Width: | Height: | Size: 185 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/ol2-2.png
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/ol3-1.png
Normal file
|
After Width: | Height: | Size: 333 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/ol3-2.png
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
plugins/sidebar-v2-master/sidebar-v2-master/doc/sidebar-v2.gif
Normal file
|
After Width: | Height: | Size: 559 KiB |
202
plugins/sidebar-v2-master/sidebar-v2-master/doc/usage.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# 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.
|
||||
@@ -0,0 +1,99 @@
|
||||
<!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>
|
||||
102
plugins/sidebar-v2-master/sidebar-v2-master/examples/index.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
103
plugins/sidebar-v2-master/sidebar-v2-master/examples/ol2.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!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>
|
||||
107
plugins/sidebar-v2-master/sidebar-v2-master/examples/ol3.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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>
|
||||
39
plugins/sidebar-v2-master/sidebar-v2-master/gulpfile.js
Normal file
@@ -0,0 +1,39 @@
|
||||
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'));
|
||||
84
plugins/sidebar-v2-master/sidebar-v2-master/js/jquery-sidebar.js
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
/* 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
plugins/sidebar-v2-master/sidebar-v2-master/js/jquery-sidebar.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
$.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};
|
||||
@@ -0,0 +1,216 @@
|
||||
/* 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
plugins/sidebar-v2-master/sidebar-v2-master/js/leaflet-sidebar.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
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)};
|
||||
132
plugins/sidebar-v2-master/sidebar-v2-master/js/ol3-sidebar.js
Normal file
@@ -0,0 +1,132 @@
|
||||
/* 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
plugins/sidebar-v2-master/sidebar-v2-master/js/ol3-sidebar.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
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()};
|
||||
40
plugins/sidebar-v2-master/sidebar-v2-master/package.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
}
|
||||
261
plugins/sidebar-v2-master/sidebar-v2-master/scss/_base.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
26
plugins/sidebar-v2-master/sidebar-v2-master/typescript/leaflet-sidebar.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
/// <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;
|
||||
}
|
||||
|
||||
}
|
||||