/* Copyright (c) 2006-2010, ePages GmbH All Rights Reserved. */ dojo.provide("epages.cartridges.de_epages.design.widget.Toolbuttonimages"); dojo.require("epages.widget.LocalizedWidget"); dojo.require("epages.lang.hitch"); dojo.require('epages.event'); dojo['require']("epages.cartridges.de_epages.mediagallery.widget.Toolmediagallery"); dojo.require('epages.widget.Tooltip'); dojo.require("epages.widget.FormElement"); dojo.declare( "epages.cartridges.de_epages.design.widget.Toolbuttonimages", [epages.widget.LocalizedWidget], { /** * public properties */ label : "", fileNameLeft : "", imageSetHidden : "", imagesetLeft : "", imagesetRight : "", imageTiling : "", imageType : "", navBar : "", objectId : epages.vars.ObjectID, slaveWidgetId : "", slaveWidget : undefined, /** * widget properties */ widgetType : "Toolbuttonimages", templatePath : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/Toolbuttonimages.html'), translationName : dojo.moduleUrl('epages.cartridges.de_epages.design.widget' , 'templates/translation'), imagePath : epages.themeUrl('images'), widgetsInTemplate : true, // override postCreate : function() { // summary: initalize file upload widget and other background image related events this.inherited("postCreate", arguments); // pass callback function to toolMediaGalleryWidget var me=this; this.toolMediaGalleryWidget.onApply = function(pathFromSite) { me.setFileName(pathFromSite); }; this.tilingCheckboxNode = new epages.widget.FormElement({}, this.tilingCheckboxNode).elementNode; // init events this._appendEvents(); }, startup: function() { this.inherited("startup", arguments); if(this.slaveWidgetId != "") { this.slaveWidget=$$(this.slaveWidgetId); if(this.slaveWidget === undefined) { console.warn('SlaveWidget with id ="'+this.slaveWidgetId+'" not found in '+this.declaredClass); } else { dojo.subscribe(this.slaveWidgetId+'/filenamechanged', this, '_showButtons'); } } else { console.warn('No slaveWidgetId in '+this.declaredClass+'. Slave functions will be ignored.'); } // init buttons this._showButtons(); }, setFileName: function(pathFromSite){ this.fileNameLeftNode.value = pathFromSite; epages.event.fire(this.fileNameLeftNode, "change"); }, /** * private methods */ _appendEvents: function() { // summary: append onclick and onchange events to buttons and inputs // add button events this.connect(this.clearImageLeftNode, 'onclick', '_clearImageLeft'); this.connect(this.clearImageSetNode, 'onclick', '_clearImageSet'); this.connect(this.restoreImageSetNode, 'onclick', '_restoreImageSet'); this.connect(this.tilingCheckboxNode, 'onclick', '_toggleImageTiling'); // add input events (listen to value changes and update display) this.connect(this.fileNameLeftNode, 'onchange', '_showButtons'); this.connect(this.imageSetHiddenNode, 'onchange', '_showButtons'); this.connect(this.imageTilingNode, 'onchange', '_showButtons'); }, _clearImageLeft: function(evt) { // summary: clears the value of left image file name input and throw change event this.fileNameLeftNode.value=""; epages.event.fire(this.fileNameLeftNode,"change"); }, _clearImageSet: function(evt) { // summary: set value of "imageSetHidden" input to "1" and throw change event this.imageSetHiddenNode.value="1"; epages.event.fire(this.imageSetHiddenNode,"change"); }, _restoreImageSet: function(evt) { // summary: set value of "imageSetHidden" input to "0" and throw change events this.imageSetHiddenNode.value="0"; epages.event.fire(this.imageSetHiddenNode,"change"); // trigger undo, redo for this element epages.event.fire(this.imageSetNode,"change"); // trigger style rule to display ImageSet images }, _showButtons: function() { // summary: decides which button is visible if(this.imageTilingNode.value=='1') { this.tilingCheckboxNode.checked=true; // Checkbox checked->true if value in hidden input=1. This happens if the user presses the undo or redo button } else { this.tilingCheckboxNode.checked=false; } var fileNameRightNodeValue= ""; if(this.slaveWidget) { fileNameRightNodeValue= this.slaveWidget.getFileName(); } if(this.fileNameLeftNode.value!="" || fileNameRightNodeValue!="" ) { if(this.fileNameLeftNode.value!="") { // show hide clear button left this.clearImageLeftNode.style.display=""; } else { this.clearImageLeftNode.style.display="none"; } if(this.fileNameLeftNode.value!='' && fileNameRightNodeValue=='') { this.tilingAreaNode.style.display=""; // (image tiling=yes) && (left image) && (no right image) --> show tiling checkbox |else --> hide tiling checkbox } else { this.tilingAreaNode.style.display="none"; } // hide: clear imageset / restore imageset this.clearImageSetNode.style.display="none"; this.restoreImageSetNode.style.display="none"; } else if(this.imageSetHiddenNode.value!="1"){ this.clearImageLeftNode.style.display="none"; this.clearImageSetNode.style.display=""; this.restoreImageSetNode.style.display="none"; this.tilingAreaNode.style.display="none"; } else { this.clearImageLeftNode.style.display="none"; this.clearImageSetNode.style.display="none"; this.restoreImageSetNode.style.display=""; this.tilingAreaNode.style.display="none"; } }, _toggleImageTiling: function(evt) { // summary: hidden input / checkbox handler set // description: Handles the value of the hidden input element which depends on the visible checkbox. // Afterwards it fires an change event to trigger the display handler (_showButtons). if(this.tilingCheckboxNode.checked==true) { this.imageTilingNode.value=1; } else { this.imageTilingNode.value=0; } epages.event.fire(this.imageTilingNode,"change"); } });