Hallo Wolfgang,
danke für den Link. Wieder eine gute Sache mehr für Foren-Admins.

Ich weiß nur noch, dass ich damals selbst einige Probleme damit hatte, es in die Symbolbar einzubauen.
Beim Bearbeiten der Symbolbar im Adminbereich sah der Colorpicker in der Vorschau auch nach erfolgreichem Einbau immer noch anders aus. Die Tabelle wurde z.B. viel zu groß eingebunden (s. Screenshot).
Das hat sich dann aber mit Einführung der neuen Symbolbar erledigt, da man dort ja nur den HTML-Code reinkopiert.
Super auch, dass du die Anpassungen so durchführen konntest, damit es jetzt auch im Standard-Template funktioniert.

Weiter so und nochmals danke...

Hallo Wolfgang,
eigentlich eine gute Idee mit dem Wechseln der Schriftfarbe. Ich habe die Funktion pickColor() nun so erweitert, dass die Schriftfarbe nun genau in die Komplementär-Farbe des Hintergrunds umgewandelt wird. Nebenbei sind dafür dann auch Funktionen reingekommen, um Dezimal in Hexadezimal und umgekehrt umzuwandeln. Die Testdatei findest du im Anhang, der relevante Code befindet sich innerhalb des Bodys.


Wenn du einen Kasten um die Schrift haben möchtest, müsstest du in das TD mit der ID chosenColor noch ein SPAN o.ä. einfügen, welchem du eine zur Schrift kontrastreiche Hintergrundfarbe vergeben kannst. Da die Farbe dann aber nicht mehr im TD direkt steht, müssen das Einfügen beim Klick auf eine Farbe und das Auslesen beim Klick auf die letzte Farbe auf das neue SPAN umgeleitet werden.

Dafür ändern sich Anweisungen in folgenden Funktionen:

jla.innerHTML=artabus;
… wird zu …
jla.getElementsByTagName('span')[0].innerHTML=artabus;
 

choose.innerHTML
… wird zweimal zu …
choose.getElementsByTagName('span')[0].innerHTML
 

Hallo Wolfgang,
schade, dass der IE wieder Probleme macht. Dabei sollten aber die neu hinzugekommenen Funktionen wie parseInt, Math.pow und toString keine Probleme machen …
Aber Klasse, dass die andere Variante so gut funktioniert.

Wirklich neu ist eigentlich nur die bessere Lesbarkeit der Schrift, welche den zuletzt ausgewählten Farbcode anzeigt. Sie kann entweder mit einem Rahmen umgeben werden, innerhalb dessen man die Schrift immer gut erkennen kann, oder auch einfach die Komplementärfarbe der letzten Auswahl annehmen. Bei der Auswahl von Schwarz wäre die Schrift also weiß und umgekehrt, da die vorher immer schwarze Schrift auf allen dunklen Farben schlecht erkennbar waren.

Mit neuen Funktionen waren eigentlich nur in der Testdatei neu hinzugekommene Aufrufe von JavaScript-Methoden gemeint, um die Komplementärfarbe bilden zu können.

Hallo ihr beiden,

ich habe mir das natürlich gleich mal angeschaut. Probleme gibt es, weil die Symbolbar mehrmals geladen wird. Der Aufruf von document.write, nachdem eine Seite bereits komplett geladen wurde, ersetzt deren Inhalt. Beim Wechsel auf PM schreiben passiert eben genau das, die Seite wird nicht gewechselt und neu aufgebaut, sondern die Symbolbar nochmals (dynamisch) dazugeladen. Ich würde jetzt auch nicht so weit gehen und das direkt als fehlerhaft bezeichnen. Immerhin stammt das ursprüngliche Skript aus 2009. In der Zeit lernt man einiges dazu und die Entwicklungen an der Symbolbar sind im Voraus auch nicht wirklich abzusehen. Der Fehler wegen dem nicht vorhandenen Element tab_color trat z.B. nur auf, weil es im Gegensatz zu früher einmal eben nicht mehr da ist (wann auch immer das letztlich verloren ging …).

