Documentation:Turnkey treeview: Difference between revisions

Turnkey treeview

Latest revision as of 15:49, 10 February 2024

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

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

The files to achieve this are both javascript and CSS. They must be placed in the correct locations so that the assumptions done in the tree and flot are correct.

The complete sample model - in this case, saved as a 7z file of the ecomdl file and subfiles - is found here. Also, note the folder ending in _AssetsTK; whenever the cloud upload executes, it will try to 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 javascript and CSS that does the magic in this case. File:AussiWork.7z

This page was edited 95 days 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.
+This 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 smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.</em>
-<style type="text/css">
+</p>
- p.warn {
-opacity: 0.6;
-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>
-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 files to achieve this are both javascript and CSS. They must be placed in the correct locations so that the assumptions done in the 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.
+The complete sample model - in this case, saved as a 7z file of the ecomdl file and subfiles - is found here. Also, note the folder ending in _AssetsTK; whenever the cloud upload executes, it will try to find such a folder <code><yourModelName>_AssetsTK</code>. 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.
+It is the _AssetsTK folder that holds the javascript and CSS that does the magic in this case.
 [[File:AussiWork.7z|left|thumb|The 7z file]]
 [[Category:MDriven Turnkey]]
@@ Line 98: / Line 40: @@
 [[Category:Content Override]]
 [[Category:AngularJS]]
+{{Edited|July|12|2024}}