页面缩放功能

o2web/source/o2_core/o2.js

@@ -2180,6 +2180,27 @@ o2.core = true;
             }
         });
     }
+
+    var styleString = Element.getComputedStyle;
+    function styleNumber(element, style){
+        return styleString(element, style).toInt() || 0;
+    }
+
+    function topBorder(element){
+        return styleNumber(element, 'border-top-width');
+    }
+
+    function leftBorder(element){
+        return styleNumber(element, 'border-left-width');
+    }
+
+    [Document, Window].invoke('implement', {
+        getSize: function(){
+            var doc = this.getDocument();
+            doc = ((!doc.compatMode || doc.compatMode == 'CSS1Compat') && (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1)) ? doc.html : doc.body;
+            return {x: doc.clientWidth, y: doc.clientHeight};
+        },
+    });
     if (window.Element && Element.implement) Element.implement({
         "isIntoView": function() {
             // var pNode = this.getParent();
@@ -2502,6 +2523,82 @@ o2.core = true;
             } catch (e){
                 return {x: 0, y: 0};
             }
+        },
+        "getScaleOffsets": function(){
+            var hasGetBoundingClientRect = this.getBoundingClientRect;
+//<1.4compat>
+            hasGetBoundingClientRect = hasGetBoundingClientRect && !Browser.Platform.ios;
+//</1.4compat>
+            if (hasGetBoundingClientRect){
+                var bound = this.getBoundingClientRect();
+
+                var boundLeft = bound.left;
+                var boundTop = bound.top;
+                if (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1){
+
+                }else{
+                    boundLeft= boundLeft/layout.userLayout.scale;
+                    boundTop = boundTop/layout.userLayout.scale;
+                }
+
+
+
+                var html = document.id(this.getDocument().documentElement);
+                var htmlScroll = html.getScroll();
+                var elemScrolls = this.getScrolls();
+                var isFixed = (Element.getComputedStyle(this, 'position') == 'fixed');
+
+                return {
+                    x: boundLeft.toFloat() + elemScrolls.x + ((isFixed) ? 0 : htmlScroll.x) - html.clientLeft,
+                    y: boundTop.toFloat() + elemScrolls.y + ((isFixed) ? 0 : htmlScroll.y) - html.clientTop
+                };
+            }
+
+            var element = this, position = {x: 0, y: 0};
+            if (isBody(this)) return position;
+
+            while (element && !isBody(element)){
+                position.x += element.offsetLeft;
+                position.y += element.offsetTop;
+//<1.4compat>
+                if (Browser.firefox){
+                    if (!borderBox(element)){
+                        position.x += leftBorder(element);
+                        position.y += topBorder(element);
+                    }
+                    var parent = element.parentNode;
+                    if (parent && styleString(parent, 'overflow') != 'visible'){
+                        position.x += leftBorder(parent);
+                        position.y += topBorder(parent);
+                    }
+                } else if (element != this && Browser.safari){
+                    position.x += leftBorder(element);
+                    position.y += topBorder(element);
+                }
+//</1.4compat>
+                element = element.offsetParent;
+            }
+//<1.4compat>
+            if (Browser.firefox && !borderBox(this)){
+                position.x -= leftBorder(this);
+                position.y -= topBorder(this);
+            }
+//</1.4compat>
+            return position;
+        },
+        getPosition: function(relative){
+            var offset = this.getScaleOffsets(),
+                scroll = this.getScrolls();
+            var position = {
+                x: offset.x - scroll.x,
+                y: offset.y - scroll.y
+            };
+
+            if (relative && (relative = document.id(relative))){
+                var relativePosition = relative.getPosition();
+                return {x: position.x - relativePosition.x - leftBorder(relative), y: position.y - relativePosition.y - topBorder(relative)};
+            }
+            return position;
         }
     });
 

o2web/source/o2_core/o2/xDesktop/$Default/blue/layout-pc.html

@@ -8,9 +8,9 @@
                 <div class="layout_menu_lnk_area" data-o2-element="lnkAreaNode"></div>
             </div>
             <div class="layout_menu_setting deepColor_bg">
-                <div class="layout_menu_setting_button" data-o2-element="settingNode" data-o2-events="click:scale">
-                    <div class="layout_menu_scale_zoomout" data-o2-events="click:zoomOut"></div>
-                    <div class="layout_menu_scale_zoomin" data-o2-events="click:zoomIn"></div>
+                <div class="layout_menu_setting_button" data-o2-element="settingNode" data-o2-events="click:returnZoom">
+<!--                    <div class="layout_menu_scale_zoomout" data-o2-events="click:zoomOut"></div>-->
+<!--                    <div class="layout_menu_scale_zoomin" data-o2-events="click:zoomIn"></div>-->
                     <div class="layout_menu_scale_zoomValue" data-o2-element="zoomValueNode"></div>
                 </div>
             </div>

