Home Explore Help
Sign In
par7133
/
SqueeJS
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add files via upload

Capitan Cloud 3 years ago
parent
06e497370a
commit
1f153ab4a9
17 changed files with 1616 additions and 55 deletions
Unified View Show Diff Stats
  1. 2 4
      appmenu.html
  2. 1 1
      banners.html
  3. 1 1
      content_by_geo.html
  4. 28 0
      css/squeejs.css
  5. 1 1
      footer.html
  6. 1 1
      highlight.html
  7. 2 1
      index.html
  8. 238 40
      js/squeejs.js
  9. 1164 0
      js/squeejs_1.js
  10. 8 0
      mysidebar.html
  11. 165 0
      sidebar.html
  12. 1 1
      splash.html
  13. BIN
      squeejs-1.0.9.tar.gz
  14. BIN
      squeejs-1.0.9.zip
  15. 2 2
      trans-bo.txt
  16. 1 2
      user_translation.html
  17. 1 1
      work_in_progress.html

+ 2 - 4
appmenu.html
View File 

@@ -54,7 +54,7 @@
 
 </head>
 
 </head>
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 
 
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>
 
 
 
@@ -63,14 +63,12 @@
 
 Here the Javascript code available to be inserted in your web page to implement an <i>app menu</i>.<br>
 
 Here the Javascript code available to be inserted in your web page to implement an <i>app menu</i>.<br>
 
 <br>
 
 <br>
 
 Please check the <b>context</b> of implementation for each of the functions.<br>
 
 Please check the <b>context</b> of implementation for each of the functions.<br>
 
-<br>
 
-<b>ATTENTION</b>: these functionalities require <b>jQuery</b>.
 
 
 
 <br><br>
 
 <br><br>
 
 
 
 <h2>Example:</h2>
 
 <h2>Example:</h2>
 
 <script>
 
 <script>
 
-var myNewAppMenu = SQJS.createAppMenu("/res/app-menu2.png", "/menu.html", "content", 625, 30, 380, 450);
 
+var myNewAppMenu = SQJS.createAppMenu("/res/app-menu2.png", "https://squeejs.com/menu.html", "content", 625, 30, 380, 450);
 
 </script>
 
 </script>
 
  
  
 <br><br>
 
 <br><br>

+ 1 - 1
banners.html
View File 

@@ -55,7 +55,7 @@
 
 
 
 <div id="content" style="max-width:2400px;">  
 <div id="content" style="max-width:2400px;">  
   
   
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

+ 1 - 1
content_by_geo.html
View File 

@@ -54,7 +54,7 @@
 
 </head>
 
 </head>
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 
 
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

+ 28 - 0
css/squeejs.css
View File 

@@ -112,6 +112,34 @@
 
   font-size: 12px;
 
   font-size: 12px;
 
   z-index: 99999;
 
   z-index: 99999;
 
 }
 
 }
 
+#SQJSsidebarCall {
 
+  position:fixed; 
+  top:0px; 
+  left:1px; 
+  clear:both; 
+  float:left; 
+  width:5px; 
+  height:100%; 
+  min-height:1100px; 
+  text-align:center; 
+  border-right:1px solid #2c2f34; 
+  z-index:1;
 
+}
 
+#SQJSsidebar {
 
+  position:fixed; 
+  left:6px; 
+  top:0px; 
+  clear:both; 
+  background-color:#FFFFFF; 
+  padding:8px; 
+  width:25%; 
+  height:100%; 
+  text-align:center; 
+  border-right:1px solid #2c2f34; 
+  border-bottom:1px solid #2c2f34;
 
+  display:none; 
+  z-index:91;
 
+}
 
 #SQJSuserTransMenu {
 
 #SQJSuserTransMenu {
 
   position: absolute;
 
   position: absolute;
 
   background-color:#ffffff;
 
   background-color:#ffffff;

+ 1 - 1
footer.html
View File 

@@ -55,7 +55,7 @@
 
 
 
 <div id="content" style="height:1130px;">  
 <div id="content" style="height:1130px;">  
   
   
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

+ 1 - 1
highlight.html
View File 

@@ -52,7 +52,7 @@
 
 </head>
 
 </head>
 
 <body style="height:2900px;border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 <body style="height:2900px;border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 
 
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

+ 2 - 1
index.html
View File 

@@ -61,7 +61,7 @@
 
 <div style="color:green;font-size:35px;font-weight:900;">Download:</div>
 
 <div style="color:green;font-size:35px;font-weight:900;">Download:</div>
 
 <br>
 
 <br>
 
 <div style="color:darkcyan;font-size:35px;font-weight:900;">
 
 <div style="color:darkcyan;font-size:35px;font-weight:900;">
 
-<a href="/squeejs-1.0.8.tar.gz">tar.gz</a>&nbsp;&nbsp;<a href="/squeejs-1.0.8.zip">zip</a>
 
+<a href="/squeejs-1.0.9.tar.gz">tar.gz</a>&nbsp;&nbsp;<a href="/squeejs-1.0.9.zip">zip</a>
 
 </div>
 
 </div>
 
 
 
 <br><br>
 
 <br><br>
 
@@ -87,6 +87,7 @@ Please check the <b>context</b> of implementation for each of the functions.<br>
 
 <li><a href="work_in_progress.html">Work in progress banner</a></li>  
 <li><a href="work_in_progress.html">Work in progress banner</a></li>  
 <li><a href="banners.html">Banners</a></li>  
 <li><a href="banners.html">Banners</a></li>  
 <li><a href="appmenu.html">App Menu</a></li>
 
 <li><a href="appmenu.html">App Menu</a></li>
 
+<li><a href="sidebar.html">Sidebar</a></li> 
 <li><a href="footer.html">Footer</a></li>  
 <li><a href="footer.html">Footer</a></li>  
 </OL>
 
 </OL>
 
 <br>
 
 <br>

+ 238 - 40
js/squeejs.js
View File 

@@ -24,7 +24,7 @@
 
  * 
  * 
  * Squeejs production release.
 
  * Squeejs production release.
 
  *
 
  *
 
- * @version 1.0.8
 
+ * @version 1.0.9
 
  * @author Daniele Bonini <my25mb@aol.com>
 
  * @author Daniele Bonini <my25mb@aol.com>
 
  * @copyrights (c) 2016, 2024, 5 Mode
 
  * @copyrights (c) 2016, 2024, 5 Mode
 
  * @license https://opensource.org/licenses/MIT 
  * @license https://opensource.org/licenses/MIT 
