Commit 748ffb685fb38acf1289a0271429c92f30c7f101

arvind
Mon Sep 30 20:09:14 IST 2013

Tree SHA1: f7254c1
Parent SHA1: 8f0fbc9 (Fix wrong URL routes in the client)
raw diff | raw patch

Adding a map plugin
       - A new map model and view
       - The tile service provider is accepted as a entry in the editor
       - Mouchak now includes leaflet.js(cdn)

Diff rendering mode:
inline
side by side


4	4	padding: 3px;
5	5	font-size: 1.5em;
6	6	}
	7
	8	#map{
	9	width: 1000px;
	10	height: 500px;
	11	margin-top: 30px;
	12	position: relative;
	13	}


310	310	//$('#specific-content.preview').html();
311	311	view.render('.preview');*/
312	312	}
	313	else if(type === "map"){
	314	var template = _.template($('#map-template').html());
	315	$('#specific-content').html(template({
	316	tileLayer: this.model.get('tileLayer')
	317	}));
	318	}
313	319	},
314	320	typeChanged: function(event) {
315	321	var type = this.$select.val();


58	58	}
59	59	});
60	60
	61	// Map model
	62	var Map = BaseType.extend({
	63	defaults: _.extend(BaseType.prototype.defaults, {
	64	tileLayer: ""
	65	}),
	66	initialize: function(){
	67	BaseType.prototype.initialize.call(this, arguments);
	68	}
	69	});
	70
61	71	// Plugin model can be used to load dynamic components
62	72	// to the website by loading external JS files.
63	73	// Also the website can be styled by using external CSS files,
…	…
144	144	'rss': RSS,
145	145	'table': Table,
146	146	'plugin': Plugin,
	147	'map': Map,
147	148	'Page': Page,
148	149	'Pages': Pages
149	150	};
150	151
151	152	//content types to render in content menu
152		M.contentTypes = ['text', 'image', 'video', 'table', 'plugin'];
	153	M.contentTypes = ['text', 'image', 'video', 'table', 'plugin', 'map'];
153	154
154	155	})(M);


110	110	}
111	111	});
112	112
	113	var MapView = Backbone.View.extend({
	114	initialize: function(){
	115	_.bindAll(this);
	116	_.bind(this.render, this);
	117	},
	118	render: function(el){
	119	var template = _.template($("#map-template").html());
	120	$(el).append(template);
	121	var southWest = new L.LatLng(47.20, 4.04); //Logic to calculate the bounds for "world view".
	122	var northEast = new L.LatLng(55.10, 16.67);
	123	var restrictBounds = new L.LatLngBounds(southWest, northEast);
	124	M.map = new L.Map('map',{mapBounds: restrictBounds, zoom: 2, worldCopyJump: true, center:[14.604847155053898, 2.8125] });
	125	L.tileLayer(this.model.get("tileLayer")).addTo(M.map);
	126	}
	127	});
	128
113	129	var PageView = Backbone.View.extend({
114	130	tagName: 'div',
115	131	className: 'pageview',
…	…
174	174	'rss': RSSView,
175	175	'table': TableView,
176	176	'plugin': PluginView,
	177	'map': MapView,
177	178	'PageView': PageView
178	179	};
179	180	})(M);


204	204	</div>
205	205	</script>
206	206
	207	<script type="text/template" id="map-template">
	208	<div class="data">
	209	<div class="control-group">
	210	<div class="input-prepend">
	211	<span class="add-on"><strong>Tile Provider URL</strong></span>
	212	<input type="text" placeholder="http://{s}.tile.cloudmade.com/<API_KEY>/997/256/{z}/{x}/{y}.png" value="<%= tileLayer %>"
	213	m-data-target="tileLayer">
	214	</div>
	215	</div>
	216	<div class="preview"></div>
	217	</div>
	218	</script>
	219
	220
207	221	<script type="text/template" id="media-template">
208	222	<div class="data">
209	223	<div class="control-group">


16	16	<link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}">
17	17	<link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">
18	18	<link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
	19	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	20	<!--[if lte IE 8]>
	21	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	22	<![endif]-->
	23
	24	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
19	25	<script src="{{url_for('static', filename='js/lib/modernizr-2.6.1.min.js')}}"></script>
20	26	</head>
21	27	<body>
…	…
113	113	</ul>
114	114	</li>
115	115	</script>
	116
	117	<!-- Template for map-->
	118	<script type="text/template" id="map-template">
	119	<div id="map">
	120	</div>
	121	</script>
	122
	123
116	124
117	125	<script type="text/template" id="image-view-template">
118	126	<div class="img-wrapper">

Commit 748ffb685fb38acf1289a0271429c92f30c7f101

Gitorious