r92919 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r92918‎ \| r92919 \| r92920 >
Date:	23:45, 22 July 2011
Author:	raindrift
Status:	deferred (Comments)
Tags:
Comment:	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.
Modified paths:	/trunk/extensions/EditSectionClearerLink (added) (history) /trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css (added) (history) /trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php (added) (history) /trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php (added) (history) /trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js (added) (history) /trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php (added) (history)

Diff [purge]

Index: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
—	—	@@ -0,0 +1,21 @@
	2	+/* JavaScript for EditSectionClearerLink extension */
	3	+
	4	+function editSectionHighlightOn (section) {
	5	+ document.getElementById("articleSection-" + section).className = 'highlightedSection';
	6	+}
	7	+
	8	+function editSectionHighlightOff (section) {
	9	+ document.getElementById("articleSection-" + section).className = 'editableSection';
	10	+}
	11	+
	12	+function editSectionActivateLink (section) {
	13	+ document.getElementById("editSection-" + section).className = 'editsection editSectionActive';
	14	+ document.getElementById("editSectionAnchor-" + section).className = 'editSectionLinkActive';
	15	+ document.getElementById("editSectionChrome-" + section).className = 'editSectionChromeActive';
	16	+}
	17	+
	18	+function editSectionInactivateLink (section) {
	19	+ document.getElementById("editSection-" + section).className = 'editsection editSectionInactive';
	20	+ document.getElementById("editSectionAnchor-" + section).className = 'editSectionLinkInactive';
	21	+ document.getElementById("editSectionChrome-" + section).className = 'editSectionChromeInactive';
	22	+}
Property changes on: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.js
___________________________________________________________________
Added: svn:eol-style
1	23	+ native
Index: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
—	—	@@ -0,0 +1,17 @@
	2	+<?php
	3	+/**
	4	+ * Internationalisation file for extension EditSectionClearerLink.
	5	+ *
	6	+ * @file
	7	+ * @ingroup Extensions
	8	+ */
	9	+
	10	+$messages = array();
	11	+
	12	+/** English
	13	+ * @author Ian Baker
	14	+ */
	15	+$messages['en'] = array(
	16	+ 'editsectionclearerlink-desc' => 'Improve the usability of section edit links with section and link hover actions',
	17	+);
	18	+
Property changes on: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.i18n.php
___________________________________________________________________
Added: svn:eol-style
1	19	+ native
Index: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
—	—	@@ -0,0 +1,67 @@
	2	+<?php
	3	+/**
	4	+ * EditSectionClearerLink extension
	5	+ *
	6	+ * @file
	7	+ * @ingroup Extensions
	8	+ *
	9	+ * This extension makes the section edit links clearer. It:
	10	+ * - moves the links next to the section title without a parser patch
	11	+ * - adds a hover action that highlights the edit link when the mouse is placed on the section
	12	+ * - adds an outline around the section when the mouse hovers over the link
	13	+ *
	14	+ * It is intended to make the links easier to notice, and to clarify which section will be edited when
	15	+ * the link is clicked.
	16	+ *
	17	+ * Usage: Add the following line in LocalSettings.php:
	18	+ * require_once( "$IP/extensions/EditSectionClearerLink/EditSectionClearerLink.php" );
	19	+ *
	20	+ * Based on EditSectionHiliteLink by Arash Boostani
	21	+ *
	22	+ * @author Ian Baker <ian@wikimedia.org>
	23	+ * @license GPL v2
	24	+ * @version 0.1.0
	25	+ */
	26	+
	27	+// Check environment
	28	+if ( !defined( 'MEDIAWIKI' ) ) {
	29	+ echo( "This is an extension to MediaWiki and cannot be run standalone.\n" );
	30	+ die( - 1 );
	31	+}
	32	+
	33	+// Credits
	34	+$wgExtensionCredits['other'][] = array(
	35	+ 'path' => __FILE__,
	36	+ 'name' => 'EditSectionClearerLink',
	37	+ 'author' => 'Ian Baker',
	38	+ 'version' => '0.1.0',
	39	+ 'url' => 'http://www.mediawiki.org/wiki/Extension:EditSectionClearerLink',
	40	+ 'descriptionmsg' => 'editsectionclearerlink-desc',
	41	+);
	42	+
	43	+// Shortcut to this extension directory
	44	+$dir = dirname( __FILE__ ) . '/';
	45	+
	46	+// resources that need loading
	47	+$wgResourceModules['ext.editSectionClearerLink'] = array(
	48	+ 'styles' => 'EditSectionClearerLink.css',
	49	+ 'scripts' => 'EditSectionClearerLink.js',
	50	+ 'localBasePath' => $dir,
	51	+ 'remoteExtPath' => 'EditSectionClearerLink'
	52	+);
	53	+
	54	+$wgExtensionMessagesFiles['EditSectionClearerLink'] = $dir . 'EditSectionClearerLink.i18n.php';
	55	+
	56	+# Bump the version number every time you change any of the .css/.js files
	57	+$wgEditSectionClearerLinkStyleVersion = 2;
	58	+
	59	+$wgAutoloadClasses['EditSectionClearerLinkHooks'] = $dir . 'EditSectionClearerLink.hooks.php';
	60	+
	61	+// Register edit link create hook
	62	+$wgHooks['DoEditSectionLink'][] = 'EditSectionClearerLinkHooks::reviseLink';
	63	+
	64	+// Register section create hook
	65	+$wgHooks['ParserSectionCreate'][] = 'EditSectionClearerLinkHooks::reviseSection';
	66	+
	67	+// Register css add script hook
	68	+$wgHooks['OutputPageParserOutput'][] = 'EditSectionClearerLinkHooks::addPageResources';
