kekule/src/widgets/commonCtrls/kekule.widget.images.js

Open source JavaScript toolkit for chemoinformatics

/**
 * @fileoverview
 * Implementation of image related widgets.
 * @author Partridge Jiang
 */

/*
 * requires /lan/classes.js
 * requires /utils/kekule.utils.js
 * requires /utils/kekule.domUtils.js
 * requires /xbrowsers/kekule.x.js
 * requires /widgets/kekule.widget.base.js
 */

(function(){

var EU = Kekule.HtmlElementUtils;
var CNS = Kekule.Widget.HtmlClassNames;

/**
 * An widget to display a small image.
 * The image is actually set by CSS background property. CSS style can is setted by
 * different imgInfo properties (including normalInfo, hoverInfo and so on). All these
 * info hash can has the following fields:
 *   {
 *     className: class name add to element in the state.
 *     src: background image url.
 *     position: background position.
 *     repeat: background repeat style.
 *   }
 * @class
 * @augments Kekule.Widget.BaseWidget
 *
 * @property {Hash} normalInfo Infomation to draw glyph in normal state.
 * @property {Hash} focusedInfo Infomation to draw glyph in focus state.
 * @property {Hash} hoverInfo Infomation to draw glyph in hover state.
 * @property {Hash} activeInfo Infomation to draw glyph in active state.
 * @property {Hash} disabledInfo Infomation to draw glyph in disabled state.
 */
Kekule.Widget.Glyph = Class.create(Kekule.Widget.BaseWidget,
/** @lends Kekule.Widget.Glyph# */
{
	/** @private */
	CLASS_NAME: 'Kekule.Widget.Glyph',
	/** @constructs */
	initialize: function(/*$super, */parentOrElementOrDocument, normalImgInfo)
	{
		this._imgElem = null;  // used internally
		this.tryApplySuper('initialize', [parentOrElementOrDocument])  /* $super(parentOrElementOrDocument) */;
		if (normalImgInfo)
			this.setNormalInfo(normalImgInfo);
	},
	/** @private */
	initProperties: function()
	{
		/*
		this.defineProp('src', {'dataType': DataType.STRING, 'serializable': false,
			'setter': function(value)
			{
				this.setPropStoreFieldValue('src', value);
				this.getStyle().backgroundImage = value? 'url(' + value + ')': '';
			}
		});
		this.defineElemAttribMappingProp('spritePosition', 'backgroundPosition');
		*/
		/*
		this.defineProp('autoHide', {'dataType': DataType.BOOL,
			'setter': function(value)
			{
				this.setPropStoreFieldValue('autoHide', value);

			}
		});
		*/
		this.defineImgInfoProp('normalInfo', {'dataType': DataType.HASH});
		this.defineImgInfoProp('hoverInfo', {'dataType': DataType.HASH});
		this.defineImgInfoProp('focusedInfo', {'dataType': DataType.HASH});
		this.defineImgInfoProp('activeInfo', {'dataType': DataType.HASH});
		this.defineImgInfoProp('disabledInfo', {'dataType': DataType.HASH});
	},
	defineImgInfoProp: function(propName, options)
	{
		var ops = Object.extend({
			'setter': function(value)
			{
				if (value)
					this.setPropStoreFieldValue(propName, Object.extend({}, value));
				else
					this.setPropStoreFieldValue(propName, null);
				this.imgInfoChanged();
			}
		}, options);
		return this.defineProp(propName, ops);
	},
	/** @ignore */
	doGetWidgetClassName: function()
	{
		return 'K-Glyph';
	},
	/** @ignore */
	doCreateRootElement: function(doc)
	{
		var result = doc.createElement('span');
		return result;
	},
	/** @ignore */
	doBindElement: function(/*$super, */element)
	{
		this.tryApplySuper('doBindElement')  /* $super() */;
		this.createImgContainer(element);
	},
	/** @ignore */
	createImgContainer: function(parentElem, imgInfo)
	{
		var doc = parentElem.ownerDocument;
		this._imgElem = doc.createElement('span');
		this._imgElem.className = CNS.FULLFILL;
		parentElem.innerHTML = '';
		parentElem.appendChild(this._imgElem);
	},

	/** @ignore */
	imgInfoChanged: function()
	{
		this.updateImg();
	},

	/** @ignore */
	stateChanged: function(/*$super*/)
	{
		this.tryApplySuper('stateChanged')  /* $super() */;
		this.updateImg();
	},
	/** @private */
	updateImg: function()
	{
		var WS = Kekule.Widget.State;
		var state = this.getState();
		var imgInfo =
			(state === WS.DISABLED)? this.getDisabledInfo():
			(state === WS.ACTIVE)? this.getActiveInfo() || this.getHoverInfo() || this.getFocusedInfo():
			(state === WS.HOVER)? this.getHoverInfo():
			(state === WS.FOCUSED)? this.getFocusedInfo():
			this.getNormalInfo();
		imgInfo = imgInfo || this.getNormalInfo();
		/*
		var imgInfo =
			(!this.getEnabled()? this.getDisabledInfo():
			this.getIsActive()? this.getActiveInfo():
			this.getIsHover()? this.getHoverInfo():
			this.getIsFocused()? this.getFocusedInfo():
			this.getNormalInfo())
				|| this.getNormalInfo();
		*/
		this.showImgOfInfo(imgInfo);
	},
	/** @private */
	showImgOfInfo: function(imgInfo)
	{
		var elem = this._imgElem;
		if (elem)
		{
			if (imgInfo)
			{
				if (imgInfo.className)
				{
					elem.className = CNS.FULLFILL;
					EU.addClass(elem, imgInfo.className);
				}
				else
					elem.className = CNS.FULLFILL;

				elem.style.backgroundImage = imgInfo.src? 'url(' + imgInfo.src + ')': '';
				elem.style.backgroundPosition = imgInfo.position || '';
				elem.style.backgroundRepeat = imgInfo.repeat || 'no-repeat';
			}
			else
				elem.style.backgroundImage = '';
		}
	}
});

})();