Extension:EdutagsButton

From mediawiki.org
MediaWiki extensions manual
OOjs UI icon advanced-invert.svg
EdutagsButton
Release status: unmaintained
Implementation Tag
Description Creates a Edutags button.
Author(s) Hermann Schwarz (Hschwarz77talk)
Latest version 0.2.1 (2014-07-10)
MediaWiki 1.20.6
License GNU public License
Download this page

Check usage and version matrix.

What can this extension do?[edit]

Allows you to include EdutagsButton (Edutags project: www.edutags.de) in custom places on you MediaWiki site very simply. This button allows you to make bookmarks on www.edutags.de

Screenshots[edit]

MediaWiki Buttons Navigation color.png MediaWiki Buttons Navigation SW.png

MediaWiki Buttons im Text color.png MediaWiki Buttons im Text SW.png

Usage[edit]

There are 2 Edutags button you can place on your wiki site: Comment and Voting button. You can place them inside your content or in the menu panel (toolbox, navigation etc.)

Place buttons inside you content[edit]

You can place the buttons whereever you want in your content and you can give them custom style in the 'data-style' attribute.

Comment Button[edit]

<edutagsbutton data-type="comment" data-style="float:left; height: 100px; margin-left: 100px;"/>

Voting Button[edit]

<edutagsbutton data-type="vote" data-style="float:left; height: 100px; margin-left: 100px;"/>

Place buttons in the sidebar (menu bar)[edit]

Therefore edit the JavaScript file

EdutagsButton/js/edutagsSettings.json

and change the JSON-Array:

"place": use 'languages', 'toolbox' or 'navigation' to place the Edutags Buttons

"style": use 'monochrom' or 'color'

{
"place":"toolbox",
"style":"monochrom"
}

to 'languages' or 'toolbox'. Or you give no argument to this function call. In this case the buttons will be not inserted.

Download instructions[edit]

Copy and paste the code below to the file: $IP/extensions/EdutagsButton/EdutagsButton.php. Note: $IP stands for the root directory of your MediaWiki installation, the same directory that holds LocalSettings.php.

Installation[edit]

To install this extension, add the following to LocalSettings.php:

require_once("$IP/extensions/EdutagsButton/EdutagsButton.php");

Code[edit]

PHP[edit]

<?php
/**  $IP/extensions/EdutagsButton/EdutagsButton.php
 *   
 *   Wiki EdutagsButton MediaWiki extension
 *   Installation Instructions: http://www.mediawiki.org/wiki/Extension:EdutagsButton
 */
 
$wgExtensionFunctions[] = "edutagsButtonExtension";
$wgHooks['BeforePageDisplay'][] = 'onBeforePageDisplay';


function edutagsButtonExtension() {

	global $wgParser;
	global $edutagsButtonVersions;
 
	$wgParser->setHook( "edutagsbutton", "renderEdutagsButton" );

        $settings_as_JSON = file_get_contents('extensions/EdutagsButton/js/edutagsSettings.json');
        $settings = json_decode($settings_as_JSON);

	$edutagsButtonVersions = array();
	$edutagsButtonVersions['comment'] = '<button id="edutags-comment-button" class="edutags-button comment '.$settings->style.'"><i>&nbsp;</i><span>Kommentieren</span></button>';
	$edutagsButtonVersions['vote'] = '<button id="edutags-vote-button" class="edutags-button vote '.$settings->style.'"><i>&nbsp;</i><span>Bewerten</span></button>';
	$edutagsButtonVersions['tag'] = '';
}

 
function renderEdutagsButton( $input, $argv ) {

	global $edutagsButtonVersions;

	$attr = @$argv['data-type'];
	$style = @$argv['data-style'];
	
	if($attr == "comment" || $attr == "vote" || $attr = "tag") {
		$form = '<div style="' . $style . '">' . $edutagsButtonVersions[$attr] . '</div>';
	}
 
	return $form;
}


function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {

	$out->addScriptFile("/extensions/EdutagsButton/js/edutagsButton.js");
	$out->addScriptFile("/extensions/EdutagsButton/js/edutagsInit.js");

	return true;
}