Generell finde ich document.write selbst nicht sonderlich toll, habe es damals aber aus dem Basisskript so übernommen und nicht noch extra umgeschrieben. Aber ich finde das jetzt auch nicht ein allzu großes Problem, immerhin etwickelt sich "das Internet" ständig weiter. Ist etwas nicht mehr ganz aktuell, wird es eben wieder aktualisiert. So habe ich das jetzt mit dem Colorpicker getan. Der Quellcode wurde überarbeitet und modernisiert. So habe ich Skript, Style und HTML-Code in einer Testseite weitestgehend getrennt. Natürlich kann alles zusammen auch als HTML-Code in die Iconbar übernommen werden, da der Einsatz im Forum wahrscheinlich nach wie vor den Hauptzweck darstellt.

Eingeflossen sind u.a. das Update für die komplementäre Textfarbe im Feld der zuletzt ausgewählten Farbe, der Bugfix wegen document.write für das neue Profilupdate und die Verwendung von jQuery (welches inzwischen in allen Foren verfügbar sein müsste). Zusätzlich wurde die äußere Tabelle durch DIV-Container ersetzt.


Shogun und Ingmar haben bereits angefangen zu diskutieren, ob Xobor für das Skript-Update verantwortlich ist. Das ist natürlich eine schwierige Problematik. Da grundsätzlich beliebig viele und unterschiedliche Skripte eingebaut werden können, kann das Xobor-Team gar nicht alle kennen und testen. Natürlich unschön, wenn dann ein inzwischen wohl doch weit verbreitetes Skript plötzlich nicht mehr funktioniert. Weil ich aktuell nicht im Support-Forum vorbeigeschaut habe, bin ich auch erst durch eure Beiträge hier auf den neuen "Bug" aufmerksam geworden, danke dafür! In vielen Beiträgen ging der Bezug zu diesem Thread verloren, wodurch viele noch das erste Skript oder irgendeine Abwandlung davon bei sich eingebaut haben. Die Leute, welche es also beiläufig irgendwo aufgeschnappt haben, sind durchaus selbst für die Instandhaltung verantwortlich. So wurde das Skript von vielen, wie z.B. durch martali beschrieben, in irgendeinem Beitrag im Support-Forum aufgefunden, ohne zu wissen, woher es kommt oder was es macht. Insofern hat Ingmar schon recht mit dem potentiellen Sicherheitsrisiko. Man sollte also schon wissen, was das Skript macht oder jemanden kennen, der es tut. Ich kann euch natürlich versichern, dass ich nichts schadhaftes in eure Foren einschließen möchte. (you can trust me … )

Meiner Meinung nach ist ein offizieller Colorpicker aber schon längst überflüssig. Anstatt die begrenzte Farbauswahl komplett zu entfernen, entschied ich mich damals jedenfalls dazu, einfach selbst eine erweiterte Auswahl anzubieten. Ich glaube auch, dass damals schon eine entsprechende Nachfrage nach einem Colorpicker bestand. Inzwischen wurde im Admin-Menü tatsächlich einer eingeführt, aber leider wurde nie einer in die Symbolbar integriert. Falls ihr euch übrigens für den Admin-Colorpicker interessiert, es handelt sich dabei um ein jQuery-Plugin. Natürlich gibt es auch noch weitere Plugins wie z.B. dieser umfangreiche oder der kleine HSL-Colorpicker. Ich persönlich hoffe auch darauf, dass die Farbauswahl mit HTML5 bald bei den meisten Nutzern verfügbar ist und dann auch hoffentlich irgendwie passend/vereinheitlicht eingebaut werden kann.


Leider wurde der Thread im Support-Forum bereits geschlossen. Daher werde ich gleich nur noch einen kurzen Hinweis im Beitrag Schriftfarbe durch Colour-Picker? hinterlassen. Eine extra Beispiel-Seite mit dem neuen Color-Picker findet ihr im Anhang und ein "HTML-Code" zur direkten Verwendung in der Iconbar folgt direkt am Ende dieses Beitrags.


Vielen Dank nochmal für eure Rückmeldung!

Florian


