1 / 40

Advanced Training: WebCMS How-To

Advanced Training: WebCMS How-To. Andrew Yuen. Fact Sheet Overview. General Links - Always remember to follow EPA Styles and consult with the EPA web standards when in doubt. - Avoid adding custom styles to the JavaScript field. - Remember ID’s are allowed but most CLASSES will be stripped.

kin
Download Presentation

Advanced Training: WebCMS How-To

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Training:WebCMS How-To Andrew Yuen

  2. Fact Sheet Overview • General Links- Always remember to follow EPA Styles and consult with the EPA web standards when in doubt. - Avoid adding custom styles to the JavaScript field. - Remember ID’s are allowed but most CLASSES will be stripped. • JavaScript Resources- We will be going over the majority of the available JavaScript files and libraries during this presentation.- A review process is in place for requesting new JavaScript files/libraries that are not available on the Drupal server. • Tips- A JavaScript tip not mentioned: When using jQuery, always remember to replace $ with jQuery

  3. Code https://wcms.epa.gov/sites/production/files/2014-05/at_howto_code.txt

  4. Training Agenda • Accordions- How to create accordion panels that are controlled by external links • Colorbox- How to add a image gallery, inline content and YouTube colorboxes to a basic page • Dropdown Select Links- How to add select dropdown menu to a page • Table, sortable- How to customize sortable tables • Tabs- How to add a show all tab for printing purposes • Image Maps- Working with responsive image maps inside accordions and tabs Reference: http://www2.epa.gov/webguide/web-style-guide

  5. Accordions • Accordions are a useful tool to group like content and to point users to deeper content. • They should be used sparingly, and never simply to add visual appeal to a page or to fit large blocks of content within constrained spaces. • Accordions are opened by click or by tab action, never on hover. • If JavaScript is unavailable, all panels will be open by default. • Accordions should not be nested within other accordions. • The title or name of an accordion panel cannot be a link to a separate page or an external site. Working Example: https://www2.epa.gov/webguide/web-style-guide#accordions

  6. How to: Add Accordions to a Page • In Drupal WebCMS, disable rich text in the body of the code and add the following example HTML.  <ul class="accordion"> <li><a class="accordion-title" href="#pane-1" title="Click to expand description">Your Accordion Title</a> <div class="accordion-pane" id="pane-1"> <p>Your accordion's content</p> </div> </li> </ul>

  7. Advanced How to: Open an Accordion Panel using a Link on the Page • First, we add a link to the page with a unique ID:<a href="#pane-1" id="openaccordion1">Open Pane 1</a> • Next we add the following JavaScript to open the accordion panel when a users clicks on the above link <script> jQuery(document).ready(function() {  jQuery("#openaccordion1").click(function(event){ // Target link with a specific ID var hash1 = jQuery(this).attr('href'); varthash1 = hash1.substring(hash1.lastIndexOf('#'), hash1.length); //Returns the position of the last occurrence of a specified value in a string. jQuery('.accordion').find('a[href*='+ thash1 + ']').closest('a').trigger('click'); // Trigger the appropriate accordion panel to open based on the value after the # }); }); </script>

  8. Colorbox • A colorbox is a kind of modal window: one that demands the user’s input before normal browsing can be resumed.  • Colorbox should be used sparingly especially when: • A large amount of content is being presented • You are designing the page for a mobile/tablet user • Same result can be accomplished another way • Use a colorbox when: • Content presented is larger than the available area • Loading an additional page doesn’t make sense • Reducing the mental burden of additional content improves usability Working Example: https://www2.epa.gov/webguide/javascript-colorbox

  9. Colorbox and Accessibility • When you create a overlaid dialog, the input focus isn't handled correctly, and screen readers aren't able to tell that something is changed. • If you want screen reader users to be aware that a dialog has popped up, then you’ll need to use Accessible Rich Internet Applications (ARIA) roles. • ARIA "roles" add additional meaning to HTML elements allowing browsers to communicate better with screen readers. • When an element with a role of dialog is made visible, the browser tells the screen reader that a dialog is present. • Dialogs should also have labels. You can specify a label using either the aria-label or the aria-labelledbyattribute. <div id="my-dialog" role="dialog" aria-label="New Message"> <-- Your dialog code here --> </div> OR <div id="my-dialog" role="dialog" aria-labelledby="dialog-title"> <h3 id="dialog-title">New Message</h3> <-- Your dialog code here --> </div>

  10. Colorbox: Inline Content • First, we create a link, and give it a class of colorbox-inline. Point the href to the element you want to display when this link is clicked.<a class="colorbox-inline" href="#colorbox-hidden">Demo</a> • Next, create the content you want "hidden" and displayed only when the link is clicked. <div id="hidden-content" role="dialog" aria-labelledby="dialog-title"> <div class="colorbox-hidden" id="colorbox-hidden"> <h3 id="dialog-title">New Message</h3> <-- Your dialog code here --> </div> </div>

  11. Colorbox: Inline Content • Finally, we add the following JavaScript to the page: <script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js"></script> <script> jQuery(document).ready(function() { // Hide the inline content jQuery("#hidden-content").css({'display':'none'}); // Open inlined content in "box" jQuery(".colorbox-inline").colorbox({inline:true,width:"50%"}); }); </script>

  12. Colorbox: Image Gallery • Warning: linking to the original image inserts a direct link to the original file. It is not a managed file, handled by the database, and links to the original file may break over time. • As you upload each image that will be in your gallery, you must check the box to "link to the original image.“ • Once you build a column of images, add the following, class="colorbox-gallery" role="dialog" to each link, like so: <a class="colorbox-gallery" role="dialog" href="/sites/production/files/2013-06/blue_heron-th.jpg" title="Blue Heron">[[{"type":"media","view_mode":"media_small","fid":"209","attributes":{"alt":"","class":"media-image","height":"160","width":"160"}}]]</a>

  13. Colorbox: Image Gallery • Finally, we add the following JavaScript to the page: <script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js"></script> <script> jQuery(document).ready(function() { // Colorbox gallery jQuery('.colorbox-gallery').colorbox({rel:'colorbox-gallery'}); }); </script>

  14. Colorbox: YouTube Video • You will want to link to the "embed" version of the video as seen here: • After clicking "Share" and then "Embed," grab the URL from the code snippet. You will also want to check the "Use HTTPS" and "Enable privacy-enhanced mode" boxes and uncheck the "Show suggested videos when the video finishes" box.

  15. Colorbox: YouTube Video • We add the link information that you obtained from YouTube to the page: <a class="colorbox-youtube" href="https://www.youtube-nocookie.com/embed/yvrAJ5tq7Fc?rel=0" role="dialog">EPA's SmartWay: Anyway you ship it video</a> • Finally, add the following JavaScript to the page: <script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js"></script> <script> jQuery(document).ready(function() { // Colorbox YouTube content jQuery(".colorbox-youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344}); });</script>

  16. Dropdown Select Links • Here's how to use a dropdown to redirect a page to another page or website.  • First, we create the dropdown box: <div class="form-item form-type-select"> <label for="jump-link">Select a Link</label> <div>After you select a link, press go to jump to that link.</div> <select class="form-select" id="jump-link"> <option value="/science-and-technology">Science and Technology</option> <option value="/learn-issues">Learn the Issues</option> <option value="/laws-regulations">Laws and Regulations</option> </select> <input class="form-submit" id="open-link" type="submit" value="Go"> </div> Working Example: https://www2.epa.gov/webguide/javascript-dropdown-navigation

  17. Dropdown Select Links • Then, we add the following JavaScript: <script> jQuery(document).ready(function() { jQuery("#open-link").click(function () { vargo_to_url = jQuery("#jump-link").find(":selected").val(); document.location.href = go_to_url; //redirect }); }); </script>

  18. Advanced How to: Creating Multiple Dropdown Select Links Items • First, we create multiple dropdown boxes each with unique ID’s both on the select and input tags: <div class="form-item form-type-select"> <label for="jump-link0">Select a Link</label> <div>After you select a link, press go to jump to that link.</div> <select class="form-select" id="jump-link0"> <option value="/science-and-technology">Science and Technology</option> </select> <input class="form-submit" id="open-link0" type="submit" value="Go"> <label for="jump-link1">Select a Link</label> <div>After you select a link, press go to jump to that link.</div> <select class="form-select" id="jump-link1"> <option value="/learn-issues">Learn the Issues</option> </select> <input class="form-submit" id="open-link1" type="submit" value="Go"> </div>

  19. Advanced How to: Creating Multiple Dropdown Select Links Items • Then, we add the following JavaScript: <script> jQuery(document).ready(function() { jQuery("#open-link0").click(function () { vargo_to_url = jQuery("#jump-link0").find(":selected").val(); document.location.href = go_to_url; //redirect }); jQuery("#open-link1").click(function () { vargo_to_url = jQuery("#jump-link1").find(":selected").val(); document.location.href = go_to_url; //redirect }); }); </script>

  20. Table Sorting • After creating a table, table sorting can simply be added by adding the tablesorterclass to the table tag: <table class="tablesorter"> • We will be going over some advanced configurations including how to: • Disable header sorting for certain columns • Automatically sort certain columns on page load Note: Datatables provides similar table sorting functionality. Working Example: http://www2.epa.gov/webguide/web-style-guide#tablesorter

  21. Table Sorting • Let’s start by using the following HTML which creates a simple sortable table:<table class="tablesorter"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> </tr> </thead> Code continues on next slide >>

  22. Table Sorting <tbody> <tr> <td>Peter</td> <td>Parker</td> <td>28</td> <td>$9.99</td> </tr> <tr> <td>John</td> <td>Hood</td> <td>33</td> <td>$19.99</td> </tr> <tr> <td>Clark</td> <td>Kent</td> <td>18</td> <td>$15.89</td> </tr> </tbody> </table>

  23. Advanced How to: Table Sorting Disable header sorting for certain columns • We will being by removing the tablesorter class and replacing it with an id:<table id="table_sort"> • Next, we add our JavaScript: <script> jQuery(document).ready(function() { jQuery("#table_sort").tablesorter( { // Pass the headers argument and assign a object headers: { // Assign the first column (we start counting zero) 0: { Code continues on next slide >>

  24. Advanced How to: Table Sorting Disable header sorting for certain columns // Disable it by setting the property sorter to false sorter: false }, // Assign the second column (we start counting zero) 1: { // Disable it by setting the property sorter to false sorter: false } } } ); } ); </script>

  25. Advanced How to: Table Sorting Automatically sort certain columns on page load • Modify our JavaScript: <script> jQuery(document).ready(function() { jQuery("#table_sort").tablesorter( { // sort on the first column and second column, order asc // 0 for ascending and 1 for descending sortList: [[0,0],[1,0]] } ); } ); </script>

  26. Tabs • Sometimes you have related content that do not warrant their own pages, so you'd like to put them all on the same page. • Similar to accordions, JavaScript tabs will show/hide content on your page via mouse clicks or keypresses. • Just jQuery • Preferred method for tabs that require no configuration. • Lightweight, does not require multiple javascript and css files. • Allows linking to a particular tab by using #tab ID • jQuery UI • Requires additional javascript and css files • Known issue where active tab does not remain highlighted • Supports several advanced configuration options Working Examples: http://www2.epa.gov/webguide/javascript-page-tabs (just jQuery) http://www2.epa.gov/webguide/javascript-tabs (jQuery UI)

  27. Tabs Just jQuery Method • Let’s start by using the following HTML which creates a simple sortable table: <div id="tabs"> <ul class="tabs" id="tabsnav"> <li><a href="#tab-1" class="menu-internal">Tab One</a></li> <li><a href="#tab-2" class="menu-internal">Tab Two</a></li> <li><a href="#tab-3" class="menu-internal">Tab Three</a></li> <li><a href="#tab-4" class="menu-internal">Tab Four</a></li> </ul> <div id="tab-1"> <h3>This is a really simple tabbed interface</h3> <p>Tab 1 Content</p> </div> Code continues on next slide >>

  28. Tabs Just jQuery Method <div id="tab-2"> <h3>Tab 2</h3> <p>Tab 2 content</p> </div> <div id="tab-3"> <h3>Tab 3</h3> <p>Tab 3 content</p> </div> <div id="tab-4"> <h3>Tab 4</h3> <p>Tab 4 content. <a href="#tab-1" class="menu-internal">Link to tab #1</a>.</p> </div> </div>

  29. Tabs Just jQuery Method • Next, we add our JavaScript: <script> jQuery(document).ready(function() { jQuery('#tabs > div').hide(); // hide all child divs jQuery('#tabs div:first').show(); // show first child dive jQuery('#tabsnavli:first').addClass('active'); jQuery('.menu-internal').click(function(){ jQuery('#tabsnav li').removeClass('active'); varcurrentTab = jQuery(this).attr('href'); jQuery('#tabsnav li a[href="'+currentTab+'"]').parent().addClass('active'); jQuery('#tabs > div').hide(); Code continues on next slide >>

  30. Tabs Just jQuery Method jQuery(currentTab).show(); return false; }); // Create a bookmarkable tab link hash = window.location.hash; elements = jQuery('a[href="'+hash+'"]'); // look for tabs that match the hash if (elements.length === 0) { // if there aren't any, then jQuery("ul.tabsli:first").addClass("active").show(); // show the first tab } else { elements.click(); } // else, open the tab in the hash }); </script>

  31. Advanced How to: Tabs jQuery UI Method with Show All • Let’s start by using the following HTML which creates a simple sortable table: <div id="tabs"> <ul class="menu tabs"> <li><a href="#tabs-1">Some Tab </a></li> <li><a href="#tabs-2">Some Tab </a></li> <li><a href="#tabs-3">Some Tab </a></li> <li><a href="#tabs-4">Some Tab </a></li> <li><a href="#tabs-5">Show All </a></li> </ul> <div id="tabs-1">Content 1</div> <div id="tabs-2">Content 2</div> <div id="tabs-3">Content 3</div> <div id="tabs-4">Content 4</div> <div id="tabs-5">&nbsp;</div> </div>

  32. Advanced How to: Tabs jQuery UI Method with Show All • Next, we add our JavaScript. Let’s start by adding require js and css files: <script src="/misc/ui/jquery.ui.core.min.js"></script> <script src="/misc/ui/jquery.ui.widget.min.js"></script> <script src="/misc/ui/jquery.ui.tabs.min.js"></script> <link type="text/css" rel="stylesheet" href="/misc/ui/jquery.ui.core.css" /> <link type="text/css" rel="stylesheet" href="/misc/ui/jquery.ui.tabs.css" /> Code continues on next slide >>

  33. Advanced How to: Tabs jQuery UI Method with Show All <script> jQuery(document).ready(function() { varuser_tabs = jQuery("#tabs").tabs({ show: function(event, ui) { if (ui.index == 4) { jQuery("div[id^='tabs-']").removeClass('ui-tabs-hide'); jQuery("div[id='tabs-5']").addClass('ui-tabs-hide'); } } }); }); </script>

  34. Responsive Image Maps • Usually, resizing an image isn't an issue when using the One EPA responsive template; the image grows or shrinks and is still legible. • However, when you're using image maps, the coordinates of the map are very important. Shrinking the image to fit the display will result in image map links no longer working properly. The solution to this issue is to use responsive image JavaScript. • To go over how to implement responsive image JavaScript, we will start by creating a page that contains a tab with a responsive image. • We will then create a page that contains an accordion with a responsive image. More Information: http://www2.epa.gov/webguide/javascript-responsive-image-maps

  35. Advanced How to: Tabs and Image Maps • First, we will add the following HTML to the page: <div id="tabs"> <ul class="tabs" id="tabsnav"> <li><a class="menu-internal" href="#tabs-1" id="tabnav-1">First Tab</a></li> <li><a class="menu-internal" href="#tabs-2" id="tabnav-2">Second Tab</a></li> <li><a class="menu-internal" href="#tabs-3" id="tabnav-3">Third Tab</a></li> </ul> <div id="tabs-1">Content tab 1 goes here.</div> <div id="tabs-2">Content tab 2 goes here.</div> <div id="tabs-3"> Code continues on next slide >>

  36. Advanced How to: Tabs and Image Maps <div class="figure image mode-full" style="width:150px"> [[{"fid":"54833","view_mode":"full","type":"media","attributes":{"height":100,"width":150,"alt":"Responsive Test","class":"media-element file-full","usemap":"#mymap"}}]] </div> </div> </div> <p><map name="mymap"><area alt="frames" coords="0,0,50,50" href="/webguide/javascript-page-tabs" shape="rect" /> <area alt="tables" coords="50,0,100,50" href="/webguide/javascript-dropdown-navigation" shape="rect" /> <area alt="postcards" coords="100,0,150,50" href="/webguide/javascript-colorbox" shape="rect" /> <area alt="index" coords="0,50,50,100" href="/webguide/web-style-guide#accordions" shape="rect" /> <area alt="javascript" coords="50,50,100,100" href="/webguide/web-style-guide#tablesorter" shape="rect" /> <area alt="css" coords="100,50,150,100" href="/webguide/javascript-responsive-image-maps" shape="rect" /></map></p>

  37. Advanced How to: Tabs and Image Maps • We will make sure that the Responsive Image Maps jQuery file is in place:<script src="/sites/all/libraries/rwdimagemaps/jquery.rwdImageMaps.min.js"></script> • Next we initiate the Responsive Image Map Javascript when the user clicks the tab containing the Image Map. We are using the jQuery UI method. <script src="/misc/ui/jquery.ui.core.min.js"></script> <script src="/misc/ui/jquery.ui.widget.min.js"></script> <script src="/misc/ui/jquery.ui.tabs.min.js"></script> <link type="text/css" rel="stylesheet" href="/misc/ui/jquery.ui.core.css" /> <link type="text/css" rel="stylesheet" href="/misc/ui/jquery.ui.tabs.css" /> <script> jQuery('#tabs').tabs(); jQuery('img[usemap]').rwdImageMaps(); jQuery( "#tabnav-3" ).click(function() { jQuery('img[usemap]').rwdImageMaps(); }); </script>

  38. Advanced How to: Accordions and Image Maps • First, we will add the following HTML to the page: <ul class="accordion"> <li><a class="accordion-title" href="#pane-1" title="Click to expand description">Your Accordion Title</a> <div class="accordion-pane" id="pane-1" style="display: none;"> <div class="figure image mode-full" style="width:150px"> [[{"fid":"54833","view_mode":"full","type":"media","attributes":{"height":100,"width":150,"alt":"Responsive Test","class":"media-element file-full","usemap":"#mymap"}}]] </div> </div> </li> </ul> Code continues on next slide >>

  39. Advanced How to: Accordions and Image Maps <p><map name="mymap"><area alt="frames" coords="0,0,50,50" href="/webguide/javascript-page-tabs" shape="rect" /> <area alt="tables" coords="50,0,100,50" href="/webguide/javascript-dropdown-navigation" shape="rect" /> <area alt="postcards" coords="100,0,150,50" href="/webguide/javascript-colorbox" shape="rect" /> <area alt="index" coords="0,50,50,100" href="/webguide/web-style-guide#accordions" shape="rect" /> <area alt="javascript" coords="50,50,100,100" href="/webguide/web-style-guide#tablesorter" shape="rect" /> <area alt="css" coords="100,50,150,100" href="/webguide/javascript-responsive-image-maps" shape="rect" /></map></p>

  40. Advanced How to: Accordions and Image Maps • We will make sure that the Responsive Image Maps jQuery file is in place:<script src="/sites/all/libraries/rwdimagemaps/jquery.rwdImageMaps.min.js"></script> • Next we initiate the Responsive Image Map Javascript when the user clicks the accordion containing the Image Map <script> jQuery(document).ready(function() {  jQuery( "#pane-1" ).click(function() { jQuery('img[usemap]').rwdImageMaps(); // Initiate Responsive Image Map after user clicks on the pane with ID defined above }); jQuery('img[usemap]').rwdImageMaps(); }); </script>

More Related