atlasuiglitz.js

来自「《圣殿祭司的ASP.NET 2.0开发详解——使用C#》光盘内容.包含了书籍所含」· JavaScript 代码 · 共 617 行 · 第 1/2 页

//-----------------------------------------------------------------------
// Copyright (C) Microsoft Corporation. All rights reserved.
//-----------------------------------------------------------------------
// AtlasUIGlitz.js
// Atlas Glitz UI Framework.


Web.UI.Glitz = new function() {

    this.getElementOpacity = function(element) {
        var hasOpacity = false;
        var opacity;
        
        if (element.filters) {
            var filters = element.filters;
            if (filters.length != 0) {
                var alphaFilter = filters['DXImageTransform.Microsoft.Alpha'];
                if (alphaFilter != null) {
                    opacity = alphaFilter.opacity / 100.0;
                    hasOpacity = true;
                }
            }
        }
        else {
            var computedStyle = document.defaultView.getComputedStyle;
            opacity = computedStyle(element, null).getPropertyValue('opacity');
            hasOpacity = true;
        }
        
        if (hasOpacity == false) {
            return 1.0;
        }
        return parseFloat(opacity);
    }
    
    this.interpolate = function(value1, value2, percentage) {
        return value1 + (value2 - value1) * (percentage / 100);
    }

    this.setElementOpacity = function(element, value) {
        if (element.filters) {
            var filters = element.filters;
            var createFilter = true;
            if (filters.length != 0) {
                var alphaFilter = filters['DXImageTransform.Microsoft.Alpha'];
                if (alphaFilter != null) {
                    createFilter = false;
                    alphaFilter.opacity = value * 100;
                }
            }
            if (createFilter) {
                element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (value * 100) + ')';
            }
        }
        else {
            element.style.opacity = value;
        }
    }
}

Web.UI.OpacityBehavior = function() {
    Web.UI.OpacityBehavior.initializeBase(this);
    
    var _value = 1;
    
    this.get_value = function() {
        if (!this.control) {
            return _value;
        }
        
        var element = this.control.element;
        return Web.UI.Glitz.getElementOpacity(element);
    }
    this.set_value = function(value) {
        if (!this.control) {
            _value = value;
            return;
        }
        
        var element = this.control.element;
        Web.UI.Glitz.setElementOpacity(element, value);
    }

    this.getDescriptor = function() {
        var td = Web.UI.OpacityBehavior.callBaseMethod(this, 'getDescriptor');
        
        td.addProperty('value', Number);
        return td;
    }
    
    this.initialize = function() {
        Web.UI.OpacityBehavior.callBaseMethod(this, 'initialize');
        if (_value != 1) {
            this.set_value(_value);
        }
    }
}
Type.registerSealedClass('Web.UI.OpacityBehavior', Web.UI.Behavior);
Web.TypeDescriptor.addType('script', 'opacity', Web.UI.OpacityBehavior);

Web.UI.LayoutBehavior = function() {
    Web.UI.LayoutBehavior.initializeBase(this);
    
    var _left;
    var _top;
    var _width;
    var _height;
    
    this.get_height = function() {
        return _height;
    }
    this.set_height = function(value) {
        _height = value;
        
        if (this.control) {
            this.control.element.style.height = _height;
        }
    }
    
    this.get_left = function() {
        return _left;
    }
    this.set_left = function(value) {
        _left = value;
        
        if (this.control) {
            this.control.element.style.left = _left;
        }
    }
    
    this.get_top = function() {
        return _top;
    }
    this.set_top = function(value) {
        _top = value;
        
        if (this.control) {
            this.control.element.style.top = _top;
        }
    }
    
    this.get_width = function() {
        return _width;
    }
    this.set_width = function(value) {
        _width = value;
        
        if (this.control) {
            this.control.element.style.width = _width;
        }
    }
    
    this.getDescriptor = function() {
        var td = Web.UI.LayoutBehavior.callBaseMethod(this, 'getDescriptor');
        
        td.addProperty('height', String);
        td.addProperty('left', String);
        td.addProperty('top', String);
        td.addProperty('width', String);
        return td;
    }
    
    this.initialize = function() {
        Web.UI.LayoutBehavior.callBaseMethod(this, 'initialize');
        if (_height) {
            this.set_height(_height);
        }
        if (_left) {
            this.set_left(_left);
        }
        if (_top) {
            this.set_top(_top);
        }
        if (_width) {
            this.set_width(_width);
        }
    }
}
Type.registerSealedClass('Web.UI.LayoutBehavior', Web.UI.Behavior);
Web.TypeDescriptor.addType('script', 'layout', Web.UI.LayoutBehavior);