@@ -121,6 +121,15 @@ function SqueeJS() {
 
   this.getTranslitarates = mygetTranslitarates;
 
   this.getTranslitarates = mygetTranslitarates;
 
   this.translate = mytranslate;
 
   this.translate = mytranslate;
 
   this.createUserTrans = mycreateUserTrans;
 
   this.createUserTrans = mycreateUserTrans;
 
+  
+  //Sideabar
 
+  this.sidebarContentContId = "";
 
+  this.sidebarVisible = false;
 
+  
+  this.sidebarClose = mysidebarClose;
 
+  this.sidebarShow = mysidebarShow;
 
+  this.createSidebar = mycreateSidebar;
 
+  
   /**
 
   /**
 
    * gfSQJZDocWidth
 
    * gfSQJZDocWidth
 
    * 
    * 
@@ -170,10 +179,34 @@ function SqueeJS() {
 
     return height;
 
     return height;
 
   }
 
   }
 
 
 
+  /**
 
+   * gfSQJZLoad
 
+   * 
+   * Load the content of <url> in the given DIV element
 
+   * 
+   * @param {string} id, the DIV id to fill
 
+   * @param {string} url, the url of the content to load
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function gfSQJZLoad(id, url) {
 
+    try {
 
+      var xhttp = new XMLHttpRequest();
 
+      var xmluri = url;
 
+      //alert(xmluri);
 
+      xhttp.open("GET", xmluri, false);  
+      xhttp.send();
 
+      document.getElementById(id).innerHTML = xhttp.responseText;
 
+    } catch(e) {
 
+      throw new Error("404 or CORS error: check the resource availability and Access-Control-Allow-Origin of your site.");
 
+    }  
+  }
 
+
 
   /**
 
   /**
 
    * gfSQJZrnd
 
    * gfSQJZrnd
 
    * 
    * 
-   * Geenerate a random number between the given limits
 
+   * Generate a random number between the given limits
 
    * 
    * 
    * @param {int} min, the starting limit
 
    * @param {int} min, the starting limit
 
    * @param {int} max, the max limit
 
    * @param {int} max, the max limit
 
@@ -196,7 +229,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * highlightDiv
 
    * highlightDiv
 
    * 
    * 
-   * highlight the current DIV element
 
+   * Highlight the current DIV element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseenter event 
    * - call this function in the onmouseenter event 
@@ -233,7 +266,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * unlightDiv
 
    * unlightDiv
 
    * 
    * 
-   * unlight the current DIV element
 
+   * Unlight the current DIV element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseleave event 
    * - call this function in the onmouseleave event 
@@ -265,7 +298,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * highlightInput
 
    * highlightInput
 
    * 
    * 
-   * highlight the current INPUT element
 
+   * Highlight the current INPUT element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseenter event 
    * - call this function in the onmouseenter event 
@@ -302,7 +335,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * unlightInput
 
    * unlightInput
 
    * 
    * 
-   * unlight the current INPUT element
 
+   * Unlight the current INPUT element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseleave event 
    * - call this function in the onmouseleave event 
@@ -334,7 +367,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * highlightTextArea
 
    * highlightTextArea
 
    * 
    * 
-   * highlight the current TEXTAREA element
 
+   * Highlight the current TEXTAREA element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseenter event 
    * - call this function in the onmouseenter event 
@@ -371,7 +404,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * unlightTextArea
 
    * unlightTextArea
 
    * 
    * 
-   * highlight the current TEXTAREA element
 
+   * Unlight the current TEXTAREA element
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - call this function in the onmouseleave event 
    * - call this function in the onmouseleave event 
@@ -410,7 +443,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * createSplash
 
    * createSplash
 
    * 
    * 
-   * create the tag DIV for the splash screen
 
+   * Create the tag DIV for the splash screen
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - this function is for internal use 
    * - this function is for internal use 
@@ -578,7 +611,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * createWIP
 
    * createWIP
 
    * 
    * 
-   * create the tag DIV for the Work In Progress Banner
 
+   * Create the tag DIV for the Work In Progress Banner
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - this function is for internal use 
    * - this function is for internal use 
@@ -729,7 +762,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * createBanner
 
    * createBanner
 
    * 
    * 
-   * create a new Banner
 
+   * Create a new Banner
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - Call in the body of your webpage 
    * - Call in the body of your webpage 
@@ -826,7 +859,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * createFooter
 
    * createFooter
 
    * 
    * 
-   * create the tag DIV for the footer
 
+   * Create the tag DIV for the footer
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - Call it in the body of your webpage
 
    * - Call it in the body of your webpage
 
@@ -1030,7 +1063,7 @@ function SqueeJS() {
 
   /**
 
   /**
 
    * mycreateAppMenu
 
    * mycreateAppMenu
 
    * 
    * 
-   * create the tag DIV of menu icon and app menu
 
+   * Create the tag DIV of menu icon and app menu
 
    * 
    * 
    * Context:
 
    * Context:
 
    * - Call it in the body of your webpage 
    * - Call it in the body of your webpage 
@@ -1068,9 +1101,19 @@ function SqueeJS() {
 
     //D.body.appendChild(newdiv);
 
     //D.body.appendChild(newdiv);
 
     D.write(newdiv.outerHTML);
 
     D.write(newdiv.outerHTML);
 
 
 
-    $("#SQJSappMenuIco").on("click",function(){SQJS.appmenuPopUp();});
 
-    $("#SQJSappMenuIco").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
-    $("#SQJSappMenuIco").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+    //$("#SQJSappMenuIco").on("click",function(){SQJS.appmenuPopUp();});
 
+    //$("#SQJSappMenuIco").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
+    //$("#SQJSappMenuIco").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+
 
+    document.getElementById("SQJSappMenuIco").addEventListener("click", function() {
 
+      SQJS.appmenuPopUp();
 
+    });    
+    document.getElementById("SQJSappMenuIco").addEventListener("mouseover", function() {
 
+      SQJS.appmenuCheckFlagIco();
 
+    });
 
+    document.getElementById("SQJSappMenuIco").addEventListener("mouseout", function() {
 
+      SQJS.appmenuUnCheckFlagIco();
 
+    });    
     
     
     menu = "";
 
     menu = "";
 
     menu += "<!-- Here goes the content of the AppMenu -->";
 
     menu += "<!-- Here goes the content of the AppMenu -->";
 
@@ -1085,12 +1128,25 @@ function SqueeJS() {
 
     D.body.appendChild(newdiv);
 
     D.body.appendChild(newdiv);
 
     //D.write(newdiv.outerHTML);
 
     //D.write(newdiv.outerHTML);
 
 
 
-    $("#SQJSappMenu").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
-    $("#SQJSappMenu").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+    //$("#SQJSappMenu").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
+    //$("#SQJSappMenu").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+
 
+    document.getElementById("SQJSappMenu").addEventListener("mouseover", function() {
 
+      SQJS.appmenuCheckFlagIco();
 
+    });
 
+    document.getElementById("SQJSappMenu").addEventListener("mouseout", function() {
 
+      SQJS.appmenuUnCheckFlagIco();
 
+    });
 
 
 
-    $("#SQJSappMenu").load(menuURL+"?rrnd="+ gfSQJZrnd(50000, 99999));
 
+    //$("#SQJSappMenu").load(menuURL+"?rrnd=" + gfSQJZrnd(50000, 99999));
 
     
     
-    $(document.body).on("click", function() {SQJS.appmenuBodyOnClick();});
 
+    gfSQJZLoad("SQJSappMenu", menuURL+"?rrnd=" + gfSQJZrnd(50000, 99999));
 
+    
+    //$(document.body).on("click", function() {SQJS.appmenuBodyOnClick();});
 
+    
+    document.body.addEventListener("click", function() {
 
+      SQJS.appmenuBodyOnClick();
 
+    });
 
 	}	
 	}	
   // --- AppMenu
 
   // --- AppMenu
 
   
   
@@ -1113,12 +1169,16 @@ function SqueeJS() {
 
    */
 
    */
 
   function myretrieveGeoLocation() {
 
   function myretrieveGeoLocation() {
 
     if (!this.geoLocation || this.geoLocation=="") {
 
     if (!this.geoLocation || this.geoLocation=="") {
 
-      var xhttp = new XMLHttpRequest();
 
-      var xmluri = SQJS_GEOURL;
 
-      //alert(xmluri);
 
-      xhttp.open("GET", xmluri, false);  
-      xhttp.send();
 
-      this.geoLocation = xhttp.responseText;
 
+      try {
 
+        var xhttp = new XMLHttpRequest();
 
+        var xmluri = SQJS_GEOURL;
 
+        //alert(xmluri);
 
+        xhttp.open("GET", xmluri, false);  
+        xhttp.send();
 
+        this.geoLocation = xhttp.responseText;
 
+      } catch(e) {
 
+        throw new Error("CORS error: check the resource availability and Access-Control-Allow-Origin of your site.");
 
+      }          
     }
 
     }
 
   }
 
   }
 
   
   
@@ -1288,12 +1348,16 @@ function SqueeJS() {
 
     if (v!=="") {
 
     if (v!=="") {
 
 		  if (v.substr(0,4).toLowerCase() === "http") {
 
 		  if (v.substr(0,4).toLowerCase() === "http") {
 
 		    transURL = v;
 
 		    transURL = v;
 
-		    var xhttp = new XMLHttpRequest();
 
-		    var xmluri = transURL;
 
-		    //alert(xmluri);
 
-		    xhttp.open("GET", xmluri, false);  
-		    xhttp.send();
 
-		    xml = xhttp.responseText;
 
+        try {
 
+          var xhttp = new XMLHttpRequest();
 
+          var xmluri = transURL;
 
+          //alert(xmluri);
 
+          xhttp.open("GET", xmluri, false);  
+          xhttp.send();
 
+          xml = xhttp.responseText;
 
+        } catch(e) {
 
+          throw new Error("404 or CORS error: check the resource availability and Access-Control-Allow-Origin of your site.");
 
+        }    
 		  } else {
 
 		  } else {
 
 		    xml = v;
 
 		    xml = v;
 
 		  }
 
 		  }
 
@@ -1400,7 +1464,7 @@ function SqueeJS() {
 
     var D = document;
 
     var D = document;
 
     //w = gfSQJZDocWidth();
 
     //w = gfSQJZDocWidth();
 
     //h = gfSQJZDocHeight();
 
     //h = gfSQJZDocHeight();
 
-    this.usertransContentContId = contentContId
 
+    this.usertransContentContId = contentContId;
 
 
 
     menuico = "";
 
     menuico = "";
 
     menuico = "<img src='"+icoURI+"' style='width:48px;height:48px;' alt='user translation'>";
 
     menuico = "<img src='"+icoURI+"' style='width:48px;height:48px;' alt='user translation'>";
 
@@ -1413,9 +1477,19 @@ function SqueeJS() {
 
     //D.body.appendChild(newdiv);
 
     //D.body.appendChild(newdiv);
 
     D.write(newdiv.outerHTML);
 
     D.write(newdiv.outerHTML);
 
 
 
-    document.getElementById("SQJSuserTransIco").onclick = function(){SQJS.usertransPopUp();};
 
-    document.getElementById("SQJSuserTransIco").onmouseover = function(){SQJS.usertransCheckFlagIco();};
 
-    document.getElementById("SQJSuserTransIco").onmouseout = function(){SQJS.usertransUnCheckFlagIco();};
 
+    //document.getElementById("SQJSuserTransIco").onclick = function(){SQJS.usertransPopUp();};
 
+    //document.getElementById("SQJSuserTransIco").onmouseover = function(){SQJS.usertransCheckFlagIco();};
 
+    //document.getElementById("SQJSuserTransIco").onmouseout = function(){SQJS.usertransUnCheckFlagIco();};
 
+
 
+    document.getElementById("SQJSuserTransIco").addEventListener("click", function() {
 
+      SQJS.usertransPopUp();
 
+    });    
+    document.getElementById("SQJSuserTransIco").addEventListener("mouseover", function() {
 
+      SQJS.usertransCheckFlagIco();
 
+    });
 
+    document.getElementById("SQJSuserTransIco").addEventListener("mouseout", function() {
 
+      SQJS.usertransUnCheckFlagIco();
 
+    });
 
         
         
     menu = "";
 
     menu = "";
 
     menu += "<span style='font-size:10px;'>text or link, use ||| to separate source from translation:</span>";
 
     menu += "<span style='font-size:10px;'>text or link, use ||| to separate source from translation:</span>";
 
@@ -1433,12 +1507,136 @@ function SqueeJS() {
 
     D.body.appendChild(newdiv);
 
     D.body.appendChild(newdiv);
 
     //D.write(newdiv.outerHTML);
 
     //D.write(newdiv.outerHTML);
 
 
 
-    document.getElementById("SQJSuserTransMenu").onmouseover = function(){SQJS.usertransCheckFlagIco();};
 
-    document.getElementById("SQJSuserTransMenu").onmouseout = function(){SQJS.usertransUnCheckFlagIco();};
 
-   
+    //document.getElementById("SQJSuserTransMenu").onmouseover = function(){SQJS.usertransCheckFlagIco();};
 
+    //document.getElementById("SQJSuserTransMenu").onmouseout = function(){SQJS.usertransUnCheckFlagIco();};
 
+    
+    document.getElementById("SQJSuserTransMenu").addEventListener("mouseover", function() {
 
+      SQJS.usertransCheckFlagIco();
 
+    });
 
+    document.getElementById("SQJSuserTransMenu").addEventListener("mouseout", function() {
 
+      SQJS.usertransUnCheckFlagIco();
 
+    });   
+    
     //document.body.onclick = function(){SQJS.usertransBodyOnClick();};
 
     //document.body.onclick = function(){SQJS.usertransBodyOnClick();};
 
+    
+    document.body.addEventListener("click", function() {
 
+      SQJS.usertransBodyOnClick();
 
+    });  
+    
+	}	
+  // --- UserTranslation
 
+  
+  /**
 
+   * 
+   * Sidebar
 
+   */
 
+  
+  /**
 
+   * mysidebarShow
 
+   * 
+   * Show the sidebar
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mysidebarShow() {
 
+    if (!this.sidebarVisible) {
 
+      document.getElementById(this.sidebarContentContId).style.width = "100%";
 
+      //$("#SQJSsidebar").show("slow");
 
+      document.getElementById("SQJSsidebar").style.display = "inline";
 
+    }  
+    this.sidebarVisible = true; 
+  }
 
+
 
+  /**
 
+   * mysidebarClose
 
+   * 
+   * Close the sidebar
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mysidebarClose() {
 
+    document.getElementById("SQJSsidebar").style.display = "none";
 
+    document.getElementById(this.sidebarContentContId).style.width = "100%";
 
+    this.sidebarVisible = false; 
+  }
 
+  
+  /**
 
+   * mycreateSidebar
 
+   * 
+   * Create the tag DIV of sidebar
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage 
+   * 
+   * @param {string} sidebarURL, the URI of the of the sidebar
 
+   * @param {string} contentContId, the container of the body content
 
+   * @param {string} width, the width of the sidebar 
+   * @param {string} height, the height of the sidebar 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mycreateSidebar(sidebarURL, contentContId, width, height) {
 
+    
+    if (typeof jQuery === 'undefined') {
 
+      throw new Error('This SqueeJS\'s function requires jQuery');
 
+    }
 
+    
+    var D = document;
 
+    //w = gfSQJZDocWidth();
 
+    //h = gfSQJZDocHeight();
 
+    this.sidebarContentContId = contentContId;
 
+
 
+    barcall = "";
 
+    barcall = "&nbsp;";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSsidebarCall";
 
+    newdiv.innerHTML = barcall;
 
+    D.body.appendChild(newdiv);
 
+    //D.write(newdiv.outerHTML);
 
+
 
+    //document.getElementById("SQJSsidebarCall").onmouseover = function(){SQJS.sidebarShow();};
 
+    document.getElementById("SQJSsidebarCall").addEventListener("mouseover", function() {
 
+      SQJS.sidebarShow();
 
+    });
 
+    
+    sidebar = "";
 
+    sidebar += "<div sty='text-align:left;'>";
 
+    sidebar += "<button type='button' class='SQJSclose-button' style='left:10px' onclick='SQJS.sidebarClose();'>";
 
+    sidebar += "<span style='font-size:45px; font-weight:900;'>&times;</span>";
 
+    sidebar += "</button>";
 
+    sidebar += "</div>";
 
+    sidebar += "<div id='SQJSsidebarContent'>";
 
+    sidebar += "</div>";
 
+    
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSsidebar";
 
+    newdiv.style.width = width + "px";
 
+    newdiv.style.height = height + "px";
 
+    newdiv.innerHTML = sidebar;
 
+    D.body.appendChild(newdiv);
 
+    //D.write(newdiv.outerHTML);
 
+
 
+    //$("#SQJSsidebarContent").load(sidebarURL+"?rrnd="+ gfSQJZrnd(50000, 99999));
 
+    gfSQJZLoad("SQJSsidebarContent", sidebarURL+"?rrnd="+ gfSQJZrnd(50000, 99999))
 
+   
+    document.body.addEventListener("click", function() {
 
+      SQJS.sidebarClose();
 
+    });
 
+
 
 	}	
 	}	
- 
+  // --- Sidebar
 
   
   
 }
 
 }
 
 window.SQJS = window.SqueeJS = new SqueeJS();
 
 window.SQJS = window.SqueeJS = new SqueeJS();

+ 1164 - 0
js/squeejs_1.js
View File 

@@ -0,0 +1,1164 @@
 
+/**
 
+ * Copyright (c) 2021, 2024, 5 Mode and other contributors
 
+ * Released under the MIT license
 
+ *
 
+ * This file is part of Squeejs.
 
+ *
 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
+ * and associated documentation files (the "Software"), to deal in the Software 
+ * without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
+ * distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
 
+ * 
+ * The above copyright notice and this permission notice shall be included in all copies or 
+ * substantial portions of the Software.
 
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+ * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+ * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+ *
 
+ * squeejs.js
 
+ * 
+ * Squeejs production release.
 
+ *
 
+ * @version 1.0.5
 
+ * @author Daniele Bonini <my25mb@aol.com>
 
+ * @copyrights (c) 2016, 2024, 5 Mode
 
+ * @license https://opensource.org/licenses/MIT 
+ */
 
+
 
+
 
+function SqueeJS() {
 
+
 
+  const SQJS_GEOURL = "https://ss.squeejs.com/";
 
+
 
+  // Highlight
 
+  this.highlightOriTop=[];
 
+  this.highlightOriLeft=[];
 
+  this.highlightOriHeight=[];
 
+  this.highlightOriWidth=[];
 
+  this.highlightOriFontSize=[];
 
+  this.highlightOriBorder=[];
 
+  this.highlightOriPosition=[];
 
+   
+  this.highlightDiv = myhighlightDiv;
 
+  this.unlightDiv = myunlightDiv;
 
+  this.highlightInput = myhighlightInput;
 
+  this.unlightInput = myunlightInput;
 
+  this.highlightTextArea = myhighlightTextArea;
 
+  this.unlightTextArea = myunlightTextArea;
 
+
 
+  // Splash
 
+  this.splashMainContainerId = "";
 
+  this.splashMainContainerOriHeight = 0;
 
+  this.splashTitle = "";
 
+  this.splashLogoURI = "";
 
+  this.splashBG = "";
 
+  this.splashTimeout = 6000;
 
+  
+  this.createSplash = mycreateSplash;
 
+  this.splashStartApp = mySplashStartApp;
 
+  this.initAppWithSplash = myinitAppWithSplash;
 
+  this.initAppWithoutSplash = myinitAppWithoutSplash;
 
+  
+  // Work In Progress
 
+  this.wipMainContainerId = "";
 
+  this.wipMainContainerOriHeight = 0;
 
+  this.wipBG = "";
 
+
 
+  this.wipStartApp = myWIPStartApp;
 
+  this.initAppWithWIP = myinitAppWithWIP;
 
+  this.initAppWithoutWIP = myinitAppWithoutWIP;  
+  
+  //Banners
 
+  this.bannerIndex = 0;
 
+  this.bannerIMG = [];
 
+  this.bannerURL = [];
 
+  
+  this.createBanner = mycreateBanner;
 
+  this.closeBanner = mycloseBanner;
 
+  
+  //Footer
 
+  this.footerHTML = "";
 
+  this.footerBG = "";
 
+  
+  this.createFooter = mycreateFooter;
 
+  
+  //AppMenu
 
+  this.appmenuContentContId = "";
 
+  this.appmenuVisible = false;
 
+  this.appmenuOnIco = false;
 
+
 
+  this.appmenuPopUp = myappmenuPopUp;
 
+  this.appmenuHide = myappmenuHide;
 
+  this.appmenuCheckFlagIco = myappmenuCheckFlagIco;
 
+  this.appmenuUnCheckFlagIco = myappmenuUnCheckFlagIco;
 
+  this.appmenuBodyOnClick = myappmenuBodyOnClick;
 
+  this.createAppMenu = mycreateAppMenu;
 
+  
+  //GeoLocation
 
+  this.geoLocation = "";
 
+  
+  this.retrieveGeoLocation = myretrieveGeoLocation;
 
+  this.hideElByGeoLocation = myhideElByGeoLocation;
 
+  this.showElByGeoLocation = myshowElByGeoLocation;
 
+  
+  /**
 
+   * gfSQJZDocWidth
 
+   * 
+   * Get the width of the whole document
 
+   * 
+   * @returns {int} the document width
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function gfSQJZDocWidth() {
 
+    var D = document;
 
+    var scrollMaxX;
 
+    if (window.scrollMaxX) {
 
+      scrollMaxX = window.scrollMaxX;
 
+    } else {
 
+      scrollMaxX = D.documentElement.scrollWidth;
 
+    }
 
+    return Math.max(
 
+        D.body.scrollWidth, scrollMaxX,
 
+        D.body.offsetWidth, D.documentElement.offsetWidth,
 
+        D.body.clientWidth, D.documentElement.clientWidth
 
+    );
 
+  }
 
+
 
+  /**
 
+   * gfSQJZDocHeight
 
+   * 
+   * Get the height of the whole document
 
+   * 
+   * @returns {int} the document height
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function gfSQJZDocHeight() {
 
+    var D = document;
 
+    var scrollMaxY;
 
+    if (window.scrollMaxY) {
 
+      scrollMaxY = window.scrollMaxY;
 
+    } else {
 
+      scrollMaxY = D.documentElement.scrollHeight;
 
+    }
 
+    var height = Math.max(
 
+        D.body.scrollHeight, scrollMaxY,    
+        D.body.offsetHeight, D.documentElement.offsetHeight,
 
+        D.body.clientHeight, D.documentElement.clientHeight
 
+    );
 
+    return height;
 
+  }
 
+
 
+  /**
 
+   * gfSQJZrnd
 
+   * 
+   * Geenerate a random number between the given limits
 
+   * 
+   * @param {int} min, the starting limit
 
+   * @param {int} max, the max limit
 
+   * @returns {int} the generated random value
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function gfSQJZrnd(min, max) {
 
+    min = Math.ceil(min);
 
+    max = Math.floor(max);
 
+    return Math.floor(Math.random() * (max - min +1)) + min;
 
+  }
 
+
 
+  /**
 
+   * 
+   * Highlight
 
+   * 
+   */
 
+
 
+  /**
 
+   * highlightDiv
 
+   * 
+   * highlight the current DIV element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseenter event 
+   * 
+   * @param {Element} tthis, the current DIV element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myhighlightDiv(tthis) {
 
+    if (tthis.tagName !== "DIV") {
 
+      return;    
+    }
 
+    // --- saving original data
 
+    myR = tthis.getBoundingClientRect();
 
+    this.highlightOriTop[tthis.tabIndex] = parseInt(myR.top);
 
+    this.highlightOriHeight[tthis.tabIndex] = parseInt(myR.height);
 
+    this.highlightOriWidth[tthis.tabIndex] = parseInt(myR.width);
 
+    this.highlightOriFontSize[tthis.tabIndex] = tthis.style.fontSize;
 
+    this.highlightOriBorder[tthis.tabIndex] = tthis.style.border;
 
+    this.highlightOriPosition[tthis.tabIndex] = tthis.style.position;
 
+    // ---
 
+
 
+    tthis.style.position = "absolute";
 
+    tthis.style.height = "480px";
 
+    tthis.style.width = "650px";
 
+    tthis.style.border = "3px dashed darkcyan";
 
+    tthis.style.fontSize = "25px";
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-100px-"+tthis.tabIndex+" Enter";
 
+  }
 
+
 
+  /**
 
+   * unlightDiv
 
+   * 
+   * unlight the current DIV element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseleave event 
+   * 
+   * @param {Element} tthis, the current DIV element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myunlightDiv(tthis) {
 
+    if (tthis.tagName !== "DIV") {
 
+      return;    
+    }
 
+    // --- restoring original data  
+    if (this.highlightOriTop[tthis.tabIndex]===null) {
 
+      return;
 
+    }  
+    tthis.style.fontSize = this.highlightOriFontSize[tthis.tabIndex];
 
+    tthis.style.border = this.highlightOriBorder[tthis.tabIndex];
 
+    tthis.style.width = (this.highlightOriWidth[tthis.tabIndex]-6)+"px";
 
+    tthis.style.height = (this.highlightOriHeight[tthis.tabIndex]-6)+"px";
 
+    tthis.style.position = this.highlightOriPosition[tthis.tabIndex];
 
+    // ---
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-30-"+tthis.tabIndex+"Leave";
 
+  }
 
+
 
+  /**
 
+   * highlightInput
 
+   * 
+   * highlight the current INPUT element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseenter event 
+   * 
+   * @param {Element} tthis, the current INPUT element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myhighlightInput(tthis) {
 
+    if (tthis.tagName !== "INPUT") {
 
+      return;    
+    }
 
+    // --- saving original data
 
+    myR = tthis.getBoundingClientRect();
 
+    this.highlightOriTop[tthis.tabIndex] = parseInt(myR.top);
 
+    this.highlightOriHeight[tthis.tabIndex] = parseInt(myR.height);
 
+    this.highlightOriWidth[tthis.tabIndex] = parseInt(myR.width);
 
+    this.highlightOriFontSize[tthis.tabIndex] = tthis.style.fontSize;
 
+    this.highlightOriBorder[tthis.tabIndex] = tthis.style.border;
 
+    this.highlightOriPosition[tthis.tabIndex] = tthis.style.position;
 
+    // ---
 
+
 
+    tthis.style.position = "absolute";
 
+    tthis.style.height = "40px";
 
+    tthis.style.width = "400px";
 
+    tthis.style.border = "3px solid lightblue";
 
+    tthis.style.fontSize = "25px";
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-100px-"+tthis.tabIndex+" Enter";
 
+  }
 
+
 
+  /**
 
+   * unlightInput
 
+   * 
+   * unlight the current INPUT element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseleave event 
+   * 
+   * @param {Element} tthis, the current INPUT element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myunlightInput(tthis) {
 
+    if (tthis.tagName !== "INPUT") {
 
+      return;    
+    }
 
+    // --- restoring original data  
+    if (this.highlightOriTop[tthis.tabIndex]===null) {
 
+      return;
 
+    }  
+    tthis.style.fontSize = this.highlightOriFontSize[tthis.tabIndex];
 
+    tthis.style.border = this.highlightOriBorder[tthis.tabIndex];
 
+    tthis.style.width = (this.highlightOriWidth[tthis.tabIndex]-6)+"px";
 
+    tthis.style.height = (this.highlightOriHeight[tthis.tabIndex]-6)+"px";
 
+    tthis.style.position = this.highlightOriPosition[tthis.tabIndex];
 
+    // ---
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-30-"+tthis.tabIndex+"Leave";
 
+  }
 
+
 
+  /**
 
+   * highlightTextArea
 
+   * 
+   * highlight the current TEXTAREA element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseenter event 
+   * 
+   * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myhighlightTextArea(tthis) {
 
+    if (tthis.tagName !== "TEXTAREA") {
 
+      return;    
+    }
 
+    // --- saving original data
 
+    myR = tthis.getBoundingClientRect();
 
+    this.highlightOriTop[tthis.tabIndex] = parseInt(myR.top);
 
+    this.highlightOriHeight[tthis.tabIndex] = parseInt(myR.height);
 
+    this.highlightOriWidth[tthis.tabIndex] = parseInt(myR.width);
 
+    this.highlightOriFontSize[tthis.tabIndex] = tthis.style.fontSize;
 
+    this.highlightOriBorder[tthis.tabIndex] = tthis.style.border;
 
+    this.highlightOriPosition[tthis.tabIndex] = tthis.style.position;
 
+    // ---
 
+
 
+    tthis.style.position = "absolute";
 
+    tthis.style.height = "240px";
 
+    tthis.style.width = "400px";
 
+    tthis.style.border = "3px solid lightblue";
 
+    tthis.style.fontSize = "25px";
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-100px-"+tthis.tabIndex+" Enter";
 
+  }
 
+
 
+  /**
 
+   * unlightTextArea
 
+   * 
+   * highlight the current TEXTAREA element
 
+   * 
+   * Context:
 
+   * - call this function in the onmouseleave event 
+   * 
+   * @param {Element} tthis, the current TEXTAREA element (this on the function call)
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myunlightTextArea(tthis) {
 
+    if (tthis.tagName !== "TEXTAREA") {
 
+      return;    
+    }
 
+    // --- restoring original data  
+    if (this.highlightOriTop[tthis.tabIndex]===null) {
 
+      return;
 
+    }  
+    tthis.style.fontSize = this.highlightOriFontSize[tthis.tabIndex];
 
+    tthis.style.border = this.highlightOriBorder[tthis.tabIndex];
 
+    tthis.style.width = (this.highlightOriWidth[tthis.tabIndex]-6)+"px";
 
+    tthis.style.height = (this.highlightOriHeight[tthis.tabIndex]-6)+"px";
 
+    tthis.style.position = this.highlightOriPosition[tthis.tabIndex];
 
+    // ---
 
+
 
+    //document.getElementById("debug1").value=tthis.id+"-30-"+tthis.tabIndex+"Leave";
 
+  }
 
+
 
+  // --- End Highlight
 
+
 
+  /**
 
+   * 
+   * Splash Screen
 
+   */
 
+
 
+  /**
 
+   * createSplash
 
+   * 
+   * create the tag DIV for the splash screen
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mycreateSplash() {
 
+    var D = document;
 
+    w = gfSQJZDocWidth();
 
+    splashLeft = parseInt((w - 265) / 2);
 
+    h = gfSQJZDocHeight();
 
+    title = this.splashTitle;
 
+    logoURI = this.splashLogoURI;
 
+    BG = this.splashBG;
 
+    //alert(this.splashTitle);
 
+    //alert(this.splashLogoURI);
 
+    //alert(this.splashBG);
 
+
 
+    splash = "";
 
+    splash += "<br><br><br><br>";
 
+    splash += "<div style='width:267px;margin:auto;text-align:center;'>"+title+"</div><br>";
 
+    splash += "<div style='width:267px;margin:auto;'><img src='"+logoURI+"' style='width:265px;'></div>";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSsplash";
 
+    newdiv.style.background = BG;
 
+    newdiv.style.width = w;
 
+    newdiv.style.height = h;
 
+    newdiv.style.textAlign = 'left';
 
+    newdiv.style.fontFamily = 'Arial,Sans,Verdana';
 
+    newdiv.style.fontSize = '35px';
 
+    newdiv.style.fontWeight = '900';
 
+    newdiv.style.paddingLeft = splashLeft+"px";
 
+    newdiv.innerHTML = splash;
 
+    D.body.appendChild(newdiv);
 
+  }
 
+
 
+  /**
 
+   * SPALSHstartApp
 
+   * 
+   * Start the web app just after the Splash
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mySplashStartApp() {
 
+
 
+    //alert("hello");
 
+
 
+    //Splash
 
+    if (document.getElementById("SQJSsplash")) {
 
+      document.getElementById("SQJSsplash").style.display = "none";
 
+    }  
+
 
+    //Main Container
 
+    document.getElementById(this.splashMainContainerId).style.height = this.splashMainContainerOriHeight;
 
+    document.getElementById(this.splashMainContainerId).style.display = "inline";
 
+
 
+    window.scrollTo(0,0);
 
+
 
+  }			
+
 
+  /**
 
+   * _SPLASHstartApp
 
+   * 
+   * Set the timeout to start the web app just after the Splash
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @param {int} time, the interval of time to wait before to start the webapp
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  //function _SPLASHstartApp(time) {
 
+
 
+    // Fisnished the Intro with the Splash we load the app..
 
+    // setTimeout("SPLASHstartApp()", time);
 
+
 
+  //}
 
+
 
+  /**
 
+   * _initAppWithSplash
 
+   * 
+   * Init the web app to start with the Splash
 
+   * 
+   * Context:
 
+   * - Call this function in the load event (ie. by a window.AddEventListener) of the webpage 
+   * 
+   * @param {string} mainContainerId, the container ID for the webpage content
 
+   * @param {string} title, the title of the splash screen
 
+   * @param {string} logoURI, the logo to display in the splash screen
 
+   * @param {string} BG, the background for the splash screen
 
+   * @param {int} timeout, the splash screen timeout
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myinitAppWithSplash(mainContainerId, title, logoURI, BG, timeout) {
 
+
 
+    this.splashMainContainerId = mainContainerId;
 
+    this.splashTitle = title;
 
+    this.splashLogoURI = logoURI;
 
+    this.splashBG = BG;
 
+    if (timeout!==null) {
 
+      this.splashTimeout = timeout;
 
+    }  
+
 
+    //Main Container
 
+    document.getElementById(this.splashMainContainerId).style.display = "none";
 
+
 
+    //Splash
 
+    this.createSplash();
 
+    document.getElementById("SQJSsplash").style.display = "inline";
 
+
 
+    //window.scrollTo(1,1);
 
+    document.body.style.height = parseInt(window.innerHeight) + "px";
 
+    this.splashMainContainerOriHeight = document.getElementById(this.splashMainContainerId).style.height;
 
+    document.getElementById(this.splashMainContainerId).style.height = parseInt(window.innerHeight) + "px";
 
+
 
+    setTimeout("SQJS.splashStartApp()", this.splashTimeout);
 
+
 
+  }
 
+
 
+  /**
 
+   * _initAppWithoutSplash
 
+   * 
+   * Init the web app to start withOUT the Splash
 
+   * 
+   * Context:
 
+   * - Call this function in the load event (ie. by a window.AddEventListener) of the webpage 
+   * 
+   * @param {string} mainContainerId, the container ID for the webpage content
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myinitAppWithoutSplash(mainContainerId) {
 
+
 
+    this.splashMainContainerId = mainContainerId;
 
+
 
+    //Main Container
 
+    document.getElementById(this.splashMainContainerId).style.display = "inline";
 
+
 
+    //Splash
 
+    //document.getElementById("SQJSsplash").style.display = "none";
 
+
 
+    setTimeout("SQJS.splashStartApp()", 1);
 
+
 
+  }
 
+  // --- End Splash Screen
 
+
 
+  /**
 
+   * 
+   * Work in Progress
 
+   */
 
+
 
+  /**
 
+   * createWIP
 
+   * 
+   * create the tag DIV for the Work In Progress Banner
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function _createWIP() {
 
+    var D = document;
 
+    w = gfSQJZDocWidth();
 
+    wipLeft = parseInt((w - 450) / 2);
 
+    h = gfSQJZDocHeight();
 
+    bannerURI = "//squeejs.com/res/work-in-progress.png";
 
+    BG = this.wipBG;
 
+
 
+    wip = "";
 
+    wip += "<br><br><br><br><br><br><br>";
 
+    wip += "<div style='width:450px;margin:auto;'><img src='"+bannerURI+"' style='width:450px;'></div>";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSWIP";
 
+    newdiv.style.background = BG;
 
+    newdiv.style.width = w;
 
+    newdiv.style.height = h;
 
+    newdiv.style.textAlign = 'left';
 
+    newdiv.style.fontFamily = 'Arial,Sans,Verdana';
 
+    newdiv.style.fontSize = '35px';
 
+    newdiv.style.fontWeight = '900';
 
+    newdiv.style.paddingLeft = wipLeft+"px";
 
+    newdiv.innerHTML = wip;
 
+    D.body.appendChild(newdiv);
 
+  }
 
+
 
+  /**
 
+   * WIPstartApp
 
+   * 
+   * Start the web app just after the WIP banner
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myWIPStartApp() {
 
+
 
+    //Splash
 
+    if (document.getElementById("SQJSWIP")) {
 
+      document.getElementById("SQJSWIP").style.display = "none";
 
+    }  
+
 
+    //Main Container
 
+    document.getElementById(this.wipMainContainerId).style.height = this.wipMainContainerOriHeight;
 
+    document.getElementById(this.wipMainContainerId).style.display = "inline";
 
+
 
+    window.scrollTo(0,0);
 
+
 
+  }			
+
 
+  /**
 
+   * _WIPstartApp
 
+   * 
+   * Set the timeout to start the web app just after the Splash
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @param {int} time, the interval of time to wait before to start the webapp
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  //function _WIPstartApp(time) {
 
+
 
+    // Fisnished the Intro with the Splash we load the app..
 
+    // setTimeout("WIPstartApp()", time);
 
+
 
+  //}
 
+
 
+  /**
 
+   * _initAppWithWIP
 
+   * 
+   * Init the web app to start with the work in progress banner
 
+   * 
+   * Context:
 
+   * - Call this function in the load event (ie. by a window.AddEventListener) of the webpage 
+   * 
+   * @param {string} mainContainerId, the container ID for the webpage content
 
+   * @param {string} BG, the background for the wip banner
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myinitAppWithWIP(mainContainerId, BG) {
 
+
 
+    this.wipMainContainerId = mainContainerId;
 
+    this.wipBG = BG;
 
+
 
+    //Main Container
 
+    document.getElementById(this.wipMainContainerId).style.display = "none";
 
+
 
+    //Banner
 
+    _createWIP();
 
+    document.getElementById("SQJSWIP").style.display = "inline";
 
+
 
+    //window.scrollTo(1,1);
 
+    document.body.style.height = parseInt(window.innerHeight) + "px";
 
+    this.wipMainContainerOriHeight = document.getElementById(this.wipMainContainerId).style.height;
 
+    document.getElementById(this.wipMainContainerId).style.height = parseInt(window.innerHeight) + "px";
 
+
 
+  }
 
+
 
+  /**
 
+   * _initAppWithoutWIP
 
+   * 
+   * Init the web app to start withOUT the WIP banner
 
+   * 
+   * Context:
 
+   * - Call this function in the load event (ie. by a window.AddEventListener) of the webpage 
+   * 
+   * @param {string} mainContainerId, the container ID for the webpage content
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myinitAppWithoutWIP(mainContainerId) {
 
+
 
+    this.wipMainContainerId = mainContainerId;
 
+
 
+    //Main Container
 
+    document.getElementById(this.wipMainContainerId).style.display = "inline";
 
+
 
+    //Splash
 
+    //document.getElementById("SQJSWIP").style.display = "none";
 
+
 
+    setTimeout("SQJS.wipStartApp()", 1);
 
+
 
+  }
 
+  // --- Work in Progress
 
+
 
+  /**
 
+   * 
+   * Banner
 
+   */
 
+
 
+  /**
 
+   * createBanner
 
+   * 
+   * create a new Banner
 
+   * 
+   * Context:
 
+   * - Call in the body of your webpage 
+   * 
+   * @param {string} img, the banner img (471px width)
 
+   * @param {string} url, the banner target url
 
+   * @param {string} align, the banner horizontal alignment [left|middle|right]
 
+   * @param {string} display, the banner display [fixed|absolute|relative|none]
 
+   * @param {int} minScreenWidth, min screen width to display the banner
 
+   * @returns {string} the id of the resulting banner
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mycreateBanner(img, url, align, display, minScreenWidth) {
 
+    this.bannerIndex++;
 
+
 
+    this.bannerIMG[this.bannerIndex] = img;
 
+    this.bannerURL[this.bannerIndex] = url;
 
+
 
+    var D = document;
 
+    w = gfSQJZDocWidth();
 
+    switch (align) {
 
+      case "middle":
 
+        bannerLeft = parseInt((w - 473) / 2);
 
+        break;
 
+      case "left":
 
+        bannerLeft = 0;
 
+        break;
 
+      case "right":
 
+        bannerLeft = parseInt(w - 473);
 
+        break;
 
+      default:  
+        bannerLeft = parseInt((w - 473) / 2);
 
+        break;
 
+    }
 
+    bbannerIMG = this.bannerIMG[this.bannerIndex];
 
+    bbannerURL = this.bannerURL[this.bannerIndex];
 
+
 
+    banner = "";
 
+    banner += "<button type='button' class='SQJSclose-button' onclick='SQJS.closeBanner(this);'>";
 
+    banner += "<span style='font-weight:900;'>&times;</span>";
 
+    banner += "</button>";  
+    banner += "<a href='"+bbannerURL+"' target='_blank'><img src='"+bbannerIMG+"' style='width:471px;'></a>";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSBANNER" + this.bannerIndex;
 
+    //newdiv.style.width = w;
 
+    //newdiv.style.height = h;
 
+    newdiv.style.textAlign = 'left';
 
+    //newdiv.style.fontFamily = 'Arial,Sans,Verdana';
 
+    //newdiv.style.fontSize = '35px';
 
+    //newdiv.style.fontWeight = '900';
 
+    newdiv.style.marginLeft = bannerLeft+"px";
 
+    bannerDisplay = true;
 
+    switch (display) {
 
+      case "fixed":
 
+        newdiv.className = "SQJSbanner-fixed";
 
+        newdiv.style.top = (((35 +62) * (this.bannerIndex-1))) + "px";
 
+        break;
 
+      case "absolute":
 
+        newdiv.className = "SQJSbanner-absolute";
 
+        newdiv.style.top = (((35 +62) * (this.bannerIndex-1))) + "px";
 
+        break;
 
+      case "relative":
 
+        newdiv.className = "SQJSbanner-relative";
 
+        break;
 
+      case "none":
 
+        bannerDisplay = false;
 
+        break;
 
+    }  
+    if (window.innerWidth < minScreenWidth) {
 
+      bannerDisplay = false;
 
+    }
 
+    if (!bannerDisplay) {
 
+      newdiv.style.display = "none";
 
+    }  
+    newdiv.innerHTML = banner;
 
+    //D.body.appendChild(newdiv);
 
+    D.write(newdiv.outerHTML);
 
+
 
+    return "SQJSBANNER"+this.bannerIndex;
 
+  }
 
+
 
+  function mycloseBanner(tthis) {
 
+    tthis.parentNode.style.display = "none";
 
+  }
 
+  // --- Banner
 
+
 
+  /**
 
+   * 
+   * Footer
 
+   */
 
+  
+  /**
 
+   * createFooter
 
+   * 
+   * create the tag DIV for the footer
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage
 
+   * 
+   * @param {string} html, the html to insert as footer 
+   * @param {string} BG, the background of the footer
 
+   * @param {string} align, the banner horizontal alignment [left|middle|right]
 
+   * @param {string} display, the banner display [fixed|relative|none]
 
+   * @returns {string}  the id of the footer DIV element 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mycreateFooter(html, BG, align, display) {
 
+    htollerance = 12; 
+    htollerance = 12; 
+    footerContHeight = 35;
 
+    footerHeight = 32;
 
+    footerFloat = "";
 
+    
+    this.footerHTML = html;
 
+    this.BG = BG;
 
+    
+    var D = document;
 
+    w = gfSQJZDocWidth();
 
+    h = window.innerHeight;
 
+    footerDisplay = true;
 
+    footerContClassName = "";
 
+    footerClassName = "";
 
+    switch (display) {
 
+      case "fixed":
 
+        footerContClassName = "SQJSfooterCont";
 
+        footerClassName = "SQJSfooter";
 
+        break;
 
+      case "relative":
 
+        footerContClassName = "SQJSfooterCont";
 
+        footerClassName = "SQJSfooter";
 
+        break;
 
+      case "none":
 
+        footerContClassName = "SQJSfooterCont";
 
+        footerClassName = "SQJSfooter";
 
+        footerDisplay = false;
 
+        break;
 
+      default:
 
+        display="relative";
 
+        footerContClassName = "SQJSfooterCont";
 
+        footerClassName = "SQJSfooter";
 
+        break;        
+    }  
+
 
+    footer = "";
 
+    footer += "<div class='"+footerContClassName+"'>&nbsp;</div>";
 
+    footer += "<div class='"+footerClassName+"'>"+html+"</div>	";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSfooter";
 
+    newdiv.className = "footer";
 
+    //newdiv.style.textAlign = 'left';
 
+    newdiv.innerHTML = footer;
 
+    D.body.appendChild(newdiv);
 
+    
+    document.getElementsByClassName(footerClassName)[0].style.background = BG;
 
+    
+    switch (align) {
 
+      case "middle":
 
+        footerLeft = parseInt((w - document.getElementsByClassName(footerClassName)[0].getBoundingClientRect().width) / 2);
 
+        break;
 
+      case "left":
 
+        footerLeft = 0;
 
+        footerFloat = "left";
 
+        break;
 
+      case "right":
 
+        footerLeft = parseInt(w - document.getElementsByClassName(footerClassName)[0].getBoundingClientRect().width);
 
+        footerFloat = "right";
 
+        break;
 
+      default:  
+        align="left";
 
+        footerLeft = 0;
 
+        footerFloat = "left";
 
+        break;
 
+    }
 
+    document.getElementsByClassName(footerClassName)[0].style.float = footerFloat;
 
+    if (display === "relative") {
 
+      //document.getElementsByClassName(footerClassName)[0].style.top = "-" + footerContHeight + "px";    
+    } else if (display === "fixed") {
 
+      document.getElementsByClassName("footer")[0].style.marginLeft = (footerLeft-wtollerance)+"px";
 
+      document.getElementsByClassName("footer")[0].style.position = "fixed";
 
+      document.getElementsByClassName("footer")[0].style.top = ""+parseInt(h - footerContHeight - htollerance) + "px";
 
+      if (align === "right") {
 
+        //document.getElementsByClassName("footer")[0].style.textAlign = "right";
 
+      } else if (align === "middle") {
 
+        //document.getElementsByClassName(footerClassName)[0].style.width = "800px";
 
+        document.getElementsByClassName("footer")[0].style.textAlign = "center";
 
+      }
 
+    } else {
 
+      newdiv.style.display = "none";
 
+    }  
+    return newdiv.id;
 
+  }  
+  // --- Footer
 
+
 
+  /**
 
+   * 
+   * AppMenu
 
+   */
 
+  
+  /**
 
+   * myappmenuPopUp
 
+   * 
+   * Display/hide the appmenu
 
+   * 
+   * Context:
 
+   * - this function is for internal use
 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myappmenuPopUp() {
 
+    if (!this.appmenuVisible) {
 
+      document.getElementById("SQJSappMenu").style.display = "inline";
 
+      document.getElementById("SQJSappMenu").style.zIndex = "99998";
 
+      document.getElementById(this.appmenuContentContId).style.zIndex = "99997";
 
+      document.getElementById(this.appmenuContentContId ).style.opacity = "0.3";
 
+    } else {
 
+      document.getElementById("SQJSappMenu").style.display = "none";
 
+      document.getElementById("SQJSappMenu").style.zIndex = "99992";  
+      document.getElementById(this.appmenuContentContId).style.zIndex = "99993";
 
+      document.getElementById(this.appmenuContentContId).style.opacity = "1.0";
 
+    }
 
+    this.appmenuVisible=!this.appmenuVisible;
 
+  } 
+  
+  /**
 
+   * myappmenuHide
 
+   * 
+   * Hide the appmenu
 
+   * 
+   * Context:
 
+   * - this function is for internal use
 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myappmenuHide() {
 
+    document.getElementById("SQJSappMenu").style.display = "none";
 
+    this.appmenuVisible=false;
 
+    document.getElementById(this.appmenuContentContId).style.opacity = "1.0";
 
+  } 
+
 
+  /**
 
+   * myappmenuCheckFlagIco
 
+   * 
+   * Check to true the menu icon flag
 
+   * 
+   * Context:
 
+   * - this function is for internal use
 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myappmenuCheckFlagIco() {
 
+    this.appmenuOnIco = true;
 
+  }  
+
 
+  /**
 
+   * myappmenuUnCheckFlagIco
 
+   * 
+   * Check to false the menu icon flag
 
+   * 
+   * Context:
 
+   * - this function is for internal use
 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myappmenuUnCheckFlagIco() {
 
+    this.appmenuOnIco = false;
 
+  }  
+  
+  /**
 
+   * myappmenuBodyOnClick
 
+   * 
+   * Body click event function: if open, hide the menu
 
+   * 
+   * Context:
 
+   * - this function is for internal use
 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myappmenuBodyOnClick() {
 
+		if (!this.appmenuOnIco) {
 
+		  this.appmenuHide();
 
+		}
 
+	}	
+  
+  /**
 
+   * mycreateAppMenu
 
+   * 
+   * create the tag DIV of menu icon and app menu
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage 
+   * 
+   * @param {string} icoURI, the URI of the menu icon
 
+   * @param {string} menuURL, the URL of the menu web page
 
+   * @param {string} contentContId, the container of the body content (the menu will disable it)
 
+   * @param {string} top, the y coord of the menu position 
+   * @param {string} left, the x coord of the menu position 
+   * @param {string} width, the width of the menu 
+   * @param {string} height, the height of the menu
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function mycreateAppMenu(icoURI, menuURL, contentContId, top, left, width, height) {
 
+    
+    if (typeof jQuery === 'undefined') {
 
+      throw new Error('This SqueeJS\'s function requires jQuery');
 
+    }
 
+    
+    var D = document;
 
+    //w = gfSQJZDocWidth();
 
+    //h = gfSQJZDocHeight();
 
+    this.appmenuContentContId = contentContId
 
+
 
+    menuico = "";
 
+    menuico = "<img src='"+icoURI+"' style='width:48px;height:48px;' alt='app menu'>";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSappMenuIco";
 
+    newdiv.style.width = "48px";
 
+    newdiv.style.height = "48px";
 
+    newdiv.innerHTML = menuico;
 
+    //D.body.appendChild(newdiv);
 
+    D.write(newdiv.outerHTML);
 
+
 
+    $("#SQJSappMenuIco").on("click",function(){SQJS.appmenuPopUp();});
 
+    $("#SQJSappMenuIco").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
+    $("#SQJSappMenuIco").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+    
+    menu = "";
 
+    menu += "<!-- Here goes the content of the AppMenu -->";
 
+
 
+    newdiv=D.createElement("div");
 
+    newdiv.id = "SQJSappMenu";
 
+    newdiv.style.top = top+"px";
 
+    newdiv.style.left = left+"px";
 
+    newdiv.style.width = width+"px";
 
+    newdiv.style.height = height+"px";
 
+    newdiv.innerHTML = menu;
 
+    D.body.appendChild(newdiv);
 
+    //D.write(newdiv.outerHTML);
 
+
 
+    $("#SQJSappMenu").on("mouseover",function(){SQJS.appmenuCheckFlagIco();});
 
+    $("#SQJSappMenu").on("mouseout",function(){SQJS.appmenuUnCheckFlagIco();});
 
+
 
+    $("#SQJSappMenu").load(menuURL+"?rrnd="+ gfSQJZrnd(50000, 99999));
 
+    
+    $(document.body).on("click", function() {SQJS.appmenuBodyOnClick();});
 
+	}	
+  // --- AppMenu
 
+  
+  /**
 
+   * 
+   * GeoLocation
 
+   */
 
+  
+  /**
 
+   * myretrieveGeoLocation
 
+   * 
+   * Retreive the geolocation (country name)
 
+   * 
+   * Context:
 
+   * - this function is for internal use 
+   * 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myretrieveGeoLocation() {
 
+    if (!this.geoLocation || this.geoLocation=="") {
 
+      var xhttp = new XMLHttpRequest();
 
+      var xmluri = SQJS_GEOURL;
 
+      //alert(xmluri);
 
+      xhttp.open("GET", xmluri, false);  
+      xhttp.send();
 
+      this.geoLocation = xhttp.responseText;
 
+    }
 
+  }
 
+  
+  /**
 
+   * myhideElByGeoLocation
 
+   * 
+   * Hide the given web page Element for the specified geolocation
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage 
+   * 
+   * @param {string} id, the id of the element to hide 
+   * @param {string} geoloc, the geolocation (country name) to hide the el for
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myhideElByGeoLocation(id, geoloc) {
 
+    this.retrieveGeoLocation();
 
+    //alert("debug#2"+this.geoLocation);
 
+    if (this.geoLocation) {
 
+      if (geoloc.toLowerCase() === this.geoLocation.toLowerCase()) {
 
+        document.getElementById(id).style.display="none";
 
+      }
 
+    }  
+  }
 
+  
+  /**
 
+   * myshowElByGeoLocation
 
+   * 
+   * Show the given web page Element for the specified geolocation
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage 
+   * 
+   * @param {string} id, the id of the element to show
 
+   * @param {string} geoloc, the geolocation (country name) to show the el for
 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  function myshowElByGeoLocation(id, geoloc) {
 
+    this.retrieveGeoLocation();
 
+    //alert("debug#3"+this.geoLocation);
 
+    if (this.geoLocation) {
 
+      if (geoloc.toLowerCase() === this.geoLocation.toLowerCase()) {
 
+        document.getElementById(id).style.display="inline";
 
+      }
 
+    } 
+  }
 
+  
+}
 
+window.SQJS = window.SqueeJS = new SqueeJS();
 
+
 
+window.addEventListener("load", function() {
 
+  nl = document.getElementsByTagName("*");
 
+  i=0;
 
+  for (n of nl) {
 
+    n.tabIndex = i;
 
+    i++;
 
+  }
 
+},true);
 
+
 
+

+ 8 - 0
mysidebar.html
View File 

@@ -0,0 +1,8 @@
 
+<div style="padding:20px;padding-top:80px;">
 
+  
+    My Sidebar<br>
 
+    <br>
 
+  
+    <a href="http://5mode.com">5 Mode</a><br>
 
+
 
+</div>

+ 165 - 0
sidebar.html
View File 

@@ -0,0 +1,165 @@
 
+<!DOCTYPE html>
 
+<!--
 
+* Copyright (c) 2021, 2024, 5 Mode and other contributors
 
+* Released under the MIT license
 
+*
 
+* This file is part of SqueeJS.
 
+*
 
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software 
+* and associated documentation files (the "Software"), to deal in the Software 
+* without restriction, including without limitation the rights to use, copy, modify, merge, publish, 
+* distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the 
+* Software is furnished to do so, subject to the following conditions:
 
+* 
+* The above copyright notice and this permission notice shall be included in all copies or 
+* substantial portions of the Software.
 
+* 
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN 
+* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 
+* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+*
 
+* sidebar.html
 
+* 
+* SqueeJS Doc and examples for the Sidebar functionalities.
 
+*
 
+* @author Daniele Bonini <my25mb@aol.com>
 
+* @copyrights (c) 2016, 2024, 5 Mode    
+* @license https://opensource.org/licenses/MIT
 
+* -->
 
+<html>
 
+    <head>
 
+       
+      <title>Sidebar: doc and examples.</title>
 
+       
+      <meta charset="UTF-8">
 
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+       
+      <link rel="shortcut icon" href="favicon.ico" />
 
+    
+      <meta name="description" content="Welcome to Squeejs! Let everyone squeez its javascript code."/>
 
+      <meta name="author" content="5 Mode"/> 
+      <meta name="robots" content="index,follow"/>
 
+      <meta name="keywords" content="Squeejs,javascript,framework,squeejs.com,MIT,license,5 Mode"/>
 
+       
+      <script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
 
+      <script src="/js/common.js" type="text/javascript"></script>
 
+      <script src="/js/squeejs.js?r=3445566" type="text/javascript"></script>
 
+       
+      <link href="/css/style.css?v=1631827555" type="text/css" rel="stylesheet">
 
+      <link href="/css/squeejs.css?v=1631827556" type="text/css" rel="stylesheet">
 
+
 
+</head>
 
+<body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
+
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
+
 
+<br><br><br>
 
+
 
+<h2>SIDEBAR</h2>    
+
 
+Here the Javascript code available to be inserted in your web page to implement a <i>sidebar</i>.<br>
 
+<br>
 
+Please check the <b>context</b> of implementation for each of the functions.<br>
 
+
 
+<br><br>
 
+
 
+<h2>Example:</h2>
 
+See the tip coming out from the left side of the screen.
 
+<script>
 
+var myNewSidebar = SQJS.createSidebar("https://squeejs.com/mysidebar.html", "content", 300, window.innerHeight);
 
+</script>
 
+ 
+<br>
 
+
 
+<div id="content" style="height:430px;">  
+  
+<br><br>
 
+
 
+<h2>Code:</h2>  
+
 
+<pre>
 
+
 
+  /**
 
+   * SQJS.createSidebar
 
+   * 
+   * Create the tag DIV of sidebar
 
+   * 
+   * Context:
 
+   * - Call it in the body of your webpage 
+   * 
+   * @param {string} sidebarURL, the URI of the of the sidebar
 
+   * @param {string} contentContId, the container of the body content
 
+   * @param {string} width, the width of the sidebar 
+   * @param {string} height, the height of the sidebar 
+   * @returns {void}
 
+   * 
+   * This function is part of SqueeJS.
 
+   */
 
+  <b>function  SQJS.createSidebar(sidebarURL, contentContId, width, height){};</b>
 
+
 
+</pre>  
+
 
+<br><br>
 
+
 
+<h2>Usage example:</h2>  
+  
+<pre style="background:lightyellow;width:100%;white-space: pre-wrap;">
 
+
 
+    &lt;script&gt;
 
+     var myNewSidebar = SQJS.createSidebar("/mysidebar.html", "content", 300, window.innerHeight);
 
+    &lt;/script&gt;
 
+
 
+</pre>
 
+
 
+<div style="clear:both; margin:auto;"> 
+<br><br>
 
+</div>
 
+
 
+<div class="footer" style="float:right">
 
+<div id="footerCont">&nbsp;</div>
 
+<div id="footer"><span style="background:#FFFFFF;color:black;opacity:1.0;margin-right:10px;">&nbsp;&nbsp;<a href="dd.html">Disclaimer</a>&nbsp;&nbsp;A <a href="http://5mode.com">5 Mode</a> project and <a href="http://demo.5mode.com">WYSIWYG</a> system. MIT License.</span></div>	
+</div>	
+
 
+</div>
 
+
 
+<script>
 
+  
+function setFooterPos() {
 
+  if (document.getElementById("footerCont")) {
 
+    tollerance = 12;  	  
+    footerContHeight = 35;
 
+    footerHeight = 32;
 
+    document.getElementById("footerCont").style.top = parseInt( getDocHeight2() - footerContHeight - tollerance ) + "px";
 
+    document.getElementById("footer").style.top = parseInt( getDocHeight2() - footerHeight - tollerance) + "px";
 
+  }
 
+}
 
+setFooterPos();
 
+
 
+window.addEventListener("load", function() {
 
+    
+  setTimeout("setFooterPos()", 1500);
 
+  
+}, true);
 
+  
+</script>  
+
 
+<!-- Yandex.Metrika counter -->
 
+<script type="text/javascript" >
 
+   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
 
+   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
 
+   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
+
 
+   ym(90317440, "init", {
 
+        clickmap:true,
 
+        trackLinks:true,
 
+        accurateTrackBounce:true
 
+   });
 
+</script>
 
+<noscript><div><img src="https://mc.yandex.ru/watch/90317440" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
 
+<!-- /Yandex.Metrika counter -->
 
+
 
+</body>
 
+</html>

+ 1 - 1
splash.html
View File 

@@ -54,7 +54,7 @@
 
 
 
 <div id="content" style="max-width:1000px;">  
 <div id="content" style="max-width:1000px;">  
   
   
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

BIN
squeejs-1.0.9.tar.gz
View File


BIN
squeejs-1.0.9.zip
View File


+ 2 - 2
trans-bo.txt
View File 

@@ -1,9 +1,9 @@
 
 USER TRANSLATION|||LA TRADUZION DELL'UTANT
 
 USER TRANSLATION|||LA TRADUZION DELL'UTANT
 
-Here the Javascript code available to be inserted in your web page to implement user translation functionalities.|||Que al codice Javascrept desponeble par esser inserit nella to pagena webbe par implementer funzionalite de traduzion.
 
+Here the Javascript code available to be inserted in your web page to implement user translation functionalities.|||Que al codice Javascrept desponebel par esser inserit nella to pagena webbe par implementer funzionalite de traduzion.
 
 Please check the context of implementation for each of the functions.|||Par favor verifica al contest de implementazion da tot le funzion.
 
 Please check the context of implementation for each of the functions.|||Par favor verifica al contest de implementazion da tot le funzion.
 
 these functionalities require jQuery|||queste funzion al richiedon jQuery
 
 these functionalities require jQuery|||queste funzion al richiedon jQuery
 
 Example:|||Esampel:
 
 Example:|||Esampel:
 
-Available user-contributed translations:|||Traduzion dall'utant desponibel:
 
+Available user-contributed translations:|||Traduzion dall'utant desponebel:
 
 Bolognese dialect:|||Dialat Bolognese:
 
 Bolognese dialect:|||Dialat Bolognese:
 
 Code:|||Al codice:
 
 Code:|||Al codice:
 
 Usage example:|||Esampel de us:
 
 Usage example:|||Esampel de us:

+ 1 - 2
user_translation.html
View File 

@@ -44,7 +44,6 @@
 
       <meta name="robots" content="index,follow"/>
 
       <meta name="robots" content="index,follow"/>
 
       <meta name="keywords" content="Squeejs,javascript,framework,squeejs.com,MIT,license,5 Mode"/>
 
       <meta name="keywords" content="Squeejs,javascript,framework,squeejs.com,MIT,license,5 Mode"/>
 
        
        
-       <script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
 
       <script src="/js/common.js" type="text/javascript"></script>
 
       <script src="/js/common.js" type="text/javascript"></script>
 
       <script src="/js/squeejs.js?r=3445566" type="text/javascript"></script>
 
       <script src="/js/squeejs.js?r=3445566" type="text/javascript"></script>
 
        
        
@@ -54,7 +53,7 @@
 
 </head>
 
 </head>
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 <body style="border:0px solid lightgray; padding:20px; margin-right:20px;">
 
 
 
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>

+ 1 - 1
work_in_progress.html
View File 

@@ -54,7 +54,7 @@
 
 
 
 <div id="content" style="max-width:2400px;">  
 <div id="content" style="max-width:2400px;">  
   
   
-<img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"><br>
 
+<a href="/"><img src="/res/logo.png" style="width:300px;background:#FFFFFF;border:1px solid gray;"></a><br>
 
 
 
 <br><br><br>
 
 <br><br><br>