Commit @c1038963ad58eae8b9e50eeedb623d3345d172ae

doortts 2019-01-04

sidebar: Makes iframe loading smoothly

@c1038963ad58eae8b9e50eeedb623d3345d172ae

dccbb6f

c103896

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


     width: 100%;
 }
 
+.mainFrame {
+    display: none;
+}
+
+.loading-gif {
+    background: #FFF url('@{base-image-path}/loading-gif-2.gif') no-repeat center;
+}
+
 .prj {
     color:#202020;
 }

         .project-header-wrap {
             height:inherit;
             margin:0 auto;
-            width: 99%;
+            width: 97%;
             position: relative;
 
             .project-header-avatar {

 }
 .content-wrap {
     .text {
-        width: 99%; /*946px;/*866px;*/
+        width: 97%; /*946px;/*866px;*/
     }
     textarea.content{
       height: 300px;

dccbb6f

c103896

app/views/layout_framed.scala.html

--- app/views/layout_framed.scala.html

+++ app/views/layout_framed.scala.html


         }
     </div>
     <div id="mainFrame">
-        <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="@iframePath"  scrolling="no" onload="resizeIframe(this)"></iframe>
+        <iframe name="mainFrame" frameborder="0" class="mainFrame" scrolling="no" height="100%" width="100%" src="@iframePath"  scrolling="no" onload="resizeIframe(this)"></iframe>
         @common.scripts()
     </div>
 

         });
 
         function resizeIframe(obj) {
-            obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
-            window.scrollTo(0, 0);
+            $('#mainFrame').addClass("loading-gif");
+
+            setTimeout(function () {
+                // for smoothing iframe loading effects
+                $('#mainFrame').removeClass("loading-gif");
+                $('.mainFrame').show();
+
+                obj.style.height = '100vh'; // Before calculate new content height, reduce it to 100vh.
+                                            // It prevents unintended long height
+                obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
+                window.scrollTo(0, 0);
+            }, 0);
         }
 
         //Following three values are used for common/yona.Usermenu.js

dccbb6f

c103896

public/javascripts/common/yona.Usermenu.js

--- public/javascripts/common/yona.Usermenu.js

+++ public/javascripts/common/yona.Usermenu.js


         $(".user-ul > .user-li, .project-ul > .user-li").on("click", function (e) {
             e.preventDefault();
             e.stopPropagation();
+
+            // for smoothly loading effect
+            $('.mainFrame').hide();
+            $('#mainFrame').addClass("loading-gif");
+
             var location = $(this).data('location');
             if(e.metaKey || e.ctrlKey || e.shiftKey) {
                 window.location = location;

dccbb6f

c103896

public/javascripts/service/yona.twoColumnMode.js

--- public/javascripts/service/yona.twoColumnMode.js

+++ public/javascripts/service/yona.twoColumnMode.js


         $title.unbind('click.pageslide');
         $title.unbind('click.iframeLoading');
         $title.unbind('click.changeUrlWhenClick');
-        revokeMarginOfMainPage();
         $.pageslide.close();
     }
 

             if($('#pageslide').is(":visible")){
                 $(".left-menu").hide(0);
                 isLeftMenuHide = true;
-                reduceMarginOfMainPage();
-            } else {
-                revokeMarginOfMainPage();
             }
             setTimeout(function () {
                 $('#pageslide > iframe').ready(function () {

                 });
             }, 100);
         });
-    }
-
-    function reduceMarginOfMainPage() {
-        var $projectPageWrap = $('.project-page-wrap');
-        $projectPageWrap.css("margin", "20px 10px 0").css("width", "55%");
-
-        $(".project-header-wrap").css("margin", "0 10px");
-        $(".project-menu-inner").css("margin", "0 10px");
-        $(".gnb-inner").css("margin", "0 10px");
-        $(".page-wrap").css("margin", "0 10px").css("width", "55%");
-        $(".gnb-usermenu").css("float", "none");
-        $("#mySidenav").css("right", "50%");
-    }
-
-    function revokeMarginOfMainPage() {
-        var $projectPageWrap = $('.project-page-wrap');
-
-        $projectPageWrap.css("margin", "20px auto 0").css("width", mainWidth);
-        $(".project-header-wrap").css("margin", "0 auto");
-        $(".project-menu-inner").css("margin", "0 auto");
-        $(".gnb-inner").css("margin", "0 auto");
-        $(".page-wrap").css("margin", "0 auto").css("width", mainWidth);
-        $(".gnb-usermenu").css("float", "right");
-        $("#mySidenav").css("right", "0");
-
     }
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -66,6 +66,14 @@
66	66	width: 100%;
67	67	}
68	68
	69	+.mainFrame {
	70	+ display: none;
	71	+}
	72	+
	73	+.loading-gif {
	74	+ background: #FFF url('@{base-image-path}/loading-gif-2.gif') no-repeat center;
	75	+}
	76	+
