Permalink
Browse files

Added first extension: autoinit.

  • Loading branch information...
mmarcon committed Nov 19, 2012
1 parent ce11048 commit 8100b4569f308e0ec99e4184a71b79416695eed5
Showing with 91 additions and 0 deletions.
  1. +29 −0 EXTENSIONS.md
  2. +3 −0 Makefile
  3. +4 −0 README.md
  4. +9 −0 build-scripts/build-extensions.sh
  5. +1 −0 dist/extensions/autoinit.min.js
  6. +24 −0 src/examples/index.autoinit.html
  7. +21 −0 src/extensions/autoinit.js
View
@@ -0,0 +1,29 @@
#jHERE Extensions
Extensions extend the behavior of jHERE. A minified version of each extension is available in the `dist/extensions` folder.
**Note** that to improve performance the plugin and the needed extensions should be combined in a single file.
<div id="map"
class="map"
data-center="40.664167,-73.838611"
data-zoom="8"
data-type="map">
</div>
##Available extensions
###autoinit extension
When this extension is included a map is automatically initialized on a container with `id` or `class` `map`. Options are passed via data attributes as follows:
<div id="map"
class="map"
data-center="40.664167,-73.838611"
data-zoom="8"
data-type="map">
</div>
This extension packaged together with the plugin enables *HTML developers* to insert a map in their pages without having to write a single line of JavaScript.
View
@@ -13,6 +13,9 @@ plugin:
zepto:
@./node_modules/.bin/uglifyjs -o dist/zepto.adapter.min.js src/zepto.adapter.js
extensions:
@./build-scripts/build-extensions.sh
summary:
@ls -nhl dist | awk '{print $$9,$$5}' | tail -n +2
View
@@ -40,6 +40,10 @@ And done. Execute your code on window load.
That's it. All the documentation is available at [jhere.net/docs.html](http://jhere.net/docs.html).
## Extensions
Please refer to `EXTENSIONS.md` for information about the extensions for jHERE.
### Playground
Because [@thingsinjars](http://twitter.com/thingsinjars) is awesome **jHERE** has a playground, where you can go and experiment with the API, make cool maps, save the result as a Gist and share it with the world.
@@ -0,0 +1,9 @@
#!/bin/bash
mkdir -p dist/extensions
for js in `ls src/extensions/*.js`; do
file=`basename $js`
file="${file%.*}"
./node_modules/.bin/uglifyjs -o dist/extensions/${file}.min.js ${js}
done

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

Oops, something went wrong.
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate—all you really need…</title>
<style>
#map {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: white;
}
</style>
</head>
<body>
<div id="map" data-center="40.6699,-73.91461" data-zoom="12" data-type="pt"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="../jhere.js"></script>
<script type="text/javascript" src="../extensions/autoinit.js"></script>
</body>
</html>
View
@@ -0,0 +1,21 @@
;(function($, w){
//## Auto-init extension
//
//When this extension is included a map is automatically initialized on a
//container with `id` or `class` `map`.
//Options are passed via data attributes as follows:
//
//`<div id="map" class="map" data-center="40.664167,-73.838611" data-zoom="8" data-type="map"></div>`
$(w).on('load', function(){
var target = $('#map, .map'), options = {};
if(target.length === 0) {
return;
}
target = target.first();
options.center = (target.data('center')||"52.49,13.37").split(',').map(function(v){return parseFloat(v);});
options.zoom = target.data('zoom');
options.type = target.data('type');
target.jHERE(options);
});
})(jQuery, window);

0 comments on commit 8100b45

Please sign in to comment.