$wgExtensionCredits['parserhook'][] = array(
      'name' => 'Wiki TwitterButton',
      'version' => '0.1.1',
      'author' => 'Hermann Schwarz',
      'url' => 'http://www.mediawiki.org/wiki/Extension:EdutagsButton',
      'description' => 'MediaWiki EdutagsButton Extension'
);

JavaScript[edit]

/**  $IP/extensions/EdutagsButton/js/edutagsInit.js
*    
*
* use 'languages', 'toolbox' or 'navigation' to place the Edutags Buttons
* style is 'monochrom' or 'color'
*/

var settingsAsJSON = loadJSON('/extensions/EdutagsButton/js/edutagsSettings.json');

var place = 'navigation';
var style = 'monochrom';

if(settingsAsJSON) {
	place = settingsAsJSON.place;
  style = settingsAsJSON.style;
}

edutagsJS(place, style); 




/**
* Help functions for AJAX-Request to get settings from a Settings-JSON-file
*
*/
// Loads JSON text from server hosted file and returns JSON parsed object
function loadJSON(filePath) {
  // Load json file;
  var json = loadTextFileAjaxSync(filePath, "application/json");
  // Parse json
  return JSON.parse(json);
}   

// Loads text with AJAX synchronously
function loadTextFileAjaxSync(filePath, mimeType)
{
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open("GET",filePath,false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status==200)
  {
    return xmlhttp.responseText;
  }
  else {
    return null;
  }
}


/**  $IP/extensions/EdutagsButton/js/edutagsButton.js
*    
*  
*/

edutagsJS = function(buttonContext) {

		
        var url = encodeURIComponent(document.URL);

	/**
	* initButtonsEventListener() - adds event listener for the buttons inside the content
	* initButtonsEventListener(buttonContext) - adds event listener for the buttons inside the sidebar
	*/
	(initButtonsEventListener = function(buttonContext) {

		var idPrefix = '';

		if(buttonContext) {
			idPrefix = buttonContext + '-';
		}

		edCommentButton = document.getElementById(idPrefix + 'edutags-comment-button');
		if(edCommentButton) {
			edCommentButton.onclick = function () {
				window.open('http://www.edutags.de/export/bookmarks_export/edutags_comment.php?url='+url+'&nodeTitle='+document.title
                                +'&nodeDescription='+getMetaValue("description")+'&nodeTags='+getMetaValue("keywords"),
				'Kommentieren', 'toolbar=no,width=500,height=500');
			}	
		}
	
		edVoteButton = document.getElementById(idPrefix + 'edutags-vote-button');
		if(edVoteButton) {
			edVoteButton.onclick = function () {
				window.open('http://www.edutags.de/export/bookmarks_export/edutags_voting.php?url='+url+'&nodeTitle='+document.title
                                +'&nodeDescription='+getMetaValue("description")+'&nodeTags='+getMetaValue("keywords"),
		'Kommentieren', 'toolbar=no,width=500,height=500');
			}	
		}
	})();



	/**
	* insert buttons to the sidebar
	*/
	(function (buttonContext) {
		// adds Edutags Buttons to toolbox
		ModifySidebar('add', buttonContext, 'Kommentieren', '<button id="'+buttonContext+'-edutags-comment-button" class="edutags-button comment ' + buttonContext + ' '+style+'"><i></i><span>Kommentieren</span></button>', 'Edutags');
		ModifySidebar('add', buttonContext, 'Bewerten', '<button id="'+buttonContext+'-edutags-vote-button" class="edutags-button vote '+ buttonContext +' '+style+'"><i></i><span>Bewerten</span></button>', 'Edutags');

		initButtonsEventListener(buttonContext);

	})(buttonContext);

	
	/**
	* help function: inserts a button to the sidebar
	*/
	function ModifySidebar(action, section, name, link, context) {

		try {
			switch ( section ) {
				case 'languages':
					var target = 'p-lang';
					break;
				case 'toolbox':
					var target = 'p-tb';
					break;
				case 'navigation':
					var target = 'p-navigation';
					break;
				default:
					var target = 'p-' + section;
					break;
			}
	
			if ( action == 'add' ) {

				var node = document.getElementById( target )
									.getElementsByTagName( 'div' )[0]
									.getElementsByTagName( 'ul' )[0];
				var liNode = document.createElement( 'li' );

				if(context == 'Edutags') {

					liNode.innerHTML = link;
				}
				else {
		
					var aNode = document.createElement( 'a' );
					aNode.appendChild( document.createTextNode( name ) );
					aNode.setAttribute( 'href', link );
					liNode.appendChild( aNode );
					liNode.className = 'plainlinks';
				}

				node.appendChild( liNode );
			}
	
			if ( action == 'remove' ) {
				var list = document.getElementById( target )
									.getElementsByTagName( 'div' )[0]
									.getElementsByTagName( 'ul' )[0];
	
				var listelements = list.getElementsByTagName( 'li' );
	
				for ( var i = 0; i < listelements.length; i++ ) {
					if (
						listelements[i].getElementsByTagName( 'a' )[0].innerHTML == name ||
						listelements[i].getElementsByTagName( 'a' )[0].href == link
					)
					{
						list.removeChild( listelements[i] );
					}
				}
			}
		} catch( e ) {
			// let's just ignore what's happened
			return;
		}
	}


	/**
	* help function: get meta data from HTML-header (META tags)
	*/	
	function getMetaValue(mElementName) {
	
		var metaElementsArray = document.getElementsByTagName("META");
	
		for (var i = 0; i < metaElementsArray.length; i++) {
	
			var metaElementName = metaElementsArray[i].name.toLowerCase();
	
			if (metaElementName == mElementName.toLowerCase()) {
	
				if(metaElementName == "keywords") {
	
					var keywords = metaElementsArray[i].content;
					var keywordArray = keywords.split(",");
					var keywordList = "";
	
					for(var i = 0; i < keywordArray.length; i++) {
						var keywordUntrimmed = keywordArray[i];
						
						if(i == 0) {
							keywordList += keywordUntrimmed.trim();
						} 
						else {
							keywordList += "," + keywordUntrimmed.trim();
						}
					}
	
					return keywordList;
				}
	
				return metaElementsArray[i].content;
			}
		}
		return "";
	
	}
}

