Add files via upload

Private/scripts/home.php

@@ -94,15 +94,520 @@ if ($password !== PHP_STR) {
   <script src="/js/serialize-javascript.js" type="text/javascript"></script>
   
   <script src="/js/cube-code.js" type="text/javascript"></script>
-  <script src="/js/interaction-code.js" type="text/javascript"></script>
   <script src="/js/dragndrop-code.js" type="text/javascript"></script>
   
   <script src="/js/home.js?v=<?php echo(time()); ?>" type="text/javascript" defer></script>
   
   <link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet">
   <link href="/css/style.css?v=<?php echo(time()); ?>" type="text/css" rel="stylesheet">
-     
+   
   <script>
+ 
+ /*
+  * Interaction code
+  */
+ 
+  timeoutId=0;
+  var oldtthis; // Old cube
+
+  var lineOldVal = ""; // Old value for a detail line
+  var lineNewVal = ""; // New value for a detail line
+
+  var dataChanged = false;
+
+  /*
+  function zoominCube_old(tthis) {    
+    $(tthis).css("width","396px");
+    $(tthis).css("height","477px");
+    $(tthis).css("margin","0px");
+  }
+
+  function zoomoffCube_old(tthis) {    
+    $(tthis).css("width","130px");
+    $(tthis).css("height","159px");
+    $(tthis).css("margin","50px");
+  } 
+  /*
+
+  /*
+   * Select the given cube 
+   * 
+   * @param <interfaceEl> selected cube
+   * @returns void
+   */
+  function selCube(tthis) {    
+
+    <?PHP if ($password != PHP_STR): ?>
+
+      _selCube(tthis);
+
+      // Clean the old selected..
+      $(oldtthis).css("color","#d4b0dc");
+      $(oldtthis).css("text-decoration","none");
+      oldtthis = tthis;
+      // Decore the selected one..
+      $(tthis).css("color","#bd006e");
+      $(tthis).css("text-decoration","underline");
+      $("#cubezvname").html(curcube.getname());
+
+      // Reset the detail view
+      $("#detailtitle").html("");
+      $("#detaildata").html("");
+      $("#datadetail").hide(); 
+
+      // Update ZOOMED VIEW interface..
+      $("#face1").html("<span id='facelet1'>" + curcube.getFace('h0') + "</span> &horbar;&horbar;&horbar;&horbar;&horbar;&xodot; ");
+      $("#face2").html("<span id='facelet2'>" + curcube.getFace('v1') + "</span>");
+      $("#face3").html("&xodot;&horbar;&horbar;&horbar;&horbar; <span id='facelet3'>" + curcube.getFace('h1') + "</span>");
+      $("#face1").attr("target", curcube.getFace('h0'));
+      $("#face2").attr("target", curcube.getFace('v1'));
+      $("#face3").attr("target", curcube.getFace('h1'));
+
+      clearTimeout(timeoutId);
+
+      // Update body background..
+      $(document.body).css("background","url('../res/bg.jpg')");
+      $(document.body).css("background-size","cover");
+
+      // Display ZOOMED VIEW interface and controls 
+      $("#cubeList").css("width", "700px");
+      $("#cubectrls").show();
+      $("#zoomedview").show();
+      $("#cubelinks").show();
+      
+    <?PHP endif; ?>
+      
+  } 
+
+  /*
+   * Turn the current cube to the left
+   * 
+   * @returns void
+   */    
+  function turnLeft() {
+
+    curcube.turnLeft();
+
+    // Update ZOOMED VIEW interface..
+    $("#face1").html("<span id='facelet1'>" + curcube.getFace('h0') + "</span> &horbar;&horbar;&horbar;&horbar;&horbar;&xodot; ");
+    $("#face2").html("<span id='facelet2'>" + curcube.getFace('v1') + "</span>");
+    $("#face3").html("&xodot;&horbar;&horbar;&horbar;&horbar; <span id='facelet3'>" + curcube.getFace('h1') + "</span>");
+    $("#face1").attr("target", curcube.getFace('h0'));
+    $("#face2").attr("target", curcube.getFace('v1'));
+    $("#face3").attr("target", curcube.getFace('h1'));
+
+    // Display the debug info..
+    visInfo();      
+  }  
+
+  /*
+   * Turn the current cube to the right
+   * 
+   * @returns void
+   */    
+  function turnRight() {
+
+    curcube.turnRight();
+
+    // Update ZOOMED VIEW interface..
+    $("#face1").html("<span id='facelet1'>" + curcube.getFace('h0') + "</span> &horbar;&horbar;&horbar;&horbar;&horbar;&xodot; ");
+    $("#face2").html("<span id='facelet2'>" + curcube.getFace('v1') + "</span>");
+    $("#face3").html("&xodot;&horbar;&horbar;&horbar;&horbar; <span id='facelet3'>" + curcube.getFace('h1') + "</span>");
+    $("#face1").attr("target", curcube.getFace('h0'));
+    $("#face2").attr("target", curcube.getFace('v1'));
+    $("#face3").attr("target", curcube.getFace('h1'));
+
+    // Display the debug info..
+    visInfo();      
+  }  
+
+  /*
+   * Turn the current cube to upward
+   * 
+   * @returns void
+   */    
+  function turnUp() {
+
+    curcube.turnUp();
+
+    // Update ZOOMED VIEW interface..
+    $("#face1").html("<span id='facelet1'>" + curcube.getFace('h0') + "</span> &horbar;&horbar;&horbar;&horbar;&horbar;&xodot; ");
+    $("#face2").html("<span id='facelet2'>" + curcube.getFace('v1') + "</span>");
+    $("#face3").html("&xodot;&horbar;&horbar;&horbar;&horbar; <span id='facelet3'>" + curcube.getFace('h1') + "</span>");           
+    $("#face1").attr("target", curcube.getFace('h0'));
+    $("#face2").attr("target", curcube.getFace('v1'));
+    $("#face3").attr("target", curcube.getFace('h1'));
+
+    // Display the debug info..
+    visInfo();      
+  }  
+
+  /*
+   * Turn the current cube to downward
+   * 
+   * @returns void
+   */    
+  function turnDown() {
+
+    curcube.turnDown();
+
+    // Update ZOOMED VIEW interface..
+    $("#face1").html("<span id='facelet1'>" + curcube.getFace('h0') + "</span> &horbar;&horbar;&horbar;&horbar;&horbar;&xodot; ");
+    $("#face2").html("<span id='facelet2'>" + curcube.getFace('v1') + "</span>");
+    $("#face3").html("&xodot;&horbar;&horbar;&horbar;&horbar; <span id='facelet3'>" + curcube.getFace('h1') + "</span>");
+    $("#face1").attr("target", curcube.getFace('h0'));
+    $("#face2").attr("target", curcube.getFace('v1'));
+    $("#face3").attr("target", curcube.getFace('h1'));
+
+    // Display the debug info..
+    visInfo();
+  }  
+
+  /*
+   * Hide the ZOOMED VIEW
+   * 
+   * @returns void
+   */
+  function hideZoomedview() {
+
+    // Clean the old selected..
+    $(oldtthis).css("color","#d4b0dc");
+    $(oldtthis).css("text-decoration","none");
+    oldtthis = null;
+
+    // Reset the detail view
+    $("#detailtitle").html("");
+    $("#detaildata").html("");
+    $("#datadetail").hide();      
+
+    // Hide ZOOMED VIEW interface and controls 
+    $("#cubeList").css("width", "100%");
+    $("#cubelinks").hide();
+    $("#zoomedview").hide();
+    $("#cubectrls").hide();
+
+    // Reset body background..
+    $(document.body).css("background","#0d0d0d");
+  }
+
+  /*
+   * Mouse over handle for ZOOMED VIEW 
+   * 
+   * @returns void
+   */
+  function zoomviewOver() {
+    clearTimeout(timeoutId);
+  }
+
+  /*
+   * Mouse out handle for ZOOMED VIEW 
+   * 
+   * @returns void
+   */
+  function zoomviewOut() {    
+    timeoutId = setTimeout(hideZoomedview,1500);
+  }    
+
+  /*
+   * Display the debug info
+   * 
+   * @returns void
+   */
+  function visInfo() {
+    $("#hcube").val(curcube.gethcube());
+    $("#vcube").val(curcube.getvcube());
+    $("#hcur").val(curcube.gethcur());
+    $("#vcur").val(curcube.getvcur());
+    $("#curcube").val(curcube.getname());
+  }
+
+  /*
+  function eachNode(rootNode, callback) {
+    if (!callback) {
+      const nodes = []
+      eachNode(rootNode, function(node) {
+        nodes.push(node.nodeName)
+        //nodes.push(node)
+      })
+      return nodes
+    }
+
+    if (false === callback(rootNode)) {
+      return false
+    }
+
+    if (rootNode.hasChildNodes()) {
+      const nodes = rootNode.childNodes
+      for (let i = 0, l = nodes.length; i < l; ++i) {
+        if (false === eachNode(nodes[i], callback)) {
+          return
+        }
+      }
+    }
+  }
+  */
+
+  /*
+   * Get the data for the given detail / face
+   * 
+   * @param string xmlStr, the current cube xml data
+   * @param string detail, the requested detail
+   * @returns string, the detail data 
+   */
+  function getDetailData(xmlStr, detail) {
+
+    var ret = "";
+    var re;
+
+    detail = detail.toLowerCase();
+
+    xmlStr = xmlStr.replace('<?xml version="1.0" encoding="UTF-8"?>',"");
+    xmlStr = xmlStr.replace('<details>',"");
+    xmlStr = xmlStr.replace('</details>',"");
+    xmlStr = xmlStr.replaceAll('\n',"");
+    xmlStr = xmlStr.replaceAll(String.fromCharCode(9), "");
+    xmlStr = xmlStr.replaceAll(String.fromCharCode(10), "");
+    xmlStr = xmlStr.replaceAll(String.fromCharCode(13), "");
+    xmlStr = xmlStr.replaceAll("   ", "");
+    xmlStr = xmlStr.replaceAll("  ", "");
+    xmlStr = escape(xmlStr);
+    xmlStr = xmlStr.replaceAll("%0A", "");
+    xmlStr = xmlStr.replaceAll("%20%20%20%20%20", "");
+    xmlStr = xmlStr.replaceAll("%20%20%20%20%", "");
+    xmlStr = xmlStr.replaceAll("%20%20%", "");
+    //xmlStr = unescape(xmlStr);
+    //alert(xmlStr);
+
+    switch (detail) {
+      case "address":
+        re = new RegExp("detail%20face%3D%22address%22.+/country", "igsu");
+        break;
+      case "contacts":
+        re = new RegExp("detail%20face%3D%22contacts%22.+/cell", "igsu");
+        break;
+      case "other info":
+        re = new RegExp("detail%20face%3D%22other%20info%22.+/description", "igsu");
+        break;
+      case "menu":
+        re = new RegExp("detail%20face%3D%22menu%22.+/menu3", "igsu");
+        break;
+      case "pictures":
+        re = new RegExp("detail%20face%3D%22pictures%22.+/pic5", "igsu");
+        break;
+      case "password":
+        re = new RegExp("detail%20face%3D%22password%22.+/password", "igsu");
+        break;
+    }        
+    s = re.exec(xmlStr);
+    if (!s || s.length===0) {
+      ret = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Error! #1";
+      return ret;
+    }
+    xmlStr = s[0];
+    xmlStr = "<"+xmlStr+"></detail>";
+    xmlStr = unescape(xmlStr);
+    //alert(xmlStr);
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(xmlStr, "text/xml");
+    x = doc.getElementsByTagName("detail");
+    if (x.length===0) {
+      ret = "Error! #2";
+      return ret;
+    }
+    ret += "<div style='padding:10px'>";
+    for (i = 0; i < x[0].childNodes.length; i++) {
+      if (x[0].childNodes[i].nodeType === 1) {
+        if (x[0].childNodes[i].getAttributeNode("type")) {
+          mytype = x[0].childNodes[i].getAttributeNode("type");
+          if (mytype.value==="pic") {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' placeholder='https://'  onkeyup='storePicData(this)'></div>";
+          } else {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)'></div>";
+          }  
+        } else {  
+          if (x[0].childNodes[i].nodeName === "business-type") {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)' style='color:green' readonly></div>";
+          } else if (x[0].childNodes[i].nodeName === "guid") {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)' style='color:green' readonly></div>";
+          } else if (x[0].childNodes[i].nodeName === "password") {
+            <?PHP if ($password != PHP_STR): ?>
+              ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)' style='color:green' readonly></div>";
+            <?PHP endif; ?>
+          } else if (x[0].childNodes[i].nodeName === "city-zip-prov") {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)' style='color:green' readonly></div>";
+          } else if (x[0].childNodes[i].nodeName === "country") {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)' style='color:green' readonly></div>";
+          } else {
+            ret += "<div style='float:left;width:35%;text-align:right;height:32px;vertical-align:middle;padding-top:3px;font-weight:900;white-space:nowrap;'>" + x[0].childNodes[i].nodeName + "&nbsp;&nbsp;</div><div style='float:right;width:65%;height:32px;'>" + "<input type='text' id='cube-detail-" + x[0].childNodes[i].nodeName + "' value='" + x[0].childNodes[i].textContent + "' onkeyup='storeData(this)'></div>";  
+          }  
+        }  
+      }  
+    }
+    if ((detail==="pictures") || (detail==="menu")) {
+      ret += "<div style='padding-left:80px;clear:both;'><br>you can use eg. Goolge Drive or Microsoft OneDrive to host your pictures.</div>"
+    }
+    ret += "</div>";
+    return ret;
+  }  
+
+  /*
+   * Store the old data of the text control
+   * 
+   * @param {InterfaceEl} tthis, the text control under editing
+   * @returns void     
+   */ 
+  /*function storeOldData(tthis) {
+    //alert("keypress");
+
+    lineOldVal = $(tthis).val();
+  }*/
+
+  /*
+   * Store in the cube object the new data of the text control
+   * 
+   * @param {InterfaceEl} tthis, the text control under editing
+   * @returns void     
+   */ 
+  function storeData(tthis) {
+
+    //alert("keyup");
+
+    lineNewVal = $(tthis).val();
+    //alert(lineNewVal);
+
+    nodeName = tthis.id;
+    nodeName = nodeName.replace("cube-detail-","");
+    //alert(nodeName);
+
+    xmlStr = curcube.getxml();
+    //$("#log").html($("#log").html() + "old=" + "/(\<" + nodeName + "\>).*(\<\/" + nodeName + "\>)/gs" + "\n");
+    //$("#log").html($("#log").html() + "new=" + lineNewVal + "\n");
+    //alert("<" + nodeName + ">" + lineNewVal + "</" + nodeName + ">");
+    //re = "/(\<" + nodeName + "\>).*(\<\/" + nodeName + "\>)/gs";
+
+    switch (nodeName) {
+      case "name":
+        re = /(\<name>).*(\<\/name>)/gs;
+        break;
+      case "address-line1":
+        re = /(\<address-line1>).*(\<\/address-line1>)/gs;
+        break;
+      case "address-line2":
+        re = /(\<address-line2>).*(\<\/address-line2>)/gs;
+        break;
+      case "address-line3":
+        re = /(\<address-line3>).*(\<\/address-line3>)/gs;
+        break;
+      case "city-zip-prov":
+        re = /(\<city-zip-prov>).*(\<\/city-zip-prov>)/gs;
+        break;
+      case "country":
+        re = /(\<country>).*(\<\/country>)/gs;
+        break;
+      case "tel":
+        re = /(\<tel>).*(\<\/tel>)/gs;
+        break;
+      case "fax":
+        re = /(\<fax>).*(\<\/fax>)/gs;
+        break;
+      case "cell":
+        re = /(\<cell>).*(\<\/cell>)/gs;
+        break;
+      case "description":
+        re = /(\<description>).*(\<\/description>)/gs;
+        break;
+    }  
+
+    xmlStr = xmlStr.replace(re, "$1" + lineNewVal + "$2");
+    //xmlStr = xmlStr.replace("<" + nodeName + ">" + lineOldVal + "</" + nodeName + ">", "<" + nodeName + ">" + lineNewVal + "</" + nodeName + ">");
+    //alert(xmlStr);
+
+    curcube.xml = xmlStr;
+
+    dataChanged = true;
+  }
+
+  /*
+   * Store in the cube object the new pic data
+   * 
+   * @param {InterfaceEl} tthis, the text control under editing
+   * @returns void     
+   */ 
+  function storePicData(tthis) {
+
+    //alert("keyup");
+
+    lineNewVal = $(tthis).val();
+
+    nodeName = tthis.id;
+    nodeName = nodeName.replace("cube-detail-","");
+    //alert(nodeName);
+
+    xmlStr = curcube.getxml();
+
+    switch (nodeName) {
+      case "menu1":
+        re = /(\<menu1\stype\=\"pic\">).*(\<\/menu1>)/gs;
+        break;
+      case "menu2":
+        re = /(\<menu2\stype\=\"pic\">).*(\<\/menu2>)/gs;
+        break;
+      case "menu3":
+        re = /(\<menu3\stype\=\"pic\">).*(\<\/menu3>)/gs;
+        break;
+      case "pic1":
+        re = /(\<pic1\stype\=\"pic\">).*(\<\/pic1>)/gs;
+        break;
+      case "pic2":
+        re = /(\<pic2\stype\=\"pic\">).*(\<\/pic2>)/gs;
+        break;
+      case "pic3":
+        re = /(\<pic3\stype\=\"pic\">).*(\<\/pic3>)/gs;
+        break;
+      case "pic4":
+        re = /(\<pic4\stype\=\"pic\">).*(\<\/pic4>)/gs;
+        break;
+      case "pic5":
+        re = /(\<pic5\stype\=\"pic\">).*(\<\/pic5>)/gs;
+        break;
+    }  
+
+    xmlStr = xmlStr.replace(re, "$1" + lineNewVal + "$2")
+    //xmlStr = xmlStr.replace("<" + nodeName + " type=\"pic\">" + lineOldVal + "</" + nodeName + ">", "<" + nodeName + " type=\"pic\">" + lineNewVal + "</" + nodeName + ">");
+    //alert(xmlStr);
+
+    curcube.xml = xmlStr;
+
+    dataChanged = true;
+  }
+
+  function _saveData() {
+    if (dataChanged) {
+      curcube.savedata();
+      //saveData();
+      dataChanged = false;
+    }  
+  }  
+
+  setInterval("_saveData()", 1500);
+
+  /*
+   * Display the given data detail
+   * 
+   * @param <interfaceEl> selected cube
+   * @returns void
+   */
+  function openDetail(tthis) {
+    myhtml = getDetailData(curcube.getxml(), $(tthis).attr("target"));
+    $("#detailtitle").html("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + $(tthis).attr("target") + ":");
+    $("#detaildata").html(myhtml);
+    $("#datadetail").show();      
+    //alert(curcube.getxml());
+  }
+   
+</script>
+ 
+ <script>
  /*
   * Boot up code
   */
@@ -148,16 +653,6 @@ if ($password !== PHP_STR) {
 
    $("#cubeList").show();
 
-   if (password===1) { 
-     ///$("#cubeList").show();
-
-     //$("#datadetail").show();      
-     //$("#debugdisplay").show();
-     //alert(cubes.length);
-
-     //$("#passworddisplay").hide();
-   } 
-
    $("#vplayer").get(0).pause();
    $("#HCsplash").css("display","none");
    $(".header").show();
@@ -355,10 +850,10 @@ if ($password !== PHP_STR) {
     <div id="footerCont">&nbsp;</div>
     <div id="footer"><span style="background:#0d0d0d;color:#d4b0dc;opacity:1.0;margin-right:10px;">&nbsp;&nbsp;A <a href="http://5mode.com" style="color:#d4b0dc; text-decoration:underline;">5 Mode</a> project and <a href="http://demo.5mode.com" style="color:#d4b0dc; text-decoration:underline;">WYSIWYG</a> system. Some rights reserved.</span></div>	
     </div>
-
+    
 <?php if (file_exists(APP_PATH . DIRECTORY_SEPARATOR . "metrics.html")): ?>
 <?php include(APP_PATH . DIRECTORY_SEPARATOR . "metrics.html"); ?> 
-<?php endif; ?>	
-	
+<?php endif; ?>
+  
 </body>
-</html>
+</html>