jenkins-bot has submitted this change and it was merged. Change subject: Refactor form resource loading ......................................................................
Refactor form resource loading And add resources for mustache forms. Also adds comment with template filename. Updated with css from trilogy: http://design.bytrilogy.com/wikimedia/email-landing/bank-brazil Bug: T97056 Change-Id: I16da0683c2c8ab222bc160aa4d7b0165d2ef3888 --- M DonationInterface.php M gateway_common/GatewayPage.php M gateway_forms/Form.php M gateway_forms/Mustache.php M gateway_forms/RapidHtml.php A gateway_forms/mustache/forms.css A gateway_forms/mustache/forms.js M gateway_forms/mustache/index.html.mustache M gateway_forms/mustache/payment_method.html.mustache 9 files changed, 406 insertions(+), 23 deletions(-) Approvals: Awight: Looks good to me, approved jenkins-bot: Verified diff --git a/DonationInterface.php b/DonationInterface.php index 2b084b6..91fb92e 100644 --- a/DonationInterface.php +++ b/DonationInterface.php @@ -841,7 +841,23 @@ $wgResourceModules['jquery.payment'] = array( 'scripts' => 'jquery.payment/jquery.payment.js', -) + $wgResourceTemplate;; +) + $wgResourceTemplate; + +//Forms +$wgResourceModules['ext.donationinterface.mustache.styles'] = array ( + 'styles' => array( + 'forms.css' + ), + 'localBasePath' => __DIR__ . '/gateway_forms/mustache', + 'remoteExtPath' => 'DonationInterface/gateway_forms/mustache', + 'position' => 'top', +); + +$wgResourceModules['ext.donationinterface.mustache.scripts'] = array ( + 'scripts' => 'forms.js', + 'localBasePath' => __DIR__ . '/gateway_forms/mustache', + 'remoteExtPath' => 'DonationInterface/gateway_forms/mustache' +); // load any rapidhtml related resources require_once( __DIR__ . '/gateway_forms/rapidhtml/RapidHtmlResources.php' ); diff --git a/gateway_common/GatewayPage.php b/gateway_common/GatewayPage.php index 0c7e7d0..7687ab2 100644 --- a/gateway_common/GatewayPage.php +++ b/gateway_common/GatewayPage.php @@ -138,6 +138,7 @@ if ( $form_class && class_exists( $form_class ) ){ $form_obj = new $form_class( $this->adapter ); $form = $form_obj->getForm(); + $wgOut->addModules( $form_obj->getResources() ); $wgOut->addHTML( $form ); } else { $this->displayFailPage(); diff --git a/gateway_forms/Form.php b/gateway_forms/Form.php index 0286943..10d2bc8 100644 --- a/gateway_forms/Form.php +++ b/gateway_forms/Form.php @@ -157,4 +157,21 @@ // theoretically this is overkill, but better safe than sorry return wfEscapeWikiText( htmlspecialchars( $stripped ) ); } + + public function getResources() { + return array(); + } + + /** + * Given an absolute file path, returns path relative to extension base dir. + * @param string $absolutePath + * @return string path relative to DonationInterface/ + */ + protected function sanitizePath( $absolutePath ) { + $base_pos = strpos( $absolutePath, 'DonationInterface' ); + if ( $base_pos !== false ) { + return substr( $absolutePath, $base_pos ); + } + return $absolutePath; + } } diff --git a/gateway_forms/Mustache.php b/gateway_forms/Mustache.php index b21e700..d576e0c 100644 --- a/gateway_forms/Mustache.php +++ b/gateway_forms/Mustache.php @@ -43,6 +43,8 @@ $data['script_path'] = $config->get( 'ScriptPath' ); $data['verisign_logo'] = $this->getSmallSecureLogo(); $data['no_script'] = $this->getNoScript(); + $relativePath = $this->sanitizePath( $this->topLevelForm ); + $data['template_trail'] = "<!-- Generated from: $relativePath -->"; $appealWikiTemplate = $this->gateway->getGlobal( 'AppealWikiTemplate' ); $appeal = $this->make_safe( $request->getText( 'appeal', 'Appeal-default' ) ); @@ -98,4 +100,11 @@ $language ); } + + public function getResources() { + return array( + 'ext.donationinterface.mustache.styles', + 'ext.donationinterface.mustache.scripts' + ); + } } diff --git a/gateway_forms/RapidHtml.php b/gateway_forms/RapidHtml.php index d42b965..f3e7bfe 100644 --- a/gateway_forms/RapidHtml.php +++ b/gateway_forms/RapidHtml.php @@ -360,11 +360,7 @@ if ( $found_file ){ $template = $this->replace_blocks( file_get_contents( $found_file ) ); - $relative_path = $found_file; - $base_pos = strpos( $found_file, 'DonationInterface' ); - if ( $base_pos !== false ) { - $relative_path = substr( $found_file, $base_pos ); - } + $relative_path = $this->sanitizePath( $found_file ); $template = "<!-- Generated from: {$relative_path} -->{$template}<!-- end {$relative_path} -->"; $html = str_replace( $matches[0][$i], $template, $html ); diff --git a/gateway_forms/mustache/forms.css b/gateway_forms/mustache/forms.css new file mode 100644 index 0000000..70fa880 --- /dev/null +++ b/gateway_forms/mustache/forms.css @@ -0,0 +1,342 @@ +div#payment_gateway-donate-addl-info-text { + font-size: 90%; + line-height: 120%; + padding-top: 12px; +} +div#payment_gateway-donate-submessage { + font-size: 90%; + line-height: 120%; +} +#payment-table-donor td.label, +#payment-table-comment td.label, +#payment-table-cc td.label { + white-space: nowrap; + display: block; + padding-right: 1em; + text-align: right; + width: 94px; +} +.payment-cc-form-section { + float: none; + margin-right: 0; + margin-bottom: 1em; +} +#payment_gateway-personal-info { + margin-right:0 !important; +} + +#payment_gateway-donate-addl-info-secure-logos { + float: left; + margin-right: 2em; +} + +#payment_gateway-donate-addl-info { + margin-top:2em !important; + margin-bottom:1em !important; +} + +#appeal { + background-color:transparent; + border-color:transparent; + border-style:solid; + border-width:1px 0 1px 1px; + padding:16px 24px 24px; +} +#appeal-head { + font-size:1.5em; + line-height:1.125em; + padding-bottom:0.5em; + padding-top:0.125em; +} +#appeal-body { + font-size:1.125em; + margin-bottom:1em; + padding:0.2em 0; +} +#donate-head { + border:none; + font-size:1.5em; + line-height:1.125em; + padding-bottom:0; + padding-top:0.125em; +} +#donate-body { + font-size:1.125em; + margin-bottom:1em; +} + +/* Move the form up */ +#mw-head-base { + height: 1em !important; +} + +/* Hiding content border */ +table { + background-color: transparent; +} +div#content { + background-color: transparent !important; + background-image: none !important; +} +div#mw-head-base { + background-image: none !important; +} +#footer { + background-image: none !important; +} + +/* Hiding stuff we don't need */ +h1#firstHeading, div#contentSub { + display: none; +} + +/* NEW STUFF */ +ul#moreinfolinks li{ + list-style: none !important; + list-style-image: none !important; +} +.form .options-h, +.form .options-v { + margin: 0; +} +.options-h, +.options-v { + list-style: none; + margin: 0 0 1em 0; +} +.options-h img, +.options-v img { + vertical-align: middle; +} +.options-h li, +.options-v li { + background: none; + margin-bottom: 0.3em; + padding: 0; +} +.options-h li { + display: inline; + line-height: 2.5; + margin-right: 0.3em; + white-space: nowrap; +} +.options-h li select { + vertical-align: middle; +} +.options-h li:last-child { + margin: 0; +} +.form .options-v { + margin-top: 5px; +} +.options-v li { + padding-left: 25px; + text-indent: -25px; +} +input:-moz-placeholder { + opacity: 1; +} +input::-moz-placeholder { + opacity: 1; +} +select:-moz-placeholder { + opacity: 1; +} +select::-moz-placeholder { + opacity: 1; +} +textarea:-moz-placeholder { + opacity: 1; +} +textarea::-moz-placeholder { + opacity: 1; +} +#donate { + min-width: 32em !important; + padding: 1em !important; +} + + +#greenBackground { + background-color: #e2e2e2 !important; + position: relative !important; + padding: 1.6em !important; + border: 0 !important; + width: auto !important; +} + +#greenBackground:before { + content: " "; + width: 0; + height: 0; + position: absolute; + left: 0%; + top: 100px; + border: solid transparent; + border-color: rgba(246, 246, 246, 0); + border-left-color: #f6f6f6; + border-width: 15px; + margin-top: -15px; +} + +.amount_header { + color: #505050; + text-transform: uppercase; + font-size: 1.2em; + line-height: 1.2; + display: block; + text-align: center; + border-bottom: 1px solid #cbcbcb; + margin-bottom: 1.0em!important; + padding: 0 0 1.0em!important; + font-weight: normal; +} + +.amount_header span { + font-size: 1.8em; + display: block; + color: #006699; +} + +.cc_header { + text-transform: uppercase; + font-size: .85em; + color: #7c7c7c; + text-align: center; + margin-bottom: 1em; + padding-bottom: 0; + font-weight: normal; +} + +div.donor { width: auto !important; } +div.donor { width: 100% !important; } + +#payment-table-donor input[type="text"], +#payment-table-donor input:not([type]), +#payment-table-donor input[type="email"], +#payment-table-donor select { + background-color: #f6f6f6; + padding: 1em !important; + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1); + box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1); + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + border: 0 !important; + color: #006699; + cursor: pointer; + margin-bottom: .2em; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +#payment-table-donor input[type="text"]:hover, +#payment-table-donor input[type="email"]:hover, +#payment-table-donor select:hover { + background: #003955; + color: #fff; +} + +#payment-table-donor input[type="text"]:focus, +#payment-table-donor input[type="email"]:focus, +#payment-table-donor select:focus { + background: #fff; + color: #00476b; + -moz-box-shadow: inset 0 1px 3px rgba(0,0,1,.5), inset 0 0 0 1px rgba(0,0,0,.1); + -webkit-box-shadow: inset 0 1px 3px rgba(0,0,1,.5), inset 0 0 0 1px rgba(0,0,0,.1); + box-shadow: inset 0 1px 3px rgba(0,0,1,.5), inset 0 0 0 1px rgba(0,0,0,.1); +} + +#payment-table-donor select { padding: .9em 1em !important; line-height: 40px; } + +.mw-donate-submessage { + text-transform: uppercase; + font-size: .75em !important; + color: #7c7c7c; + text-align: center; +} + +#cards { + clear: both; + display: block; + margin: 0 auto; } +#cards:before, +#cards:after { + content: ""; + display: table; +} +#cards:after { clear: both; } +#cards li { + background: #d1d1d1; + width: 32.63%; + margin: 0 .7% .7% 0 !important; + padding: 1em; + float: left; + text-align: center; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + cursor: pointer; + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} + +#cards > li:nth-child(3), +#cards > li:nth-child(6) { margin-right: 0; } + +#cards.enabled li:hover { + background: #bcbcbc; +} +#cards.enabled li:active { + background: #b1b1b1; + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.35); + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.35); + box-shadow: inset 0 1px 2px rgba(0,0,0,.35); +} +#cards li input { + display: block; + width: 100%; + margin: 0 0 .7em !important; + box-shadow: none !important; +} +#cards li label { + cursor: pointer; + margin-top: .5em; + display: block; +} +#cards li label img { + margin: 0 auto !important; + height: auto !important; +} + +#paymentContinue { + margin-top: 1em !important; + clear: both; +} +.btn { + background-color: #757575 !important; + color: #fff !important; + width: 100%; + text-transform: uppercase; + font-size: 1.3em; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + padding: .6em !important; +} +.btn.enabled { + background-color: #367fb4 !important; +} +.btn.enabled:hover { background-color: #1d5278 !important; } +.btn:active { + -moz-box-shadow: inset 0 1px 4px rgba(0,0,1,.5); + -webkit-box-shadow: inset 0 1px 4px rgba(0,0,1,.5); + box-shadow: inset 0 1px 4px rgba(0,0,1,.5); +} diff --git a/gateway_forms/mustache/forms.js b/gateway_forms/mustache/forms.js new file mode 100644 index 0000000..aafa646 --- /dev/null +++ b/gateway_forms/mustache/forms.js @@ -0,0 +1 @@ +/* nothing here yet! */ \ No newline at end of file diff --git a/gateway_forms/mustache/index.html.mustache b/gateway_forms/mustache/index.html.mustache index 38e7bd8..08307ec 100644 --- a/gateway_forms/mustache/index.html.mustache +++ b/gateway_forms/mustache/index.html.mustache @@ -1,3 +1,4 @@ +{{{ template_trail }}} <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> @@ -38,25 +39,25 @@ <tr> <td> <input class="fullwidth" name="fiscal_number" value="{{ fiscal_number }}" type="text" title="{{ l10n "donate_interface-donor-fiscal_number" }}" placeholder="{{ l10n "donate_interface-donor-fiscal_number" }}" id="fiscal_number"> + </td> + </tr> + <tr> + <td> + {{> payment_method }} + </td> + </tr> + <tr> + <td> + <div id="payment" class="gainlayout" style="height: 0;text-align: left;"></div> </td> </tr> - <tr> - <td> - {{> payment_method }} - </td> - </tr> - <tr> - <td> - <div id="payment" class="gainlayout" style="height: 0;text-align: left;"></div> - </td> - </tr> <tr> - <td> - <div class="mw-donate-submessage" id="payment_gateway-donate-submessage"> - <img src="{{ script_path }}/extensions/DonationInterface/gateway_forms/includes/padlock.gif" style="vertical-align:baseline;margin-right:4px;"> {{ l10n "donate_interface-donate-click" }} - </div> - </td> - </tr> + <td> + <div class="mw-donate-submessage" id="payment_gateway-donate-submessage"> + <img src="{{ script_path }}/extensions/DonationInterface/gateway_forms/includes/padlock.gif" style="vertical-align:baseline;margin-right:4px;"> {{ l10n "donate_interface-donate-click" }} + </div> + </td> + </tr> </tbody> </table> </div> diff --git a/gateway_forms/mustache/payment_method.html.mustache b/gateway_forms/mustache/payment_method.html.mustache index 6c39386..3d7a0bc 100644 --- a/gateway_forms/mustache/payment_method.html.mustache +++ b/gateway_forms/mustache/payment_method.html.mustache @@ -1,6 +1,6 @@ <dl class=""> <dd class="field" style="margin-bottom: 0; margin-left: 0;"> - <ul class="options-h" id="cards" style="margin: 0;"> + <ul class="options-h enabled" id="cards" style="margin: 0;"> <li><input id="cc-visa" name="bank_code" type="radio" value="VI" class="cardradio" /> <label for="cc-visa"><img alt="Visa" src="{{ script_path }}/extensions/DonationInterface/gateway_forms/includes/card-visa.png" /></label></li> <li><input id="cc-mc" name="bank_code" type="radio" value="MC" class="cardradio" /> <label for="cc-mc"><img alt="MasterCard" src="{{ script_path }}/extensions/DonationInterface/gateway_forms/includes/card-mastercard.png" /></label></li> <li><input id="cc-amex" name="bank_code" type="radio" value="AE" class="cardradio" /> <label for="cc-amex"><img alt="American Express" src="{{ script_path }}/extensions/DonationInterface/gateway_forms/includes/card-amex.png" /></label></li> -- To view, visit https://gerrit.wikimedia.org/r/212458 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I16da0683c2c8ab222bc160aa4d7b0165d2ef3888 Gerrit-PatchSet: 13 Gerrit-Project: mediawiki/extensions/DonationInterface Gerrit-Branch: master Gerrit-Owner: Ejegg <eeggles...@wikimedia.org> Gerrit-Reviewer: Awight <awi...@wikimedia.org> Gerrit-Reviewer: Ejegg <eeggles...@wikimedia.org> Gerrit-Reviewer: Ssmith <ssm...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
