Advanced Training: WebCMS How-To

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

• 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>

How to: Add Accordions to a Page

7

• 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');

var thash1 = 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>

Advanced How to: Open an Accordion Panel using a Link on the Page

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-labelledby attribute.

<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>


</div>

10

• 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>


</div>

</div>

Colorbox: Inline Content

11

• Finally, we add the following JavaScript to the page:<script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-

min.js"></script>

<script>


// Hide the inline content

jQuery("#hidden-content").css({'display':'none'});

// Open inlined content in "box"

jQuery(".colorbox-inline").colorbox({inline:true,width:"50%"});

});

</script>

Colorbox: Inline Content

12

• 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","attrib

utes":{"alt":"","class":"media-

image","height":"160","width":"160"}}]]</a>

Colorbox: Image Gallery

13

• Finally, we add the following JavaScript to the page:<script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-

min.js"></script>

<script>


// Colorbox gallery

jQuery('.colorbox-gallery').colorbox({rel:'colorbox-gallery'});

});

</script>

Colorbox: Image Gallery

14

• 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.

Colorbox: YouTube Video

15

• 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>


// Colorbox YouTube content

jQuery(".colorbox-youtube").colorbox({iframe:true, innerWidth:425,

innerHeight:344});

});

</script>

Colorbox: YouTube Video

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("#open-link").click(function () {

var go_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>


<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>


<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("#open-link0").click(function () {

var go_to_url = jQuery("#jump-link0").find(":selected").val();


});

jQuery("#open-link1").click(function () {

var go_to_url = jQuery("#jump-link1").find(":selected").val();


});

});

</script>

20

Table Sorting• After creating a table, table sorting can simply be added

by adding the tablesorter class 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

Working Example: http://www2.epa.gov/webguide/web-style-guide#tablesorter

Note: Datatables provides similar table sorting functionality.

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 SortingDisable 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: {


24

Advanced How to: Table SortingDisable 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 SortingAutomatically 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.

Working Examples: http://www2.epa.gov/webguide/javascript-page-tabs (just jQuery) http://www2.epa.gov/webguide/javascript-tabs (jQuery UI)

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

27

TabsJust 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>


28

TabsJust 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

TabsJust jQuery Method• Next, we add our JavaScript:

<script>


jQuery('#tabs > div').hide(); // hide all child divs

jQuery('#tabs div:first').show(); // show first child dive

jQuery('#tabsnav li:first').addClass('active');

jQuery('.menu-internal').click(function(){

jQuery('#tabsnav li').removeClass('active');

var currentTab = jQuery(this).attr('href');

jQuery('#tabsnav li

a[href="'+currentTab+'"]').parent().addClass('active');

jQuery('#tabs > div').hide();


30

TabsJust 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.tabs li:first").addClass("active").show(); // show

the first tab

} else { elements.click(); } // else, open the tab in the hash

});

</script>

31

Advanced How to: TabsjQuery 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-5">Show All </a></li>

</ul>

<div id="tabs-1">Content 1</div>




<div id="tabs-5"> </div>

</div>

32

Advanced How to: TabsjQuery 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" />


33

Advanced How to: TabsjQuery UI Method with Show All<script>


var user_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

• 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>


2">Second Tab</a></li>


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">

Advanced How to: Tabs andImage Maps


36

<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

• 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() {


});

</script>


38

• 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>

Advanced How to: Accordions andImage Maps


39

<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

• 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( "#pane-1" ).click(function() {

jQuery('img[usemap]').rwdImageMaps(); // Initiate Responsive Image

Map after user clicks on the pane with ID defined above

});


});

</script>


Advanced Training: WebCMS How-To

Documents

Transcript of Advanced Training: WebCMS How-To