Merge pull request #185 from Mibew/x

src/mibew/js/source/chat_popup.js

@@ -298,12 +298,24 @@ var Mibew = Mibew || {};
          */
         this.iframe = null;
 
+        /**
+         * Toggle iframe DOM Element.
+         * @type {Node}
+         */
+        this.toggleDiv = null;
+
         /**
          * Indicates if the popup is opened.
          * @type {Boolean}
          */
         this.isOpened = false;
 
+        /**
+         * Indicates if the popup is minified.
+         * @type {Boolean}
+         */
+        this.isMinified = false;
+
         // Load default styles. These styles hide the popup while real styles
         // are loading.
         this.attachDefaultStyles();
@@ -316,6 +328,11 @@ var Mibew = Mibew || {};
             // The chat was not closed so the popup should be reopened when a
             // new page is visited.
             this.open(openedChatUrl);
+            // Check minification status of the popup and toggle it if needed.
+            var minifiedPopup = Mibew.Utils.readCookie('mibew-chat-frame-minified-' + this.id);
+            if (minifiedPopup === 'true') {
+                this.toggle();
+            }
         }
     };
 
@@ -381,6 +398,21 @@ var Mibew = Mibew || {};
             this.iframe.setAttribute('frameBorder', 0);
             this.iframe.style.display = 'none';
             document.getElementsByTagName('body')[0].appendChild(this.iframe);
+
+            // Setup toggle element. As it's not a part of the iframe, it should be
+            // treated separately.
+            this.toggleDiv = document.createElement('div');
+            this.toggleDiv.setAttribute('id', 'mibew-chat-frame-toggle-' + this.id);
+            this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-on';
+            Mibew.Utils.addEventListener(this.toggleDiv, 'click', function(event) {
+                var popups = Mibew.Objects.ChatPopups,
+                matches = /^mibew-chat-frame-toggle-([0-9A-Za-z]+)$/.exec(this.id);
+
+                if (matches && popups[matches[1]]) {
+                    popups[matches[1]].toggle();
+                }
+            });
+            document.getElementsByTagName('body')[0].appendChild(this.toggleDiv);
         }
 
         this.iframe.style.display = 'block';
@@ -400,7 +432,20 @@ var Mibew = Mibew || {};
         this.iframe.style.display = 'none';
         this.iframe.src = '';
         this.isOpened = false;
+        this.toggleDiv.style.display = 'none';
         Mibew.Utils.deleteCookie('mibew-chat-frame-' + this.id);
+        Mibew.Utils.deleteCookie('mibew-chat-frame-minified' + this.id);
+    };
+
+    /**
+     * Toggles the popup.
+     */
+    Mibew.ChatPopup.IFrame.prototype.toggle = function() {
+        this.iframe.style.display = this.isMinified ? "block" : "none";
+        this.isMinified = !this.isMinified;
+        this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-'
+            + (this.isMinified ? 'off' : 'on');
+        Mibew.Utils.createCookie('mibew-chat-frame-minified-' + this.id, this.isMinified);
     };
 
     /**

src/mibew/styles/chats/default/iframe.css

@@ -35,3 +35,34 @@ iframe.mibew-chat-frame {
     -moz-box-shadow: 0 1px 1px 1px #ddd !important;
     -webkit-box-shadow: 0 1px 1px 1px #ddd !important;
 }
+
+div.mibew-chat-frame-toggle {
+    border: 1px solid black;
+    position: fixed !important;
+    border: 1px solid #aaa !important;
+    overflow: hidden !important;
+    z-index: 100 !important;
+    border-radius: 10px !important;
+    -webkit-border-radius: 10px !important;
+    -moz-border-radius: 10px !important;
+    box-shadow: 0 1px 1px 1px #ddd !important;
+    -moz-box-shadow: 0 1px 1px 1px #ddd !important;
+    -webkit-box-shadow: 0 1px 1px 1px #ddd !important;
+    cursor: pointer;
+}
+
+div.mibew-chat-frame-toggle-on {
+    width: 27px !important;
+    height: 480px !important;
+    right: 517px !important;
+    bottom: 5px !important;
+    background: #ffffff url("images/right.png") scroll no-repeat 0 0;
+}
+
+div.mibew-chat-frame-toggle-off {
+    width: 40px !important;
+    height: 40px !important;
+    right: 5px !important;
+    bottom: 5px !important;
+    background: #ffffff url("images/default-logo-short.png") scroll no-repeat 4px 5px;
+}