P.S.:
Beim mehrmaligen Wechsel zwischen den Tabs im Profil setzt die Funktionalität des Color-Pickers aus. Ich vermute ein mehrmaliges Neuladen der Symbolbar und damit auftretenden Problemen bei den Event-Handlern. Aber zumindest wird mit diesem Update nicht mehr die komplette Seite mit dem Color-Picker ersetzt und bei erstmaligem Aufruf eines Tabs funktioniert noch alles.

<style type="text/css">
	#cpicker {
		width: 174px;
		height: 156px;
		padding: 8px;
		margin: 0 auto;
		border: 1px dotted #666;
		background-color: #f6f6f6;
	}
	#cpicker .cpbase table {
		cursor: pointer;
	}
	#cpicker .previewColor {
		float: right;
		width: 40px;
		height: 128px;
		margin-bottom: 4px;
	}
	#cpicker .chosenColor {
		clear: both;
		line-height: 26px;
		/*text-align: center;*/
		padding-left: 2px;
		cursor: pointer;
	}
 
	/* Xobor Iconbar-Fixes */
	.xob_iconlist div #cpicker {
		width: auto;
		height: auto;
		min-width: 174px;
		min-height: 156px;
	}
	.xob_iconlist div #cpicker .chosenColor {
		float: none;
	}
</style>
 

<br />
<div class="xob_icon_cont">
	<div id="cpicker">
		<div class="previewColor"></div>
		<div class="cpbase">
			<!-- Farbtabelle -->
		</div>
		<div class="chosenColor"></div>
	</div>
</div>
 