Property changes on: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.php
___________________________________________________________________
Added: svn:eol-style
1	69	+ native
Index: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
—	—	@@ -0,0 +1,51 @@
	2	+/* CSS StyleSheet for EditSectionClearerLink extensions */
	3	+
	4	+div.editableSection {
	5	+ border-color: white;
	6	+ border-width: 1px;
	7	+ border-style: solid;
	8	+}
	9	+
	10	+div.editableSection:hover {
	11	+ /background-color: #f9f9f9; for making section hovers more obvious /
	12	+}
	13	+
	14	+div.highlightedSection {
	15	+ background-color: #f6f6f6;
	16	+ border-style:solid;
	17	+ border-width:1px;
	18	+ border-color:blue;
	19	+}
	20	+
	21	+span.editSectionActive {
	22	+ visibility: visible;
	23	+ color: black;
	24	+ float: none;
	25	+}
	26	+
	27	+span.editSectionInactive {
	28	+ color: gray;
	29	+ float: none;
	30	+}
	31	+
	32	+a.editSectionLinkInactive, a.editSectionLinkInactive:visited {
	33	+ color:gray;
	34	+}
	35	+
	36	+a.editSectionLinkActive, a.editSectionLinkActive:visted {
	37	+ color: blue;
	38	+}
	39	+
	40	+span.editSectionChromeActive {
	41	+ visibility: visible;
	42	+ color: black;
	43	+}
	44	+
	45	+span.editSectionChromeInactive {
	46	+ visibility: hidden;
	47	+}
	48	+
	49	+/* someday this might actually work */
	50	+span.editsection {
	51	+ float: none;
	52	+}
