Changeset 1402

Timestamp:

03/05/2010 07:57:04 AM (2 years ago)

Author:

zhongzhen

Message:

version up of Help extention

Location:

branches/omcollab_zhongzhen2/wiki/extensions/Help

Files:

• HelpExtention.css (modified) (3 diffs)
• Help_Guide.php (modified) (2 diffs)
• images/background.gif (moved) (moved from branches/omcollab_zhongzhen2/wiki/extensions/Help/images/button_background.gif)
• images/button_close.gif (added)
• images/button_hide.gif (deleted)

branches/omcollab_zhongzhen2/wiki/extensions/Help/HelpExtention.css

@@ -7 +7 @@
 
 #wpTextbox1 {
-    width: 60%;
         float: left;
         clear: none;
+    display: none;
 }
 
@@ -22 +22 @@
 }
 
+#closeButton {
+    width: 15px;
+    height: 15px; 
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    font-size: 11px;
+}
+
 #shadow {
     background-color: #EFEFEF;
     float: right; 
     margin: 5px;
-    width: 30%;
+    width: 280px;
 }
 
@@ -38 +47 @@
 .tab_normal {color: #FFF; cursor: pointer; background-color: #AEAEAE;}
 
-.button_class {float: right; text-align: center; width: 7%;}
+.button_class {float: right; text-align: center; padding-right: 2px; display: none;}
 .help_content {padding: 10px; display: none; color:#444;}
 

branches/omcollab_zhongzhen2/wiki/extensions/Help/Help_Guide.php

@@ -30 +30 @@
         // Add javascript to Edit page
         $wgOut->addHTML("<script>
-                        function changeIcon(obj) {
-                                var source = obj.src;
-                                if (source.search('button_help') > -1) {
-                                        obj.src = 'extensions/Help/images/button_hide.gif';
-                                        $('#shadow').css('display', 'block');
-                                        $('#wpTextbox1').css('width', '60%');
-                                }
-                                else {
-                                        obj.src = 'extensions/Help/images/button_help.gif';
-                                        $('#shadow').css('display', 'none');
-                                        $('#wpTextbox1').css('width', '92%');
-                                }
+            var textwidth = new Number();
+                        function showHelp() {
+                textwidth = $('#editform').width() - $('#shadow').width() - 30;
+                $('.button_class').css('display', 'none');
+                                $('#shadow').css('display', 'block');
+                                $('#wpTextbox1').css('width', textwidth.toString() + 'px');
                         }
+            
+            function hideHelp() {
+                textwidth = $('#editform').width() - $('.button_class').width() - 30;
+                $('.button_class').css('display', 'block');
+                $('#shadow').css('display', 'none');
+                $('#wpTextbox1').css('width', textwidth.toString() + 'px');
+            }
+            
+            $(window).resize(function() {
+                if ($('#shadow').css('display') == 'block')
+                    textwidth = $('#editform').width() - $('#shadow').width() - 30;
+                else
+                    textwidth = $('#editform').width() - $('.button_class').width() - 30;
+                $('#wpTextbox1').css('width', textwidth.toString() + 'px');
+            });
+            
+            $(function() {
+                textwidth = $('#editform').width() - $('#shadow').width() - 30;
+                $('#wpTextbox1').css('display', 'block');
+                $('#wpTextbox1').css('width', textwidth.toString() + 'px');
+            });
+
         </script>");
         
@@ -78 +94 @@
         
         //Help content area
-        $editPage->editFormTextBeforeContent .= '<div id="shadow"><div id="helpArea">' . $html . '</div></div>'; 
+        $editPage->editFormTextBeforeContent .= '<div id="shadow"><div id="helpArea">
+        <div id="closeButton"><img src="extensions/Help/images/button_close.gif" style="cursor: pointer; border: 0;" onclick="hideHelp()"/></div>' . $html . '</div></div>'; 
         // Help button
-        $editPage->editFormTextBeforeContent .= '<div class="button_class"><img src="extensions/Help/images/button_hide.gif" style="cursor: pointer;" onclick="changeIcon(this)"/></div>'; 
+        $editPage->editFormTextBeforeContent .= '<div class="button_class"><img src="extensions/Help/images/button_help.gif" style="cursor: pointer;" onclick="showHelp()"/></div>'; 
 
         return true;