JavaScript overlay render示例

示例#1

文件： lottery.js 项目： VinceHu/kissy

    overlay: function () {
        var self = this,
            canvas = self.get('canvas'),
            overlay = new Overlay({
                elCls: 'gg-dialog',
                mask: true,
                align: {
                    node: canvas,
                    points: ['cc', 'cc'],
                    offset: [0, 0]
                }
            });

        overlay.render();

        overlay.get('contentEl').delegate(tap, '.J_Start', function () {
            overlay.hide();
            self.reset();
        });

        overlay.get('contentEl').delegate(tap, '.J_Cancel', function () {
            overlay.hide();
            self.fire('quit');
        });

        self.set('overlay', overlay);
    },

示例#2

文件： overlay-spec.js 项目： wuzhao/overlay

        it('setPosition when resize', function(done) {
            overlay.hide().destroy();
            overlay = new Overlay();
            var setPosition = sinon.spy(overlay, '_setPosition');
            expect(setPosition.called).not.to.be.ok();
            overlay.render();
            expect(setPosition.callCount).to.be(1);
            overlay.show();
            expect(setPosition.callCount).to.be(2);

            $(window).resize();

            setTimeout(function() {
                expect(setPosition.callCount).to.be(3);

                overlay.set("visible", false);

                $(window).resize();

                setTimeout(function () {
                    expect(setPosition.callCount).to.be(3);
                    done();
                }, 100);
            }, 100);
        });

示例#3

文件： overlay-spec.js 项目： wuzhao/overlay

 it('setPosition', function() {
     overlay.hide().destroy();
     overlay = new Overlay();
     var setPosition = sinon.spy(overlay, '_setPosition');
     expect(setPosition.called).not.to.be.ok();
     overlay.render();
     expect(setPosition.calledOnce).to.be.ok();
     overlay.show();
     expect(setPosition.calledTwice).to.be.ok();
 });

示例#4

文件： overlay.js 项目： FredGreen/kissy

 it('attribute has order', function () {
     Dom.addStyleSheet('.overlay1522 {position:absolute;}');
     var o = new Overlay({
         prefixCls: 'kk-',
         elCls: 'overlay1522'
     });
     o.render();
     expect(o.get('el').css('position')).toBe('absolute');
     o.destroy();
 });

示例#5

文件： overlay.js 项目： FredGreen/kissy

 it("no render works", function () {
     var div = $("<div/>").appendTo('body');
     var o = new Overlay({
         width: 400,
         elCls: "popup",
         resize: {
             handlers: ["t"]
         },
         content: "render by javascript"
     });
     o.render();
     expect(o.get('el').parent().equals($('body'))).toBe(true);
     o.destroy();
     div.remove();
 });

示例#6

文件： local-storage.js 项目： Antslong/kissy

KISSY.add("editor/plugin/local-storage", ["editor", "overlay", "./flash-bridge"], function(S, require) {
  var Editor = require("editor");
  var Overlay = require("overlay");
  var FlashBridge = require("./flash-bridge");
  var ie = S.UA.ieMode;
  if((!ie || ie > 8) && window.localStorage) {
    return window.localStorage
  }
  var swfSrc = Editor.Utils.debugUrl("plugin/local-storage/assets/swfstore.swf?t=" + +new Date);
  var css = {width:215, border:"1px solid red"}, reverseCss = {width:0, border:"none"};
  var o = new Overlay({prefixCls:"ks-editor-", elStyle:{background:"white"}, width:"0px", content:"<h1 style='" + "text-align:center;'>\u8bf7\u70b9\u51fb\u5141\u8bb8</h1>" + "<div class='storage-container'></div>", zIndex:Editor.baseZIndex(Editor.ZIndexManager.STORE_FLASH_SHOW)});
  o.render();
  o.show();
  var store = new FlashBridge({src:swfSrc, render:o.get("contentEl").one(".storage-container"), params:{flashVars:{useCompression:true}}, attrs:{height:138, width:"100%"}, methods:["setItem", "removeItem", "getItem", "setMinDiskSpace", "getValueOf"]});
  S.ready(function() {
    setTimeout(function() {
      o.center()
    }, 0)
  });
  store.on("pending", function() {
    o.get("el").css(css);
    o.center();
    o.show();
    setTimeout(function() {
      store.retrySave()
    }, 1E3)
  });
  store.on("save", function() {
    o.get("el").css(reverseCss)
  });
  var oldSet = store.setItem;
  S.mix(store, {_ke:1, getItem:function(k) {
    return this["getValueOf"](k)
  }, retrySave:function() {
    var self = this;
    self.setItem(self.lastSave.k, self.lastSave.v)
  }, setItem:function(k, v) {
    var self = this;
    self.lastSave = {k:k, v:v};
    oldSet.call(self, k, v)
  }});
  store.on("contentReady", function() {
    store._ready = 1
  });
  return store
});

