Documentation:Turnkey treeview: Difference between revisions

Turnkey treeview

Revision as of 08:44, 1 August 2018

The video describes how to do a treeview and a flot.js diagram in a Turnkey site.

To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme navigation-itemplace in the video. Now you can pick any topic to be instructed without watching the whole video.

The files to achieve this is both javascript and css - they must be placed in the correct locations so that assumptions that are done in tree and flot are correct.

The complete sample model - in this case saved as a 7z file of the ecomdl file and subfiles are found here. Also note the folder ending in _AssetsTK whenever the cloud upload executes it will try and find such a folder <yourModelName>_AssetsTK - it will include this in the upload to the TurnkeyServer and there it will be expanded.

It is the _AssetsTK folder that holds the javascripts and css that does the magic in this case. File:AussiWork.7z

This page was edited more than 11 months ago on 02/10/2024. What links here

@@ Line 1: / Line 1: @@
 <html>
 The video describes how to do a treeview and a flot.js diagram in a Turnkey site.
-<p class="warn">
+<p class="video-warn">
-<em>To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.</em> </p>
+  <em>To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini
-<style type="text/css">
+    player. Choose the interesting subtitle on the list and immediately get to the exact theme navigation-itemplace in the video. Now
- p.warn {
+    you can pick any topic to be instructed without watching the whole video.</em>
-opacity: 0.6;
+</p>
-text-align: justify;
-opacity: 0.7
-width: 90%
-}
-#video12 {
-  position: relative;
-  padding-bottom: 10px;
-}
-#video12::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-#video12 iframe {
-  width: 100%;
-  min-width: 200px;
-  max-width: 740px;
-  height: 500px;
-  float: left;
-}
-@media (max-width: 767px) {
-  #video12 iframe {
-    height: 180px;
-  }
-}
-#video12 div {
-  float: left;
-  padding-left: 10px;
-	overflow-y: auto;
-	height: 500px;
-}
-span.time {
-    display:block;
-  padding: 2px 10px 2px 10px;
-    padding-bottom: 0.5em;
-    padding-top: 0.5em;
-  opacity: 0.7;
-}
-span.time:hover {
-  color: #0000FF;
-  cursor: pointer;
-}
-span.time:focus {
-  color: blue;
-}
-</style>
 <br>
-<div id="video12">
+<div class="video">
- <iframe width="740" height="500" src="https://www.youtube.com/embed/F-lkzq-GMlk?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
+  <div class="video__wrapper">
-  <div>
+  <iframe src="https://www.youtube.com/embed/OIJGGU9VF2I?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="10" tabindex="0"> Example Treeview </span>
+</div>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="268" tabindex="0"> Grids as a data repository</span>
+<div class="video__navigation">
-     <span class="time" data-video="F-lkzq-GMlk" data-start="357" tabindex="0"> Implement TreeView with the ViewModel (building the data structure) </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="15" tabindex="0"> Example Treeview </span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="430" tabindex="0">  Content Override  </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="273" tabindex="0"> Grids as a data repository</span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="549" tabindex="0">  .cshtml directives and how to match up the pattern</span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="362" tabindex="0"> Implement TreeView with the ViewModel (building the data structure) </span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="734" tabindex="0">  tkTreeView typescript file to install the directives</span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="435" tabindex="0"> Content Override </span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="1015" tabindex="0"> ecomdl VS modlr </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="554" tabindex="0"> .cshtml directives and how to match up the pattern</span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="1110" tabindex="0"> Saving locally </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="739" tabindex="0"> tkTreeView typescript file to install the directives</span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="1186" tabindex="0"> <modelname>_AssetsTK folder to update</span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="1020" tabindex="0"> ecomdl VS modlr </span>
-     <span class="time" data-video="F-lkzq-GMlk" data-start="1240" tabindex="0"> AppWideAngularScriptsIncludes.cshtml </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="1115" tabindex="0"> Saving locally </span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="1191" tabindex="0">
+      <modelname>_AssetsTK folder to update</span>
+     <span class="navigation-item" data-video="OIJGGU9VF2I" data-start="1245" tabindex="0"> AppWideAngularScriptsIncludes.cshtml </span>
-</div>
+  </div>
 </div>
-<script>
-var IMG = document.querySelectorAll('#video12 span'),
-    IFRAME = document.querySelector('#video12 iframe');
-for (var i = 0; i < IMG.length; i++) {
-  IMG[i].onclick = function() {
-    IFRAME.src = 'https://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
-    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
-    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
-    this.style.backgroundColor='rgba(0,0,0,.2)';
-  }
-}
-</script>
 </html>