o2web/source/o2_core/o2/xDesktop/$Default/blue/style-pc.css

@@ -122,7 +122,8 @@
     height: 70px;
 }
 .layout_menu_setting_button{
-    height: 70px;
+    height: 55px;
+    padding-top: 15px;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -814,11 +815,12 @@
 /*    float: right;*/
 /*}*/
 .layout_menu_scale_zoomValue {
-    height: 50px;
-    line-height: 50px;
-    width: 50px;
-    border-radius: 25px;
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    border-radius: 20px;
     margin: auto;
     text-align: center;
     background: #ffffff;
+    cursor: pointer;
 }

o2web/source/o2_core/o2/xDesktop/Default.js

@@ -32,7 +32,7 @@ o2.xDesktop.Default = new Class({
         if (layout.userLayout.scale){
             var s = (1/layout.userLayout.scale)*100;
             var p = s+"%";
-            document.body.setStyles({
+            document.id(document.documentElement).setStyles({
                 "transform": "scale("+layout.userLayout.scale+")",
                 "transform-origin": "0 0",
                 "width": p,
@@ -47,75 +47,9 @@ o2.xDesktop.Default = new Class({
         var scaleP = Math.round(layout.userLayout.scale*100);
         if (this.zoomValueNode) this.zoomValueNode.set("text", scaleP+"%");
     },
-
-    // resizeScale: function(){
-    //     if (layout.scale!==1){
-    //         var node = document.body.getFirst();
-    //         while (node){
-    //             this.resizeScaleNode(node);
-    //             node = node.getNext();
-    //         }
-    //     }
-    // },
-    // setStyleValue: function(v, node, key){
-    //     if (node.hasClass("layout_menu_lnk_item")){
-    //         debugger;
-    //     }
-    //     if (v && v.indexOf("%")==-1){
-    //         var u = v.substr(v.length-2, v.length);
-    //         var o = v.substr(0, v.length-2);
-    //         if (o!=0){
-    //             o = o.toFloat()*(1/layout.scale);
-    //             node.setStyle(key, o+u);
-    //         }
-    //     }
-    // },
-    // resizeScaleNode: function(node){
-    //     //var style = node.getStyles("width", "height", "min-width", "min-height");
-    //     //this.setStyleValue(node.getStyle("width"), node, "width");
-    //     this.setStyleValue(node.getStyle("height"), node, "height");
-    //     //this.setStyleValue(node.getStyle("min-width"), node, "min-width");
-    //     this.setStyleValue(node.getStyle("min-height"), node, "min-height");
-    //
-    //     //this.setStyleValue(node.getStyle("padding-left"), node, "padding-left");
-    //     //this.setStyleValue(node.getStyle("padding-top"), node, "padding-top");
-    //     //this.setStyleValue(node.getStyle("padding-right"), node, "padding-right");
-    //     //this.setStyleValue(node.getStyle("padding-bottom"), node, "padding-bottom");
-    //
-    //     // this.setStyleValue(node.style.paddingLeft, node, "padding-left");
-    //     // this.setStyleValue(node.style.paddingTop, node, "padding-top");
-    //     // this.setStyleValue(node.style.paddingRight, node, "padding-right");
-    //     // this.setStyleValue(node.style.paddingBottom, node, "padding-bottom");
-    //
-    //     // if (v && v.indexOf("%")==-1)
-    //     //
-    //     // Object.keys(style).each(function(key){
-    //     //     var v = style[key];
-    //     //     if (v.indexOf("%")==-1){
-    //     //         debugger;
-    //     //         var u = v.substr(v.length-2, v.length);
-    //     //         var o = v.substr(0, v.length-2);
-    //     //         o = o.toFloat()*(1/layout.scale);
-    //     //         node.setStyle(key, o+u);
-    //     //     }
-    //     //     // var v = *(1/layout.scale);
-    //     //     // node.setStyle(key, v)
-    //     // }.bind(this));
-    //
-    //     // if (style.height.indexOf("%")!=-1){
-    //     //     alert(style.height);
-    //     // }
-    //
-    //     var sub = node.getFirst();
-    //     if (sub) this.resizeScaleNode(sub);
-    //
-    //     // while (sub) {
-    //     //     this.resizeScaleNode(sub);
-    //     //     var sub = sub.getFirst();
-    //     // }
-    //     var next = node.getNext();
-    //     if (next) this.resizeScaleNode(next);
-    // },
+    returnZoom: function(){
+        this.zoom(1);
+    },
 
     initialize: function(node, options){
         this.setOptions(options);