2erlei/public/js/buttons.js

// <script>
/**
 * Verhalten der Buttons für Basecontent
 *
 * @version 0.6
 * @author Matthias Viehweger <kronn@kronn.de>
 * @todo document.write entfernen (HTML wird von PHP ausgegeben)
 */
function Buttons(module, fieldid) {
	this.module = module;
	this.fieldid = fieldid;

	var self = this;
}

Buttons.prototype = {
	infoColor: '#DDF2BC',
	warnColor: '#DE0842',
	special: '',

	write: function(bezeichnung , buttons) {
		var imgs = new Array();
		for( var i = 0; i < buttons.length; i++ ) {
			var html = ( buttons[i] == 'special' && this.special != '' )?
				this.special.html:
				buttonDefinition[buttons[i]].html;
			if ( html.indexOf('MODULNAME') >= 0 )	html = html.replace('-MODULNAME-', this.module);
			var id = 'button_' + bezeichnung.toLowerCase() + '_' + buttons[i];
			html = html.replace('/></a>', ' id="' + id + '" /></a>');

			// HTML ausgeben
			document.write( '\n' + html );

			// eventListener verteilen und Attribute setzen
			var elm = $(id);

			base.addEvent(elm, 'click', this.getClick, false);
			elm.setAttribute('module', bezeichnung);
			imgs[i] = elm;
		}
	},

	getClick: function(e) {
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target) return;
		var modulname = target.getAttribute('module') ;

		var part = target.id.split('_').pop();

		eval( modulname + '.press("' + part + '")');
	},

	press: function(part) {
		var action = buttonDefinition[part].action;
		var abort = buttonDefinition[part].abort;
		var type = buttonDefinition[part].type;

		this.changelinks(action, type);

		var buttons = $(this.fieldid).getElementsByTagName('img');

		if ( abort == 0 ) { // nur den Abbrechen-Button zeigen
			this.hide(buttons, type);
			Bereiche.showHelp(part);
		} else { // alle Buttons zeigen
			this.show(buttons);
			Bereiche.hideAllHelp();
			Bereiche.showHelp(this.fieldid);
		}
	},

	changelinks: function(action, type) {
		var color = '#ffff99';
		switch ( type ) {
			case 'warn':
				color = this.warnColor;
			break;

			case 'info':
				color = this.infoColor;
			break;
		}

		var zielfeld = $(this.fieldid).getElementsByTagName('ul')[0].getElementsByTagName('a');

		for (var i = 0; i < zielfeld.length; i++) {
			var zielfeldteil = zielfeld[i];
			var arr = zielfeldteil.href.split('/');

			var buttonname = arr.slice(5, arr.length).join('/');
			zielfeldteil.href = '/'+ this.module +'/'+action+'/'+buttonname;

			new Effect.Highlight(zielfeldteil.parentNode, {startcolor:  color});
		}
	},

	show: function(buttons) { // alle Buttons außer dem letzten (abbrechen) zeigen
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].className = 'knopf';
		}

		if ( Element.hasClassName(this.fieldid, 'warnung') ) {
			Element.removeClassName(this.fieldid, 'warnung');
		}

		buttons[ buttons.length - 1 ].className = 'hidden';
	},
	hide: function(buttons, type) { // nur den letzten (abbrechen) Button zeigen
		for (var i = 0; i < buttons.length; i++) {
			buttons[i].className = 'hidden';
		}

		if ( type == 'warn' && !Element.hasClassName(this.fieldid, 'warnung') ) {
			Element.addClassName(this.fieldid, 'warnung');
		}

		buttons[ buttons.length - 1 ].className = 'knopf';
	}
}

var	buttonDefinition = {
	add: {
		html: '<a href="/-MODULNAME-/add/"><img src="/public/img/admin/button_hinzufuegen.gif" width="69" height="20" alt="hinzuf&uuml;gen" /></a>',
		action: '',
		abort: '',
		type: ''
	},
	del: {
		html: '<a><img src="/public/img/admin/button_loeschen.gif" width="69" height="20" alt="l&ouml;schen" /></a>',
		action: 'delete',
		abort: 0,
		type: 'warn'
	},
	draft: {
		html: '<a><img src="/public/img/admin/button_entwurf.gif" width="69" height="20" alt="Entwurf" /></a>',
		action: 'draft',
		abort: 0,
		type: 'info'
	},
	editdata: {
		html: '<a><img class="hidden" src="/public/img/admin/button_abbrechen.gif" width="69" height="20" alt="abbrechen" /></a>',
		action: 'editdata',
		abort: 1,
		type: 'info'
	},
	publish: {
		html: '<a><img src="/public/img/admin/button_veroeffentlichen.gif" width="90" height="20" alt="Ver&ouml;ffentlichen" /></a>',
		action: 'publish',
		abort: 0,
		type: 'info'
	},
	destroy: {
		html: '<a><img src="/public/img/admin/button_loeschen.gif" width="69" height="20" alt="l&ouml;schen" /></a>',
		action: 'destroy',
		abort: 0,
		type: 'warn'
	},
	edit: {
		html: '<a><img class="hidden" src="/public/img/admin/button_abbrechen.gif" width="69" height="20" alt="abbrechen" /></a>',
		action: 'edit',
		abort: 1,
		type: 'info'
	}
};

/**
 * Rollover-Funktion für alle Buttons
 */
var Rollover = {
	mouseOvers: new Array(),
	mouseOuts: new Array(),

	init: function() {
		var nav = document.getElementById('content');
		var imgs = nav.getElementsByTagName('img');
		for (var i=0;i<imgs.length;i++) {
			if ( imgs[i].src.indexOf('admin/button') == -1 ) continue;

			base.addEvent(imgs[i], 'mouseover', Rollover.getOver, false);
			base.addEvent(imgs[i], 'mouseout', Rollover.getOut, false);

			var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));

			Rollover.mouseOuts[i] = new Image();
			Rollover.mouseOuts[i].src = imgs[i].src;
			Rollover.mouseOvers[i] = new Image();
			Rollover.mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_hover" + suffix;
			imgs[i].number = i;
		}
	},

	getOver: function(e) {
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target) return;

		target.src = Rollover.mouseOvers[target.number].src
	},
	getOut: function(e) {
		var target = window.event ? window.event.srcElement : e ? e.target : null;
		if (!target) return;
		var number = target.getAttribute('number');

		target.src = Rollover.mouseOuts[target.number].src
	}
};

base.addEvent(window, 'load', Rollover.init, false);