Skip to content
This repository was archived by the owner on Jan 30, 2025. It is now read-only.

Added collapse/expand, title bar, iconClass options #25

Open
beaver71 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Added collapse/expand, title bar, iconClass options #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c409f5a
Added collapse/expand, title bar, iconClass options
Dec 5, 2020
ced38a6
update Readme
Dec 5, 2020
7bd8e7f
update Readme
Dec 5, 2020
662515b
Merge branch 'HEAD' of https://github.com/beaver71/Leaflet.Dialog.git
Dec 5, 2020
bcc6f3b
upd readme
Dec 5, 2020
e3bbcc5
Update README.md
beaver71 Dec 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 54 additions & 5 deletions Leaflet.Dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
float: left;
width: 100%;
height: 100%;
padding: 20px 0px;
padding: 30px 0px 20px 0px;
}

.leaflet-control-dialog
Expand All @@ -23,8 +23,8 @@
box-sizing: border-box;
width: 20px;
height: 20px;
top: 0px;
left: 0px;
top: 3px;
left: 2px;
padding: 3px;
font-size: 15px;
line-height: 15px;
Expand All @@ -46,8 +46,8 @@
box-sizing: border-box;
width: 20px;
height: 20px;
top: 0px;
right: 0px;
top: 3px;
right: 2px;
padding: 2px;
font-size: 16px;
line-height: 16px;
Expand All @@ -60,6 +60,27 @@
cursor: pointer;
}

.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-collapse {
position: absolute;
box-sizing: border-box;
width: 20px;
height: 20px;
top: 3px;
right: 22px;
padding: 2px;
font-size: 16px;
line-height: 16px;
color: #666;
}

.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-collapse:hover {
cursor: pointer;
}

.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-contents {
Expand Down Expand Up @@ -92,6 +113,29 @@
.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-resizer:hover {
cursor: se-resize;
cursor: -webkit-se-resize;
cursor: -moz-se-resize;
}

.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-grabber-title {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 30px;
top: 0px;
left: 0px;
padding: 6px;
font-size: 15px;
line-height: 18px;
color: #666;
}

.leaflet-control-dialog
.leaflet-control-dialog-inner
.leaflet-control-dialog-grabber-title:hover {
cursor: grab;
cursor: -webkit-grab;
cursor: -moz-grab;
Expand All @@ -104,3 +148,8 @@
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.leaflet-control-dialog.dialog-hidden
.leaflet-control-dialog-contents {
display: none;
}
79 changes: 69 additions & 10 deletions Leaflet.Dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,23 @@ L.Control.Dialog = L.Control.extend({
maxSize: [ 350, 350 ],
anchor: [ 250, 250 ],
position: "topleft",
initOpen: true
initOpen: true,
title: null,
iconClass: {
grabber: "fa fa-arrows",
close: "fa fa-times",
resize: "fa fa-arrows-h fa-rotate-45",
collapse: "fa caret-down",
expand: "fa caret-up",
}
},

initialize: function(options) {
this.options = JSON.parse(JSON.stringify(this.options));
L.setOptions(this, options);

this._attributions = {};
this._collapsed = false;
},

onAdd: function(map) {
Expand Down Expand Up @@ -201,29 +210,47 @@ L.Control.Dialog = L.Control.extend({
className + "-inner"
));

var grabberNode = (this._grabberNode = L.DomUtil.create(
"div",
className + "-grabber"
));
var grabberIcon = L.DomUtil.create("i", "fa fa-arrows");
grabberNode.appendChild(grabberIcon);
if (this.options.title) {
var grabberNode = (this._resizerNode = L.DomUtil.create(
"div",
className + "-grabber-title"
));
grabberNode.innerHTML = this.options.title;
} else {
grabberNode = (this._grabberNode = L.DomUtil.create(
"div",
className + "-grabber"
));
var grabberIcon = L.DomUtil.create("i", this.options.iconClass.grabber);
grabberNode.appendChild(grabberIcon);
}

L.DomEvent.on(grabberNode, "mousedown", this._handleMoveStart, this);

var closeNode = (this._closeNode = L.DomUtil.create(
"div",
className + "-close"
));
var closeIcon = L.DomUtil.create("i", "fa fa-times");
var closeIcon = L.DomUtil.create("i", this.options.iconClass.close);
closeNode.appendChild(closeIcon);
L.DomEvent.on(closeNode, "click", this._handleClose, this);

L.DomEvent.on(grabberNode, "mousedown", this._handleMoveStart, this);

var collapseNode = (this._collapse = L.DomUtil.create(
"div",
className + "-collapse"
));
this._collapseIcon = L.DomUtil.create("i", this.options.iconClass.collapse);
collapseNode.appendChild(this._collapseIcon);
L.DomEvent.on(collapseNode, "click", this._handleCollapse, this);

var resizerNode = (this._resizerNode = L.DomUtil.create(
"div",
className + "-resizer"
));
var resizeIcon = L.DomUtil.create("i", "fa fa-arrows-h fa-rotate-45");
resizerNode.appendChild(resizeIcon);
var resizeIcon = L.DomUtil.create("i", this.options.iconClass.resize);
resizerNode.appendChild(resizeIcon)

L.DomEvent.on(resizerNode, "mousedown", this._handleResizeStart, this);

Expand All @@ -237,11 +264,43 @@ L.Control.Dialog = L.Control.extend({
innerContainer.appendChild(contentNode);
innerContainer.appendChild(grabberNode);
innerContainer.appendChild(closeNode);
innerContainer.appendChild(collapseNode);
innerContainer.appendChild(resizerNode);

this._oldMousePos = { x: 0, y: 0 };
},

_handleCollapse: function() {
this._collapsed = !this._collapsed;
if (this._collapsed) {
this._rmClasses(this._collapseIcon, this.options.iconClass.collapse);
this._addClasses(this._collapseIcon, this.options.iconClass.expand);
L.DomUtil.addClass(this._container, 'dialog-hidden');
this._container._h = this._container.style.height;
this._container.style.height = '30px';
} else {
this._rmClasses(this._collapseIcon, this.options.iconClass.expand);
this._addClasses(this._collapseIcon, this.options.iconClass.collapse);
L.DomUtil.removeClass(this._container, 'dialog-hidden');
this._container.style.height = this._container._h;
}
console.log("_handleCollapse", this._collapsed);
},

_rmClasses: function(el, str) {
var arr = str.split(" ");
for (var k in arr) {
L.DomUtil.removeClass(el, arr[k]);
}
},

_addClasses: function(el, str) {
var arr = str.split(" ");
for (var k in arr) {
L.DomUtil.addClass(el, arr[k]);
}
},

_handleClose: function() {
this.close();
},
Expand Down
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ dialog.setContent("<p>Here's some new content!</p>");
| anchor | [Array][top, left] | [ 250, 250 ] | The starting point anchor location (from the upper left) in pixels.
| position | [String] | 'topleft' | The leaflet control div to place the modal inside, as a starting reference point.
| initOpen | [Boolean] | true | Whether or not to initialize in an open state.
| title | [String] |null | Title bar HTML
| iconClass | [Object] |`{grabber: "fa fa-arrows", close: "fa fa-times", resize: "fa fa-arrows-h fa-rotate-45", collapse: "fa caret-down", expand: "fa caret-up"}` | Classes to be used as icons for grabber, close, resize, expand/collapse

## Methods:

Expand Down