Commit 748ffb685fb38acf1289a0271429c92f30c7f101

  • avatar
  • arvind
  • Mon Sep 30 20:09:14 IST 2013
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

mouchak/static/css/mouchak.css

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

mouchak/static/js/editor.js

310 //$('#specific-content.preview').html();310 //$('#specific-content.preview').html();
311 view.render('.preview');*/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 typeChanged: function(event) {320 typeChanged: function(event) {
315 var type = this.$select.val();321 var type = this.$select.val();

mouchak/static/js/models.js

58 }58 }
59 });59 });
6060
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 // Plugin model can be used to load dynamic components71 // Plugin model can be used to load dynamic components
62 // to the website by loading external JS files.72 // to the website by loading external JS files.
63 // Also the website can be styled by using external CSS files,73 // Also the website can be styled by using external CSS files,
……
144 'rss': RSS,144 'rss': RSS,
145 'table': Table,145 'table': Table,
146 'plugin': Plugin,146 'plugin': Plugin,
147 'map': Map,
147 'Page': Page,148 'Page': Page,
148 'Pages': Pages149 'Pages': Pages
149 };150 };
150151
151 //content types to render in content menu152 //content types to render in content menu
152 M.contentTypes = ['text', 'image', 'video', 'table', 'plugin'];
153 M.contentTypes = ['text', 'image', 'video', 'table', 'plugin', 'map'];
153154
154})(M);155})(M);

mouchak/static/js/views.js

110 }110 }
111 });111 });
112112
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 var PageView = Backbone.View.extend({129 var PageView = Backbone.View.extend({
114 tagName: 'div',130 tagName: 'div',
115 className: 'pageview',131 className: 'pageview',
……
174 'rss': RSSView,174 'rss': RSSView,
175 'table': TableView,175 'table': TableView,
176 'plugin': PluginView,176 'plugin': PluginView,
177 'map': MapView,
177 'PageView': PageView178 'PageView': PageView
178 };179 };
179})(M);180})(M);

mouchak/templates/editor.html

204 </div>204 </div>
205 </script>205 </script>
206206
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 <script type="text/template" id="media-template">221 <script type="text/template" id="media-template">
208 <div class="data">222 <div class="data">
209 <div class="control-group">223 <div class="control-group">

mouchak/templates/index.html

16 <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}">16 <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}">
17 <link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">17 <link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">
18 <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">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 <script src="{{url_for('static', filename='js/lib/modernizr-2.6.1.min.js')}}"></script>25 <script src="{{url_for('static', filename='js/lib/modernizr-2.6.1.min.js')}}"></script>
20 </head>26 </head>
21 <body>27 <body>
……
113 </ul>113 </ul>
114 </li>114 </li>
115 </script>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
116124
117 <script type="text/template" id="image-view-template">125 <script type="text/template" id="image-view-template">
118 <div class="img-wrapper">126 <div class="img-wrapper">