<script type="text/javascript">
/*<![CDATA[*/
 
	/**
	 * @author Florian Zier
	 * @link http://forum.florian-zier.de
	 *
	 * @see http://www.interclasse.com/scripts/colorpicker.php
	 */
	// addColorPicker()
	var artabus = '';
	$(document).ready(function(e){
		var total = 1657;
		var aR = new Array(total);
		var aG = new Array(total);
		var aB = new Array(total);
		for (var i = 0; i < 256; i++) {
			aR[i + 510] = aR[i + 765]  = aG[i + 1020] = aG[i + 5 * 255] = aB[i]       = aB[i + 255]  = 0;
			aR[510 - i] = aR[i + 1020] = aG[i]        = aG[1020 - i]    = aB[i + 510] = aB[1530 - i] = i;
			aR[i]       = aR[1530- i ] = aG[i + 255]  = aG[i + 510]     = aB[i + 765] = aB[i + 1020] = 255;
			if (i < 255) {
				aR[i / 2 + 1530] = 127;
				aG[i / 2 + 1530] = 127;
				aB[i / 2 + 1530] = 127;
			}
		}
		var hexbase = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
		var jl = new Array();
		for (var x = 0; x < 16; x++) {
			for (var y = 0; y < 16; y++) {
				jl.push(hexbase[x] + hexbase[y]);
			}
		}
 
		var colortable = $('<table></table>').attr('border', 0).attr('cellspacing', 0).attr('cellpadding', 0); // width="126" height="126"
		// pickColor()
		colortable.click(function(e){
			var jla = $('#cpicker .chosenColor');
			jla.html(artabus);
			jla.css('background-color', artabus);
 
			var cColorDec	= hex2dec('FFFFFF') - hex2dec(artabus.substr(1));
			var cColorHex	= dec2hex(cColorDec, 6);
			jla.css('color', '#' + cColorHex);
 
			insert('[style=color:' + artabus + ']', '[/style]');
		});
 
		var H = W = 63;
		for (var Y = 0; Y <= H; Y++){
			var row = $('<tr></tr>').attr('height', 2);
			var j   = Math.round(Y * (510 / (H + 1)) - 255);
 
			for (var X = 0; X <= W; X++){
				var i = Math.round(X * (total / W));
				var R = aR[i] - j;
 
				if (R < 0)
					R = 0;
				if (R > 255 || isNaN(R))
					R = 255;
				var G = aG[i] - j;
				if (G < 0)
					G = 0;
				if (G > 255 || isNaN(G))
					G = 255;
				var B = aB[i] - j;
				if (B < 0)
					B = 0;
				if (B > 255 || isNaN(B))
					B = 255;
 
				var column = $('<td></td>').attr('width', 2).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]);
				// showColor(e)
				column.mouseover(function(e){
					artabus = $(this).attr('bgcolor');
					$('#cpicker .previewColor').css('background-color', artabus);
				});
				row.append(column);
			}
			colortable.append(row);
		}
		$('#cpicker .cpbase').empty().append(colortable);
	});
 
	$(document).ready(function(e){
		// lastColor(choose)
		$('#cpicker .chosenColor').click(function(){
			if ($(this).html()) {
				insert('[style=color:' + $(this).html() + ']', '[/style]');
			}
		});
	});
 
	/*
	 * Berechnung der Komplementärfarbe durch Umrechnung [hex <-> dec]:
	 * http://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript/9034019#9034019
	 * http://forum.die-staemme.de/showthread.php?90979-Komplement%C3%A4r-von-Hexfarbe-mit-Javascript#post1413160
	 */
	function hex2dec(hexNumber) {
		return parseInt(hexNumber, 16);
	}
	function dec2hex(decNumber, chars) {
		if (Number(chars)) {
			// Mit führenden Nullen:
			return (decNumber + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
		}
		// Ohne führende Nullen:
		return decNumber.toString(16).toUpperCase();
	}
 
/*]]>*/
</script>
 

Hallo River,

danke für das Kompliment. Ich denke im Endeffekt wird Xobor nach wie vor viel durch die Community getragen. Wir alle sind alle irgendwie ein Teil des großen Ganzen. Letztlich ist es doch schön zu sehen, wie sich alles weiterentwickelt. Ihr tragt ja auch permanent einen großen Teil dazu bei. Letztlich findet man die üblichen Verdächtigen immer wieder über verschiedene Foren verteilt und öfter auch mal im Support-Forum, auch wenn sich die Nicknamen ab und zu mal unterscheiden.


Mit dem Plugin-System von Xobor werde ich mich wohl auch noch auseinandersetzen. Beim Modernisieren von alten Skripten können wenigstens neue Erfahrungen einfließen. Die Browserunabhängigkeit verbessert sich durch die Verwendung von jQuery natürlich auch meistens beträchtlich. Dem ColorPicker hat die Verjüngungskur bestimmt alles andere als geschadet.

Ich bin auch zuversichtlich, dass der Bug beim Tab-Wechsel im neuen Profil (der ColorPicker funktioniert danach nicht mehr), auch bald behoben sein wird. Das Problem tritt eben bei dieser bestimmten Konstellation auf, ein Bug-Report ist bereits raus und das Problem kann relativ leicht behoben werden.


Inzwischen ist mir noch aufgefallen, dass der Cursor für alle Elemente in der Symbol auf das Hand-Symbol gesetzt wird. Für den ColorPicker empfehle ich noch folgende zwei Änderungen, um besser nachvollziehen zu können, was wirklich angeklickt werden kann und wie.

Die Style-Anweisung für #cpicker ergänzen …:

#cpicker {
	[…]
	cursor: initial;
}
 

… und den Cursor bei der Tabelle am besten durch ein Fadenkreuz ersetzen:

#cpicker .cpbase table {
	cursor: crosshair;
}
 

Nochmal alles zusammen:

<style type="text/css">
	#cpicker {
		width: 174px;
		height: 156px;
		padding: 8px;
		margin: 0 auto;
		border: 1px dotted #666;
		background-color: #f6f6f6;
		cursor: initial;
	}
	#cpicker .cpbase table {
		cursor: crosshair;
	}
	#cpicker .previewColor {
		float: right;
		width: 40px;
		height: 128px;
		margin-bottom: 4px;
	}
	#cpicker .chosenColor {
		clear: both;
		line-height: 26px;
		/*text-align: center;*/
		padding-left: 2px;
		cursor: pointer;
	}
 
	/* Xobor Iconbar-Fixes */
	.xob_iconlist div #cpicker {
		width: auto;
		height: auto;
		min-width: 174px;
		min-height: 156px;
	}
	.xob_iconlist div #cpicker .chosenColor {
		float: none;
	}
