Wie ich QUOTE.fm auf meinen Blog brachte

Falls ihr nicht wisst, wer oder was QUOTE.fm ist, ist dieser Beitrag für euch wahrscheinlich komplett uninteressant. Für alle anderen versuche ich in diesem Artikel zu erklären, wie ihr meine "Fast Quote"-Funktion auf euren Blogs implementieren könnt.

Der Code

(Den kompletten Javascript-Code in einem Stück findet ihr hier).

Der Code arbeitet mit Mootools, sollte sich aber leicht umschreiben lassen. Falls ihr den Mootools-Code nutzen wollt, müsst ihr noch folgende Zeilen irgendwo in eurem Code ergänzen:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.4/mootools-yui-compressed.js"></script>

Jetzt zum eigentlichen Javascript-Code: Als erstes muss der Bereich definiert werden, der zitierbar sein soll, da ich nicht denke, dass ihr wollt, dass der Code auch für beispielsweise euren "Footer" greift. Das geht so:

var contentbox = $$('#content').getLast();

if(contentbox) {
// Hier kommt der restliche Code hin
}

Danach werden erstmal zwei Funktionen definiert:

var getSelection = function() {

	return $try(

		function() { return window.getSelection(); },

		function() { return document.getSelection(); },

		function() {

			var selection = document.selection && document.selection.createRange();

			  if(selection.text) { return selection.text; }

			return false;

		  }

	) || false;

};

var getSelectionCoords = function() {

	if($('quoteFM_span')) {

		$('quoteFM_span').destroy();

	}

var sel = document.selection, range;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
range.pasteHTML('<span id="quoteFM_span">' + "" + '</span>');
markerEl = document.getElementById(markerId);

coordinates = markerEl.getCoordinates();
}
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
if (sel.getRangeAt) {
range = sel.getRangeAt(0).cloneRange();
} else {
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);

if (range.collapsed !== sel.isCollapsed) {
range.setStart(sel.focusNode, sel.focusOffset);
range.setEnd(sel.anchorNode, sel.anchorOffset);
}
}

markerId = 'quoteFM_span';

range.collapse(false);
markerEl = document.createElement("span");
markerEl.id = markerId;
markerEl.appendChild( document.createTextNode("\ufeff") );
range.insertNode(markerEl);
range.collapse(true);

coordinates = markerEl.getCoordinates();
}
}
return coordinates;
}

(Die zweite basiert auf dem original Bookmarklet-Code von Philipp).

Im nächsten Schritt ist der eigentlich entscheidende. Denn in dem folgenden Code wird überprüft, ob etwas selektiert wurde, das QUOTE.fm-Lesezeichen eingeblendet und falls man auf dieses klickt auch die typische Sprechblase:

contentbox.addEvent('mouseup',function(e) {

	var selection = getSelection();

	if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

		if(selection && !$('quoteFM')) {

var quoteFM = new Element('div', {
'id': 'quoteFM',
'html': '<div id="quoteFM_image"></div>',
'style': 'position:absolute;left:' + parseInt(getSelectionCoords().left - 25) + 'px;top:' + parseInt(getSelectionCoords().top + getSelectionCoords().height + 5) + 'px;opacity:0;'
});

quoteFM.setStyle('display','block');

contentbox.grab(quoteFM, 'top');
quoteFM.set('tween', {duration: 'long'}).tween('opacity', [0,0.4]);

quoteFM.addEvent('click', function() {
quoteFM.set('html', '<iframe id="quoteFM_iframe" allowtransparency="true" background="transparent" src="http://quote.fm/index.php/quote/addBookmark?source=' + encodeURIComponent(document.location.href) + '"e=' + encodeURIComponent(selection) + '" border="0" frameborder="0"></iframe>');
});

quoteFM.addEvent('mouseover', function() {
if(quoteFM.getStyle('opacity') > 0) {
quoteFM.set('tween', {duration: '500'}).tween('opacity', 1);
}
});
quoteFM.addEvent('mouseout', function() {
if(quoteFM.getStyle('opacity') > 0) {
quoteFM.set('tween', {duration: '300'}).tween('opacity', 0.4);
}
});

} else if(selection) {
var quoteFM = $('quoteFM');
if(quoteFM.getStyle('opacity') != 0) {
quoteFM.setStyle('opacity', 0);
}

quoteFM.setStyle('display','block');

if($('quoteFM_iframe')) {
$('quoteFM_iframe').set('src', 'http://quote.fm/index.php/quote/addBookmark?source=' + encodeURIComponent(document.location.href) + '"e=' + encodeURIComponent(selection));

quoteFM.setStyles({
'left': parseInt(getSelectionCoords().left - 35),
'top': parseInt(getSelectionCoords().top + getSelectionCoords().height + 5)
});
} else {
quoteFM.setStyles({
'left': parseInt(getSelectionCoords().left - 25),
'top': parseInt(getSelectionCoords().top + getSelectionCoords().height + 5)
});
}
quoteFM.set('tween', {duration: 'long'}).tween('opacity', [0,0.4]);
}
}
});

Das Design

Das Design des QUOTE.fm-Lesezeichens besteht aus zwei Teilen: dem CSS-Teil und dem Bild. Das Bild könnt ihr euch hier runterladen:

(Rechtsklick drauf -> "Bild speichern unter")

Der CSS-Teil sieht wie folgt aus:

#quoteFM_image {

	background:url(../images/quotefm_prequote.png) no-repeat !important;

	cursor:pointer;

	width:auto;

	border:0px;

	padding:0px;

	box-shadow:none;

	background:transparent;

	width:50px;

	height:50px;

}

#quoteFM_iframe {
width: 410px;
height: 410px;
visibility: visible;
}

#quoteFM_span {
position: relative;
}

Falls ihr noch Fragen zum Code habt oder es bei euch einfach nicht klappen will, steht euch der Kommentarbereich gerne zur Verfügung.