diff --git a/README.md b/README.md index 22cccee..deb0f6f 100644 --- a/README.md +++ b/README.md @@ -26,15 +26,24 @@ Then, show a message/alert: or, when implicitly used with the map: map.messagebox.show( 'This is the message' ); + +more examples: + + map.messagebox.show( 'this is a success message', map.messagebox.options.timeout, 'success'); + map.messagebox.show( 'this is a error message', map.messagebox.options.timeout, 'error'); + map.messagebox.show( 'this is a warning message', map.messagebox.options.timeout, 'warning'); + ## Available Options: -There are only two options: +There are only three options: `position:` (string) The standard Leaflet.Control position parameter. Optional, defaults to 'topright' `timeout:` (integer) The duration the messagebox/notification is shown in milliseconds. Optional, defaults to 3000 (3 sec). +`style:` (string) a especific style, beetween (default, warning, error or success ) + ## Styling ## The messagebox can be styled with CSS, see [the css file]( leaflet-messagebox.css) for details. diff --git a/isa_framework/font/isabelc.eot b/isa_framework/font/isabelc.eot new file mode 100644 index 0000000..6dec7ca Binary files /dev/null and b/isa_framework/font/isabelc.eot differ diff --git a/isa_framework/font/isabelc.svg b/isa_framework/font/isabelc.svg new file mode 100644 index 0000000..94ce5f6 --- /dev/null +++ b/isa_framework/font/isabelc.svg @@ -0,0 +1,40 @@ + + + +Copyright (C) 2017 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/isa_framework/font/isabelc.ttf b/isa_framework/font/isabelc.ttf new file mode 100644 index 0000000..c373081 Binary files /dev/null and b/isa_framework/font/isabelc.ttf differ diff --git a/isa_framework/font/isabelc.woff b/isa_framework/font/isabelc.woff new file mode 100644 index 0000000..f4c3b4b Binary files /dev/null and b/isa_framework/font/isabelc.woff differ diff --git a/isa_framework/font/isabelc.woff2 b/isa_framework/font/isabelc.woff2 new file mode 100644 index 0000000..fb40a0b Binary files /dev/null and b/isa_framework/font/isabelc.woff2 differ diff --git a/leaflet-messagebox.css b/leaflet-messagebox.css index c640930..25b365a 100644 --- a/leaflet-messagebox.css +++ b/leaflet-messagebox.css @@ -1,6 +1,91 @@ +@font-face { + font-family: 'isabelc'; + src: url('isa_framework/font/isabelc.eot'); + src: url('isa_framework/font/isabelc.eot#iefix') format('embedded-opentype'), + url('isa_framework/font/isabelc.woff2') format('woff2'), + url('isa_framework/font/isabelc.woff') format('woff'), + url('isa_framework/font/isabelc.ttf') format('truetype'), + url('isa_framework/font/isabelc.svg#isabelc') format('svg'); + font-weight: normal; + font-style: normal; + } .leaflet-control-messagebox { display: none; /* Initially hidden */ - border: 2px solid red; - background-color: white; + border: 1px solid #d2dbf4; + background-color: #f4f8fd; padding: 3px 10px; + margin:5px; } +.leaflet-control-messagebox::before { + top:0; + left:-5px; + font-family: isabelc; + font-style: normal; + font-weight: 400; + padding-right:10px; + content:'\e809'; + font-weight: bold; + } + +.leaflet-control-messagebox-error { + display: none; /* Initially hidden */ + border: 1px solid #f1a899; + background-color: #fddfdf; + color: #5f3f3f; + padding: 3px 10px; +} +.leaflet-control-messagebox-error:before { + top:0; + left:-5px; + font-family: isabelc; + font-style: normal; + font-weight: 400; + padding-right:10px; + content:"\e80d Error:"; + color:#1a1a1a; + font-weight: bold; + } + + + +.leaflet-control-messagebox-warning { + display: none; /* Initially hidden */ + border: 1px solid #dad55e; + background-color: #fffa90; + color: #777620; + padding: 3px 10px; +} +.leaflet-control-messagebox-warning:before { + top:0; + left:-5px; + font-family: isabelc; + font-style: normal; + font-weight: 400; + padding-right:10px; + content:"\e809 Advertencia:"; + font-weight: bold; + color:#1a1a1a; + } + +.leaflet-control-messagebox-success { + display: none; /* Initially hidden */ + border: 1px solid #4F8A10; + background-color: #DFF2BF; + color: #4F8A10; + padding: 3px 10px; +} +.leaflet-control-messagebox-success:before { + top:0; + left:-5px; + font-family: isabelc; + font-style: normal; + font-weight: 400; + padding-right:10px; + content:'\e80c'; + font-weight: bold; + color:#4F8A10; + } + + + + diff --git a/leaflet-messagebox.js b/leaflet-messagebox.js index cad251f..0c5d281 100644 --- a/leaflet-messagebox.js +++ b/leaflet-messagebox.js @@ -1,7 +1,8 @@ L.Control.Messagebox = L.Control.extend({ options: { position: 'topright', - timeout: 3000 + timeout: 3000, + default_style: 'leaflet-control-messagebox' }, onAdd: function (map) { @@ -10,13 +11,26 @@ L.Control.Messagebox = L.Control.extend({ return this._container; }, - show: function (message, timeout) { + show: function (message, timeout, style) { var elem = this._container; elem.innerHTML = message; elem.style.display = 'block'; timeout = timeout || this.options.timeout; + style = style || this.options.default_style; + elem.className = this.options.default_style; + if ( style == 'error') { + elem.classList.add('leaflet-control-messagebox-error'); + } + if ( style == 'warning') { + elem.classList.add('leaflet-control-messagebox-warning'); + } + + if ( style == 'success') { + elem.classList.add('leaflet-control-messagebox-success'); + } + if (typeof this.timeoutID == 'number') { clearTimeout(this.timeoutID); }