http://www.mediawiki.org/wiki/Special:Code/MediaWiki/92919
Revision: 92919
Author: raindrift
Date: 2011-07-22 23:45:39 +0000 (Fri, 22 Jul 2011)
Log Message:
-----------
This extension makes article section edit links clearer. It:
- moves the links next to the section title without a parser patch
- adds a hover action that highlights the edit link when the mouse is placed
on the section
- adds an outline around the section when the mouse hovers over the link
It expands on EditSectionHiliteLink, and requires the new parser hook added in
r92506. Tested with section-spanning DIVs and seems to work in LTR.
Could use some visual cleanup, but the code is here and someone with a more
developed sense for design could take it and make it pretty. For example, that
unicode arrow could probably go.
Added Paths:
-----------
trunk/extensions/EditSectionClearerLink/
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
Added: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
===================================================================
--- trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
(rev 0)
+++ trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
2011-07-22 23:45:39 UTC (rev 92919)
@@ -0,0 +1,51 @@
+/* CSS StyleSheet for EditSectionClearerLink extensions */
+
+div.editableSection {
+ border-color: white;
+ border-width: 1px;
+ border-style: solid;
+}
+
+div.editableSection:hover {
+ /*background-color: #f9f9f9; for making section hovers more obvious */
+}
+
+div.highlightedSection {
+ background-color: #f6f6f6;
+ border-style:solid;
+ border-width:1px;
+ border-color:blue;
+}
+
+span.editSectionActive {
+ visibility: visible;
+ color: black;
+ float: none;
+}
+
+span.editSectionInactive {
+ color: gray;
+ float: none;
+}
+
+a.editSectionLinkInactive, a.editSectionLinkInactive:visited {
+ color:gray;
+}
+
+a.editSectionLinkActive, a.editSectionLinkActive:visted {
+ color: blue;
+}
+
+span.editSectionChromeActive {
+ visibility: visible;
+ color: black;
+}
+
+span.editSectionChromeInactive {
+ visibility: hidden;
+}
+
+/* someday this might actually work */
+span.editsection {
+ float: none;
+}
Property changes on:
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
___________________________________________________________________
Added: svn:eol-style
+ native
Added: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
===================================================================
--- trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
(rev 0)
+++ trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
2011-07-22 23:45:39 UTC (rev 92919)
@@ -0,0 +1,84 @@
+<?php
+/**
+ * Hooks for EditSectionClearerLink extension
+ *
+ * @file
+ * @ingroup Extensions
+ */
+
+class EditSectionClearerLinkHooks {
+
+ /* Static Functions */
+
+ /**
+ * interceptLink hook
+ */
+ public static function reviseLink($this, $nt, $section, $tooltip,
&$result) {
+ $linkName = "editSection-$section"; // the span around the link
+ $anchorName = "editSectionAnchor-$section"; // the actual link
anchor, generated in Linker::makeHeadline
+ $chromeName = "editSectionChrome-$section"; // the chrome that
surrounds the anchor
+
+ $result = preg_replace('/(\D+)( title=)(\D+)/', '${1}
class=\'editSectionLinkInactive\' id=\'' . $anchorName . '\'
onmouseover="editSectionHighlightOn(' . $section . ')"
onmouseout="editSectionHighlightOff(' . $section . ')" title=$3', $result);
+ $result = preg_replace('/<\/span>/', '<span
class="editSectionChromeInactive" id=\'' . $chromeName .
'\'>⇲</span></span>', $result);
+
+ // while resourceloader loads this extension's css pretty late,
it's still
+ // overriden by skins/common/shared.css. to get around that,
insert an explicit style here.
+ // i'd welcome a better way to do this.
+ $result = preg_replace('/(<span class=\"editsection)/', '${1}
editSectionInactive" style="float:none" id="' . $linkName, $result);
+
+ return true;
+ }
+
+ /**
+ * interceptSection hook
+ */
+ public static function reviseSection($this, $section, &$result,
$editable) {
+ // skip section 0, since it has no edit link.
+ if( $section === 0 ) {
+ return true;
+ }
+
+ // swap the section edit links to the other side. for some
reason
+ // Linker::makeHeadline places them on the left and then
they're moved
+ // to the right with a css hack. That's teh lame, but I get the
+ // feeling that changing it might make some folks unhappy. For
example,
+ // anyone else who's written a nasty kludge like this
+ $result = preg_replace(
'/(<mw\:editsection.*<\/mw:editsection>)\s*(<span
class="mw-headline".*<\/span>)/', '$2 $1', $result );
+
+ // A DIV can span sections in wikimarkup, which will break this
code. Such
+ // section-spanning DIVs are rare. If one appears, leave it
alone.
+ //
+ // count opening DIVs.
+ preg_match_all( '/(<\s*div[\s>])/i', $result, $matches );
+ $openingDivs = count( $matches[0] );
+
+ // count closing DIVs.
+ preg_match_all( '/(<\s*\/div[\s>])/i', $result, $matches );
+ $closingDivs = count( $matches[0] );
+
+ if ( $openingDivs !== $closingDivs ) {
+ return true;
+ }
+
+ // wrap everything in a div.
+ if ( $editable ) {
+ $result = '<div class="editableSection"
id="articleSection-' . $section . '"' .
+ ' onmouseover="editSectionActivateLink(\'' .
$section . '\')" onmouseout="editSectionInactivateLink(\'' . $section . '\')">'
.
+ $result .
+ '</div>';
+ } else {
+ $result = "<div class='nonEditableSection'
id='articleSection-" . $section . "'>" . $result . '</div>';
+ }
+
+ return true;
+ }
+
+ /**
+ * Load resources with ResourceLoader (in this case, CSS and js)
+ */
+ public static function addPageResources( &$outputPage, $parserOutput ) {
+ $outputPage->addModules( 'ext.editSectionClearerLink' );
+ return true;
+ }
+
+}
Property changes on:
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
___________________________________________________________________
Added: svn:eol-style
+ native
Added: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
===================================================================
--- trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
(rev 0)
+++ trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
2011-07-22 23:45:39 UTC (rev 92919)
@@ -0,0 +1,17 @@
+<?php
+/**
+ * Internationalisation file for extension EditSectionClearerLink.
+ *
+ * @file
+ * @ingroup Extensions
+ */
+
+$messages = array();
+
+/** English
+ * @author Ian Baker
+ */
+$messages['en'] = array(
+ 'editsectionclearerlink-desc' => 'Improve the usability of section edit
links with section and link hover actions',
+);
+
Property changes on:
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
___________________________________________________________________
Added: svn:eol-style
+ native
Added: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
===================================================================
--- trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
(rev 0)
+++ trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
2011-07-22 23:45:39 UTC (rev 92919)
@@ -0,0 +1,21 @@
+/* JavaScript for EditSectionClearerLink extension */
+
+function editSectionHighlightOn (section) {
+ document.getElementById("articleSection-" + section).className =
'highlightedSection';
+}
+
+function editSectionHighlightOff (section) {
+ document.getElementById("articleSection-" + section).className =
'editableSection';
+}
+
+function editSectionActivateLink (section) {
+ document.getElementById("editSection-" + section).className =
'editsection editSectionActive';
+ document.getElementById("editSectionAnchor-" + section).className =
'editSectionLinkActive';
+ document.getElementById("editSectionChrome-" + section).className =
'editSectionChromeActive';
+}
+
+function editSectionInactivateLink (section) {
+ document.getElementById("editSection-" + section).className =
'editsection editSectionInactive';
+ document.getElementById("editSectionAnchor-" + section).className =
'editSectionLinkInactive';
+ document.getElementById("editSectionChrome-" + section).className =
'editSectionChromeInactive';
+}
Property changes on:
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
___________________________________________________________________
Added: svn:eol-style
+ native
Added: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
===================================================================
--- trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
(rev 0)
+++ trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
2011-07-22 23:45:39 UTC (rev 92919)
@@ -0,0 +1,67 @@
+<?php
+/**
+ * EditSectionClearerLink extension
+ *
+ * @file
+ * @ingroup Extensions
+ *
+ * This extension makes the section edit links clearer. It:
+ * - moves the links next to the section title without a parser patch
+ * - adds a hover action that highlights the edit link when the mouse is
placed on the section
+ * - adds an outline around the section when the mouse hovers over the link
+ *
+ * It is intended to make the links easier to notice, and to clarify which
section will be edited when
+ * the link is clicked.
+ *
+ * Usage: Add the following line in LocalSettings.php:
+ * require_once(
"$IP/extensions/EditSectionClearerLink/EditSectionClearerLink.php" );
+ *
+ * Based on EditSectionHiliteLink by Arash Boostani
+ *
+ * @author Ian Baker <i...@wikimedia.org>
+ * @license GPL v2
+ * @version 0.1.0
+ */
+
+// Check environment
+if ( !defined( 'MEDIAWIKI' ) ) {
+ echo( "This is an extension to MediaWiki and cannot be run
standalone.\n" );
+ die( - 1 );
+}
+
+// Credits
+$wgExtensionCredits['other'][] = array(
+ 'path' => __FILE__,
+ 'name' => 'EditSectionClearerLink',
+ 'author' => 'Ian Baker',
+ 'version' => '0.1.0',
+ 'url' =>
'http://www.mediawiki.org/wiki/Extension:EditSectionClearerLink',
+ 'descriptionmsg' => 'editsectionclearerlink-desc',
+);
+
+// Shortcut to this extension directory
+$dir = dirname( __FILE__ ) . '/';
+
+// resources that need loading
+$wgResourceModules['ext.editSectionClearerLink'] = array(
+ 'styles' => 'EditSectionClearerLink.css',
+ 'scripts' => 'EditSectionClearerLink.js',
+ 'localBasePath' => $dir,
+ 'remoteExtPath' => 'EditSectionClearerLink'
+);
+
+$wgExtensionMessagesFiles['EditSectionClearerLink'] = $dir .
'EditSectionClearerLink.i18n.php';
+
+# Bump the version number every time you change any of the .css/.js files
+$wgEditSectionClearerLinkStyleVersion = 2;
+
+$wgAutoloadClasses['EditSectionClearerLinkHooks'] = $dir .
'EditSectionClearerLink.hooks.php';
+
+// Register edit link create hook
+$wgHooks['DoEditSectionLink'][] = 'EditSectionClearerLinkHooks::reviseLink';
+
+// Register section create hook
+$wgHooks['ParserSectionCreate'][] =
'EditSectionClearerLinkHooks::reviseSection';
+
+// Register css add script hook
+$wgHooks['OutputPageParserOutput'][] =
'EditSectionClearerLinkHooks::addPageResources';
Property changes on:
trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
___________________________________________________________________
Added: svn:eol-style
+ native
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
