Return to Snippet

Revision: 5339
at February 28, 2008 11:27 by netcraft


Updated Code
// JScript source code
var Object = function(){
    var cfg = new YAHOO.util.Config(this);
        element;
    
    initDefaultConfig: function() {

        this.cfg.addProperty(
            "color",
            {
                value: "#000000",
                handler: setColor
            }
        );
        
        this.cfg.addProperty(
            "width", 
            {
                value: null,
                handler: setWidth
            }
        );
        
        this.cfg.fireQueue();        
    }
    
    var setColor = function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(element, "color", color);        
    }
    
    var setWidth = function(type, args, obj){
        var width = args[0] + "px";
        YAHOO.util.Dom.setStyle(element, "width", width);        
    }
    
    this.init = function(elementId){
        element = YAHOO.util.Dom.get(elementId);
        initDefaultConfig();
    } 
};

Revision: 5338
at February 28, 2008 10:55 by netcraft


Initial Code
IncrediLetter = function(){};
IncrediLetter.prototype = {

    element:   null,
    textEl:    null,
    underlay:  null,
    overlay:   null,
    cfg:       null,
   
    initDefaultConfig: function() {

        this.cfg.addProperty(
            "bgcolor",
            {
                value: "#FFFFFF",
                handler: this.setBGColor
            }
        );
        
        this.cfg.addProperty(
            "bgimage", 
            {
                value: null,
                handler: this.setOverlayURL
            }
        );
        
        this.cfg.addProperty(
            "fontcolor", 
            {
                value: "#000000",
                handler: this.setFontColor
            }
        );

        this.cfg.addProperty(
            "fontsize", 
            {
                value: "12px",
                handler: this.setFontSize
            }
        );
        
        this.cfg.addProperty(
            "fontfamily", 
            {
                value: "arial",
                handler: this.setFontFamily
            }
        );

        this.cfg.addProperty(
            "imagesource", 
            {
                value: null,
                handler: this.setUnderlaySource
            }
        );

        this.cfg.addProperty(
            "imagedimensions",
            {
                value: null,
                handler: this.setUnderlayDimensions
            }
        );

        this.cfg.addProperty(
            "imageInitDimensions",
            {
                value: null,
                handler: this.setUnderlayInitDimensions
            }
        );
        
        this.cfg.addProperty(
            "imageresize", 
            {
                value: 100,
                handler: this.resizeUnderlay
            }
        );

        this.cfg.addProperty(
            "imageposition", 
            {
                value: [0, 0],
                handler: this.setUnderlayPosition
            }
        );

        this.cfg.addProperty(
            "imageInitPosition", 
            {
                value: null,
                handler: this.setUnderlayInitPosition
            }
        );
        
        this.cfg.addProperty(
            "imagerotation", 
            {
                value: 0,
                handler: this.rotateUnderlay
            }
        );
        
        this.cfg.addProperty(
            "move", 
            {
                value: null,
                handler: this.moveUnderlay
            }
        );
        
        this.cfg.fireQueue();
        
    },
    
    init: function(id, swfSource){
        this.element = YAHOO.util.Dom.get(id);  
        this.textEl = this.element.getElementsByTagName("p")[0];
        
        this.overlay = new Overlay(); 
        this.overlay.init();  
        this.element.appendChild(this.overlay.getElement());

        this.underlay = new Underlay(); 
        this.underlay.init(swfSource, "underlayWrapper", "underlay");  
        this.element.appendChild(this.underlay.getElement());
        this.underlay.appendElement();
        
        this.cfg = new YAHOO.util.Config(this);
        this.initDefaultConfig();
    },
    
    setProperties: function(properties, setAsInitCfg){
        this.cfg.applyConfig(properties, setAsInitCfg);
        this.cfg.fireQueue();
    },
    
    getProperties: function(){
        return {
				    imagesource: this.cfg.getProperty("imagesource"),
				    imagedimensions: this.cfg.getProperty("imagedimensions"),
				    imageInitDimensions: this.cfg.getProperty("imageInitDimensions"),
				    imageresize: this.cfg.getProperty("imageresize"),
				    imagerotation: this.cfg.getProperty("imagerotation"),
				    imageposition: this.cfg.getProperty("imageposition")
				}
    },
    
    setFontFamily: function(type, args, obj){
        var family = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "font-family", family);        
    },
    
    setFontSize: function(type, args, obj){
        var size = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "font-size", size);
    },
    
    setFontColor: function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "color", color);        
    },
    
    setBGColor: function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(this.element, "background-color", color);        
    },
    
    setOverlayURL: function(type, args, obj){
        var url = args[0];
        this.overlay.setURL(url)
    },    
    
    setOverlayCenterCoords: function(type, args, obj){
        var coords = args[0];
        this.overlay.setCenter(coords)
    },
    
    setUnderlaySource: function(type, args, obj){
        var imageSource = args[0];        
        if (imageSource){
            this.underlay.setImageSource(imageSource);
        }
    },
    
    resizeUnderlay: function(type, args, obj){
        var percentage = args[0];
        this.underlay.resizeImage(percentage);
    },
    
    rotateUnderlay: function(type, args, obj){
        var degree = args[0];
		this.underlay.rotateImage(degree);        
    },
    
    setUnderlayDimensions: function(type, args, obj){
        var dimensions = args[0];
        if (dimensions){
            this.underlay.setDimensions(dimensions);
        }
    },
    
    setUnderlayInitDimensions: function(type, args, obj){
        var dimensions = args[0];
        if (dimensions){
            this.underlay.setInitDimensions(dimensions);
        }
    },
    
    setUnderlayPosition: function(type, args, obj){
        var position = args[0];
        this.underlay.setPosition(position);    
    },
    
    setUnderlayInitPosition: function(type, args, obj){
        var position = args[0];
        if (position){
            this.underlay.setInitPosition(position);    
        }
    },
    
    moveUnderlay: function(type, args, obj){
        var cfg = args[0];
        if (cfg){
            this.underlay.move(cfg); 
        }  
    }
}

Initial URL

                                

Initial Description
Config is a utility used within an Object to allow the implementer to maintain a list of local configuration properties and listen for changes to those properties dynamically using CustomEvent. The initial values are also maintained so that the configuration can be reset at any given point to its initial state.

Dependencies:
* yahoo.js
* event.js

Initial Title
A guide to YUI Config utility

Initial Tags

                                

Initial Language
JavaScript