Property changes on: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.css
___________________________________________________________________
Added: svn:eol-style
1	53	+ native
Index: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
—	—	@@ -0,0 +1,84 @@
	2	+<?php
	3	+/**
	4	+ * Hooks for EditSectionClearerLink extension
	5	+ *
	6	+ * @file
	7	+ * @ingroup Extensions
	8	+ */
	9	+
	10	+class EditSectionClearerLinkHooks {
	11	+
	12	+ /* Static Functions */
	13	+
	14	+ /**
	15	+ * interceptLink hook
	16	+ */
	17	+ public static function reviseLink($this, $nt, $section, $tooltip, &$result) {
	18	+ $linkName = "editSection-$section"; // the span around the link
	19	+ $anchorName = "editSectionAnchor-$section"; // the actual link anchor, generated in Linker::makeHeadline
	20	+ $chromeName = "editSectionChrome-$section"; // the chrome that surrounds the anchor
	21	+
	22	+ $result = preg_replace('/(\D+)( title=)(\D+)/', '${1} class=\'editSectionLinkInactive\' id=\'' . $anchorName . '\' onmouseover="editSectionHighlightOn(' . $section . ')" onmouseout="editSectionHighlightOff(' . $section . ')" title=$3', $result);
	23	+ $result = preg_replace('/<\/span>/', '<span class="editSectionChromeInactive" id=\'' . $chromeName . '\'>⇲</span></span>', $result);
	24	+
	25	+ // while resourceloader loads this extension's css pretty late, it's still
	26	+ // overriden by skins/common/shared.css. to get around that, insert an explicit style here.
	27	+ // i'd welcome a better way to do this.
	28	+ $result = preg_replace('/(<span class=\"editsection)/', '${1} editSectionInactive" style="float:none" id="' . $linkName, $result);
	29	+
	30	+ return true;
	31	+ }
	32	+
	33	+ /**
	34	+ * interceptSection hook
	35	+ */
	36	+ public static function reviseSection($this, $section, &$result, $editable) {
	37	+ // skip section 0, since it has no edit link.
	38	+ if( $section === 0 ) {
	39	+ return true;
	40	+ }
	41	+
	42	+ // swap the section edit links to the other side. for some reason
	43	+ // Linker::makeHeadline places them on the left and then they're moved
	44	+ // to the right with a css hack. That's teh lame, but I get the
	45	+ // feeling that changing it might make some folks unhappy. For example,
	46	+ // anyone else who's written a nasty kludge like this
	47	+ $result = preg_replace( '/(<mw\:editsection.<\/mw:editsection>)\s(<span class="mw-headline".*<\/span>)/', '$2 $1', $result );
	48	+
	49	+ // A DIV can span sections in wikimarkup, which will break this code. Such
	50	+ // section-spanning DIVs are rare. If one appears, leave it alone.
	51	+ //
	52	+ // count opening DIVs.
	53	+ preg_match_all( '/(<\s*div[\s>])/i', $result, $matches );
	54	+ $openingDivs = count( $matches[0] );
	55	+
	56	+ // count closing DIVs.
	57	+ preg_match_all( '/(<\s*\/div[\s>])/i', $result, $matches );
	58	+ $closingDivs = count( $matches[0] );
	59	+
	60	+ if ( $openingDivs !== $closingDivs ) {
	61	+ return true;
	62	+ }
	63	+
	64	+ // wrap everything in a div.
	65	+ if ( $editable ) {
	66	+ $result = '<div class="editableSection" id="articleSection-' . $section . '"' .
	67	+ ' onmouseover="editSectionActivateLink(\'' . $section . '\')" onmouseout="editSectionInactivateLink(\'' . $section . '\')">' .
	68	+ $result .
	69	+ '</div>';
	70	+ } else {
	71	+ $result = "<div class='nonEditableSection' id='articleSection-" . $section . "'>" . $result . '</div>';
	72	+ }
	73	+
	74	+ return true;
	75	+ }
	76	+
	77	+ /**
	78	+ * Load resources with ResourceLoader (in this case, CSS and js)
	79	+ */
	80	+ public static function addPageResources( &$outputPage, $parserOutput ) {
	81	+ $outputPage->addModules( 'ext.editSectionClearerLink' );
	82	+ return true;
	83	+ }
	84	+
	85	+}
Property changes on: trunk/extensions/EditSectionClearerLink/EditSectionClearerLink.hooks.php
___________________________________________________________________
Added: svn:eol-style
1	86	+ native

Follow-up revisions

Revision	Commit summary	Author	Date
r93194	Followup r92919Ö Add extension to translatewiki.net	raymond	15:20, 26 July 2011

Past revisions this follows-up on

Revision	Commit summary	Author	Date
r92506	Refactored section assembly code to be more readable...	raindrift	23:23, 18 July 2011

Comments

#Comment by 😂 (talk | contribs) 23:50, 22 July 2011

Is there any plans to move improvements like this into core?

#Comment by Raindrift (talk | contribs) 00:07, 23 July 2011

I hope so, but I figured I'd try it out with a smaller footprint first. Putting it in core would mean not-insignificant parser changes.

Status & tagging log

01:46, 22 October 2011 Reedy (talk | contribs) changed the status of r92919 [removed: new added: deferred]