示例#7

文件： overlay.js 项目： FredGreen/kissy

 it("elBefore works", function () {
     var div = $("<div/>").appendTo('body');
     var o = new Overlay({
         width: 400,
         // 同时指定优先 elBefore
         elBefore: div,
         render: div,
         elCls: "popup",
         resize: {
             handlers: ["t"]
         },
         content: "render by javascript"
     });
     o.render();
     expect(o.get('el').next().equals(div)).toBe(true);
     o.destroy();
     expect(div.prev().equals(o.get('el').next())).toBe(false);
     div.remove();
 });

示例#8

文件： overlay-spec.js 项目： wuzhao/overlay

 beforeEach(function() {
     overlay = new Overlay({
         template: '<div></div>',
         width: 120,
         height: 110,
         zIndex: 90,
         id: 'overlay',
         className: 'ui-overlay',
         visible: false,
         style: {
             color: '#e80',
             backgroundColor: 'green',
             paddingLeft: '11px',
             fontSize: '13px'
         },
         align: {
             selfXY: [0, 0],
             baseElement: document.body,
             baseXY: [100, 100]
         }
     });
     overlay.render();
 });

示例#9

文件： index.js 项目： kissygalleryteam/newbie-guide

 _createOverlay: function(){
     var self = this;
     var overlay = new Overlay({
         mask        : true,
         zIndex      : 99999,
         closeAction : 'destroy',
         closable    : self.cfg.closable,
         effect      : {effect: 'fade'},
         align       : {points: self.cfg.points },
         content     : self._renderSlideHTML(),
         elCls       : self.cfg.cls
     });
     overlay.render();
     var el = $(overlay.el);
     overlay.on('show',function(){
         var nextTop = el.all('.tab-nav').offset().top-el.offset().top+el.all('.tab-nav').height()+5;
         el.all('.ks-newbie-next').css('top',nextTop).fadeIn(0.05);
     })
     el.all('.tab-content,.tab-pannel').css({
         width: self.cfg.width,
         height: self.cfg.height
     });
     return overlay;
 },

示例#10

文件： local-storage-debug.js 项目： kingkongtown/editor-plugins-1

KISSY.add('kg/editor-plugins/1.1.0/local-storage',["editor","overlay","./flash-bridge","util","ua"],function(S ,require, exports, module) {
/**
 * @ignore
 * localStorage support for ie<8
 * @author yiminghe@gmail.com
 */

var Editor = require('editor');
var Overlay = require('overlay');
var FlashBridge = require('./flash-bridge');
var util = require('util');
var ie = require('ua').ieMode;

// 原生或者已经定义过立即返回
// ie 使用 flash 模拟的 localStorage，序列化性能不行
if ((!ie || ie > 8) && window.localStorage) {
    //原生的立即可用
    module.exports = window.localStorage;
} else {

// 国产浏览器用随机数/时间戳试试 ! 是可以的
    var swfSrc = Editor.Utils.debugUrl('plugin/local-storage/assets/swfstore.swf?refresh=' + (+new Date()));

    var css = {
        width: 215,
        border: '1px solid red'
    }, reverseCss = {
        width: 0,
        border: 'none'
    };

//Dialog 不行
    var o = new Overlay({
        prefixCls: 'ks-editor-',
        elStyle: {
            background: 'white'
        },
        width: '0px',
        content: '<h1 style="' + 'text-align:center;">请点击允许</h1>' +
            '<div class="storage-container"></div>',
        zIndex: Editor.baseZIndex(Editor.ZIndexManager.STORE_FLASH_SHOW)
    });
    o.render();
    o.show();

    var store = new FlashBridge({
        src: swfSrc,
        render: o.get('contentEl').one('.storage-container'),
        params: {
            flashVars: {
                useCompression: true
            }
        },
        attrs: {
            height: 138,
            width: '100%'
        },
        methods: ['setItem', 'removeItem', 'getItem', 'setMinDiskSpace', 'getValueOf']
    });

// 必须在视窗范围内才可以初始化，触发 contentReady 事件
    util.ready(function () {
        setTimeout(function () {
            o.center();
        }, 0);
    });

    store.on('pending', function () {
        o.get('el').css(css);
        o.center();
        o.show();
        // 轮训，直到用户允许
        setTimeout(function () {
            store.retrySave();
        }, 1000);
    });

    store.on('save', function () {
        o.get('el').css(reverseCss);
    });

    var oldSet = store.setItem;

    util.mix(store, {
        _ke: 1,
        getItem: function (k) {
            return this.getValueOf(k);
        },
        retrySave: function () {
            var self = this;
            self.setItem(self.lastSave.k, self.lastSave.v);
        },
        setItem: function (k, v) {
            var self = this;
            self.lastSave = {k: k, v: v};
            oldSet.call(self, k, v);
        }
    });

//非原生，等待flash通知
    store.on('contentReady', function () {
        store._ready = 1;
    });

    /*
     'quotaExceededError'
     'error'
     'save'
     'inadequateDimensions'
     */

    module.exports = store;
}
});

