Startsida Utforska Hjälp
Registrera dig Logga in
zhangyupeng
/
Babylon.js
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

PG - Responsiveness - Checked :)

Temechon 8 år sedan
förälder
d07fca64fa
incheckning
77691a9c67
4 ändrade filer med 22 tillägg och 21 borttagningar
Delad Vy Visa Diff Statistik
  1. 0 9
      Playground/css/index.css
  2. 2 4
      Playground/index.html
  3. 2 1
      Playground/js/actions.js
  4. 18 7
      Playground/js/index.js

+ 0 - 9
Playground/css/index.css
Visa fil 

@@ -460,13 +460,4 @@ body {
 
     .version {

         display : none !important;

     }

-}

-

-@media (max-width: 850px) {    

-    #jsEditor {

-        width : 0px !important;

-    }

-    #canvasZone {

-        width : 100% !important;

-    }

 }

+ 2 - 4
Playground/index.html
Visa fil 

@@ -3,6 +3,8 @@
 
 

 <head>

     <title>Babylon.js Playground</title>

+    <meta charset='utf-8' />

+    <meta name="viewport" content="width=device-width, user-scalable=no">

     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

     <!--For canvas/code separator-->

     <script src="js/libs/split.js"></script>

@@ -173,10 +175,6 @@
 
 

     <script src="https://code.jquery.com/jquery.js"></script>

 

-    <script>

-        Split(['#jsEditor', '#canvasZone']);

-    </script>

-

     <script src="js/actions.js"></script>

     <script src="js/index.js"></script>

 </body>

+ 2 - 1
Playground/js/actions.js
Visa fil 

@@ -26,12 +26,12 @@
 
     for (var s of allSelect) {

         // Get child called to display

         s.addEventListener('click', function (e) {

-            removeAllOptions();

             var toDisplay = this.querySelector('.toDisplay');

             if (toDisplay) {

                 if (toDisplay.style.display == 'block') {

                     toDisplay.style.display = 'none';

                 } else {

+                    removeAllOptions();

                     toDisplay.style.display = 'block';

                 }

             }

@@ -40,6 +40,7 @@
 
                 if (toDisplay.style.display == 'block') {

                     toDisplay.style.display = 'none';

                 } else {

+                    removeAllOptions();

                     toDisplay.style.display = 'block';

                 }

             }

+ 18 - 7
Playground/js/index.js
Visa fil 

@@ -1,7 +1,9 @@
 
-(function () {

-    var jsEditor;

+var jsEditor;

+(function () {

     var fontSize = 14;

 

+    var splitInstance = Split(['#jsEditor', '#canvasZone']);

+

     var elementToTheme = [

         '.wrapper .gutter',

         '.wrapper #jsEditor',

@@ -135,6 +137,18 @@
 
                         var theme = localStorage.getItem("bjs-playground-theme") || 'light';

                         toggleTheme(theme);

 

+                        // Remove editor if window size is less than 850px

+                        var removeEditorForSmallScreen = function () {

+                            if (mq.matches) {

+                                splitInstance.collapse(0);

+                            } else {

+                                splitInstance.setSizes([50, 50]);

+                            }

+                        }

+                        var mq = window.matchMedia("(max-width: 850px)");

+                        mq.addListener(removeEditorForSmallScreen);

+

+

                     }

                 }

             };

@@ -500,15 +514,12 @@
 
             // If the editor is present

             if (editorButton.classList.contains('checked')) {

                 editorButton.classList.remove('checked');

-                document.getElementById("jsEditor").style.display = "none";

+                splitInstance.collapse(0);

                 editorButton.innerHTML = 'Editor <i class="fa fa-square-o" aria-hidden="true"></i>';

-                document.getElementById("canvasZone").style.width = "100%";

             } else {

                 editorButton.classList.add('checked');

+                splitInstance.setSizes([50, 50]);  // Reset

                 editorButton.innerHTML = 'Editor <i class="fa fa-check-square" aria-hidden="true"></i>';

-                document.getElementById("jsEditor").style.display = "block";

-                document.getElementById("canvasZone").style.width = "50%";

-                // document.getElementById("canvasZone").style.flexBasis = undefined;

             }

             engine.resize();