页面缩放功能

o2web/source/o2_core/o2.js

@@ -2493,7 +2493,7 @@ o2.core = true;
             if (!window.getComputedStyle) return {x: this.offsetWidth, y: this.offsetHeight};
             if (this.get('tag') == 'svg') return svgCalculateSize(this);
             try {
-                if (!layout.scale || layout.scale==1){
+                if (!layout || !layout.userLayout || !layout.userLayout.scale || layout.userLayout.scale==1){
                     var bounds = this.getBoundingClientRect();
                     return {x: bounds.width, y: bounds.height};
                 }else{

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

@@ -8,7 +8,11 @@
                 <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 icon_setting" data-o2-element="settingNode" data-o2-events="click:scale"></div>
+                <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_scale_zoomValue" data-o2-element="zoomValueNode"></div>
+                </div>
             </div>
         </div>
     </div>

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

@@ -795,3 +795,30 @@
     margin: auto;
     border-radius: 20px;
 }
+/*.layout_menu_scale_zoomout {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-left: 5px;*/
+/*    float: left;*/
+/*}*/
+/*.layout_menu_scale_zoomin {*/
+/*    height: 20px;*/
+/*    line-height: 20px;*/
+/*    width: 16px;*/
+/*    text-align: center;*/
+/*    background: #ffffff;*/
+/*    margin-right: 5px;*/
+/*    float: right;*/
+/*}*/
+.layout_menu_scale_zoomValue {
+    height: 50px;
+    line-height: 50px;
+    width: 50px;
+    border-radius: 25px;
+    margin: auto;
+    text-align: center;
+    background: #ffffff;
+}

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

@@ -11,98 +11,111 @@ o2.xDesktop.Default = new Class({
         "style": "blue",
         "index": "Homepage"
     },
-    scale: function(){
-        debugger;
-        //document.body.setStyle("zoom", "80%");
-        if (!layout.scale) layout.scale = 1;
-        layout.scale = layout.scale-0.1;
-        if (layout.scale<0.4) layout.scale = 0.4;
-        //
-        //layout.scale = 0.8;
-        var s = (1/layout.scale)*100;
-        var p = s+"%";
-        //
-        document.body.setStyles({
-            "transform": "scale("+layout.scale+")",
-            "transform-origin": "0 0",
-            "width": p,
-            "height":p
-        });
-        this.fireEvent("resize");
-        //
-        // // if (!this.resizeScaleEvent){
-        // //     this.addEvent("resize", this.resizeScale.bind(this));
-        // // }
-        //this.resizeScale();
-    },
-    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);
-    },
+    zoomOut: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        layout.userLayout.scale = layout.userLayout.scale-0.1;
+        if (layout.userLayout.scale<0.4) layout.userLayout.scale = 0.4;
+        this.zoom();
+    },
+    zoomIn: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        layout.userLayout.scale = layout.userLayout.scale+0.1;
+        if (layout.userLayout.scale>5) layout.userLayout.scale = 5;
+        this.zoom();
+    },
+    zoom: function(v){
+        if (v){
+            layout.userLayout.scale = v;
+            if (layout.userLayout.scale<0.4) layout.userLayout.scale = 0.4;
+            if (layout.userLayout.scale>5) layout.userLayout.scale = 5;
+        }
+        if (layout.userLayout.scale){
+            var s = (1/layout.userLayout.scale)*100;
+            var p = s+"%";
+            document.body.setStyles({
+                "transform": "scale("+layout.userLayout.scale+")",
+                "transform-origin": "0 0",
+                "width": p,
+                "height":p
+            });
+            this.fireEvent("resize");
+            this.setZoomValue();
+        }
+    },
+    setZoomValue: function(){
+        if (!layout.userLayout.scale) layout.userLayout.scale = 1;
+        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);
+    // },
 
     initialize: function(node, options){
         this.setOptions(options);
@@ -111,6 +124,7 @@ o2.xDesktop.Default = new Class({
         this.node = $(node);
         this.node.empty();
         this.initData();
+        this.zoom();
         //this.load();
     },
     initData: function(){
@@ -169,6 +183,8 @@ o2.xDesktop.Default = new Class({
 
             this.loadMessageMenu();
 
+            this.setZoomValue();
+
             this.fireEvent("load");
             MWF.require("MWF.xDesktop.shortcut");
         }.bind(this));
@@ -631,7 +647,8 @@ o2.xDesktop.Default = new Class({
             //"lnks": [],
             "flatLnks": [],
             "widgets": {},
-            "menuData": this.menuData
+            "menuData": this.menuData,
+            "scale": layout.userLayout.scale || 1
         };
         // this.appArr.each(function(app){
         //     if (app.options.appId!==this.options.index){