[linterna-magica-commit] [353] Better fit the toggle plugin button in the video object parent

[Ivaylo Valkov]

Revision: 353
          
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=353
Author:   valkov
Date:     2012-12-22 07:37:44 +0000 (Sat, 22 Dec 2012)
Log Message:
-----------
Better fit the toggle plugin button in the video object parent
element. Don't decrease the height of the original video object.

Modified Paths:
--------------
    trunk/data/style/template.css
    trunk/src/lm_create_video_object.js
    trunk/src/lm_video_and_flash_objects_helper_functions.js

Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css       2012-12-21 15:57:39 UTC (rev 352)
+++ trunk/data/style/template.css       2012-12-22 07:37:44 UTC (rev 353)
@@ -744,3 +744,8 @@
 .linterna-magica-lower {
     /* border: 1px solid red !important; */
 }
+
+/* ws - website */
+.linterna-magica-ws-video-parent {
+    background-color: transparent !important;
+}

Modified: trunk/src/lm_create_video_object.js
===================================================================
--- trunk/src/lm_create_video_object.js 2012-12-21 15:57:39 UTC (rev 352)
+++ trunk/src/lm_create_video_object.js 2012-12-22 07:37:44 UTC (rev 353)
@@ -36,6 +36,11 @@
        return;
     }
 
+    // Decrease the size for the object, so it all fits in the space
+    // allocated by the website
+    object_data.outer_height = object_data.height;
+    object_data.height -= 48;
+
   
     var toggle_plugin = null;
 
@@ -94,13 +99,8 @@
                                (object_data.width+"px"), "important");
 
     container.style.setProperty("height",
-                               (object_data.height+"px"), "important");
+                               (object_data.outer_height+"px"), "important");
 
-    // Decrease the size for the object, so it all fits in the space
-    // allocated by the website
-    object_data.height -= 48;
- 
-
     object_tag_wrapper.setAttribute("id", 
"linterna-magica-video-object-wrapper-"+id);
     object_tag_wrapper.setAttribute("class", 
"linterna-magica-video-object-wrapper");
 
@@ -246,6 +246,8 @@
            toggle_plugin.style.setProperty("display", "none",
                                            "important");
        }
+
+       this.add_css_class(object_data.parent, 
"linterna-magica-ws-video-parent");
     }
 
     if (this.updates_data)
@@ -332,8 +334,8 @@
        // Prevent the object to fill the container at 100% (if set)
        // This way the toggle plugin link after the object is not
        // overlaping elements.
-       site_player.style.setProperty("height", object_data.height+"px",
-                                    "important");
+       site_player.style.setProperty("height", object_data.outer_height+"px",
+                                     "important");
 
 
        // Render site player above Linterna Mágica's button

Modified: trunk/src/lm_video_and_flash_objects_helper_functions.js
===================================================================
--- trunk/src/lm_video_and_flash_objects_helper_functions.js    2012-12-21 
15:57:39 UTC (rev 352)
+++ trunk/src/lm_video_and_flash_objects_helper_functions.js    2012-12-22 
07:37:44 UTC (rev 353)
@@ -112,6 +112,18 @@
     return false;
 }
 
+// Add a class to the classes of an element
+LinternaMagica.prototype.add_css_class = function(element, class_name)
+{
+    if (!this.object_has_css_class(element, class_name))
+    {
+       var c = element.getAttribute("class");
+       element.setAttribute("class", c+" "+class_name);
+    }
+
+    return element.getAttribute("class");
+}
+
 // Get the video object with id
 // "linterna-magica-video-object-"+linterna_magica_id from DOM
 LinternaMagica.prototype.get_video_object = function(linterna_magica_id)