From baedbaca46273a32b6757bae9a40e05e2df2606e Mon Sep 17 00:00:00 2001 From: Melissa Gore <649983+melissagore@users.noreply.github.com> Date: Fri, 11 Aug 2023 17:21:52 -0400 Subject: [PATCH] add use strict, drupal behaviors, and core/once to project js issue #20 --- README.md | 16 ++++++------ cwd_project.libraries.yml | 2 ++ js/project.js | 53 +++++++++++++++++++++++---------------- 3 files changed, 43 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index dbf1df9..cdbc1fd 100755 --- a/README.md +++ b/README.md @@ -20,10 +20,10 @@ Usage * cwd_project.info.yml → **cwd\_ursine**.info.yml * cwd_project.libraries.yml → **cwd\_ursine**.libraries.yml * cwd_project.theme → **cwd\_ursine**.theme - + * CSS and JavaScript assets should be renamed too, but don't need to match the theme's machine name. Simplifying to **ursine.css** would be fine, for example. - - * The starter `project.scss` and `project.css` files are empty (except for some breakpoint recommendations in comments). The starter `project.js` is also empty, except for Drupal-specific search code that we commonly need on every project (but also commonly customized). + + * The starter `project.scss` and `project.css` files are empty (except for some breakpoint recommendations in comments). The starter `project.js` is also empty, except for Drupal-specific search code that we commonly need on every project (but also commonly customized). 4. The "project" machine name must also be updated in the contents of the newly renamed **cwd\_ursine.info.yml**. These instances are marked with a `@CUSTOMIZE` comment for extra clarity. For example, in the libraries section: @@ -32,18 +32,20 @@ Usage 5. Also in **cwd\_ursine.info.yml**, the front-facing "CWD Starter Theme" name should be set appropriately. **(line 5)** * Optionally, you can also uncomment the libraries reference to custom CKEditor styles. **(lines 27 & 28)** - + * CKEditor styles are already inherited from the Base Theme, so you should only uncomment these two lines if project-specific styles are needed, and they would not be appropriate to add to the Base Theme itself. If you use custom CKEditor styles, you'll need to add a copy of the `css/ckeditor` folder from the Base Theme to your child theme for modification, and update the `templates/ckeditor_templates.js` file as needed. 6. In **cwd\_ursine.libraries.yml**, the references to filenames for CSS and JavaScript assets (named in step 3 above) should be updated. This is also where you will add any additional custom assets for your project. -7. There is also a `screenshot.png` file in the theme which is used in the Drupal CMS. Ask a designer for help updating this! +7. Within the contents of the newly renamed JavaScript file, change references to "cwd_project" to your new theme name, **cwd_ursine**. + +8. There is also a `screenshot.png` file in the theme which is used in the Drupal CMS. Ask a designer for help updating this! * If you want it to match the Base Theme, the typography is done in Avenir Next Medium. -8. Remove composer.json from your new theme (no need to keep it). +9. Remove composer.json from your new theme (no need to keep it). -9. **⚠️ Proceed with "Drupal" steps below,** including the very important clean-up of cwd_project. +10. **⚠️ Proceed with "Drupal" steps below,** including the very important clean-up of cwd_project. ### Drupal After you create your child theme and commit it to your site repo: diff --git a/cwd_project.libraries.yml b/cwd_project.libraries.yml index 7a342f5..f6d2889 100755 --- a/cwd_project.libraries.yml +++ b/cwd_project.libraries.yml @@ -4,6 +4,8 @@ global-styling: css/project.css: {} js: js/project.js: {} + dependencies: + - core/once typekit: css: diff --git a/js/project.js b/js/project.js index 53450bc..3b1571a 100755 --- a/js/project.js +++ b/js/project.js @@ -2,24 +2,35 @@ - ------------------------------------------------------------------------- */ -jQuery(document).ready(function($) { - // CU Search ------------------------------------------------------------ - $("#cu-search-form").attr("action", "/search/node/"); - $("#cu-search-query").attr("name", "keys"); - $("input[type=radio][name=sitesearch]").on("change", function() { - switch ($(this).val()) { - case "thissite": - $("#cu-search-form").attr("action", "/search/node/"); - $("#cu-search-query").attr("name", "keys"); - $("#cu-search-form").attr("method", "get"); - break; - case "cornell": - $("#cu-search-form").attr("action", "//cornell.edu/search/"); - $("#cu-search-query").attr("name", "q"); - $("#cu-search-form").attr("method", "get"); - break; - default: - console.warn($(this).val() + " not found in project search"); - } - }); -}); +(function ($, Drupal, once) { + 'use strict'; + + Drupal.behaviors.cwd_project = { + attach: function (context, settings) { + if (once('cwd_project', 'body').length) { + + //CU Search ------------------------------------------------------------ + $("#cu-search-form").attr("action", "/search/node/"); + $("#cu-search-query").attr("name", "keys"); + $("input[type=radio][name=sitesearch]").on("change", function () { + switch ($(this).val()) { + case "thissite": + $("#cu-search-form").attr("action", "/search/node/"); + $("#cu-search-query").attr("name", "keys"); + $("#cu-search-form").attr("method", "get"); + break; + case "cornell": + $("#cu-search-form").attr("action", "//cornell.edu/search/"); + $("#cu-search-query").attr("name", "q"); + $("#cu-search-form").attr("method", "get"); + break; + default: + console.warn($(this).val() + " not found in project search"); + } + }); + + } + } + }; + +})(jQuery, Drupal, once); \ No newline at end of file