templates/main/timelines.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig'%}
  3. {% block stylesheets %}
  4. {{ parent() }}
  6. <!--link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css"-->
  7. <link rel="preconnect" href="https://fonts.gstatic.com">
  8. <link rel="stylesheet" href="{{ asset('node_modules/leaflet/dist/leaflet.css')}}"></link>
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css" />
  10. <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
  11. <link rel="stylesheet" href="{{ asset('js/easy-button/easy-button.css') }}" type="text/css" />
  12. <link rel="stylesheet" href="{{asset('css/leaflet.timedimension.control.css')}}" type="text/css" />
  13. <link rel="stylesheet" href="{{ asset('css/timelines.css') }}" type="text/css" />
  14. {% endblock %}
  16. {% block title %}Timemap {{title}}{% endblock %}
  17. {% block body%}
  19. <div class="content-w content-w-map">
  20. <div class="header-menu" data-menu="navmenuProjekte"></div>
  21. <div class="content-back"><a href="{{ path('main_sub', {sub: 'navmenuProjekte'}) }}"><span class="content-back-inner">Projekte</span></a></div>
  22. <div class="content">
  23. <div class="chapters" id="chapters">
  24. <div class="toggler"><span></span></div>
  25. <ul class="chapters-list">
  26. </ul>
  27. </div>
  29. <div class="galleria-w">
  30. <div id="map" class="map"></div>
  31. <div id="map-loading" class="map-loading is-visible" role="status" aria-live="polite" aria-busy="true">
  32. <div class="map-loading-inner">
  33. <div class="map-loading-spinner" aria-hidden="true"></div>
  34. <div class="map-loading-text">Kartendaten werden geladen…</div>
  35. </div>
  36. </div>
  37. {# % if timeline !='' %}
  38. <div id="timeline"></div>
  39. {%endif%}#}
  40. <div id="timeline"></div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. {% endblock %}
  47. {% block javascripts %}
  48. {{ parent() }}
  49. {#
  50. <script type="text/javascript" src="{{asset('js/api.simile-widgets.org/timeline/2.3.1/simile-ajax-api.js?bundle=true')}}"></script>
  51. <script type="text/javascript" src="{{asset('js/api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true&timeline-use-local-resources=true')}}"></script>
  52. #}
  53. <script type="text/javascript" src="{{ asset('node_modules/leaflet/dist/leaflet.js')}}"></script>
  54. {# <script type="text/javascript" src="{{ asset('js/timelines.js')}}"></script>#}
  55. <script type="text/javascript" src="{{asset('js/xml2json.js')}}"></script>
  57. <script type="text/javascript" src="{{asset('js/iso8601.js')}}"></script>
  58. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js"></script>
  59. <script type="text/javascript" src="https://cdn.rawgit.com/tryone144/dateFormat/master/date.format.js"></script>
  61. {# <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/iso8601-js-period@0.2.1/iso8601.min.js"></script>#}
  62. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.2/leaflet-omnivore.js"></script>
  63. <script type="text/javascript" src="{{asset('js/editor/togeojson.js')}}"></script>
  64. <script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.js')}}"></script>
  65. <script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.util.js')}}"></script>
  66. <script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.layer.js')}}"></script>
  67. {#<script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.layer.wms.js')}}"></script>
  68. #}<script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.layer.geojson.js')}}"></script>
  69. <script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.player.js')}}"></script>
  71. <script type="text/javascript" src="{{asset('js/timedimension/leaflet.timedimension.control.js')}}"></script>
  72. <script type="text/javascript" src="{{asset('js/timedimension/timelayer_mb.js')}}"></script>
  73. <script type="text/javascript" src="{{asset('js/timedimension/control_mb.js')}}"></script>
  75. <script type="text/javascript" src="{{asset('js/timedimension/timedimension.player.MB.js')}}"></script>
  77. <script type="text/javascript" src="{{asset('js/permalink/Permalink.js')}}"></script>
  78. <script type="text/javascript" src="{{asset('js/permalink/permalink_mb.js')}}"></script>
  79. <script type="text/javascript" src="{{asset('js/easy-button/easy-button.js')}}"></script>
  81. <script type="text/javascript" src="{{asset('js/timedimension/baselayers.js')}}"></script>
  82. <script type="text/javascript" src="{{asset('js/timedimension/TileLayer.Grayscale.js')}}"></script>
  84. <script type="text/javascript" src="{{asset('js/timelines.js')}}"></script>
  85. {% if id == 'autobahn_europa' or id == 'bahn' or id == 'bahn_europa' or id == 'bahn_de_orm' or id == 'bahn_de_hybrid' %}
  86. <script type="text/javascript" src="{{ asset('timelines/js/timeline_borders.js') }}"></script>
  87. {% endif %}
  88. {% if id == 'autobahn_europa' %}
  89. <script type="text/javascript" src="{{ asset('timelines/js/autobahn_europa_ui.js') }}"></script>
  90. {% endif %}
  91. {% if id == 'bahn' or id == 'bahn_europa' or id == 'bahn_de_orm' or id == 'bahn_de_hybrid' %}
  92. <script type="text/javascript" src="{{ asset('timelines/js/bahn_ui.js') }}"></script>
  93. {% endif %}
  95. <script type="text/javascript">
  97. var kmlSource = "{{ path('timelines_kml', {project: id, filepath: '__FILE__.kml'}) }}".replace('__FILE__.kml', '');
  98. var timelineIconSource = "{{ asset('timelines/icons/') }}";
  99. var linkPath = "{{ path('timelines')}}";
  101. $(document).ready(function() {
  102. navigateToActiveId("navmenuTimeline");
  103. $(document.body).addClass('inner-page timeline-page');
  105. if ('{{ id }}' !== '') {
  106. var projectScript = "{{ asset('timelines/js/'~id~'.js') }}";
  107. $.ajax({
  108. url: projectScript,
  109. dataType: 'script',
  110. cache: false
  111. }).done(function () {
  112. if (typeof buildtimeline === 'function') {
  113. buildtimeline();
  114. }
  115. // Info/Quellen etc. never start a KML load — clear the
  116. // default spinner so the map/content is not blocked forever.
  117. setTimeout(function () {
  118. if (typeof hideMapLoading === 'function' &&
  119. typeof _mapDataLoadPending !== 'undefined' &&
  120. _mapDataLoadPending === 0) {
  121. hideMapLoading();
  122. }
  123. }, 0);
  124. }).fail(function (jqXHR, textStatus, errorThrown) {
  125. console.error('Timeline script failed to load:', projectScript, textStatus, errorThrown);
  126. if (typeof hideMapLoading === 'function') {
  127. hideMapLoading();
  128. }
  129. });
  130. }
  132. loadChapters();
  134. // resizeCanvas();
  137. });
  139. // Firefox bfcache can restore a stale/broken map after in-RDM project switches.
  140. window.addEventListener('pageshow', function (event) {
  141. if (event.persisted) {
  142. window.location.reload();
  143. }
  144. });
  146. function loadChapters()
  147. {
  148. $("#chapters li .label-default").removeClass("label-default");
  149. $("#chapters ul #1").addClass("label-default");
  151. var chapters =[''];
  152. var data =[];
  154. try
  155. {
  156. $.get('{{asset('/timelines/')}}' + '/content.xml' , function(xml)
  157. {
  158. var route = "{{ path(app.request.attributes.get('_route'),
  159. app.request.attributes.get('_route_params')) }}";
  160. var className = "";
  161. if(route === '{{path('timelines', {id: 'info'})}}')
  162. {
  163. className = "label-default";
  164. }
  165. var i;
  166. var chapterArray = $.xml2json(xml).chapter;
  167. for(i in chapterArray) {
  169. chapters[i] = chapterArray[i].name;
  170. data[i] = chapterArray[i].data;
  171. }
  173. $("#chapters ul").append($('<li>').append($('<a>').attr('href','{{path('timelines')}}/info').attr('id', 0).append("Info").addClass(className)));
  174. for (var i in chapters)
  175. {
  176. className = "";
  177. // alert(data[i]);
  178. if(route === '{{path('timelines')}}/'+data[i])
  179. {
  180. className = "label-default";
  181. }
  183. $("#chapters ul").append(
  184. $('<li>').append(
  185. $('<a>').attr('href', '{{path('timelines')}}/'+data[i]).attr('id', 0).append(chapters[i]).addClass(className)
  186. ));
  188. }
  190. className = "";
  191. if(route === '{{path('timelines')}}/quellen' && window.location.hash !== '#spenden')
  192. {
  193. className = "label-default";
  194. }
  195. $("#chapters ul").append($('<li>').append($('<a>').attr('href','{{path('timelines')}}/quellen').attr('id', 0).append("Quellen / Links").addClass(className)));
  196. className = "";
  197. if (route === '{{path('timelines')}}/quellen' && window.location.hash === '#spenden') {
  198. className = "label-default";
  199. }
  200. $("#chapters ul").append($('<li>').append($('<a>').attr('href','{{path('timelines')}}/quellen#spenden').attr('id', 0).append("Spenden").addClass(className)));
  201. className = "";
  202. {# $("#chapters ul").append($('<li>').append($('<a>').attr('href','{{path('contact')}}/Fehler in Timeline').attr('subject', 0).append("Fehler entdeckt?")));
  203. #}
  205. });
  206. }
  208. catch(e)
  209. {
  210. console.log(e.message);
  211. }
  212. }
  213. /* function initContent()
  214. {
  215. /*canvasmenu = new Canvas('canvasmenu');
  216. canvasmenu.create(dataMenu);
  217. canvasmenu.resizeCanvas();
  218. canvasmenu.setCursor('cursor');
  219. $('#canvasmenu').on('mousedown', function (e) {
  220. $('#canvasmenu').on('mouseup mousemove', function handler(e) {
  221. if (e.type === 'mouseup') {
  223. if(dataMenu.links[0] !== null && dataMenu.links[0] !== '')
  224. {
  225. window.location = dataMenu.links[0];
  226. }
  227. }
  228. })
  229. });
  230. }*/
  232. /*function resizeContent()
  233. {
  234. if(canvasmenu !== null)
  235. {
  236. canvasmenu.resizeCanvas();
  237. }
  238. var height = $("#map").height();
  239. $(".leaflet-control-layers").css("max-height", height);
  240. $(".leaflet-control-layers").css("overflow", "auto");
  241. }*/
  242. function loadSet(set) {
  244. $("#chapters li .label-default").removeClass("label-default");
  245. $("#chapters ul #"+set).addClass("label-default");
  247. setName = set;
  249. //resizeCanvas();
  251. };
  253. /*function resizeCanvas() {
  255. var width = $('main').innerWidth();
  256. var menuWidth = parseInt($('#chapters').css("margin-left"), 10) + parseInt($('#chapters').css("width"),10);
  257. var optionWidth = 0;//parseInt($('#optioncontainer').css("width"),10);
  258. var optionHeight = 0;//parseInt($('#optioncontainer').css("width"),10);
  260. var sliderH = 0;//parseInt($('#timelinecontainer').css("height"),10);
  262. var mapWidth = width - menuWidth;
  263. var height = $('main').innerHeight();
  265. var hOptions = 0;
  266. var wOptions = 0;
  269. $('.mapcontainer').css("bottom", sliderH+ "px");
  271. if(4*height > 3* mapWidth)
  272. {
  274. $('#optioncontainer').css("width", mapWidth + "px");
  275. $('#optioncontainer').css("height", optionHeight + "px");
  277. // $('#timelinecontainer').css("width",mapWidth+ "px");
  278. $('.mapcontainer').css("right", 0 + "px");
  279. $('.mapcontainer').css("top", optionHeight + "px");
  281. }
  282. else
  283. {
  284. $('#optioncontainer').css("width", optionWidth +"px");
  285. $('#optioncontainer').css("height", "100%");
  287. // $('#timelinecontainer').css("width", (mapWidth - optionWidth)+ "px");
  288. $('.mapcontainer').css("right", (optionWidth)+ "px");
  289. $('.mapcontainer').css("top", 0 + "px");
  291. }
  294. }*/
  297. </script>
  298. {% endblock %}