View
40
Download
0
Category
Preview:
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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>
<-- Your dialog code here -->
</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>
<-- Your dialog code here -->
</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>
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>
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>
jQuery(document).ready(function() {
// 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>
jQuery(document).ready(function() {
// 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(document).ready(function() {
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>
<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 () {
var go_to_url = jQuery("#jump-link0").find(":selected").val();
document.location.href = go_to_url; //redirect
});
jQuery("#open-link1").click(function () {
var go_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 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: {
Code continues on next slide >>
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>
Code continues on next slide >>
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(document).ready(function() {
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();
Code continues on next slide >>
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-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"> </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" />
Code continues on next slide >>
33
Advanced How to: TabsjQuery UI Method with Show All<script>
jQuery(document).ready(function() {
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>
<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">
Advanced How to: Tabs andImage Maps
Code continues on next slide >>
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>
Advanced How to: Tabs andImage Maps
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() {
jQuery('img[usemap]').rwdImageMaps();
});
</script>
Advanced How to: Tabs andImage Maps
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
Code continues on next slide >>
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>
Advanced How to: Accordions andImage Maps
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(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>
Advanced How to: Accordions andImage Maps
Recommended