示例#11

文件： local-storage.js 项目： 4simple/kissy

KISSY.add(function(S, require) {
  _$jscoverage['/local-storage.js'].functionData[0]++;
  _$jscoverage['/local-storage.js'].lineData[7]++;
  var Editor = require('editor');
  _$jscoverage['/local-storage.js'].lineData[8]++;
  var Overlay = require('overlay');
  _$jscoverage['/local-storage.js'].lineData[9]++;
  var FlashBridge = require('./flash-bridge');
  _$jscoverage['/local-storage.js'].lineData[11]++;
  var ie = S.UA.ieMode;
  _$jscoverage['/local-storage.js'].lineData[15]++;
  if (visit1_15_1((visit2_15_2(!ie || visit3_15_3(ie > 8))) && window.localStorage)) {
    _$jscoverage['/local-storage.js'].lineData[17]++;
    return window.localStorage;
  }
  _$jscoverage['/local-storage.js'].lineData[21]++;
  var swfSrc = Editor.Utils.debugUrl('plugin/local-storage/assets/swfstore.swf?t=' + (+new Date()));
  _$jscoverage['/local-storage.js'].lineData[23]++;
  var css = {
  width: 215, 
  border: '1px solid red'}, reverseCss = {
  width: 0, 
  border: 'none'};
  _$jscoverage['/local-storage.js'].lineData[32]++;
  var o = new Overlay({
  prefixCls: 'ks-editor-', 
  elStyle: {
  background: 'white'}, 
  width: '0px', 
  content: '<h1 style="' + 'text-align:center;">\u8bf7\u70b9\u51fb\u5141\u8bb8</h1>' + '<div class="storage-container"></div>', 
  zIndex: Editor.baseZIndex(Editor.ZIndexManager.STORE_FLASH_SHOW)});
  _$jscoverage['/local-storage.js'].lineData[42]++;
  o.render();
  _$jscoverage['/local-storage.js'].lineData[43]++;
  o.show();
  _$jscoverage['/local-storage.js'].lineData[45]++;
  var store = new FlashBridge({
  src: swfSrc, 
  render: o.get('contentEl').one('.storage-container'), 
  params: {
  flashVars: {
  useCompression: true}}, 
  attrs: {
  height: 138, 
  width: '100%'}, 
  methods: ['setItem', 'removeItem', 'getItem', 'setMinDiskSpace', 'getValueOf']});
  _$jscoverage['/local-storage.js'].lineData[61]++;
  S.ready(function() {
  _$jscoverage['/local-storage.js'].functionData[1]++;
  _$jscoverage['/local-storage.js'].lineData[62]++;
  setTimeout(function() {
  _$jscoverage['/local-storage.js'].functionData[2]++;
  _$jscoverage['/local-storage.js'].lineData[63]++;
  o.center();
}, 0);
});
  _$jscoverage['/local-storage.js'].lineData[67]++;
  store.on('pending', function() {
  _$jscoverage['/local-storage.js'].functionData[3]++;
  _$jscoverage['/local-storage.js'].lineData[68]++;
  o.get('el').css(css);
  _$jscoverage['/local-storage.js'].lineData[69]++;
  o.center();
  _$jscoverage['/local-storage.js'].lineData[70]++;
  o.show();
  _$jscoverage['/local-storage.js'].lineData[72]++;
  setTimeout(function() {
  _$jscoverage['/local-storage.js'].functionData[4]++;
  _$jscoverage['/local-storage.js'].lineData[73]++;
  store.retrySave();
}, 1000);
});
  _$jscoverage['/local-storage.js'].lineData[77]++;
  store.on('save', function() {
  _$jscoverage['/local-storage.js'].functionData[5]++;
  _$jscoverage['/local-storage.js'].lineData[78]++;
  o.get('el').css(reverseCss);
});
  _$jscoverage['/local-storage.js'].lineData[81]++;
  var oldSet = store.setItem;
  _$jscoverage['/local-storage.js'].lineData[83]++;
  S.mix(store, {
  _ke: 1, 
  getItem: function(k) {
  _$jscoverage['/local-storage.js'].functionData[6]++;
  _$jscoverage['/local-storage.js'].lineData[86]++;
  return this.getValueOf(k);
}, 
  retrySave: function() {
  _$jscoverage['/local-storage.js'].functionData[7]++;
  _$jscoverage['/local-storage.js'].lineData[89]++;
  var self = this;
  _$jscoverage['/local-storage.js'].lineData[90]++;
  self.setItem(self.lastSave.k, self.lastSave.v);
}, 
  setItem: function(k, v) {
  _$jscoverage['/local-storage.js'].functionData[8]++;
  _$jscoverage['/local-storage.js'].lineData[93]++;
  var self = this;
  _$jscoverage['/local-storage.js'].lineData[94]++;
  self.lastSave = {
  k: k, 
  v: v};
  _$jscoverage['/local-storage.js'].lineData[95]++;
  oldSet.call(self, k, v);
}});
  _$jscoverage['/local-storage.js'].lineData[100]++;
  store.on('contentReady', function() {
  _$jscoverage['/local-storage.js'].functionData[9]++;
  _$jscoverage['/local-storage.js'].lineData[101]++;
  store._ready = 1;
});
  _$jscoverage['/local-storage.js'].lineData[111]++;
  return store;
});

