/* Copyright (c) 2006-2007, ePages GmbH All Rights Reserved. */ dojo.provide("epages.cartridges.de_epages.design.widget.Toolfont"); dojo.require("epages.widget.LocalizedWidget"); dojo.require('epages.lang.hash'); dojo.require('epages.browser'); dojo.require('epages.cartridges.de_epages.presentation.widget.Toolcolor'); dojo.require("epages.event"); dojo.require("epages.format"); dojo.declare( "epages.cartridges.de_epages.design.widget.Toolfont", [epages.widget.LocalizedWidget], { /** * public properties */ label : '', label_formatted : '', size : '', color : '', isBold : '', isItalic : '', isUnderline : '', isBoldInactive : '', isItalicInactive : '', isUnderlineInactive : '', isSizeInactive : '', isSizeVisible : '1', fontType : '', /* Headline, Paragraph, Link, ... */ objectId : '', /** * private properties */ _inputMapping : undefined, _buttonMapping : undefined, /** * constants */ COLORPICKER_OFFSET_X: 18, COLORPICKER_OFFSET_Y: 0, /** * widget properties */ declaredClass : 'epages.design.Toolfont', templatePath : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/Toolfont.html'), translationName : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/translation'), widgetsInTemplate : true, postMixInProperties: function() { this.inherited("postMixInProperties", arguments); this.label_formatted = epages.format.slice(this.label, 15); }, postCreate : function() { // summary: Initialize widget: disable inactive buttons, set button state, add button events this.inherited("postCreate", arguments); this.boldDivNode.inputmappingkey='bold'; this.italicDivNode.inputmappingkey='italic'; this.underlineDivNode.inputmappingkey='underline'; this._inputMapping = new epages.lang.Hash({ bold : this.boldInputNode, italic : this.italicInputNode, underline: this.underlineInputNode }); this._buttonMapping = new epages.lang.Hash({ bold : this.boldDivNode, italic : this.italicDivNode, underline: this.underlineDivNode }); if(this.label_formatted !== this.label){ this.labelNode.title = this.label; } this._disableInactiveElements(); this._displayButtonState(); this._appendEvents(); }, /** * private methods */ _appendEvents: function() { // summary: append events to buttons (bold, italic, underline) // add value handler this.connect(this.boldDivNode, 'onclick', '_toggleValue'); this.connect(this.italicDivNode, 'onclick', '_toggleValue'); this.connect(this.underlineDivNode, 'onclick', '_toggleValue'); // add display handler this.connect(this.boldInputNode, 'onchange', '_displayButtonState'); this.connect(this.italicInputNode, 'onchange', '_displayButtonState'); this.connect(this.underlineInputNode, 'onchange', '_displayButtonState'); }, _disableInactiveElements: function() { // summary: disable inactive elements (buttons/inputfields) if(this.isSizeVisible=='0') { this.fontSizeColumnNode.style.display='none'; } if(this.isSizeInactive=='1') { this.fontSizeWidget.domNode.style.display='none'; this.fontSizeWidget.domNode.disabled=true; } if(this.isBoldInactive=='1') { this.boldDivNode.style.display='none'; this.boldInputNode.disabled=true; } if(this.isItalicInactive=='1') { this.italicDivNode.style.display='none'; this.italicInputNode.disabled=true; } if(this.isUnderlineInactive=='1') { this.underlineDivNode.style.display='none'; this.underlineInputNode.disabled=true; } }, _displayButtonState: function() { // summary: display button state (pressed, not pressed) var me=this; var Iterator = function(pair) { var ButtonInput=me._inputMapping.get(pair.key); var ButtonDiv=me._buttonMapping.get(pair.key); if(ButtonInput.value=='1') { ButtonDiv.className=ButtonDiv.className.replace('FontAttributeInactiveBox','FontAttributeBox'); } else { ButtonDiv.className=ButtonDiv.className.replace('FontAttributeBox','FontAttributeInactiveBox'); } }; this._inputMapping.each(Iterator); }, _toggleValue: function(/*Event*/evt) { // summary: event handler for button values (bold, italic, underline) // description: Toggles between values '0' and '1' of button input fields and throws an onchange event // on the input field. (This triggers the display handler) var InputMappingKey=evt.currentTarget.inputmappingkey; var InputField=this._inputMapping.get(InputMappingKey); // toggle button value if(InputField.value=='1') { InputField.value='0'; } else { InputField.value='1'; } // throw change event on input field epages.event.fire(InputField,"change"); } } );