69	77	.prj {
70	78	color:#202020;
71	79	}
...	...	@@ -439,7 +447,7 @@
439	447	.project-header-wrap {
440	448	height:inherit;
441	449	margin:0 auto;
442		- width: 99%;
	450	+ width: 97%;
443	451	position: relative;
444	452
445	453	.project-header-avatar {
...	...	@@ -3685,7 +3693,7 @@
3685	3693	}
3686	3694	.content-wrap {
3687	3695	.text {
3688		- width: 99%; /946px;/866px;*/
	3696	+ width: 97%; /946px;/866px;*/
3689	3697	}
3690	3698	textarea.content{
3691	3699	height: 300px;

...	...	@@ -58,7 +58,7 @@
58	58	}
59	59	</div>
60	60	<div id="mainFrame">
61		- <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="@iframePath" scrolling="no" onload="resizeIframe(this)"></iframe>
	61	+ <iframe name="mainFrame" frameborder="0" class="mainFrame" scrolling="no" height="100%" width="100%" src="@iframePath" scrolling="no" onload="resizeIframe(this)"></iframe>
62	62	@common.scripts()
63	63	</div>
64	64
...	...	@@ -70,8 +70,18 @@
70	70	});
71	71
72	72	function resizeIframe(obj) {
73		- obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
74		- window.scrollTo(0, 0);
	73	+ $('#mainFrame').addClass("loading-gif");
	74	+
	75	+ setTimeout(function () {
	76	+ // for smoothing iframe loading effects
	77	+ $('#mainFrame').removeClass("loading-gif");
	78	+ $('.mainFrame').show();
	79	+
	80	+ obj.style.height = '100vh'; // Before calculate new content height, reduce it to 100vh.
	81	+ // It prevents unintended long height
	82	+ obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
	83	+ window.scrollTo(0, 0);
	84	+ }, 0);
75	85	}
76	86
77	87	//Following three values are used for common/yona.Usermenu.js

...	...	@@ -133,6 +133,11 @@
133	133	$(".user-ul > .user-li, .project-ul > .user-li").on("click", function (e) {
134	134	e.preventDefault();
135	135	e.stopPropagation();
	136	+
	137	+ // for smoothly loading effect
	138	+ $('.mainFrame').hide();
	139	+ $('#mainFrame').addClass("loading-gif");
	140	+
136	141	var location = $(this).data('location');
137	142	if(e.metaKey \|\| e.ctrlKey \|\| e.shiftKey) {
138	143	window.location = location;

...	...	@@ -76,7 +76,6 @@
76	76	$title.unbind('click.pageslide');
77	77	$title.unbind('click.iframeLoading');
78	78	$title.unbind('click.changeUrlWhenClick');
79		- revokeMarginOfMainPage();
80	79	$.pageslide.close();
81	80	}
82	81
...	...	@@ -88,9 +87,6 @@
88	87	if($('#pageslide').is(":visible")){
89	88	$(".left-menu").hide(0);
90	89	isLeftMenuHide = true;
91		- reduceMarginOfMainPage();
92		- } else {
93		- revokeMarginOfMainPage();
94	90	}
95	91	setTimeout(function () {
96	92	$('#pageslide > iframe').ready(function () {
...	...	@@ -98,30 +94,5 @@
98	94	});
99	95	}, 100);
100	96	});
101		- }
102		-
103		- function reduceMarginOfMainPage() {
104		- var $projectPageWrap = $('.project-page-wrap');
105		- $projectPageWrap.css("margin", "20px 10px 0").css("width", "55%");
106		-
107		- $(".project-header-wrap").css("margin", "0 10px");
108		- $(".project-menu-inner").css("margin", "0 10px");
109		- $(".gnb-inner").css("margin", "0 10px");
110		- $(".page-wrap").css("margin", "0 10px").css("width", "55%");
111		- $(".gnb-usermenu").css("float", "none");
112		- $("#mySidenav").css("right", "50%");
113		- }
114		-
115		- function revokeMarginOfMainPage() {
116		- var $projectPageWrap = $('.project-page-wrap');
117		-
118		- $projectPageWrap.css("margin", "20px auto 0").css("width", mainWidth);
119		- $(".project-header-wrap").css("margin", "0 auto");
120		- $(".project-menu-inner").css("margin", "0 auto");
121		- $(".gnb-inner").css("margin", "0 auto");
122		- $(".page-wrap").css("margin", "0 auto").css("width", mainWidth);
123		- $(".gnb-usermenu").css("float", "right");
124		- $("#mySidenav").css("right", "0");
125		-
126	97	}
127	98	}

Delete comment