MediaWiki

Extension:EdutagsButton

MediaWiki extensions manual
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

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

ScreenshotsEdit

   

   

UsageEdit

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 contentEdit

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

Comment ButtonEdit

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

Voting ButtonEdit

<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 instructionsEdit

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.

InstallationEdit

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

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

CodeEdit

PHPEdit

<?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'
);

JavaScriptEdit

/**  $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"
}

CSSEdit

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

.monochrom {
	background-image: linear-gradient(to bottom, #FFF 25%, #dedede 75%);
	border: 1px solid #ccc;
	color: #000;
}

.color {
	background-image: linear-gradient(to bottom, #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;
}
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:EdutagsButton&oldid=5620005"