JSON (Settings)[edit]

{
"place":"toolbox",
"style":"monochrom"
}

CSS[edit]

.edutags-button {
	position: relative;
	width: 112px;	
	height: 28px;
	padding: 2px 2px 2px 24px !important;
	font-size: 12px !important;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	cursor: pointer;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
	margin: 5px 0;
}

.monochrom {
	background-image: -moz-linear-gradient(top, #FFF 25%, #dedede 75%);
	background-image: -webkit-linear-gradient(top, #FFF 25%, #dedede 75%);
	background-image: -ms-linear-gradient(top, #FFF 25%, #dedede 75%);
	background-image: -o-linear-gradient(top, #FFF 25%, #dedede 75%);
	border: 1px solid #ccc;
	color: #000;
}

.color {
	background-image: -moz-linear-gradient(top, #DE8C35 25%, #E4500A 75%);
	background-image: -webkit-linear-gradient(top, #DE8C35 25%, #E4500A 75%);
	background-image: -ms-linear-gradient(top, #DE8C35 25%, #E4500A 75%);
	background-image: -o-linear-gradient(top, #DE8C35 25%, #E4500A 75%);
	border: 1px solid #E4500A;
	color: #fff;
}

.monochrom i {
	background: url('http://www.edutags.de/sites/default/files/edutags_128_white_transp_background_sw.png'); 
}

.color i {
	background: url('http://www.edutags.de/sites/default/files/edutags_128_white_transp_background.png'); 
}

.edutags-button i {
	position: absolute;
	top: 0;
	left: 0;
	background-position: 2px 2px; 
	background-size: 22px 22px;
	background-repeat: no-repeat; 
	height: 25px;
	width: 25px;
}