示例#12

文件： overlay.js 项目： FredGreen/kissy

 runs(function () {
     o.render();
 });

示例#13

文件： local-storage-debug.js 项目： Coven2014/kissy

], function (S, require) {
    var Editor = require('editor');
    var Overlay = require('overlay');
    var FlashBridge = require('./flash-bridge');
    var ie = S.UA.ieMode;    // 原生或者已经定义过立即返回
                             // ie 使用 flash 模拟的 localStorage，序列化性能不行
    // 原生或者已经定义过立即返回
    // ie 使用 flash 模拟的 localStorage，序列化性能不行
    if ((!ie || ie > 8) && window.localStorage) {
        //原生的立即可用
        return window.localStorage;
    }    // 国产浏览器用随机数/时间戳试试 ! 是可以的
    // 国产浏览器用随机数/时间戳试试 ! 是可以的
    var swfSrc = Editor.Utils.debugUrl('plugin/local-storage/assets/swfstore.swf?t=' + +new Date());
    var css = {
            width: 215,
            border: '1px solid red'
        }, reverseCss = {
            width: 0,
            border: 'none'
        };    //Dialog 不行
    //Dialog 不行
    var o = new Overlay({
            prefixCls: 'ks-editor-',
            elStyle: { background: 'white' },
            width: '0px',
            content: '<h1 style="' + 'text-align:center;">\u8BF7\u70B9\u51FB\u5141\u8BB8</h1>' + '<div class="storage-container"></div>',
            zIndex: Editor.baseZIndex(Editor.ZIndexManager.STORE_FLASH_SHOW)
        });
    o.render();
    o.show();
    var store = new FlashBridge({
            src: swfSrc,
            render: o.get('contentEl').one('.storage-container'),
            params: { flashVars: { useCompression: true } },
            attrs: {
                height: 138,
                width: '100%'
            },
            methods: [
                'setItem',
                'removeItem',
                'getItem',
                'setMinDiskSpace',
                'getValueOf'
            ]
        });    // 必须在视窗范围内才可以初始化，触发 contentReady 事件
    // 必须在视窗范围内才可以初始化，触发 contentReady 事件
    S.ready(function () {
        setTimeout(function () {
            o.center();
        }, 0);
    });
    store.on('pending', function () {
        o.get('el').css(css);
        o.center();
        o.show();    // 轮训，直到用户允许
        // 轮训，直到用户允许
        setTimeout(function () {
            store.retrySave();
        }, 1000);
    });
    store.on('save', function () {
        o.get('el').css(reverseCss);
    });
    var oldSet = store.setItem;
    S.mix(store, {
        _ke: 1,
        getItem: function (k) {
            return this.getValueOf(k);
        },
        retrySave: function () {
            var self = this;
            self.setItem(self.lastSave.k, self.lastSave.v);
        },
        setItem: function (k, v) {
            var self = this;
            self.lastSave = {
                k: k,
                v: v
            };
            oldSet.call(self, k, v);
        }
    });    //非原生，等待flash通知
    //非原生，等待flash通知
    store.on('contentReady', function () {
        store._ready = 1;
    });    /*
     'quotaExceededError'
     'error'
     'save'
     'inadequateDimensions'
     */
    /*
     'quotaExceededError'
     'error'
     'save'
     'inadequateDimensions'
     */
    return store;
});