* (bug 2111) Collapsable exif metadata table, clean up display

List of non-collapsing fields is in [[MediaWiki:Metadata-fields]].
Intro paragraph is in [[MediaWiki:Metadata-help]].

diff --git a/RELEASE-NOTES b/RELEASE-NOTES
index 0b5aa9f..220afa5 100644 (file)
--- a/RELEASE-NOTES
+++ b/RELEASE-NOTES
@@ -260,6 +260,7 @@ fully support the editing toolbar, but was found to be too confusing.
 * (bug 4090) Fix diff links in Special:Recentchangeslinked
 * (bug 4093) '&bot=1' in Special:Contributions now propagate to other links
 * Fix display of old recentchanges records for page moves
+* (bug 2111) Collapsable exif metadata table, clean up display
 
 
 === Caveats ===

diff --git a/includes/Exif.php b/includes/Exif.php
index d6bb138..8e71986 100644 (file)
--- a/includes/Exif.php
+++ b/includes/Exif.php
@@ -994,6 +994,23 @@ class FormatExif {
                        case 'Software':
                                $tags[$tag] = $this->msg( $tag, '', $val );
                                break;
+                       
+                       case 'ExposureTime':
+                               // Show the pretty fraction as well as decimal version
+                               $tags[$tag] = wfMsg( 'exif-exposuretime-format',
+                                       $val, $this->formatNum( $val ) );
+                               break;
+                       
+                       case 'FNumber':
+                               $tags[$tag] = wfMsg( 'exif-fnumber-format',
+                                       $this->formatNum( $val ) );
+                               break;
+                       
+                       case 'FocalLength':
+                               $tags[$tag] = wfMsg( 'exif-focallength-format',
+                                       $this->formatNum( $val ) );
+                               break;
+                       
                        default:
                                $tags[$tag] = $this->formatNum( $val );
                                break;

diff --git a/includes/ImagePage.php b/includes/ImagePage.php
index 9531f24..1ffa52d 100644 (file)
--- a/includes/ImagePage.php
+++ b/includes/ImagePage.php
@@ -44,8 +44,6 @@ class ImagePage extends Article {
                                $wgOut->addHTML($this->showTOC($showmeta));
 
                        $this->openShowImage();
-                       if ($exif)
-                               $wgOut->addWikiText($this->makeMetadataTable($exif));
 
                        # No need to display noarticletext, we use our own message, output in openShowImage()
                        if( $this->getID() ) {
@@ -69,6 +67,16 @@ class ImagePage extends Article {
                        $this->closeShowImage();
                        $this->imageHistory();
                        $this->imageLinks();
+                       if( $exif ) {
+                               global $wgStylePath;
+                               $expand = htmlspecialchars( wfEscapeJsString( wfMsg( 'metadata-expand' ) ) );
+                               $collapse = htmlspecialchars( wfEscapeJsString( wfMsg( 'metadata-collapse' ) ) );
+                               $wgOut->addHTML( "<h2 id=\"metadata\">" . wfMsgHtml( 'metadata' ) . "</h2>\n" );
+                               $wgOut->addWikiText( $this->makeMetadataTable( $exif ) );
+                               $wgOut->addHTML(
+                                       "<script type=\"text/javascript\" src=\"$wgStylePath/common/metadata.js\"></script>\n" .
+                                       "<script type=\"text/javascript\">attachMetadataToggle('mw_metadata', '$expand', '$collapse');</script>\n" );
+                       }
                } else {
                        Article::view();
                }
@@ -85,10 +93,10 @@ class ImagePage extends Article {
        function showTOC( $metadata ) {
                global $wgLang;
                $r = '<ul id="filetoc">
-                       <li><a href="#file">' . $wgLang->getNsText( NS_IMAGE ) . '</a></li>' .
-                       ($metadata ? '<li><a href="#metadata">' . wfMsgHtml( 'metadata' ) . '</a></li>' : '') . '
+                       <li><a href="#file">' . $wgLang->getNsText( NS_IMAGE ) . '</a></li>
                        <li><a href="#filehistory">' . wfMsgHtml( 'imghistory' ) . '</a></li>
-                       <li><a href="#filelinks">' . wfMsgHtml( 'imagelinks' ) . '</a></li>
+                       <li><a href="#filelinks">' . wfMsgHtml( 'imagelinks' ) . '</a></li>' .
+                       ($metadata ? '<li><a href="#metadata">' . wfMsgHtml( 'metadata' ) . '</a></li>' : '') . '
                </ul>';
                return $r;
        }
@@ -102,17 +110,40 @@ class ImagePage extends Article {
         * @return string
         */
        function makeMetadataTable( $exif ) {
-               $r = "{| class=metadata align=right width=250px\n";
-               $r .= '|+ id=metadata | '. wfMsg( 'metadata' )  . "\n";
+               $r = wfMsg( 'metadata-help' ) . "\n\n";
+               $r .= "{| id=mw_metadata class=mw_metadata\n";
+               $visibleFields = $this->visibleMetadataFields();
                foreach( $exif as $k => $v ) {
                        $tag = strtolower( $k );
                        $msg = wfMsg( "exif-$tag" );
-                       
-                       $r .= "! class=$tag | $msg\n";
-                       $r .= "| class=$tag | $v\n";
-                       $r .= "|-\n";
+                       $class = "exif-$tag";
+                       if( !in_array( $tag, $visibleFields ) ) {
+                               $class .= ' collapsable';
+                       }
+                       $r .= "|- class=\"$class\"\n";
+                       $r .= "!| $msg\n";
+                       $r .= "|| $v\n";
+               }
+               $r .= '|}';
+               return $r;
+       }
+       
+       /**
+        * Get a list of EXIF metadata items which should be displayed when
+        * the metadata table is collapsed.
+        *
+        * @return array of strings
+        * @access private
+        */
+       function visibleMetadataFields() {
+               $fields = array();
+               $lines = explode( "\n", wfMsgForContent( 'metadata-fields' ) );
+               foreach( $lines as $line ) {
+                       if( preg_match( '/^\\*\s*(.*?)\s*$/', $line, $matches ) ) {
+                               $fields[] = $matches[1];
+                       }
                }
-               return substr($r, 0, -3) . '|}';
+               return $fields;
        }
 
        /**

diff --git a/includes/Skin.php b/includes/Skin.php
index 0fa5468..3560140 100644 (file)
--- a/includes/Skin.php
+++ b/includes/Skin.php
@@ -79,7 +79,7 @@ class Skin extends Linker {
        }
 
        /** @return string path to the skin stylesheet */
-       function getStylesheet() { return 'common/wikistandard.css'; }
+       function getStylesheet() { return 'common/wikistandard.css?1'; }
 
        /** @return string skin name */
        function getSkinName() {

diff --git a/languages/Language.php b/languages/Language.php
index 602b4e6..72304ff 100644 (file)
--- a/languages/Language.php
+++ b/languages/Language.php
@@ -1849,6 +1849,18 @@ ta[\'ca-nstab-category\'] = new Array(\'c\',\'View the category page\');
 
 # Metadata
 'metadata' => 'Metadata',
+'metadata-help' => 'This file contains additional information, probably added from the digital camera or scanner used to create or digitize it. If the file has been modified from its original state, some details may not fully reflect the modified image.',
+'metadata-expand' => 'Show extended details',
+'metadata-collapse' => 'Hide extended details',
+'metadata-fields' => 'EXIF metadata fields listed in this message will
+be included on image page display when the metadata table
+is collapsed. Others will be hidden by default.
+* make
+* model
+* datetimeoriginal
+* exposuretime
+* fnumber
+* focallength',
 
 # Exif tags
 'exif-imagewidth' =>'Width',
@@ -1897,7 +1909,9 @@ ta[\'ca-nstab-category\'] = new Array(\'c\',\'View the category page\');
 'exif-subsectimeoriginal' =>'DateTimeOriginal subseconds',
 'exif-subsectimedigitized' =>'DateTimeDigitized subseconds',
 'exif-exposuretime' =>'Exposure time',
+'exif-exposuretime-format' => '$1 sec ($2)',
 'exif-fnumber' =>'F Number',
+'exif-fnumber-format' =>'f/$1',
 'exif-exposureprogram' =>'Exposure Program',
 'exif-spectralsensitivity' =>'Spectral sensitivity',
 'exif-isospeedratings' =>'ISO speed rating',
@@ -1912,6 +1926,7 @@ ta[\'ca-nstab-category\'] = new Array(\'c\',\'View the category page\');
 'exif-lightsource' =>'Light source',
 'exif-flash' =>'Flash',
 'exif-focallength' =>'Lens focal length',
+'exif-focallength-format' =>'$1 mm',
 'exif-subjectarea' =>'Subject area',
 'exif-flashenergy' =>'Flash energy',
 'exif-spatialfrequencyresponse' =>'Spatial frequency response',

diff --git a/skins/CologneBlue.php b/skins/CologneBlue.php
index 27ad32c..f2d2558 100644 (file)
--- a/skins/CologneBlue.php
+++ b/skins/CologneBlue.php
@@ -18,7 +18,7 @@ if( !defined( 'MEDIAWIKI' ) )
 class SkinCologneBlue extends Skin {
 
        function getStylesheet() {
-               return "common/cologneblue.css";
+               return "common/cologneblue.css?1";
        }
        function getSkinName() {
                return "cologneblue";

diff --git a/skins/MonoBook.php b/skins/MonoBook.php
index 54a8c8e..32ebab1 100644 (file)
--- a/skins/MonoBook.php
+++ b/skins/MonoBook.php
@@ -56,7 +56,7 @@ class MonoBookTemplate extends QuickTemplate {
     <meta http-equiv="Content-Type" content="<?php $this->text('mimetype') ?>; charset=<?php $this->text('charset') ?>" />
     <?php $this->html('headlinks') ?>
     <title><?php $this->text('pagetitle') ?></title>
-    <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/main.css?1"; /*]]>*/</style>
+    <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/main.css?2"; /*]]>*/</style>
     <link rel="stylesheet" type="text/css" <?php if(empty($this->data['printable']) ) { ?>media="print"<?php } ?> href="<?php $this->text('stylepath') ?>/common/commonPrint.css" />
     <!--[if lt IE 5.5000]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE50Fixes.css";</style><![endif]-->
     <!--[if IE 5.5000]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE55Fixes.css";</style><![endif]-->

diff --git a/skins/Nostalgia.php b/skins/Nostalgia.php
index 36ee791..cd2eae6 100644 (file)
--- a/skins/Nostalgia.php
+++ b/skins/Nostalgia.php
@@ -22,7 +22,7 @@ class SkinNostalgia extends Skin {
        }
 
        function getStylesheet() {
-               return 'common/nostalgia.css';
+               return 'common/nostalgia.css?1';
        }
        function getSkinName() {
                return "nostalgia";

diff --git a/skins/amethyst/main.css b/skins/amethyst/main.css
index d98971e..de20446 100644 (file)
--- a/skins/amethyst/main.css
+++ b/skins/amethyst/main.css
@@ -308,4 +308,8 @@ span.diffchange {
 
 #jump-to-nav {
   display: none;
-}
\ No newline at end of file
+}
+
+table.collapsed tr.collapsable {
+       display: none;
+}

diff --git a/skins/common/cologneblue.css b/skins/common/cologneblue.css
index faf00fe..db489d3 100644 (file)
--- a/skins/common/cologneblue.css
+++ b/skins/common/cologneblue.css
@@ -1,4 +1,4 @@
-@import url("common.css");
+@import url("common.css?1");
 
 body { margin: 0px; padding: 0px; color: black; }
 #specialform { display: inline; }

diff --git a/skins/common/common.css b/skins/common/common.css
index f81b613..3e51c89 100644 (file)
--- a/skins/common/common.css
+++ b/skins/common/common.css
@@ -316,34 +316,37 @@ li span.deleted {
 
 
 /* Classes for EXIF data display */
-table.exif {
+table.mw_metadata {
        margin-left: 0.5em;
 }
 
-table.exif caption { font-weight: bold; }
-table.exif th { font-weight: normal; }
-table.exif td { padding: 0.1em; }
+table.mw_metadata caption { font-weight: bold; }
+table.mw_metadata th { font-weight: normal; }
+table.mw_metadata td { padding: 0.1em; }
 
-table.exif {
+table.mw_metadata {
        border: none;
        border-collapse: collapse;
 }
-table.exif td, table.exif th {
+table.mw_metadata td, table.mw_metadata th {
        border: 1px solid #aaaaaa;
        padding-left: 4px;
        padding-right: 4px;
 }
-table.exif th {
+table.mw_metadata th {
        background-color: #f9f9f9;
 }
-table.exif td {
+table.mw_metadata td {
        background-color: #fcfcfc;
 }
-table.exif td.spacer {
+table.mw_metadata td.spacer {
        background: inherit;
        border-top: none;
        border-bottom: none;
 }
+table.collapsed tr.collapsable {
+       display: none;
+}
 
 .visualClear {
     clear: both;

diff --git a/skins/common/metadata.js b/skins/common/metadata.js
new file mode 100644 (file)
index 0000000..9f7a8e0
--- /dev/null
+++ b/skins/common/metadata.js
@@ -0,0 +1,49 @@
+// Exif metadata display for MediaWiki file uploads
+//
+// Add an expand/collapse link and collapse by default if set to
+// (with JS disabled, user will see all items)
+//
+// attachMetadataToggle("mw_metadata", "More...", "Fewer...");
+
+
+function attachMetadataToggle(tableId, showText, hideText) {
+       if (document.createTextNode) {
+               var box = document.getElementById(tableId);
+               if (!box)
+                       return false;
+               
+               var tbody = box.getElementsByTagName('tbody')[0];
+               
+               var row = document.createElement('tr');
+               
+               var col = document.createElement('td');
+               col.colSpan = 2;
+               
+               var link = document.createElement('a');
+               link.href = '#';
+               
+               link.onclick = function() {
+                       if (box.className == 'mw_metadata collapsed') {
+                               changeText(link, hideText);
+                               box.className = 'mw_metadata expanded';
+                       } else {
+                               changeText(link, showText);
+                               box.className = 'mw_metadata collapsed';
+                       }
+                       return false;
+               }
+               
+               var text = document.createTextNode(hideText);
+               
+               link.appendChild(text);
+               col.appendChild(link);
+               row.appendChild(col);
+               tbody.appendChild(row);
+               
+               // And collapse!
+               link.onclick();
+               
+               return true;
+       }
+       return false;
+}

diff --git a/skins/common/nostalgia.css b/skins/common/nostalgia.css
index 5944543..cc427bc 100644 (file)
--- a/skins/common/nostalgia.css
+++ b/skins/common/nostalgia.css
@@ -1,4 +1,4 @@
-@import url("common.css");
+@import url("common.css?1");
 body {
        /* Background color is set separately on page type */
        color: black;

diff --git a/skins/common/wikistandard.css b/skins/common/wikistandard.css
index 22fbddb..3985f1d 100644 (file)
--- a/skins/common/wikistandard.css
+++ b/skins/common/wikistandard.css
@@ -1,4 +1,4 @@
-@import url("common.css");
+@import url("common.css?1");
 
 #article { padding: 4px; }
 #content { margin: 0; padding: 0; }

diff --git a/skins/monobook/main.css b/skins/monobook/main.css
index 5b256b1..4ca592a 100644 (file)
--- a/skins/monobook/main.css
+++ b/skins/monobook/main.css
@@ -1219,44 +1219,50 @@ li span.deleted {
 }
 
 /* Classes for EXIF data display */
-table.metadata {
+table.mw_metadata {
        font-size: 0.8em;
        margin-left: 0.5em;
        margin-bottom: 0.5em;
+       width: 300px;
 }
 
-table.metadata caption {
+table.mw_metadata caption {
        font-weight: bold;
 }
 
-table.metadata th {
+table.mw_metadata th {
        font-weight: normal;
 }
 
-table.metadata td {
+table.mw_metadata td {
        padding: 0.1em;
 }
 
-table.metadata {
+table.mw_metadata {
        border: none;
        border-collapse: collapse;
 }
 
-table.metadata td, table.metadata th {
+table.mw_metadata td, table.mw_metadata th {
        text-align: center;
        border: 1px solid #aaaaaa;
        padding-left: 0.1em;
        padding-right: 0.1em;
 }
 
-table.metadata th {
+table.mw_metadata th {
        background-color: #f9f9f9;
 }
 
-table.metadata td {
+table.mw_metadata td {
        background-color: #fcfcfc;
 }
 
+table.collapsed tr.collapsable {
+       display: none;
+}
+
+
 /* filetoc */
 ul#filetoc {
        text-align: center;

diff --git a/skins/simple/main.css b/skins/simple/main.css
index 7bbc26f..d55552f 100644 (file)
--- a/skins/simple/main.css
+++ b/skins/simple/main.css
@@ -397,4 +397,8 @@ div.prefsectiontip {
 
 #jump-to-nav {
   display: none;
-}
\ No newline at end of file
+}
+
+table.collapsed tr.collapsable {
+       display: none;
+}