</style>
 
 
<br />
<div class="xob_icon_cont">
	<div id="cpicker">
		<div class="previewColor"></div>
		<div class="cpbase">
			<!-- Farbtabelle -->
		</div>
		<div class="chosenColor"></div>
	</div>
</div>
 
 
<script type="text/javascript">
/*<![CDATA[*/
 
	/**
	 * @author Florian Zier
	 * @link http://forum.florian-zier.de
	 *
	 * @see http://www.interclasse.com/scripts/colorpicker.php
	 */
	// addColorPicker()
	var artabus = '';
	$(document).ready(function(e){
		var total = 1657;
		var aR = new Array(total);
		var aG = new Array(total);
		var aB = new Array(total);
		for (var i = 0; i < 256; i++) {
			aR[i + 510] = aR[i + 765]  = aG[i + 1020] = aG[i + 5 * 255] = aB[i]       = aB[i + 255]  = 0;
			aR[510 - i] = aR[i + 1020] = aG[i]        = aG[1020 - i]    = aB[i + 510] = aB[1530 - i] = i;
			aR[i]       = aR[1530- i ] = aG[i + 255]  = aG[i + 510]     = aB[i + 765] = aB[i + 1020] = 255;
			if (i < 255) {
				aR[i / 2 + 1530] = 127;
				aG[i / 2 + 1530] = 127;
				aB[i / 2 + 1530] = 127;
			}
		}
		var hexbase = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
		var jl = new Array();
		for (var x = 0; x < 16; x++) {
			for (var y = 0; y < 16; y++) {
				jl.push(hexbase[x] + hexbase[y]);
			}
		}
 
		var colortable = $('<table></table>').attr('border', 0).attr('cellspacing', 0).attr('cellpadding', 0); // width="126" height="126"
		// pickColor()
		colortable.click(function(e){
			var jla = $('#cpicker .chosenColor');
			jla.html(artabus);
			jla.css('background-color', artabus);
 
			var cColorDec	= hex2dec('FFFFFF') - hex2dec(artabus.substr(1));
			var cColorHex	= dec2hex(cColorDec, 6);
			jla.css('color', '#' + cColorHex);
 
			insert('[style=color:' + artabus + ']', '[/style]');
		});
 
		var H = W = 63;
		for (var Y = 0; Y <= H; Y++){
			var row = $('<tr></tr>').attr('height', 2);
			var j   = Math.round(Y * (510 / (H + 1)) - 255);
 
			for (var X = 0; X <= W; X++){
				var i = Math.round(X * (total / W));
				var R = aR[i] - j;
 
				if (R < 0)
					R = 0;
				if (R > 255 || isNaN(R))
					R = 255;
				var G = aG[i] - j;
				if (G < 0)
					G = 0;
				if (G > 255 || isNaN(G))
					G = 255;
				var B = aB[i] - j;
				if (B < 0)
					B = 0;
				if (B > 255 || isNaN(B))
					B = 255;
 
				var column = $('<td></td>').attr('width', 2).attr('bgcolor', '#' + jl[R] + jl[G] + jl[B]);
				// showColor(e)
				column.mouseover(function(e){
					artabus = $(this).attr('bgcolor');
					$('#cpicker .previewColor').css('background-color', artabus);
				});
				row.append(column);
			}
			colortable.append(row);
		}
		$('#cpicker .cpbase').empty().append(colortable);
	});
 
	$(document).ready(function(e){
		// lastColor(choose)
		$('#cpicker .chosenColor').click(function(){
			if ($(this).html()) {
				insert('[style=color:' + $(this).html() + ']', '[/style]');
			}
		});
	});
 
	/*
	 * Berechnung der Komplementärfarbe durch Umrechnung [hex <-> dec]:
	 * http://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript/9034019#9034019
	 * http://forum.die-staemme.de/showthread.php?90979-Komplement%C3%A4r-von-Hexfarbe-mit-Javascript#post1413160
	 */
	function hex2dec(hexNumber) {
		return parseInt(hexNumber, 16);
	}
	function dec2hex(decNumber, chars) {
		if (Number(chars)) {
			// Mit führenden Nullen:
			return (decNumber + Math.pow(16, chars)).toString(16).slice(-chars).toUpperCase();
		}
		// Ohne führende Nullen:
		return decNumber.toString(16).toUpperCase();
	}
 
