Permalink
Browse files

New icon + project restructuring

- Move src files into a src directory and
adds a Makefile to remove assets into a dist/ directory.
- Spruce up the exmaple page
- Add a new fullscreen icon with retina support.

V bump to v0.0.1
  • Loading branch information...
tristen
tristen committed Nov 27, 2013
1 parent 0dc9144 commit aaccc7f9540f055c6d72b0f5e7c28c1c69bb4fc3
View
@@ -0,0 +1 @@
node_modules
View
@@ -0,0 +1,27 @@
# See the README for installation instructions.
UGLIFY = node_modules/.bin/uglifyjs
all: \
$(shell npm install && mkdir -p dist) \
dist/leaflet.fullscreen.css \
dist/Leaflet.fullscreen.js \
dist/Leaflet.fullscreen.min.js \
dist/fullscreen.png
clean:
rm -f dist/*
dist/fullscreen.png: src/fullscreen.png
cp src/fullscreen.png dist/fullscreen.png
cp src/fullscreen@2x.png dist/fullscreen@2x.png
dist/leaflet.fullscreen.css: src/leaflet.fullscreen.css
cp src/leaflet.fullscreen.css dist/leaflet.fullscreen.css
dist/Leaflet.fullscreen.js: src/Leaflet.fullscreen.js
cp src/Leaflet.fullscreen.js dist/Leaflet.fullscreen.js
dist/Leaflet.fullscreen.min.js: dist/Leaflet.fullscreen.js
$(UGLIFY) dist/Leaflet.fullscreen.js > dist/Leaflet.fullscreen.min.js
.PHONY: clean
View
@@ -1,17 +1,35 @@
A HTML5 fullscreen implementation for Leaflet.
## Leaflet.fullscreen
A HTML5 fullscreen plugin for Leaflet.
## Usage
### Usage
``` js
var map = new L.Map('map', {
fullscreenControl: true
});
```
var map = new L.Map('map', {fullscreenControl: true});
```
## API
### API
``` js
L.Map#isFullscreen() // Is the map fullscreen?
L.Map#toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
`L.Map#isFullscreen()`: Is the map fullscreen?
// `fullscreenchange` Event that's fired when entering or exiting fullscreen.
map.on('fullscreenchange', function () {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
L.Control.Fullscreen // A fullscreen button. Or use the `{fullscreenControl: true}` option when creating L.Map.
```
`L.Map#toggleFullscreen()`: Either go fullscreen, or cancel the existing fullscreen.
### Building
`fullscreenchange` event: Fired by map when entering or exiting fullscreen.
npm install && make
`L.Control.Fullscreen`: A fullscreen button. Or use the `{fullscreenControl: true}` option when creating L.Map.
__ProTip__ You may want to install `watch` so you can run `watch make`
without needing to execute make on every change.
View
@@ -0,0 +1,125 @@
L.Control.Fullscreen = L.Control.extend({
options: {
position: 'topleft',
title: 'View Fullscreen'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container);
this._map = map;
link.href = '#';
link.title = this.options.title;
L.DomEvent.on(link, 'click', this._click, this);
return container;
},
_click: function (e) {
L.DomEvent.stopPropagation(e);
L.DomEvent.preventDefault(e);
this._map.toggleFullscreen();
}
});
L.Map.include({
isFullscreen: function () {
return this._isFullscreen;
},
toggleFullscreen: function () {
var container = this.getContainer();
if (this.isFullscreen()) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else {
L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen');
this._toggleClass();
this.invalidateSize();
this._isFullscreen = false;
this.fire('fullscreenchange');
}
} else {
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else {
L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen');
this._toggleClass();
this.invalidateSize();
this._isFullscreen = true;
this.fire('fullscreenchange');
}
}
},
_toggleClass: function() {
var container = this.getContainer();
if (this.isFullscreen()) {
L.DomUtil.removeClass(container, 'leaflet-fullscreen-on');
} else {
L.DomUtil.addClass(container, 'leaflet-fullscreen-on');
}
},
_onFullscreenChange: function () {
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
this._toggleClass();
if (fullscreenElement === this.getContainer()) {
this._isFullscreen = true;
this.fire('fullscreenchange');
} else if (this._isFullscreen) {
this._isFullscreen = false;
this.fire('fullscreenchange');
}
}
});
L.Map.mergeOptions({
fullscreenControl: false
});
L.Map.addInitHook(function () {
if (this.options.fullscreenControl) {
this.fullscreenControl = new L.Control.Fullscreen();
this.addControl(this.fullscreenControl);
}
var fullscreenchange;
if ('onfullscreenchange' in document) {
fullscreenchange = 'fullscreenchange';
} else if ('onmozfullscreenchange' in document) {
fullscreenchange = 'mozfullscreenchange';
} else if ('onwebkitfullscreenchange' in document) {
fullscreenchange = 'webkitfullscreenchange';
}
if (fullscreenchange) {
this.on('load', function () {
L.DomEvent.on(document, fullscreenchange, this._onFullscreenChange, this);
});
this.on('unload', function () {
L.DomEvent.off(document, fullscreenchange, this._onFullscreenChange);
});
}
});
L.control.fullscreen = function (options) {
return new L.Control.Fullscreen(options);
};

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
BIN +299 Bytes dist/fullscreen.png
Binary file not shown.
View
BIN +420 Bytes dist/fullscreen@2x.png
Binary file not shown.
@@ -1,17 +1,28 @@
.leaflet-container:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
.leaflet-control-fullscreen a {
background:transparent url(fullscreen.png) no-repeat 0 0;
background-size:26px 52px;
}
.leaflet-fullscreen-on .leaflet-control-fullscreen a {
background-position:0 -26px;
}
.leaflet-container:-webkit-full-screen {
width:100%!important;
height:100%!important;
}
.leaflet-pseudo-fullscreen {
position: fixed !important;
width: 100% !important;
height: 100% !important;
top: 0px !important;
left: 0px !important;
z-index:99999;
}
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
z-index:99999;
}
.leaflet-control-fullscreen a {
background-image: url(leaflet.fullscreen.png);
}
@media
(-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
.leaflet-control-fullscreen a {
background-image:url(fullscreen@2x.png);
}
}
View
Binary file not shown.
View

This file was deleted.

Oops, something went wrong.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
Oops, something went wrong.

0 comments on commit aaccc7f

Please sign in to comment.