Publish v24.05.22

bug7a · bug7a · commit 87b7dc3140fe · 2024-05-22T16:38:45.000+03:00
diff --git a/00C-empty-project-template.htm b/00C-empty-project-template.htm
@@ -8,7 +8,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
         <!-- LIBRARY FILES -->
-        <!-- <link rel="preload" href="basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous"> -->
+        <link rel="preload" href="basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
         <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
         <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
 
@@ -31,21 +31,21 @@
         let myFloat = 0.5;
 
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
             
         }
         
         // Function running every second.
-        const loop = () => {
+        const loop = function() {
                         
         }
         
         // OTHER FUNCTIONS
-        const doSomthing1 = () => {
+        const doSomthing1 = function() {
             
         };
         
-        const doSomething2 = () => {
+        const doSomething2 = function() {
             
         };
 
diff --git a/01-first-example.htm b/01-first-example.htm
@@ -19,7 +19,7 @@
         let clickedCount = 0;
             
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
         
             // GROUP: Autolayout (Default: centered)
             startFlexBox();
diff --git a/02-custom-component-with-JSON.htm b/02-custom-component-with-JSON.htm
@@ -22,7 +22,7 @@
         let plantItemList = [];
         let boxItems;
             
-        window.onload = () => {
+        window.onload = function() {
 
             page.color = "whitesmoke";
 
@@ -50,7 +50,7 @@
         };
         
         // CUSTOM COMPONENT:
-        const PlantItem = (params = {}) => {
+        const PlantItem = function(params = {}) {
 
             // Default values:
             const defaults = {
diff --git a/03-button.htm b/03-button.htm
@@ -16,7 +16,7 @@
         let btnBlue;
             
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
 
             // BUTTON: First Button. Parameters: (left, top, width, height, props)
             btnBlue = Button(40, 40, 180, 50, { 
@@ -36,7 +36,7 @@
 
         };
 
-        const printHelloWorld = () => {
+        const printHelloWorld = function() {
             println("Hello World");
         };
 
diff --git a/04-label.htm b/04-label.htm
@@ -16,7 +16,7 @@
         let lblBottomInfo;
         
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
             
             // LABEL: Bottom Info.
             lblBottomInfo = Label({
diff --git a/05-icon.htm b/05-icon.htm
@@ -16,7 +16,7 @@
         let icoLogo;
         
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
             
             // IMAGE: Bottom Info.
             icoLogo = Icon({
@@ -33,7 +33,7 @@
             
         };
 
-        const printIconSizes = (loadedIcon) => {
+        const printIconSizes = function(loadedIcon) {
 
             println("Width: " + loadedIcon.naturalWidth);
             println("Height: " + loadedIcon.naturalHeight);
diff --git a/06-input.htm b/06-input.htm
@@ -16,7 +16,7 @@
         let inpName;
             
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
             
             // INPUT: Your name. Parameters: (left, top)
             inpName = Input(30, 50, {
@@ -28,7 +28,7 @@
             
         };
         
-        const printName = (changedInput) => {
+        const printName = function(changedInput) {
             println("Name: " + changedInput.text);
         };
 
diff --git a/07-box.htm b/07-box.htm
@@ -15,7 +15,7 @@
 
         let box;
             
-        window.onload = () => {
+        window.onload = function() {
             
             // BOX: My box.
             box = Box({
@@ -39,7 +39,7 @@
             
         };
         
-        const increaseCount = (clickedBox) => {
+        const increaseCount = function(clickedBox) {
 
             clickedBox.clickedCount++;
             clickedBox.lblName.text = "Box Clicked: " + clickedBox.clickedCount;
diff --git a/08-motion.htm b/08-motion.htm
@@ -15,7 +15,7 @@
 
         let box;
     
-        window.onload = () => {
+        window.onload = function() {
             
             // BOX: My box.
             box = Box({
@@ -31,7 +31,7 @@
             
         };
         
-        const extendBox = (clickedBox) => {
+        const extendBox = function(clickedBox) {
 
             clickedBox.width += 50;
             clickedBox.height += 50;
diff --git a/09-center-aline.htm b/09-center-aline.htm
@@ -18,7 +18,7 @@
         let boxOrange;
         
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
             
             // BOX: Gray box. Parameters: (left, top, width, height, props)
             boxGray = Box(0, 0, 120, 120, {
@@ -45,7 +45,7 @@
             
         };
         
-        const pageResized = () => {
+        const pageResized = function() {
 
             // Recalculate the position of the boxes.
             boxGray.center();
diff --git a/10-autolayout-group.htm b/10-autolayout-group.htm
@@ -14,7 +14,7 @@
         <script>
 
         // First running function.
-        window.onload = () => {
+        window.onload = function() {
 
             page.color = "whitesmoke";
 
diff --git a/12-fit-auto.htm b/12-fit-auto.htm
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        
+        <title>.fitAuto example</title>
+        
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+        <!-- LIBRARY FILES -->
+        <link rel="preload" href="basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
+        <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
+        <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
+
+        <style>
+
+        /* 
+        body {
+            margin: 0px !important;
+            overflow: hidden !important;
+        }
+        */
+
+        </style>
+
+        <script>
+        
+        // VARIABLES            
+        let myString = "";
+        let myInteger = 0;
+        let myFloat = 0.5;
+
+        // First running function.
+        window.onload = function() {
+
+            page.fitAuto(1280, 720);
+
+            // GROUP: Centered
+            startFlexBox({
+                color: "#141414",
+            });
+                // BOX: Content container
+                startBox({
+                    width: 1280,
+                    height: 720,
+                    color: "white",
+                });
+
+                    // PUT CONTENT
+                    Label(10, 10, {
+                        text: "Your content size is always same size (1280x720px)"
+                    });
+                    that.center();
+
+                endBox();
+            endFlexBox();
+
+            page.onResize(pageResized);
+            
+        };
+
+        const pageResized = function() {
+
+            page.fitAuto(1280, 720);
+
+        };
+
+        </script>
+
+    </head>
+    <body>
+        
+        <!-- HTML content -->
+        
+    </body>
+</html>
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/basic/.DS_Store b/basic/.DS_Store
diff --git a/basic/basic.css b/basic/basic.css
@@ -4,7 +4,7 @@
 
 /*
 
-basic.js (v1.7.4) Create interactive user interfaces with basic programming skills.
+basic.js (v24.04) Create interactive user interfaces with basic programming skills.
 - Project Site: https://bug7a.github.io/basic.js/
 
 Copyright 2020-2024 Bugra Ozden <bugra.ozden@gmail.com>
diff --git a/basic/basic.js b/basic/basic.js
diff --git a/basic/basic.min.css b/basic/basic.min.css
diff --git a/basic/basic.min.js b/basic/basic.min.js
diff --git a/basic/font/.DS_Store b/basic/font/.DS_Store