/*]]>*/
</script>
 

Zitat von River

---

LOL. Na, die anderen schon, bei mir bezweifle ich das.

---

Ich bezweifle das nicht so. Immerhin spielst du bereits eine tragende Rolle im FoXum. Und wenn ich allein schon die vielen Beiträge dort sehe, frage ich mich, wie ihr die alle überhaupt in der Zeit verfassen konntet. Damit es in Zukunft noch mehr werden, kommt jetzt hier eine ganz unauffällige Werbung ==> friends-of.xobor.de <==

Zitat von River

---

Andererseits habe ich ja Zeit - muss ja nicht in zwei Monaten mein Diplom bestehen. XD

---

Da stimme ich dir auf jeden Fall zu. Es kommt darauf an, überhaupt etwas lernen zu wollen. Wenn ich mir überlege, wie viel Zeit ich mich mit manchen Sachen beschäftigt habe … Auch ich stehe immer mal wieder etwas planlos da, auch wenn das alles irgendwie (bald) mein "Beruf" ist. Es gibt eine Unmenge zu lernen, zum Glück auch Internet. Früher musste man ja angeblich noch Ewigkeiten in einer Bücherei suchen, um ein langweiliges Fachbuch zu finden, wird zumindest so überliefert.

Zitat von River

---

Das Pluginsystem solltest du dir unbedingt anschauen

---

Das Pluginsystem habe ich mir tatsächlich erst kurz vorher mal angesehen. Ist natürlich eine tolle Sache, vor allem wenn ich irgendwann mal nicht mehr manuell das Template aktualisieren muss. Mal schauen, ob sich alles auch so toll umschreiben lässt. Das ist neben dem FoXum meine Übungswiese, das eigene Bedanken-Skript wird z.B. bestimmt 'ne harte Nuss. Schade, dass ich das nicht als Plugin veröffentlichen darf. Xobor verbietet ja das Bereitstellen von Plugins mit Premiumfunktionen. Verstehe ich aber natürlich auch, die wollen ja auch leben. Hoffe trotzdem, dass noch einige zukünftige gute Ideen irgendwann mal im Plugin-Store landen werden.

Zitat von River

---

Besonders gefällt mir eure Fachsimpelei, und dass dann sogar diese Programmierer von heute ellenlange lineare Texte anstelle von Scripten da in die Beitragsfelder posten.

---

Ab und zu artet das vielleicht auch mal zu sehr aus. Einerseits soll's fachlich korrekt sein, andererseits leicht verständlich. Manchmal ist es dann bestimmt weder das eine noch das andere. Dann müsst ihr mir einfach auf die Finger klopfen und nochmal nachfragen, dann versuche ich es nochmal besser zu beschreiben.

Zitat von River

---

Ja, ich denke, wir sehen uns, und ich freu mich.

---

Ich denke jetzt werden wir auf jeden Fall noch öfter voneinander hören. Sind ja inzwischen doch einige Foren, in denen wir uns aufhalten.


Grüße
Florian

Hallo Wolfgang,

das Fadenkreuz ist nichts anderes als ein Cursor aus dem Betriebssystem. Es gibt für mehrere verschiedene Zustände angepasste Varianten für den Mauszeiger. Bei Programmstart sah man früher die berühmt berüchtigte Sanduhr. Oder an Fenster-Kanten werden Pfeile zur Skalierung angezeigt. Das Fadenkreuz ist im Prinzip also nichts anderes, per CSS kannst du nur bestimmen, welches Icon aus dem Set für System-Mauszeiger verwendet werden soll. Das Aussehen unterscheidet sich je nach Betriebssystem.

Falls du dennoch das Fadenkreuz anpassen möchtest, müsstest du einen eigenen Cursor bereitstellen. Ein Fadenkreuz mit einer kleinen Lücke in der Mitte würde sich beim Colorpicker bestimmt gut machen, damit man genau dort noch die darunterliegende Farbe erkennen kann.