User:Bawolff/sandbox/fancyLead.js

Note: After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in Tools→Preferences. — More skins

/*
The point of this script is to add coolness to the Fancy image lead system (what exactly coolness is, I haven't precisely determined yet)
 
More generally, this will do cool stuff with image overlays altogether.
 
Note: this is nowhere near doing anything useful as of yet
*/
var imgOvlay = {}; // everything should be a property of this object to avoid name clashes
 
imgOvlay.extend = function (Thing, That) {
//Note, also have to call call() or apply() within constructor
    Thing.prototype = new That;
 
    for (var i in Thing.prototype) {
        if (Thing.prototype.hasOwnProperty(i)) {
            delete Thing.prototype[i];
        }
    }
    Thing.prototype.constructor = Thing;
 
}
/*
Overlay:  {
            background {
              color: #ABC (3 or 6 digit rgb) //yes i know, thats US spelling, but want to keep consistancy w/html
              opacity: 0.5 (between 0-1 1= opaque, 0 = invisible)
            } || false for no bg
            position {
               x: 12px (string w/unit)
               y: 24px
               z: 3 (unitless interger, if applicable. can be false/undefined) 
            } 
          }
 
*/
//not meant to be used directly
imgOvlay.Overlay = function (init) {
    var init = init || {}; 
    if (init.background) {
        this.background = {};
        this.background.color = init.background.color || "#FFF";
        this.background.opacity = init.background.opacity || 0.4;
    }
    else {
        this.background = false; //no bg
    }
    //positions
    this.position = {};
    init.position = init.position || {}; 
    this.position.x = init.position.x || "0px";
    this.position.y = init.position.y || "0px";
    this.position.z = init.position.z || false;
}
 
/*
Aditional stuff:
   text = [ {text}, {text}]
   fmt = {Format} //general fmt. {text} can overide)
 
*/
 
imgOvlay.TextOverlay = function (init) {
    //Subclass of Overlay
    var init = init || {}; 
    imgOvlay.Overlay.call(this, init);
    this.text = init.text; //array of txt objects
    this.fmt = init.fmt;
 
}
 
imgOvlay.extend(imgOvlay.TextOverlay, imgOvlay.Overlay);
 
/*fmt (Format) object
 
   fmt = {bold: boolean, italic: boolean, strike: boolean font: string (font1, font2, generic)}
 
*/
 
imgOvlay.Format = function (init) {
//often in a fmt property
    var init = init || {}; 
    this.bold = init.bold || undefined;
    this.italic = init.italic || undefined;
    this.strike = init.strike || undefined;
    this.font = init.font || undefined;
 
}
imgOvlay.Text = function (text /*(string)*/, fmt /*Format obj*/) {
    this.text = text || undefined; // || throw new Error("Need to specify text for text object");
    this.fmt = fmt || undefined; //optional formating overide
}
 
/*
imgOverlay = { w: interger (width in pixels of img, no unit)
               trim: {w: String w/unit
                      h: string w/unit
                     }
              }
plus generic overlay
*/
 
imgOvlay.ImgOverlay = function (init) {
    var init = init || {}; 
    imgOvlay.Overlay.call(this, init);
    this.w = init.w || 100; //should there be a defualt? should it just be as big as possible
    this.trim = {};
 
    if (init.trim) {
        this.trim.w = init.trim.w || undefined;
        this.trim.h = init.trim.h || undefined;
    }
 
}
imgOvlay.extend(imgOvlay.ImgOverlay, imgOvlay.Overlay);
 
 
 
/*
 
init: {
       overlays: [ {text_overlay}, {text_overlay2}, {image_overlay} ... ]
       base: {image: url, width: foo px, height: foo px}
       byline: {separator: "mdash", 1: {byline}, 2: {byline}, ...} (this is array+extra prop)
      }
Other stuff in imageLead
      {
       out {png(), wiki(), html()}
 
      }
 
*/
imgOvlay.Byline = function (text, link/*url*/, title/*tooltip*/) {
    this.text = text || undefined; //needed
    this.title = title || undefined; //this is optional
    this.link = link || undefined; //This is optional but highly recomended
 
}
 
imgOvlay.ImageLead = function (init) {
    var init = init || {}; 
    this.overlays = init.overlays || undefined; //this is an array of overlays
    this.base = {};
    if (init.base) {
        this.base.image = init.base.image || undefined; //note to self: how does this work with no image
        this.base.width = init.base.width || undefined;
        this.base.height = init.base.height || undefined;
    }
    this.byline = [];
    if (init.byline) {
        this.byline.separator = init.byline.separator || "·";
        var tempByline;
        for (var i = 0; i < 100 /*to stop indef*/;i++) {
            tempByline = init.byline[i] || false;
            if (tempByline) {
                this.byline[i] = tempByline;
                continue;
            }
            break;
        }
    }
 
 
}
/*output functions*/
imgOvlay.ImageLead.prototype.out = {
    html: function () {
        throw new Error("not made yet");
    },
    wiki: function () {
        throw new Error("not made yet");
    },
    html: function () {
        throw new Error("not made yet");
    }
};