dojo.provide("epages.cartridges.de_epages.presentation.widget.FilenameInput"); dojo.require("epages.widget.LocalizedWidget"); dojo.require("epages.widget.FormElement"); dojo.declare( "epages.cartridges.de_epages.presentation.widget.FilenameInput", [epages.widget.LocalizedWidget], { /** * dojo widget properties */ widgetsInTemplate : true, templateString : '', templateType : 'normal', defaultTemplateType: 'normal', templatePath : dojo.moduleUrl('epages.cartridges.de_epages.presentation.widget','templates/FilenameInput.html'), translationName : dojo.moduleUrl('epages.cartridges.de_epages.presentation.widget','templates/translation'), /** * private properties */ _currentValue : '', /** * public properties */ filepath : '', filename : '', fileext : '', inputname : '', showAsInput : false, markAsError : false, postMixInProperties: function() { this.inherited("postMixInProperties", arguments); // append slash if(this.filepath) { this.filepath += '/'; } }, postCreate: function() { // summary: Connect to the file name text / input events. // description: Connects to the user events for click, blur and keyup. Adds events for // the file name text and the file name input as well as for the little edit icon. this.inherited("postCreate", arguments); // use the FormElement widget nodeInputTitle = new epages.widget.FormElement({}, this.nodeInputTitle).elementNode; // change name events this.connect(this.nodeTitle, 'click', '_onClickItem'); this.connect(this.nodeInputTitle, 'blur', '_onLeaveItem'); this.connect(this.noteEditButton, 'click', '_onClickImage'); this.connect(this.nodeInputTitle, 'keyup', '_onKeyUp'); this.connect(this.nodeInputTitle, 'change', '_adjustInputWidth'); // show the input field instead of the text from the beginning, // i.e. when the template caught an FormError if(this.showAsInput) { this._onClickItem(); setTimeout(dojo.hitch(this, function() { this._adjustInputWidth(); }), 1); } // add dialog error, i.e. when the template caught an FormError if(this.markAsError) { dojo.addClass(this.nodeInputTitle,"DialogError"); } }, _onKeyUp: function(evt) { // summary: Care for DialogError if error present and Copy input value to hidden input. // description: Mark dialog field as erroneous if empty value. Copy the updated input // value to the hidden input field. if(!this.nodeInputTitle.value){ dojo.addClass(this.nodeInputTitle,"DialogError"); } else { dojo.removeClass(this.nodeInputTitle,"DialogError"); if (evt.keyCode == dojo.keys.ENTER) {this._selectItem()} } this.nodeHiddenName.value = this.nodeInputTitle.value; this._adjustInputWidth(); }, _onClickImage: function(evt) { // summary: Handler for click event on the small edit pen icon. // description: Executes same action as click on the filename text does. this._onClickItem(); dojo.stopEvent(evt); }, _onClickItem: function() { // summary: Change the file name text span into an input field. // description: Hides the file name text and shows a input field with the filename instead. this._currentValue = this.filename; this._adjustInputWidth(); if(!this.markAsError) { dojo.removeClass(this.nodeInputTitle,"DialogError"); } dojo.addClass(this.nodeTitle, "HideElementSoft"); dojo.removeClass(this.nodeInputTitle, "HideElementSoft"); dojo.removeClass(this.nodeInputTitle.parentNode, "HideElementSoft"); dojo.addClass(this.noteEditButton, "HideElementSoft"); this.nodeInputTitle.focus(); this.nodeInputTitle.select(); setTimeout(dojo.hitch(this, function() { this.nodeInputTitle.removeAttribute("focused"); this.nodeInputTitle.className += ''; }), 1); }, _onLeaveItem: function() { // summary: Event handler for leaving the file name input field. // description: If the input value did nit change, hide the file name input field and show // the file name text again. If the value in the input field has changed, keep the input // field and mark it as changed. if(this._currentValue == this.nodeInputTitle.value && !this.markAsError) { // nothing changed, so hide the input again dojo.addClass(this.nodeInputTitle, "HideElementSoft"); dojo.removeClass(this.nodeTitle, "HideElementSoft"); dojo.removeClass(this.noteEditButton, "HideElementSoft"); } }, _adjustInputWidth: function() { // summary: Adjust the width of the input element. // description: The input width will be recalculated as the user types in a new value. this.nodeInputTitleWidthCalculator.innerHTML = this.nodeInputTitle.value || this._currentValue; this.nodeInputTitle.style.width = this.nodeInputTitleWidthCalculator.offsetWidth + 10 + "px"; } } );