Merge lp:~oliwee/openlp/bug-1223841 into lp:openlp/2.0

[Oliver Wieland]

reimplements the fade out/in on slide changes for transition between two identical slides.

[Andreas Preikschat (googol-deactivatedaccount)]

review: Approve

[Raoul Snyman (raoul-snyman)]

Oli, you *must* add a description to a merge proposal. I don't always have the time to go reading all your commit logs to determine what your merge proposal is doing.

[Raoul Snyman (raoul-snyman)]

review: Approve

[Jonathan Corwin (j-corwin)]

review: Approve

=== modified file 'openlp/core/lib/htmlbuilder.py'
--- openlp/core/lib/htmlbuilder.py	2012-12-30 19:41:24 +0000
+++ openlp/core/lib/htmlbuilder.py	2013-09-29 16:05:31 +0000
@@ -129,9 +129,10 @@
     }
 
     function show_text(newtext){
+        var fade_direction = 0;
         var match = /-webkit-text-fill-color:[^;\"]+/gi;
-        if(timer != null)
-            clearTimeout(timer);
+        if (timer != null)
+            clearInterval(timer);
         /*
         QtWebkit bug with outlines and justify causing outline alignment
         problems. (Bug 859950) Surround each word with a <span> to workaround,
@@ -150,39 +151,45 @@
                 newtext = '<span>' + newtext + '</span>';
             }
         }
+        
         text_fade('lyricsmain', newtext);
         text_fade('lyricsoutline', newtext);
         text_fade('lyricsshadow', newtext.replace(match, ''));
         if(text_opacity() == 1) return;
-        timer = setTimeout(function(){
-            show_text(newtext);
+        timer = setInterval(function(){
+            text_fade('lyricsmain', newtext);
+            text_fade('lyricsoutline', newtext);
+            text_fade('lyricsshadow', newtext.replace(match, ''));
+            if(text_opacity() == 1) clearInterval(timer);
         }, 100);
-    }
 
-    function text_fade(id, newtext){
-        /*
-        Using -webkit-transition: opacity 1s linear; would have been preferred
-        but it isn't currently quick enough when animating multiple layers of
-        large areas of large text. Therefore do it manually as best we can.
-        Hopefully in the future we can revisit and do more interesting
-        transitions using -webkit-transition and -webkit-transform.
-        However we need to ensure interrupted transitions (quickly change 2
-        slides) still looks pretty and is zippy.
-        */
-        var text = document.getElementById(id);
-        if(text == null) return;
-        if(!transition){
-            text.innerHTML = newtext;
-            return;
-        }
-        if(newtext == text.innerHTML){
-            text.style.opacity = parseFloat(text.style.opacity) + 0.3;
-            if(text.style.opacity > 0.7)
-                text.style.opacity = 1;
-        } else {
-            text.style.opacity = parseFloat(text.style.opacity) - 0.3;
-            if(text.style.opacity <= 0.1){
+        function text_fade(id, newtext){
+            /*
+            Using -webkit-transition: opacity 1s linear; would have been preferred
+            but it isn't currently quick enough when animating multiple layers of
+            large areas of large text. Therefore do it manually as best we can.
+            Hopefully in the future we can revisit and do more interesting
+            transitions using -webkit-transition and -webkit-transform.
+            However we need to ensure interrupted transitions (quickly change 2
+            slides) still looks pretty and is zippy.
+            */
+            var text = document.getElementById(id);
+            if(text == null) return;
+            if(!transition){
                 text.innerHTML = newtext;
+                return;
+            }
+            if(fade_direction != 1){
+                text.style.opacity = parseFloat(text.style.opacity) - 0.3;
+                if(text.style.opacity <= 0.1){
+                    text.innerHTML = newtext;
+                    fade_direction = 1;
+                }
+            }else{
+                text.style.opacity = parseFloat(text.style.opacity) + 0.3;
+                if(text.style.opacity > 0.7){
+                    text.style.opacity = 1;
+                }
             }
         }
     }