/* Copyright (c) 2006-2007, ePages GmbH All Rights Reserved. epages.cartridges.de_epages.design.widget.Tooliconset $Revision: 1.28 $ */ dojo.provide("epages.cartridges.de_epages.design.widget.Tooliconset"); dojo.require("epages.widget.LocalizedWidget"); dojo.require('epages.widget.Modaldialog'); dojo.require('epages.io.json'); dojo.require('epages.html'); dojo.declare( "epages.cartridges.de_epages.design.widget.Tooliconset", [epages.widget.LocalizedWidget], { /** * public properties */ url : '?', objectId : epages.vars.ObjectID, languageId : epages.vars.Locale.languageId, iconset : '', undoWidget : undefined, undoWidgetId : 'undoWidget', objectId : '', imagePath : epages.themeUrl('images'), /** * private properties */ _dialogWidget : undefined, _htmlUndo : undefined, _oldIconset : undefined, //these are the css-classes that have an icon from the iconset as background-image _cssClassesWithIcon : { 'LinkPrintView' : 'ico_s_printer.png', 'LinkBasket' : 'ico_s_basket.png', 'Action' : 'img_actionlink.png', 'TreeNode' : { 'NoSubCategories' : 'img_tree_empty.png', 'HasSubCategories' : 'img_tree_plus.png', 'HasSubCategoriesMinus' : 'img_tree_minus.png' } }, /** * constants */ //css class for elements that have an icon from the iconset inside CSSCLASS: 'Icon', /** * widget properties */ templateType : 'default', defaultTemplateType: 'default', templatePath : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/Tooliconset.html'), translationName : dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates/translation'), _templateMapping: { 'default' : {templatePath: dojo.moduleUrl('epages.cartridges.de_epages.design.widget', 'templates/Tooliconset.html')}, 'xlicon' : {templatePath: dojo.moduleUrl('epages.cartridges.de_epages.design.widget', 'templates/Tooliconsetxlicon.html')} }, postMixInProperties: function() { this._templateDirectory = dojo.moduleUrl('epages.cartridges.de_epages.design.widget','templates'); this.inherited("postMixInProperties", arguments); if(epages.vars.Iconset){ this.iconset = epages.vars.Iconset; }else{ console.warn("epages.vars.Iconset not defined in "+this.declaredClass); } }, postCreate : function() { this.inherited("postCreate", arguments); this.connect(this.iconNode,'onclick', '_onClickIconNode'); this.undoWidget = $$(this.undoWidgetId); if (this.undoWidget === undefined) { console.warn(this.id+' : undo widget not found in '+this.declaredClass); } else { this._htmlUndo = this.undoWidget.getUndoObject(); this._htmlUndo.setDefaultValue(this.hiddenInput); this.connect(this.hiddenInput,'onchange', '_onChangeHiddenInput'); } } , _createDialog:function(){ var json = new epages.io.Json(); var params = { 'ViewAction': 'JSONSnippet', 'TemplateAction': 'IconsetSnippet', 'TemplateLanguageID': this.languageId, 'ObjectID': this.objectId, 'TemplateLanguageID': this.languageId }; var output = json.loadSync(this.url, params); var me = this; var buttons = [{ label: this.translation.get("Apply"), cssClass: 'Active', onclick: function(evt) { // get Undo-Widget var u = $$(me.undoWidgetId); if(u){ // if already changes was made -> open ConfirmSaveDialog if(u.existsChanges()){ if(!me._createConfirmSaveWidget){ me._createConfirmSaveDialog(); } me._dialogWidgetTarget = evt.currentTarget; me._createConfirmSaveWidget.show(); }else{ this._modalDialogWidget.hide(); me._onApplyClick(); } }else{ this._modalDialogWidget.hide(); me._onApplyClick(); } } }, { label: this.translation.get("Cancel"), onclick: function() { this._modalDialogWidget.hide(); } }]; this._dialogWidget = new epages.widget.Modaldialog({ id: "Tooliconset_DialogWidget", options:{ title : this.translation.get("ChangeIconset"), width : 620, height: 200, content: output.data.snippet }, buttons : buttons }); document.body.appendChild(this._dialogWidget.domNode); var nodeList = dojo.query('img',this._dialogWidget.domNode); var img = new Image(); img.onload = dojo.hitch(this,function(){ this._dialogWidget.layout(); }); img.src = dojo.attr( nodeList[nodeList.length-1] , 'src'); //we need the timeout to avoid a wrong position window.setTimeout(function(){ me._dialogWidget.layout(); },1); }, _createConfirmSaveDialog: function(){ var messageWidget = new epages.widget.Message({ headline:this.translation.get("SaveQuestion"), message: this.translation.get("ChangeNavbarsDescription"), sizeClass:"Large", typeClass:"Warning" }); var me =this; var buttons = [{ label: this.translation.get("Save"), cssClass: 'Active', onclick: function() { me._onApplyClick(); me._modalDialogWidget.hide(); me._createConfirmSaveWidget.hide(); } }, { label: this.translation.get("Cancel"), onclick: function() { me._undoChange(me._dialogWidgetTarget); } }]; this._createConfirmSaveWidget = new epages.widget.Modaldialog({ id: "Designtoolcontroller_DialogWidget", options:{ title : this.translation.get("ChangeOnNavbars"), width : 400, height: 120, content: messageWidget }, buttons : buttons }); document.body.appendChild(this._createConfirmSaveWidget.domNode); }, _onClickIconNode: function(){ if(!this._dialogWidget){ this._createDialog(); } this._dialogWidget.show(); }, _onApplyClick:function(){ var newIconset = ''; var radioButtons = document.getElementsByName('LayoutIconSet'); for( var i=0,iLength=radioButtons.length ; i<iLength ; i++ ){ if(radioButtons[i].checked){ newIconset = radioButtons[i].value; } } if(newIconset != '' && newIconset != this.iconset){ if(this.undoWidget){ this.hiddenInput.value = newIconset; this._htmlUndo.addInput(this.hiddenInput); } this._oldIconset = this.iconset; this.iconset = newIconset; this._changeIconsInPage(this._oldIconset,this.iconset); dojo.publish("Tooliconsset/IconsetChanged",[]); } // trigger click on save button epages.event.fire(jq('#undoWidget').find("button.SaveButton")[0], 'click'); }, _changeIconsInPage:function(oldIconset,newIconset){ var iframeDoc = $('EmbeddedStorefront').contentDocument || $('EmbeddedStorefront').contentWindow.document; var iframeWin = $('EmbeddedStorefront').contentWindow; for(var el in this._cssClassesWithIcon){ var cssClass = el; var elementsArray = iframeWin.epages.html.getElementsByClassName(cssClass,iframeDoc); for( var i=0,iLength=elementsArray.length ; i<iLength ; i++ ){ if(typeof this._cssClassesWithIcon[cssClass] == 'string'){ var icon = this._cssClassesWithIcon[cssClass]; if (dojo.style(elementsArray[i],'background-image') !== 'none') { elementsArray[i].style.cssText = 'background-image: url('+epages.vars.StoreRoot+'/'+newIconset+'/'+icon+') !important'; } } else if(typeof this._cssClassesWithIcon[cssClass] =='object'){ for(var elm in this._cssClassesWithIcon[cssClass]){ var cssSubClass = elm; var subIcon = this._cssClassesWithIcon[cssClass][elm]; if(dojo.hasClass(elementsArray[i],cssSubClass)){ elementsArray[i].style.cssText = 'background: url('+epages.vars.StoreRoot+'/'+newIconset+'/'+subIcon+')0px 3px no-repeat !important'; } } } } } var elementsArray = iframeWin.epages.html.getElementsByClassName(this.CSSCLASS, iframeDoc); for( var i=0,iLength=elementsArray.length ; i<iLength ; i++ ){ if(elementsArray[i].filters) { elementsArray[i].filters(0).src = elementsArray[i].filters(0).src.replace(oldIconset, newIconset); }else{ elementsArray[i].style.cssText = "background-image: " + $('EmbeddedStorefront').contentWindow.dojo.getComputedStyle(elementsArray[i]).backgroundImage.replace(oldIconset, newIconset) + " !important"; } } }, _onChangeHiddenInput:function(evt){ var iconset = evt.currentTarget.value; this._oldIconset = this.iconset; this.iconset = iconset; this._changeIconsInPage(this._oldIconset,this.iconset); } } );