1 {% extends "egonomy_newbase.html" %} |
1 {% extends "egonomy_newbase.html" %} |
2 {% load static %} |
2 {% load static %} |
3 {% load i18n %} |
3 {% load i18n %} |
4 |
4 |
5 {% block title %}{% trans "View a collection" %}{% endblock %} |
5 {% block title %}{% trans "View a collection" %} : {{ col.title }}{% endblock %} |
|
6 |
|
7 {% block css_page %}<link rel="stylesheet" href="{% static 'egonomy/lib/leaflet/leaflet.css' %}" />{% endblock %} |
6 |
8 |
7 {% block popins %} |
9 {% block popins %} |
8 {% if user.is_authenticated %} |
10 {% if user.is_authenticated %} |
9 {% ifequal user col.author %} |
11 {% ifequal user col.author %} |
10 <div id="collection-parameters" class="popin big-popin box-shadow"> |
12 <div id="collection-parameters" class="popin big-popin box-shadow"> |
108 </form> |
110 </form> |
109 </section> |
111 </section> |
110 </div> |
112 </div> |
111 <div class="popin modifyitem-success box-shadow"> |
113 <div class="popin modifyitem-success box-shadow"> |
112 <h2>{% trans "The item was successfully modified" %}</h2> |
114 <h2>{% trans "The item was successfully modified" %}</h2> |
113 <!--h2><a class="collection-url" href="#">{% trans "See the collection" %}</a></h2--> |
|
114 </div> |
115 </div> |
115 {% endifequal %} |
116 {% endifequal %} |
116 {% endif %} |
117 {% endif %} |
117 {% endblock %} |
118 {% endblock %} |
118 |
119 |
119 {% block content %} |
120 {% block content %} |
120 <div class="title-page"> |
121 <div class="title-page"> |
121 <h2>{{ col.title }} / <span>par {{ col.author }}</span></h2> |
122 <h2>{{ col.title }} / <span>par {{ col.author }}</span></h2> |
122 <ul class="sub-nav title-menu clearfix"> |
123 <ul class="sub-nav title-menu clearfix"> |
123 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>liste</a></li> |
124 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=list" {% ifequal display "list" %}class="active"{% endifequal %}>{% trans "list" %}</a></li> |
124 <li><span class="dot-6"></span></li> |
125 <li><span class="dot-6"></span></li> |
125 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>mosaïque</a></li> |
126 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=mosaic" {% ifequal display "mosaic" %}class="active"{% endifequal %}>{% trans "mosaic" %}</a></li> |
126 <li><span class="dot-6"></span></li> |
127 <li><span class="dot-6"></span></li> |
127 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>diaporama</a></li> |
128 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=slideshow" {% ifequal display "slideshow" %}class="active"{% endifequal %}>{% trans "slideshow" %}</a></li> |
|
129 <li><span class="dot-6"></span></li> |
|
130 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>{% trans "geographical" %}</a></li> |
128 <!--li><span class="dot-6"></span></li> |
131 <!--li><span class="dot-6"></span></li> |
129 <li><a href="{% url 'view_collection' collection_pk=col.pk %}?display=geographical" {% ifequal display "geographical" %}class="active"{% endifequal %}>géographique</a></li> |
|
130 <li><span class="dot-6"></span></li> |
|
131 <li><a href="#">envoyer vers collage</a></li--> |
132 <li><a href="#">envoyer vers collage</a></li--> |
132 </ul> |
133 </ul> |
133 </div> |
134 </div> |
134 <div class="bar-tools clearfix"> |
135 <div class="bar-tools clearfix"> |
135 <ul class="clearfix"> |
136 <ul class="clearfix"> |
169 {% include 'partial/item_in_collection_mosaic.html' %} |
170 {% include 'partial/item_in_collection_mosaic.html' %} |
170 {% endfor %} |
171 {% endfor %} |
171 </ul> |
172 </ul> |
172 </div> |
173 </div> |
173 {% endifequal %} |
174 {% endifequal %} |
|
175 {% ifequal display "geographical" %} |
|
176 <div id="map"></div> |
|
177 <ul class="list-style-4 clearfix"> |
|
178 {% for item in items %} |
|
179 {% include 'partial/item_in_collection_geographical.html' %} |
|
180 {% endfor %} |
|
181 </ul> |
|
182 {% endifequal %} |
174 {% else %} |
183 {% else %} |
175 {% ifequal display "slideshow" %} |
184 {% ifequal display "slideshow" %} |
176 <div class="clearfix"> |
185 <div class="clearfix"> |
177 <iframe width="100%" height="700px" src="{% url 'embed_slideshow' collection_pk=col.pk %}" seamless="seamless" allowfullscreen="allowfullscreen"></iframe> |
186 <iframe width="100%" height="700px" src="{% url 'embed_slideshow' collection_pk=col.pk %}" seamless="seamless" allowfullscreen="allowfullscreen"></iframe> |
178 </div> |
187 </div> |
195 {% endif %} |
204 {% endif %} |
196 {% endblock %} |
205 {% endblock %} |
197 |
206 |
198 {% block js_page %} |
207 {% block js_page %} |
199 {% ifequal display "mosaic" %}<script type="text/javascript" src="{% static 'egonomy/js/keyword-mosaic.js' %}"></script>{% endifequal %} |
208 {% ifequal display "mosaic" %}<script type="text/javascript" src="{% static 'egonomy/js/keyword-mosaic.js' %}"></script>{% endifequal %} |
|
209 {% ifequal display "geographical" %}<script type="text/javascript" src="{% static 'egonomy/lib/leaflet/leaflet.js' %}"></script>{% endifequal %} |
200 <script type="text/javascript"> |
210 <script type="text/javascript"> |
201 $(function() { |
211 $(function() { |
202 $("#search-type-big").change(function() { |
212 $("#search-type-big").change(function() { |
203 $("#search-form-big").attr("action", $(this).val()); |
213 $("#search-form-big").attr("action", $(this).val()); |
204 if ($("#search-field-big").val()) { |
214 if ($("#search-field-big").val()) { |
205 $("#search-form-big").submit(); |
215 $("#search-form-big").submit(); |
206 } |
216 } |
207 }); |
217 }); |
208 }); |
218 }); |
|
219 |
|
220 {% ifequal display "geographical" %} |
|
221 if($('#map').length){ |
|
222 // get all geo datas |
|
223 places = {{ places|safe }}; |
|
224 for (var loc in places) { |
|
225 // http://maps.googleapis.com/maps/api/geocode/json?address=Bayonne,%20mus%C3%A9e%20Bonnat&sensor=false |
|
226 $.ajax({ |
|
227 url: "http://maps.googleapis.com/maps/api/geocode/json", |
|
228 type: "GET", |
|
229 async: false, |
|
230 data: {"address":loc, "sensor":false}, |
|
231 success: function(json){ |
|
232 // We test if results are ok |
|
233 if("results" in json){ |
|
234 if(json["results"].length>0){ |
|
235 r = json["results"][0]; |
|
236 if("geometry" in json["results"][0]){ |
|
237 g = json["results"][0]["geometry"]; |
|
238 if("location" in g){ |
|
239 l = g["location"]; |
|
240 // We get lat and lng and save it. |
|
241 // Thanks to async:false, loc is still the good reference. |
|
242 places[loc]["location"]["lat"] = l["lat"]; |
|
243 places[loc]["location"]["lng"] = l["lng"]; |
|
244 } |
|
245 } |
|
246 } |
|
247 } |
|
248 }, |
|
249 error: function(){ |
|
250 // pass |
|
251 } |
|
252 }); |
|
253 } |
|
254 // Locations have now lat and lng, we can init the map |
|
255 initmap(); |
|
256 } |
|
257 function initmap() { |
|
258 // set up the map |
|
259 map = new L.Map('map'); |
|
260 |
|
261 // create the tile layer with correct attribution |
|
262 var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; |
|
263 var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 20}); |
|
264 |
|
265 // start the map in South-East England |
|
266 map.setView(new L.LatLng(48.833, 2.333),4); |
|
267 map.addLayer(osm); |
|
268 |
|
269 // markers |
|
270 for (var loc in places) { |
|
271 if(places[loc]["location"]["lat"] && places[loc]["location"]["lng"]){ |
|
272 var marker = L.marker([places[loc]["location"]["lat"], places[loc]["location"]["lng"]]).addTo(map); |
|
273 marker.bindPopup(loc); |
|
274 marker.on('click', function (d) { |
|
275 // Get the marker's title thanks to leaflet object organisation |
|
276 marker_title = d.target._popup._content; |
|
277 // Get the items |
|
278 highlight_items(places[marker_title]["items"]); |
|
279 }); |
|
280 } |
|
281 } |
|
282 map.on('popupclose', function(e) { |
|
283 $(".geo-item").css("opacity","1"); |
|
284 }); |
|
285 } |
|
286 function highlight_items(items){ |
|
287 // unhighlight all |
|
288 $(".geo-item").css("opacity","0.3"); |
|
289 for(var i=0;i<items.length;i++){ |
|
290 $("#item" + items[i]).css("opacity","1"); |
|
291 } |
|
292 } |
|
293 {% endifequal %} |
209 </script> |
294 </script> |
210 {% endblock %} |
295 {% endblock %} |