Web.UI.Animation = function() {
    Web.UI.Animation.initializeBase(this, [false]);
    
    var _duration = 1;
    var _fps = 25;
    var _target;
    
    var _tickHandler;
    var _timer;
    
    var _percentComplete = 0;
    var _percentDelta;
    
    var _parentAnimation;
    
    this.get_duration = function() {
        return _duration;
    }
    this.set_duration = function(value) {
        _duration = value;
    }
    
    this.get_fps = function() {
        return _fps;
    }
    this.set_fps = function(value) {
        _fps = value;
    }
    
    this.get_isActive = function() {
        return (_timer != null);
    }
    
    this.get_isPlaying = function() {
        return (_timer != null) && _timer.get_enabled();
    }

    this.get_percentComplete = function() {
        return _percentComplete;
    }
    
    this.get_target = function() {
        return _target;
    }
    this.set_target = function(value) {
        _target = value;
    }
    
    this.ended = this.createEvent();
    
    this.started = this.createEvent();
    
    this.dispose = function() {
        if (_timer) {
            _timer.tick.remove(_tickHandler);
            _timer.dispose();
            _timer = null;
        }
        
        _tickHandler = null;
        _target = null;
        
        Web.UI.Animation.callBaseMethod(this, 'dispose');
    }
    Web.UI.Animation.registerBaseMethod(this, 'dispose');
    
    this.getAnimatedValue = Function.abstractMethod;

    this.getDescriptor = function() {
        var td = Web.UI.Animation.callBaseMethod(this, 'getDescriptor');
        
        td.addProperty('duration', Number);
        td.addProperty('fps', Number);
        td.addProperty('isActive', Boolean);
        td.addProperty('isPlaying', Boolean);
        td.addProperty('percentComplete', Number);
        td.addProperty('target', Object);
        td.addMethod('play');
        td.addMethod('pause');
        td.addMethod('stop');
        return td;
    }
    Web.UI.Animation.registerBaseMethod(this, 'getDescriptor');

    this.onEnd = function() {
    }
    Web.UI.Animation.registerBaseMethod(this, 'onEnd');
    
    this.onStart = function() {
    }
    Web.UI.Animation.registerBaseMethod(this, 'onStart');
    
    this.onStep = function(percentage) {
        this.setValue(this.getAnimatedValue(percentage));
    }
    Web.UI.Animation.registerBaseMethod(this, 'onStep');
    
    this.pause = function() {
        if (!_parentAnimation) {
            if (_timer) {
                _timer.set_enabled(false);
                
                this.raisePropertyChanged('isPlaying');
            }
        }
    }
    
    this.play = function() {
        if (!_parentAnimation) {
            var resume = true;
            if (!_timer) {
                resume = false;
                
                if (!_tickHandler) {
                    _tickHandler = Function.createDelegate(this, this._onTimerTick);
                }
                
                _timer = new Web.Timer();
                _timer.set_interval(1000 / _fps);
                _timer.tick.add(_tickHandler);
                _percentDelta = 100 / (_duration * _fps);
                
                this.onStart();
                this._updatePercentComplete(0, true);
            }

            _timer.set_enabled(true);