Body of selected thing in tabs is kept when hidden and so does not have to be redrawn when re-selected

Author: Tim Berners-Lee

lib/tabs.js

@@ -33,8 +33,9 @@ UI.tabs.tabWidget = function(options){
   var wholetable = box.appendChild(dom.createElement('table'))
 
   var tabContainer, tabElement, mainDiv
-  var bodyDiv = dom.createElement('div')
-  bodyDiv.setAttribute('style', 'resize: both; margin:0; border: 0.5em; border-style: solid; border-color: #eed; padding: 1em;  min-width: 30em; min-height: 20em; width:100%;')
+  //var bodyDiv = dom.createElement('div')
+  var bodyDivStyle = 'resize: both; margin:0; border: 0.5em; border-style: solid; border-color: #eed; padding: 1em;  min-width: 30em; min-height: 20em; width:100%;'
+  //bodyDiv.setAttribute('style', )
   if (vertical){
     var onlyTR = wholetable.appendChild(dom.createElement('tr'))
     var mainTD = dom.createElement('td')
@@ -48,7 +49,7 @@ UI.tabs.tabWidget = function(options){
     }
     tabContainer =  tabTD.appendChild(dom.createElement('table'))
     tabElement = 'tr'
-    mainTD.appendChild(bodyDiv)
+    //mainTD.appendChild(bodyDiv)
 
   } else { // horizontal
     tabContainer = dom.createElement('tr')
@@ -63,8 +64,9 @@ UI.tabs.tabWidget = function(options){
     tabContainer = tabTR
     var mainTD = mainTR.appendChild(dom.createElement('td'))
     tabElement = 'td'
-    mainTD.appendChild(bodyDiv)
+    //mainTD.appendChild(bodyDiv)
   }
+  var bodyContainer = mainTD.appendChild(dom.createElement('table'))
 
   var getItems = function(){
     if (options.ordered){
@@ -81,12 +83,19 @@ UI.tabs.tabWidget = function(options){
   var tabStyle = corners + 'margin: 0.3em; padding: 0.7em;'
   var unselectedStyle = tabStyle + ' background-color: #eed;  border: 0.05em 0 0.5em 0.05em; border-color: grey;' // @@ rotate border
   var selectedStyle = tabStyle + ' background-color: #ddc;'
+  var shownStyle = ''
+  var hiddenStyle = shownStyle + 'display: none;'
 
   var resetTabStyle = function() {
     for (var i = 0; i < tabContainer.children.length; i++){
       tabContainer.children[i].firstChild.setAttribute('style', unselectedStyle)
     }
   }
+  var resetBodyStyle = function() {
+    for (var i = 0; i < bodyContainer.children.length; i++){
+      bodyContainer.children[i].setAttribute('style', hiddenStyle)
+    }
+  }
 
 
   var makeNewSlot = function(item){
@@ -95,10 +104,19 @@ UI.tabs.tabWidget = function(options){
     var div = ele.appendChild(dom.createElement('div'))
     div.setAttribute('style', unselectedStyle)
     div.addEventListener('click', function(e){
-      resetTabStyle()
+      var bodyDiv
+      if (!e.altKey){
+        resetTabStyle()
+        resetBodyStyle()
+      }
       div.setAttribute('style', selectedStyle)
-      bodyDiv.innerHTML = 'loading item ...' + item
-      options.showMain(bodyDiv, ele.subject)
+      ele.bodyTR.setAttribute('style', shownStyle)
+      if (!ele.bodyTR.firstChild) {
+        bodyDiv = ele.bodyTR.appendChild(dom.createElement('div'))
+        bodyDiv.setAttribute('style', bodyDivStyle)
+        bodyDiv.innerHTML = 'loading item ...' + item
+        options.showMain(bodyDiv, ele.subject)
+      }
     })
     div.textContent = UI.utils.label(item)
     return ele
@@ -133,19 +151,28 @@ UI.tabs.tabWidget = function(options){
     var insertables = items.slice(left, right - tabContainer.children.length + items.length + 1)
     while (right >= left) { // remove extra
       tabContainer.removeChild(tabContainer.children[left])
+      bodyContainer.removeChild(bodyContainer.children[left])
       right -= 1
     }
     for (i=0; i< insertables.length; i++){
+      var newSlot = makeNewSlot(insertables[i])
+      var newBodyTR = dom.createElement('tr')
+      //var newBodyDiv = newBodyTR.appendChild(dom.createElement('div'))
+      newSlot.bodyTR = newBodyTR
+      dom.createElement('tr')
       if (left === tabContainer.children.length) { // None left of original on right
-        tabContainer.appendChild(makeNewSlot(insertables[i]))
+        tabContainer.appendChild(newSlot)
+        bodyContainer.appendChild(newBodyTR)
         console.log('   appending new ' + insertables[i])
       } else {
         console.log('   inserting at ' + (left + i) + ' new ' + insertables[i])
-        tabContainer.insertBefore(makeNewSlot(insertables[i]),tabContainer.children[left + i])
+        tabContainer.insertBefore(newSlot, tabContainer.children[left + i])
+        bodyContainer.insertBefore(newBodyTR, bodyContainer.children[left + i])
       }
     }
   }
 
+// UNMAINTAINED
   var unorderedSync = function(){
     var items = getItems()
     if (!vertical) {

lib/utils.js

@@ -1,5 +1,5 @@
-//                  Tabulator Utilities
-//                  ===================
+//                  Solid-UI general Utilities
+//                  ==========================
 //
 // This must load AFTER the rdflib.js and log-ext.js (or log.js).
 //
@@ -21,6 +21,12 @@ UI.utils.hashColor = function(who) {
     return '#' + ((hash(who) & 0xffffff) | 0xc0c0c0).toString(16); // c0c0c0 or 808080 forces pale
 }
 
+UI.utils.gen_uuid = function () { // http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}
 
 
 // http://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep