| Index: trunk/extensions/UploadWizard/UploadWizardTutorial.php |
| — | — | @@ -0,0 +1,124 @@ |
| | 2 | +<?php |
| | 3 | + |
| | 4 | +/** |
| | 5 | + * Class to encapsulate all the html generation associated with the UploadWizard tutorial. |
| | 6 | + * Might be a start for a subclass of UploadWizard, if we ever free it of its WMF-oriented features |
| | 7 | + * So that non-WMF'ers can use it |
| | 8 | + */ |
| | 9 | +class UploadWizardTutorial { |
| | 10 | + |
| | 11 | + // name of the tutorial on Wikimedia Commons. The $1 is replaced with the language desired |
| | 12 | + const NAME_TEMPLATE = 'Licensing_tutorial_$1.svg'; |
| | 13 | + |
| | 14 | + // the width we want to scale the tutorial to, for our interface |
| | 15 | + const WIDTH_PX = 720; |
| | 16 | + |
| | 17 | + // imagemap coordinates of the "helpdesk" button at the bottom, which is supposed to be clickable. |
| | 18 | + const HELPDESK_BUTTON_COORDS = "27, 1319, 691, 1384"; |
| | 19 | + |
| | 20 | + // link to help desk within commons tutorial |
| | 21 | + const HELPDESK_URL = 'http://commons.wikimedia.org/wiki/Help_desk'; |
| | 22 | + |
| | 23 | + // id of imagemap used in tutorial |
| | 24 | + const IMAGEMAP_ID = 'tutorialMap'; |
| | 25 | + |
| | 26 | + /** |
| | 27 | + * Fetches appropriate HTML for the tutorial portion of the wizard. |
| | 28 | + * Looks up an image on the current wiki. This will work as is on Commons, and will also work |
| | 29 | + * on test wikis that enable instantCommons. |
| | 30 | + * @param {String} $langCode language code as used by MediaWiki, similar but not identical to ISO 639-1. |
| | 31 | + * @return {String} html that will display the tutorial. |
| | 32 | + */ |
| | 33 | + function getHtml() { |
| | 34 | + global $wgLang; |
| | 35 | + |
| | 36 | + $error = null; |
| | 37 | + $errorHtml = ''; |
| | 38 | + $tutorialHtml = ''; |
| | 39 | + |
| | 40 | + // get a valid language code, even if the global is wrong |
| | 41 | + if ( $wgLang ) { |
| | 42 | + $langCode = $wgLang->getCode(); |
| | 43 | + } |
| | 44 | + if ( !isset( $langCode) or $langCode === '' ) { |
| | 45 | + $langCode = 'en'; |
| | 46 | + } |
| | 47 | + |
| | 48 | + $tutorialFile = false; |
| | 49 | + // getFile returns false if it can't find the right file |
| | 50 | + if ( ! $tutorialFile = self::getFile( $langCode ) ) { |
| | 51 | + $error = 'localized-file-missing'; |
| | 52 | + if ( $langCode !== 'en' ) { |
| | 53 | + $tutorialFile = self::getFile( 'en' ); |
| | 54 | + } |
| | 55 | + } |
| | 56 | + |
| | 57 | + // at this point, we have one of the following situations: |
| | 58 | + // $error is empty, and tutorialFile is the right one for this language |
| | 59 | + // $error notes we couldn't find the tutorialFile for your language, and $tutorialFile is the english one |
| | 60 | + // $error notes we couldn't find the tutorialFile for your language, and $tutorialFile is still false (major file failure) |
| | 61 | + |
| | 62 | + if ( $tutorialFile ) { |
| | 63 | + // XXX TODO if the client can handle SVG, we could also just send it the unscaled thumb, client-scaled into a DIV or something. |
| | 64 | + // if ( client can handle SVG ) { |
| | 65 | + // $tutorialThumbnailImage->getUnscaledThumb(); |
| | 66 | + // } |
| | 67 | + // put it into a div of appropriate dimensions. |
| | 68 | + |
| | 69 | + // n.b. File::transform() returns false if failed, MediaTransformOutput otherwise |
| | 70 | + if ( $thumbnailImage = $tutorialFile->transform( array( 'width' => self::WIDTH_PX ) ) ) { |
| | 71 | + $tutorialHtml = self::getImageHtml( $thumbnailImage ); |
| | 72 | + } else { |
| | 73 | + $error = 'cannot-transform'; |
| | 74 | + } |
| | 75 | + } else { |
| | 76 | + $error = 'file-missing'; |
| | 77 | + } |
| | 78 | + |
| | 79 | + if ( isset( $error ) ) { |
| | 80 | + $errorHtml = Html::element( 'p', array( 'class' => 'errorbox', 'style' => 'float: none;' ), wfMsg( 'mwe-upwiz-tutorial-error-' . $error ) ); |
| | 81 | + } |
| | 82 | + |
| | 83 | + return $errorHtml . $tutorialHtml; |
| | 84 | + |
| | 85 | + } |
| | 86 | + |
| | 87 | + /** |
| | 88 | + * Get tutorial file for a particular language, or false if not available. |
| | 89 | + * @param {String} $langCode: language Code |
| | 90 | + * @return {File|false} |
| | 91 | + */ |
| | 92 | + function getFile( $langCode ) { |
| | 93 | + $tutorialName = str_replace( '$1', $langCode, self::NAME_TEMPLATE ); |
| | 94 | + $tutorialTitle = Title::newFromText( $tutorialName, NS_FILE ); |
| | 95 | + return wfFindFile( $tutorialTitle ); |
| | 96 | + } |
| | 97 | + |
| | 98 | + /** |
| | 99 | + * Constructs HTML for the tutorial (laboriously), including an imagemap for the clickable "Help desk" button. |
| | 100 | + * @param {ThumbnailImage} $thumb |
| | 101 | + * @return {String} HTML representing the image, with clickable helpdesk button |
| | 102 | + */ |
| | 103 | + function getImageHtml( $thumb ) { |
| | 104 | + // here we use the not-yet-forgotten HTML imagemap to add a clickable area to the tutorial image. |
| | 105 | + // we could do more special effects with hovers and images and such, not to mention SVG scripting, |
| | 106 | + // but we aren't sure what we want yet... |
| | 107 | + $img = Html::element( 'img', array( |
| | 108 | + 'src' => $thumb->getUrl(), |
| | 109 | + 'width' => $thumb->getWidth(), |
| | 110 | + 'height' => $thumb->getHeight(), |
| | 111 | + 'usemap' => '#' . self::IMAGEMAP_ID |
| | 112 | + ) ); |
| | 113 | + $areaAltText = wfMsg( 'mwe-upwiz-help-desk' ); |
| | 114 | + $area = Html::element( 'area', array( |
| | 115 | + 'shape' => 'rect', |
| | 116 | + 'coords' => self::HELPDESK_BUTTON_COORDS, |
| | 117 | + 'href' => self::HELPDESK_URL, |
| | 118 | + 'alt' => $areaAltText, |
| | 119 | + 'title' => $areaAltText |
| | 120 | + ) ); |
| | 121 | + $map = Html::rawElement( 'map', array( 'id' => self::IMAGEMAP_ID, 'name' => self::IMAGEMAP_ID ), $area ); |
| | 122 | + return $map . $img; |
| | 123 | + } |
| | 124 | + |
| | 125 | +} |
| Property changes on: trunk/extensions/UploadWizard/UploadWizardTutorial.php |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 126 | + native |
| Index: trunk/extensions/UploadWizard/UploadWizard.php |
| — | — | @@ -40,6 +40,7 @@ |
| 41 | 41 | 'UploadWizardMessages', |
| 42 | 42 | 'ApiQueryStashImageInfo', |
| 43 | 43 | 'UploadWizardHooks', |
| | 44 | + 'UploadWizardTutorial', |
| 44 | 45 | 'UploadWizardDependencyLoader' ) as $module ) { |
| 45 | 46 | $wgAutoloadLocalClasses[$module] = $dir . "/" . $module . ".php"; |
| 46 | 47 | } |
| Index: trunk/extensions/UploadWizard/SpecialUploadWizard.php |
| — | — | @@ -10,22 +10,6 @@ |
| 11 | 11 | */ |
| 12 | 12 | |
| 13 | 13 | class SpecialUploadWizard extends SpecialPage { |
| 14 | | - |
| 15 | | - // name of the tutorial on Wikimedia Commons. The $1 is replaced with the language desired |
| 16 | | - const TUTORIAL_NAME_TEMPLATE = 'Licensing_tutorial_$1.svg'; |
| 17 | | - |
| 18 | | - // the width we want to scale the tutorial to, for our interface |
| 19 | | - const TUTORIAL_WIDTH_PX = 720; |
| 20 | | - |
| 21 | | - // the size of the "helpdesk" button at the bottom, which is supposed to be clickable. |
| 22 | | - const TUTORIAL_HELPDESK_BUTTON_COORDS = "27, 1319, 691, 1384"; |
| 23 | | - |
| 24 | | - // link to help desk within commons tutorial |
| 25 | | - const TUTORIAL_HELPDESK_URL = 'http://commons.wikimedia.org/wiki/Help_desk'; |
| 26 | | - |
| 27 | | - // id of imagemap used in tutorial |
| 28 | | - const TUTORIAL_IMAGEMAP_ID = 'tutorialMap'; |
| 29 | | - |
| 30 | 14 | // the HTML form without javascript |
| 31 | 15 | private $simpleForm; |
| 32 | 16 | |
| — | — | @@ -184,105 +168,6 @@ |
| 185 | 169 | } |
| 186 | 170 | |
| 187 | 171 | /** |
| 188 | | - * Fetches appropriate HTML for the tutorial portion of the wizard. |
| 189 | | - * Looks up an image on the current wiki. This will work as is on Commons, and will also work |
| 190 | | - * on test wikis that enable instantCommons. |
| 191 | | - * @param {String} $langCode language code as used by MediaWiki, similar but not identical to ISO 639-1. |
| 192 | | - * @return {String} html that will display the tutorial. |
| 193 | | - */ |
| 194 | | - function getTutorialHtml() { |
| 195 | | - global $wgLang; |
| 196 | | - |
| 197 | | - $error = null; |
| 198 | | - $errorHtml = ''; |
| 199 | | - $tutorialHtml = ''; |
| 200 | | - |
| 201 | | - // get a valid language code, even if the global is wrong |
| 202 | | - if ( $wgLang ) { |
| 203 | | - $langCode = $wgLang->getCode(); |
| 204 | | - } |
| 205 | | - if ( !isset( $langCode) or $langCode === '' ) { |
| 206 | | - $langCode = 'en'; |
| 207 | | - } |
| 208 | | - |
| 209 | | - $tutorialFile = false; |
| 210 | | - // getTutorialFile returns false if it can't find the right file |
| 211 | | - if ( ! $tutorialFile = self::getTutorialFile( $langCode ) ) { |
| 212 | | - $error = 'localized-file-missing'; |
| 213 | | - if ( $langCode !== 'en' ) { |
| 214 | | - $tutorialFile = self::getTutorialFile( 'en' ); |
| 215 | | - } |
| 216 | | - } |
| 217 | | - |
| 218 | | - // at this point, we have one of the following situations: |
| 219 | | - // $errors is empty, and tutorialFile is the right one for this language |
| 220 | | - // $errors notes we couldn't find the tutorialFile for your language, and $tutorialFile is the english one |
| 221 | | - // $errors notes we couldn't find the tutorialFile for your language, and $tutorialFile is still false |
| 222 | | - |
| 223 | | - if ( $tutorialFile ) { |
| 224 | | - // XXX TODO if the client can handle SVG, we could also just send it the unscaled thumb, client-scaled into a DIV or something. |
| 225 | | - // if ( client can handle SVG ) { |
| 226 | | - // $tutorialThumbnailImage->getUnscaledThumb(); |
| 227 | | - // } |
| 228 | | - // put it into a div of appropriate dimensions. |
| 229 | | - |
| 230 | | - // n.b. File::transform() returns false if failed, MediaTransformOutput otherwise |
| 231 | | - if ( $thumbnailImage = $tutorialFile->transform( array( 'width' => self::TUTORIAL_WIDTH_PX ) ) ) { |
| 232 | | - $tutorialHtml = self::getTutorialImageHtml( $thumbnailImage ); |
| 233 | | - } else { |
| 234 | | - $errors = 'cannot-transform'; |
| 235 | | - } |
| 236 | | - } else { |
| 237 | | - $error = 'file-missing'; |
| 238 | | - } |
| 239 | | - |
| 240 | | - if ( isset( $error ) ) { |
| 241 | | - $errorHtml = Html::element( 'p', array( 'class' => 'errorbox', 'style' => 'float: none;' ), wfMsg( 'mwe-upwiz-tutorial-error-' . $error ) ); |
| 242 | | - } |
| 243 | | - |
| 244 | | - return $errorHtml . $tutorialHtml; |
| 245 | | - |
| 246 | | - } |
| 247 | | - |
| 248 | | - /** |
| 249 | | - * Get tutorial file for a particular language, or false if not available. |
| 250 | | - * @param {String} $langCode: language Code |
| 251 | | - * @return {File|false} |
| 252 | | - */ |
| 253 | | - function getTutorialFile( $langCode ) { |
| 254 | | - $tutorialName = str_replace( '$1', $langCode, self::TUTORIAL_NAME_TEMPLATE ); |
| 255 | | - $tutorialTitle = Title::newFromText( $tutorialName, NS_FILE ); |
| 256 | | - return wfFindFile( $tutorialTitle ); |
| 257 | | - } |
| 258 | | - |
| 259 | | - /** |
| 260 | | - * Constructs HTML for the tutorial (laboriously), including an imagemap for the clickable "Help desk" button. |
| 261 | | - * @param {ThumbnailImage} $thumb |
| 262 | | - * @return {String} HTML representing the image, with clickable helpdesk button |
| 263 | | - */ |
| 264 | | - function getTutorialImageHtml( $thumb ) { |
| 265 | | - // here we use the not-yet-forgotten HTML imagemap to add a clickable area to the tutorial image. |
| 266 | | - // we could do more special effects with hovers and images and such, not to mention SVG scripting, |
| 267 | | - // but we aren't sure what we want yet... |
| 268 | | - $img = Html::element( 'img', array( |
| 269 | | - 'src' => $thumb->getUrl(), |
| 270 | | - 'width' => $thumb->getWidth(), |
| 271 | | - 'height' => $thumb->getHeight(), |
| 272 | | - 'usemap' => '#' . self::TUTORIAL_IMAGEMAP_ID |
| 273 | | - ) ); |
| 274 | | - $areaAltText = wfMsg( 'mwe-upwiz-help-desk' ); |
| 275 | | - $area = Html::element( 'area', array( |
| 276 | | - 'shape' => 'rect', |
| 277 | | - 'coords' => self::TUTORIAL_HELPDESK_BUTTON_COORDS, |
| 278 | | - 'href' => self::TUTORIAL_HELPDESK_URL, |
| 279 | | - 'alt' => $areaAltText, |
| 280 | | - 'title' => $areaAltText |
| 281 | | - ) ); |
| 282 | | - $map = Html::rawElement( 'map', array( 'id' => self::TUTORIAL_IMAGEMAP_ID, 'name' => self::TUTORIAL_IMAGEMAP_ID ), $area ); |
| 283 | | - return $map . $img; |
| 284 | | - } |
| 285 | | - |
| 286 | | - /** |
| 287 | 172 | * Return the basic HTML structure for the entire page |
| 288 | 173 | * Will be enhanced by the javascript to actually do stuff |
| 289 | 174 | * @return {String} html |
| — | — | @@ -306,7 +191,7 @@ |
| 307 | 192 | |
| 308 | 193 | . '<div class="mwe-upwiz-stepdiv" id="mwe-upwiz-stepdiv-tutorial">' |
| 309 | 194 | . '<div id="mwe-upwiz-tutorial">' |
| 310 | | - . self::getTutorialHtml() |
| | 195 | + . UploadWizardTutorial::getHtml() |
| 311 | 196 | . '</div>' |
| 312 | 197 | . '<div class="mwe-upwiz-buttons">' |
| 313 | 198 | . '<button class="mwe-upwiz-button-next" />' |