From a81fce99224821263e5a0b947813eb8dae3b87b7 Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 15:50:42 -0500 Subject: [PATCH 1/7] Add modal__block for spacing in modals. --- .../dosomething_campaign.module | 2 + .../dosomething_helpers/modal-links.tpl.php | 66 +++++++++++-------- .../dosomething_signup.signup_data_form.inc | 14 ++-- .../includes/auth/login.inc | 4 +- .../includes/auth/register.inc | 4 +- .../scss/content/_modal-creator.scss | 4 -- .../templates/campaign/node--campaign.tpl.php | 4 +- .../partials/campaign-creator.tpl.php | 4 +- .../old-reportback-submitted-images.tpl.php | 4 +- 9 files changed, 62 insertions(+), 44 deletions(-) diff --git a/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module b/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module index 08c0621ce..b61b11749 100644 --- a/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module +++ b/lib/modules/dosomething/dosomething_campaign/dosomething_campaign.module @@ -549,7 +549,9 @@ function dosomething_campaign_add_signup_data_form_vars(&$node) { if (!$sid) { // Staff is viewing a campaign which they haven't signed up for. $node->content['signup_data_form'] = array( + '#prefix' => '<div class="modal__block">', '#markup' => "You haven't signed up for this campaign!", + '#suffix' => '</div>', ); return; } diff --git a/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php b/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php index bd2fe0df6..b441bd395 100644 --- a/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php +++ b/lib/modules/dosomething/dosomething_helpers/modal-links.tpl.php @@ -20,12 +20,16 @@ <?php if (isset($modals['faq'])): ?> <div data-modal id="modal-faq" role="dialog"> <h2 class="heading -banner"><?php print t('FAQs'); ?></h2> - <?php foreach ($modals['faq'] as $item): ?> - <h4><?php print $item['header']; ?></h4> - <?php print $item['copy'] ?> - <?php endforeach; ?> - <div class="form-actions"> - <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + <div class="modal__block"> + <?php foreach ($modals['faq'] as $item): ?> + <h4><?php print $item['header']; ?></h4> + <?php print $item['copy'] ?> + <?php endforeach; ?> + </div> + <div class="modal__block"> + <div class="form-actions"> + <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + </div> </div> </div> <?php endif; ?> @@ -33,22 +37,28 @@ <?php if (isset($modals['more_facts'])): ?> <div data-modal id="modal-facts" role="dialog"> <h2 class="heading -banner"><?php print t('Facts'); ?></h2> - <ul class="list"> - <?php foreach ($modals['more_facts']['facts'] as $key => $fact): ?> - <li><?php print $fact['fact']; ?><sup><?php print $fact['footnotes']; ?></sup></li> - <?php endforeach; ?> - </ul> - - <section class="sources"> - <h3 class="__title js-toggle-sources"><?php print t('Sources'); ?></h3> - <ul class="__body legal"> - <?php foreach ($modals['more_facts']['sources'] as $key => $source): ?> - <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li> - <?php endforeach; ?> + <div class="modal__block"> + <ul class="list"> + <?php foreach ($modals['more_facts']['facts'] as $key => $fact): ?> + <li><?php print $fact['fact']; ?><sup><?php print $fact['footnotes']; ?></sup></li> + <?php endforeach; ?> </ul> - </section> - <div class="form-actions"> - <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + </div> + + <div class="modal__block"> + <section class="footnote"> + <h4 class="js-footnote-toggle"><?php print t('Sources'); ?></h4> + <ul class="js-footnote-hidden"> + <?php foreach ($modals['more_facts']['sources'] as $key => $source): ?> + <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li> + <?php endforeach; ?> + </ul> + </section> + </div> + <div class="modal__block"> + <div class="form-actions"> + <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + </div> </div> </div> <?php endif; ?> @@ -57,11 +67,15 @@ <?php foreach ($modals['partner_info'] as $delta => $partner): ?> <div data-modal id="modal-partner-<?php print $delta; ?>" role="dialog"> <h2 class="heading -banner"><?php print t('We <3 @partner', array('@partner' => $partner['name'])); ?></h2> - <?php print $partner['copy']; ?> - <?php if (isset($partner['video'])): print $partner['video']; ?> - <?php elseif (isset($partner['image'])): print $partner['image']; endif; ?> - <div class="form-actions"> - <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + <div class="modal__block"> + <?php print $partner['copy']; ?> + <?php if (isset($partner['video'])): print $partner['video']; ?> + <?php elseif (isset($partner['image'])): print $partner['image']; endif; ?> + </div> + <div class="modal__block"> + <div class="form-actions"> + <a href="#" class="js-close-modal"><?php print t('Back to main page'); ?></a> + </div> </div> </div> <?php endforeach; ?> diff --git a/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc b/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc index 6314f786d..d97ba910c 100644 --- a/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc +++ b/lib/modules/dosomething/dosomething_signup/dosomething_signup.signup_data_form.inc @@ -300,18 +300,18 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup) $copy = dosomething_signup_filter_form_submitted_copy($config['form_submitted_copy'], $timestamp); // Display the form submitted copy: $form['submitted_copy'] = array( - '#prefix' => '<p>', + '#prefix' => '<div class="modal__block"><p>', '#markup' => $copy, - '#suffix' => '</p>', + '#suffix' => '</p></div>', ); // Return form as is (without a submit button). return $form; } $form['copy'] = array( - '#prefix' => '<p>', + '#prefix' => '<div class="modal__block"><p>', '#markup' => $config['form_copy'], - '#suffix' => '</p>', + '#suffix' => '</div></p>', ); // If we are collecting User address: @@ -334,6 +334,8 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup) // If we are collecting User school: if ($config['collect_user_school']) { $form['school_finder'] = array( + '#prefix' => '<div class="modal__block">', + '#suffix' => '</div>', '#type' => 'fieldset', '#attributes' => array( 'data-validate' => 'school_finder', @@ -425,8 +427,8 @@ function dosomething_signup_user_signup_data_form($form, &$form_state, $signup) $form['actions'] = array( '#type' => 'markup', - '#prefix' => '<div class="form-actions">', - '#suffix' => '</div>', + '#prefix' => '<div class="modal__block"><div class="form-actions">', + '#suffix' => '</div></div>', ); $form['actions']['submit'] = array( diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc index 39c17cdb0..43b4a56dd 100644 --- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc +++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/login.inc @@ -8,8 +8,8 @@ function paraneue_dosomething_page_alter_login(&$page) { if (!user_is_logged_in()){ $page['page_bottom']['login'] = array( - '#prefix' => '<div data-modal id="modal--login" role="dialog" hidden>', - '#suffix' => '</div>', + '#prefix' => '<div data-modal id="modal--login" role="dialog" hidden><div class="modal__block">', + '#suffix' => '</div></div>', 'login' => drupal_get_form('user_login_block') ); } diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc index ae7814f0f..b70dcda4c 100644 --- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc +++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc @@ -8,8 +8,8 @@ function paraneue_dosomething_page_alter_register(&$page) { if (!user_is_logged_in()){ $page['page_bottom']['register'] = array( - '#prefix' => '<div data-modal id="modal--register" role="dialog" hidden>', - '#suffix' => '</div>', + '#prefix' => '<div data-modal id="modal--register" role="dialog" hidden><div class="modal__block">', + '#suffix' => '</div></div>', 'register' => drupal_get_form('user_register_form') ); } diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss index 4070d0e05..b9c9dd6cd 100644 --- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss +++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-creator.scss @@ -2,10 +2,6 @@ max-width: 700px; padding: 0; - .heading.-banner { - margin: 0; - } - > .wrapper { overflow: hidden; diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php index 39ebed340..5c969740e 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php @@ -329,7 +329,9 @@ <?php if (isset($reportback_form)): ?> <div data-modal id="modal-report-back" class="modal--reportback inline--alt-bg" role="dialog"> <h2 class="heading -banner"><?php print t('Prove It'); ?></h2> - <?php print render($reportback_form); ?> + <div class="modal__block"> + <?php print render($reportback_form); ?> + </div> </div> <?php endif; ?> </div> diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php index 53c4801cd..d95bf0d46 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/partials/campaign-creator.tpl.php @@ -26,7 +26,9 @@ <h4 class="__title heading -delta"><?php print $first_name; ?> <?php print $last_initial; ?></h4> <p class="__location"><?php print $city; ?>, <?php print $state; ?></p> <div class="copy"><?php print $copy; ?></div> - <a href="#" class="js-close-modal">Back to main page</a> + <div class="form-actions"> + <a href="#" class="js-close-modal">Back to main page</a> + </div> </div> </div> </div> diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php index 25ca019cc..6a4d01571 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/reportback/old-reportback-submitted-images.tpl.php @@ -1,6 +1,6 @@ <div class="submitted-image"> - <p class="legal"><?php print t("Last updated: @updated", array("@updated" => $updated)); ?></p> + <p class="footnote"><?php print t("Last updated: @updated", array("@updated" => $updated)); ?></p> <?php foreach ($images as $image): ?> <?php print $image; ?> <?php endforeach; ?> -</div> \ No newline at end of file +</div> From fd10c4d3442dbfa7d4a314cd64493e4ac581a7df Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 15:52:11 -0500 Subject: [PATCH 2/7] Add new Footnote pattern in place of legal, sources, and disclaimer. --- .../includes/auth/register.inc | 2 +- .../js/campaign/sources.js | 38 ------------------- .../paraneue_dosomething/scss/app.scss | 3 +- .../scss/content/_modal-reportback.scss | 2 +- .../scss/patterns/_disclaimer.scss | 8 ---- .../scss/patterns/_sources.scss | 37 ------------------ .../templates/campaign/node--campaign.tpl.php | 8 ++-- 7 files changed, 7 insertions(+), 91 deletions(-) delete mode 100644 lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js delete mode 100644 lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss delete mode 100644 lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc index b70dcda4c..d70e848b5 100644 --- a/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc +++ b/lib/themes/dosomething/paraneue_dosomething/includes/auth/register.inc @@ -44,7 +44,7 @@ function paraneue_dosomething_form_alter_register(&$form, &$form_state, $form_id )); $form['legal-text'] = array( '#type' => 'item', - '#markup' => '<p class="legal">' . $copy . '</p>', + '#markup' => '<p class="footnote">' . $copy . '</p>', '#weight' => 501, ); diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js deleted file mode 100644 index b050c985c..000000000 --- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/sources.js +++ /dev/null @@ -1,38 +0,0 @@ -define(function(require) { - "use strict"; - - var $ = require("jquery"); - var Events = require("neue/events"); - - - var toggleSources = function(container) { - var $list = container.find("ul, div:first"); - - // Hide the fact sources list if present. - $list.hide(); - - // Toggle visibility of fact sources. - $(".js-toggle-sources").on("click", function() { - - // Toggle visibility of fact sources list. - $list.slideToggle(); - - }); - }; - - - var $sources = $(".sources") || null; - - // If there's a list of sources output in a modal, activate the toggle. - Events.subscribe("Modal:opened", function() { - var $sources = $(".modal .sources") || null; - toggleSources($sources); - }); - - - // If there's a list of sources output on the page, activate the toggle. - if ($sources) { - toggleSources($sources); - } - -}); diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss index 06e86bae5..bc2ce7a43 100644 --- a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss +++ b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss @@ -25,9 +25,8 @@ $asset-path: ""; // Local patterns @import "patterns/carousel"; -@import "patterns/disclaimer"; +@import "patterns/footnote"; @import "patterns/promotion"; // @TODO: Move to Neue! -@import "patterns/sources"; // @TODO: Move to Neue! @import "patterns/statistic"; // @TODO: Move to Neue! @import "patterns/tile"; diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss index 2747dbab5..5a0fed060 100644 --- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss +++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-reportback.scss @@ -54,7 +54,7 @@ .submitted-image { text-align: center; - .legal { + .footnote { color: rgba(255, 255, 255, 0.6); font-weight: $weight-bold; margin-bottom: $base-spacing; diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss b/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss deleted file mode 100644 index 3ecd86c56..000000000 --- a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_disclaimer.scss +++ /dev/null @@ -1,8 +0,0 @@ -.disclaimer { - clear: both; - padding-top: 36px; - - p, a { - color: darken($med-gray, 10%); - } -} diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss b/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss deleted file mode 100644 index 79da8bb01..000000000 --- a/lib/themes/dosomething/paraneue_dosomething/scss/patterns/_sources.scss +++ /dev/null @@ -1,37 +0,0 @@ -.sources { - clear: both; - word-wrap: break-word; - - ul { - list-style-type: none; - margin: 0; - padding: 0; - - li + li { - margin-top: 9px; - } - } - - sup, p { - display: inline; - } - - .__title { - color: $med-gray; - cursor: pointer; - font-size: $font-regular; - font-weight: $weight-normal; - margin-bottom: 0; - text-decoration: underline; - } - - - .__body { - padding-top: 18px; - } - - + .container__title { - margin-top: 27px; - } -} - diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php index 5c969740e..1faba6ead 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php @@ -79,9 +79,9 @@ <div class="container__block -narrow"> <?php if (isset($campaign->fact_sources)): ?> - <section class="sources"> - <h3 class="__title js-toggle-sources"><?php print t('Sources'); ?></h3> - <ul class="__body legal"> + <section class="footnote"> + <h4 class="js-footnote-toggle"><?php print t('Sources'); ?></h4> + <ul class="js-footnote-hidden"> <?php foreach ($campaign->fact_sources as $key => $source): ?> <li><sup><?php print ($key + 1); ?></sup> <?php print $source; ?></li> <?php endforeach; ?> @@ -361,7 +361,7 @@ <?php if (isset($official_rules)): ?> <div class="container__block -narrow"> - <div class="disclaimer"> + <div class="footnote"> <a class="official-rules" href="<?php print $official_rules_src; ?>"><?php print t('Official Rules'); ?></a> </div> </div> From 4288de8134f7e50361cc68528746aa65ae41dd0a Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 16:00:14 -0500 Subject: [PATCH 3/7] Update to use separate Modal and Validation packages. --- .../includes/preprocess.inc | 2 +- .../paraneue_dosomething/js/Analytics.js | 16 ++++++------ .../paraneue_dosomething/js/app.js | 14 ++++++----- .../js/campaign/SchoolFinder.js | 2 +- .../paraneue_dosomething/js/campaign/tips.js | 25 ------------------- .../paraneue_dosomething/js/config.js | 19 ++++++++++++-- .../js/images/ImageUploadBeta.js | 5 ++-- .../js/reportback/Reportback.js | 4 +-- .../js/{validation => validators}/address.js | 2 +- .../js/{validation => validators}/auth.js | 2 +- .../js/{validation => validators}/donate.js | 2 +- .../{validation => validators}/reportback.js | 2 +- .../paraneue_dosomething/scss/app.scss | 4 ++- 13 files changed, 46 insertions(+), 53 deletions(-) delete mode 100644 lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/address.js (99%) rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/auth.js (99%) rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/donate.js (99%) rename lib/themes/dosomething/paraneue_dosomething/js/{validation => validators}/reportback.js (98%) diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc b/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc index 1240b0801..407cb4390 100644 --- a/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc +++ b/lib/themes/dosomething/paraneue_dosomething/includes/preprocess.inc @@ -373,7 +373,7 @@ function paraneue_dosomething_preprocess_node_campaign(&$vars) { $closeButton = 'skip'; } - $js = 'require(["neue/modal"], function(Modal) { Modal.open( jQuery("#' . $id . '"), {animated: false, closeButton: "' . $closeButton . '", skipForm: "' . $skipForm . '"}); });'; + $js = 'require(["modal"], function(Modal) { Modal.open( jQuery("#' . $id . '"), {animated: false, closeButton: "' . $closeButton . '", skipForm: "' . $skipForm . '"}); });'; drupal_add_js($js, 'inline'); } diff --git a/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js b/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js index c93f4c9e5..7459d5295 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/Analytics.js @@ -3,38 +3,38 @@ * Uses Google Analytics custom events API to fire events for client-side * Modal and Form Validation flows. */ -define(["neue/events"], function(Events) { +define(["validation", "modal"], function(Validation, Modal) { "use strict"; // We'll only fire GA Custom Events if the GA object exists if(typeof(_gaq) !== "undefined" && _gaq !== null) { // Validation - Events.subscribe("Validation:InlineError", function(topic, args) { + Validation.Events.subscribe("Validation:InlineError", function(topic, args) { _gaq.push(["_trackEvent", "Form", "Inline Validation Error", args, null, true]); }); - Events.subscribe("Validation:Suggestion", function(topic, args) { + Validation.Events.subscribe("Validation:Suggestion", function(topic, args) { _gaq.push(["_trackEvent", "Form", "Suggestion", args, null, true]); }); - Events.subscribe("Validation:SuggestionUsed", function(topic, args) { + Validation.Events.subscribe("Validation:SuggestionUsed", function(topic, args) { _gaq.push(["_trackEvent", "Form", "Suggestion Used", args, null, true]); }); - Events.subscribe("Validation:Submitted", function(topic, args) { + Validation.Events.subscribe("Validation:Submitted", function(topic, args) { _gaq.push(["_trackEvent", "Form", "Submitted", args, null, false]); }); - Events.subscribe("Validation:SubmitError", function(topic, args) { + Validation.Events.subscribe("Validation:SubmitError", function(topic, args) { _gaq.push(["_trackEvent", "Form", "Validation Error on submit", args, null, true]); }); // Modals - Events.subscribe("Modal:Open", function(topic, args) { + Modal.Events.subscribe("Modal:Open", function(topic, args) { _gaq.push(["_trackEvent", "Modal", "Open", "#" + args.attr("id"), null, true]); }); - Events.subscribe("Modal:Close", function(topic, args) { + Modal.Events.subscribe("Modal:Close", function(topic, args) { _gaq.push(["_trackEvent", "Modal", "Close", "#" + args.attr("id"), null, true]); }); } diff --git a/lib/themes/dosomething/paraneue_dosomething/js/app.js b/lib/themes/dosomething/paraneue_dosomething/js/app.js index f4c26c412..639927eba 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/app.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/app.js @@ -15,14 +15,16 @@ define("app", function (require) { var Reportback = require("reportback/Reportback"); // Initialize modules on load - require("neue/main"); + require("neue"); + require("modal"); + require("validation"); + require("campaign/SchoolFinder"); - require("campaign/sources"); require("campaign/ImageUploader"); - require("validation/auth"); - require("validation/reportback"); - require("validation/address"); - require("validation/donate"); + require("validators/auth"); + require("validators/reportback"); + require("validators/address"); + require("validators/donate"); require("Analytics"); require("tiles"); diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js index e123c9868..99affb167 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/campaign/SchoolFinder.js @@ -3,7 +3,7 @@ define(function(require) { var $ = require("jquery"); var _ = require("lodash"); - var Validation = require("neue/validation"); + var Validation = require("validation"); var shouldValidateForm = true; var resultTpl = _.template("<li><a class='js-schoolfinder-result' data-gsid='<%- gsid %>' href='#'><span><%- name %></span> <em><%- city %>, <%- state %></em></a></li>"); diff --git a/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js b/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js deleted file mode 100644 index 878bb718b..000000000 --- a/lib/themes/dosomething/paraneue_dosomething/js/campaign/tips.js +++ /dev/null @@ -1,25 +0,0 @@ -define(function(require) { - "use strict"; - - var $ = require("jquery"); - - // View other tips on click - $(".js-show-tip").on("click", function(event) { - event.preventDefault(); - - // Cache $(this) and reference to parent wrapper - var $this = $(this); - var $thisParent = $this.closest(".tips--wrapper"); - - // Pass "active" class to move tip indicator - $thisParent.find(".tip-header").removeClass("active"); - $this.addClass("active"); - - // Get current tip number - var tipNumber = $this.attr("href").slice(1); - - // Show current tip - $thisParent.find(".tip-body").hide(); - $thisParent.find("." + tipNumber).show(); - }); -}); diff --git a/lib/themes/dosomething/paraneue_dosomething/js/config.js b/lib/themes/dosomething/paraneue_dosomething/js/config.js index fde635c59..a49b2121c 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/config.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/config.js @@ -18,9 +18,24 @@ require.config({ "jquery-iecors": "../bower_components/jquery.iecors/jquery.iecors", "lodash": "../bower_components/lodash/dist/lodash", "mailcheck": "../bower_components/mailcheck/src/mailcheck", - "neue": "../bower_components/neue/js", - "text": "../bower_components/requirejs-text/text", + "text": "../bower_components/requirejs-text/text" }, + packages: [ + { + name: "neue", + location: "../../bower_components/neue/js" + }, + { + name: "modal", + location: "../../bower_components/dosomething-modal/js", + main: "modal" + }, + { + name: "validation", + location: "../../bower_components/dosomething-validation/js", + main: "validation" + } + ], stubModules: ["text"], shim: { "jquery-once": { deps: ["jquery"] }, diff --git a/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js b/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js index 54aecdc77..d1da80df6 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/images/ImageUploadBeta.js @@ -2,10 +2,9 @@ define(function(require) { "use strict"; var $ = require("jquery"); - var Events = require("neue/events"); + var Modal = require("modal"); var ImageCrop = require("images/ImageCrop"); var ImageCropPreview = require("../images/ImageCropPreview"); - var Modal = require("neue/modal"); /** @@ -117,7 +116,7 @@ define(function(require) { Modal.close(); }); - Events.subscribe("Modal:Close", function() { + Modal.Events.subscribe("Modal:Close", function() { _this.resetFileField(); }); }; diff --git a/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js b/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js index e5499bd27..016e36b66 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/reportback/Reportback.js @@ -3,7 +3,7 @@ define(function(require) { var $ = require("jquery"); var _ = require("lodash"); - var Events = require("neue/events"); + var Modal = require("modal"); var ImageUploadBeta = require("../images/ImageUploadBeta"); var reportbackTplSrc = require("text!reportback/templates/reportback.tpl.html"); @@ -78,7 +78,7 @@ define(function(require) { } // Show the caption field when the user is done with the modal. - Events.subscribe("Modal:Close", function() { + Modal.Events.subscribe("Modal:Close", function() { _this.$captionField.show(); }); }, diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/address.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/address.js similarity index 99% rename from lib/themes/dosomething/paraneue_dosomething/js/validation/address.js rename to lib/themes/dosomething/paraneue_dosomething/js/validators/address.js index 94915c098..4e2f68477 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/validation/address.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/address.js @@ -2,7 +2,7 @@ define(function(require) { "use strict"; var $ = require("jquery"); - var Validation= require("neue/validation"); + var Validation= require("validation"); /** @NOTE: Temporary, testing out some new ideas. */ var requiredValidator = function(string, done, args) { diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js similarity index 99% rename from lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js rename to lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js index 8f1a8b3c6..a3c52cb5b 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/validation/auth.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/auth.js @@ -1,7 +1,7 @@ define(function(require) { "use strict"; - var Validation= require("neue/validation"); + var Validation= require("validation"); var mailcheck = require("mailcheck"); // # Helpers diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js similarity index 99% rename from lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js rename to lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js index d86d170bf..2fd5dcf39 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/validation/donate.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/donate.js @@ -1,7 +1,7 @@ define(function(require) { "use strict"; - var Validation= require("neue/validation"); + var Validation= require("validation"); // Credit card types var cardTypes = { diff --git a/lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js b/lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js similarity index 98% rename from lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js rename to lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js index a2ca4edf8..c61c49e38 100644 --- a/lib/themes/dosomething/paraneue_dosomething/js/validation/reportback.js +++ b/lib/themes/dosomething/paraneue_dosomething/js/validators/reportback.js @@ -1,7 +1,7 @@ define(function(require) { "use strict"; - var Validation = require("neue/validation"); + var Validation = require("validation"); var $ = require("jquery"); // validate number of items diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss index bc2ce7a43..486ada8c8 100644 --- a/lib/themes/dosomething/paraneue_dosomething/scss/app.scss +++ b/lib/themes/dosomething/paraneue_dosomething/scss/app.scss @@ -17,6 +17,9 @@ $asset-path: ""; @import "../bower_components/susy/sass/susy"; @import "../bower_components/neue/scss/neue"; +@import "../bower_components/dosomething-modal/scss/modal"; +@import "../bower_components/dosomething-validation/scss/validation"; + // Import our local variables and helpers @import "helpers/mixins"; @@ -25,7 +28,6 @@ $asset-path: ""; // Local patterns @import "patterns/carousel"; -@import "patterns/footnote"; @import "patterns/promotion"; // @TODO: Move to Neue! @import "patterns/statistic"; // @TODO: Move to Neue! @import "patterns/tile"; From 28d9339b560240d81d8fa590763427ba7cbb7400 Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 16:39:55 -0500 Subject: [PATCH 4/7] Update Bower dependencies for Neue 6.0.0-beta5. --- lib/themes/dosomething/paraneue_dosomething/bower.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/themes/dosomething/paraneue_dosomething/bower.json b/lib/themes/dosomething/paraneue_dosomething/bower.json index 0f44e5c18..d9d086b28 100644 --- a/lib/themes/dosomething/paraneue_dosomething/bower.json +++ b/lib/themes/dosomething/paraneue_dosomething/bower.json @@ -20,7 +20,9 @@ "tests" ], "dependencies": { - "neue": "DoSomething/neue#6.0.0-beta4", + "neue": "DoSomething/neue#6.0.0-beta5", + "dosomething-validation": "DoSomething/validation#~0.1.0", + "dosomething-modal": "DoSomething/modal#~0.1.0", "jquery": "1.8.3", "mailcheck": "~1.0.3", "html5shiv": "~3.7.0", From b370811ac954a15403b4f10f2869b5f2375ebe1a Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 16:58:47 -0500 Subject: [PATCH 5/7] Update t-shirt form with new modal__block containers. --- .../campaign/reward-redeem-reportback-count.tpl.php | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php index f1a810514..4c979f934 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/reward-redeem-reportback-count.tpl.php @@ -49,8 +49,12 @@ <?php // "Free T-shirts" Modals ?> <div data-modal id="modal-redeem-form" role="dialog"> <h2 class="heading -banner"><?php print ($form_header); ?></h2> - <?php print $form_copy; ?> - <?php print render($form); ?> + <div class="modal__block"> + <?php print $form_copy; ?> + </div> + <div class="modal__block"> + <?php print render($form); ?> + </div> </div> </div> </section> From 1bec4f7161f495dfeea56b559aba859254916bb8 Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Mon, 9 Feb 2015 17:47:32 -0500 Subject: [PATCH 6/7] Update to use new media-options markup. --- .../paraneue_dosomething/includes/form.inc | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/lib/themes/dosomething/paraneue_dosomething/includes/form.inc b/lib/themes/dosomething/paraneue_dosomething/includes/form.inc index f2ad97c5d..9752c98f6 100644 --- a/lib/themes/dosomething/paraneue_dosomething/includes/form.inc +++ b/lib/themes/dosomething/paraneue_dosomething/includes/form.inc @@ -19,15 +19,16 @@ function paraneue_dosomething_form_element($variables) { $element = &$variables['element']; $output = theme_form_element($variables); - // If rendering a radio button, create rendered element for label - if($element['#type'] === 'radio') { - $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n"; - $output = theme('form_element_label', $variables); - } + // If rendering a radio button or checkbox, create rendered element for label + if($element['#type'] === 'radio' || $element['#type'] === 'checkbox') { + // If not set to 'attribute' display setting, add an option indicator + if($element['#title_display'] !== 'attribute') { + $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n"; + } + else { + $variables['rendered_element'] = $element['#children'] . "\n"; + } - // If rendering a checkbox, create rendered element for label - if($element['#type'] === 'checkbox') { - $variables['rendered_element'] = $element['#children'] . '<span class="option__indicator"></span>' . "\n"; $output = theme('form_element_label', $variables); } @@ -59,12 +60,15 @@ function paraneue_dosomething_form_element_label($variables) { $attributes['class'] = 'option -checkbox'; } elseif ($element['#type'] === 'radio' && $element['#title_display'] !== 'attribute') { - dpm($element); $attributes['class'] = 'option -radio'; } else { + // If displaying with an attribute, use element's class + if ($element['#title_display'] === 'attribute' && !empty($element['#custom_label_class'])) { + $attributes['class'] = $element['#custom_label_class']; + } // Style the label as class option to display inline with the element. - if ($element['#title_display'] === 'after') { + elseif ($element['#title_display'] === 'after') { $attributes['class'] = 'element-label-after'; } // Show label only to screen readers to avoid disruption in visual flows. @@ -80,6 +84,7 @@ function paraneue_dosomething_form_element_label($variables) { $attributes['for'] = $element['#id']; } + // Return with rendered element if it exists if (!empty($variables['rendered_element'])) { return ' <label' . drupal_attributes($attributes) . '>' . $variables['rendered_element'] . $t('!title !required', array('!title' => $title, '!required' => $required)) . "</label>\n"; @@ -213,9 +218,8 @@ function paraneue_dosomething_form_alter_shirt_options(&$form, &$form_state, $fo 'data-validate-required' => '', ); foreach ($form['item']['#options'] as $key => $option) { - $form['item'][$key]['#prefix'] = '<div class="media-options__item -radio">'; - $form['item'][$key]['#suffix'] = '</div>'; $form['item'][$key]['#title_display'] = 'attribute'; + $form['item'][$key]['#custom_label_class'] = array('media-option', '-radio'); } $shirt_style_prefix = '<div data-validate="shirt_style" data-validate-required class="js-media-options">'; $shirt_style_suffix = '</div>'; @@ -225,9 +229,8 @@ function paraneue_dosomething_form_alter_shirt_options(&$form, &$form_state, $fo $form['item_option']['#attributes'] = $shirt_size_attributes; if (isset($form['item_additional'])) { foreach ($form['item_additional']['#options'] as $key => $option) { - $form['item_additional'][$key]['#prefix'] = '<div class="media-options__item -radio">'; - $form['item_additional'][$key]['#suffix'] = '</div>'; $form['item_additional'][$key]['#title_display'] = 'attribute'; + $form['item_additional'][$key]['#custom_label_class'] = array('media-option', '-radio'); } $form['item_additional_header']['#markup'] = '<h4>' . t("Your Friend's Shirt") . '</h4>'; $form['item_additional']['#prefix'] = $shirt_style_prefix; From 7aba5b2e297ad47ac6c64d2981033f7712ac558d Mon Sep 17 00:00:00 2001 From: David Furnes <david@dfurnes.com> Date: Tue, 10 Feb 2015 10:44:33 -0500 Subject: [PATCH 7/7] Visual fixes to caption modal with new modal__block containers. --- .../scss/content/_modal-crop.scss | 4 ++-- .../templates/campaign/node--campaign.tpl.php | 20 ++++++++++--------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss index 371af6b38..85b73376b 100644 --- a/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss +++ b/lib/themes/dosomething/paraneue_dosomething/scss/content/_modal-crop.scss @@ -1,13 +1,14 @@ .modal--crop { .heading.-banner { - margin: (-$base-spacing) (-$base-spacing) 0px; + margin: 0; } .image-editor { padding-top: 10px; .__buttons { + padding: 0 $base-spacing; text-align: right; .button { @@ -45,7 +46,6 @@ } .image-preview { - margin: 0 (-$base-spacing); text-align: center; background: #000; line-height: 0; diff --git a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php index 1faba6ead..6d1bfb986 100644 --- a/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php +++ b/lib/themes/dosomething/paraneue_dosomething/templates/campaign/node--campaign.tpl.php @@ -298,15 +298,17 @@ This is a purely frontend form that will grab crop options and a caption And then when the user submits the form, it will populate the drupal form with these values. */?> - <form action="#" method="post" id="dosomething-reportback-image-form" accept-charset="UTF-8" data-validation-passed="false"> - <div class="form-item"> - <label class="field-label" for="caption">Caption</label> - <input class="text-field" placeholder="Write something in 60 characters or less" type="text" id="caption" name="caption" <?php //data-validate="caption-modal" data-validate-required ?> maxlength="60" > - </div> - <div class="form-actions"> - <input type="submit" value="done" class="button -done" /> - </div> - </form> + <div class="modal__block"> + <form action="#" method="post" id="dosomething-reportback-image-form" accept-charset="UTF-8" data-validation-passed="false"> + <div class="form-item"> + <label class="field-label" for="caption">Caption</label> + <input class="text-field" placeholder="Write something in 60 characters or less" type="text" id="caption" name="caption" <?php //data-validate="caption-modal" data-validate-required ?> maxlength="60" > + </div> + <div class="form-actions"> + <input type="submit" value="done" class="button -done" /> + </div> + </form> + </div> </div> </div>