Skip to content

Commit 788b4eb

Browse files
HoriatuHoriatu
authored
CleanUp Css Media (#4)
* CleanUp Css Media * removed tools font css * FeatureList Loading Indicator * H2 Page Titles * Fix Loading Langiage for IE * Alt 1 to 7 * Left Panel Responsive to 720 * Details responsive * Search Responsive * PageBody Responsive * skip responsive * Check box responsive * Search close button & showNoResults size * Fixed aria-hidden rule * "Table Headers missing" rule fixed * restructured Language module to have appropiate roles * Fixed rule 'legend heades missing' * Alt for toold, capitals in tool names * Support for blocknote in lang name * Click support in lang name when contains a blockquote * Refactored LanguageSelect Won't restart for the same language! * Accessible Viewer (Application Title) * Map Navigator Responsive * Title band on the top * cleanup * Moved Language Selector to Title Bar * Press Alt 0 to 7 * Title styles for IE * Read AccessKey Links * Number Separator, Date/Time formats * Default lang * Show Language Label config * cleanup * Alt Flag * Say (...)Selected on BasemapGallery * Fixed Regression bug 'ALT + 4' * Reads NoResults text in search * reading "Please enter search Term" * Alternate hints with text * Alt + 7 Hint with text * Alt Hints responsive * Encapsulate FeatureList folder * FeatureList own styles * CleanUp FeatureList styles * create css link
1 parent 658e29b commit 788b4eb

File tree

19 files changed

+983
-646
lines changed

19 files changed

+983
-646
lines changed

‎css/styles.css‎

Lines changed: 555 additions & 480 deletions
Large diffs are not rendered by default.

‎css/styles1.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ http://reference.sitepoint.com/css/outline-color
7676
}
7777

7878
.goThereHint {
79-
background-color: black;
8079
}
8180

8281
.searchBtn:focus, .searchClear:focus, .searchInput:focus {

‎index.html‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en-us">
33
<head>
4-
<title>WCAG Viewer</title>
4+
<title>Accessible Viewer</title>
55
<!-- Define the versions of IE that will be used to render the page. See Microsoft documentation for details. Optional. -->
66

77
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -35,36 +35,39 @@
3535
<!-- Loading Indicator -->
3636
<div class="loading-indicator" role="presentation">
3737
<div class="loading-message" id="loading_message"></div>
38-
<div id='loadingTitle'><h1>WCAG Viewer</h1></div>
38+
<div id='loadingTitle'><h1>Accessible Viewer</h1></div>
3939
</div>
4040

4141
<!-- Map -->
4242
<!-- The ArcGIS API for JavaScript provides bidirectional support. When viewing the application in an right to left (rtl) language like Hebrew and Arabic the map needs to remain in left-to-right (ltr) mode. Specify this by setting the dir attribute on the div to ltr. -->
4343

4444
<div style="display:none;">
45+
<div id="layoutTopPanel"/>
46+
<div class="skip" role="banner">
47+
<a accesskey="1" href="#" tabindex="0" aria-hidden=true id="skip-tools">1. Skip to Tools</a>
48+
<a accesskey="2" href="#" tabindex="0" aria-hidden=true id="skip-search">2. Skip to Search</a>
49+
<a accesskey="3" href="#" tabindex="0" aria-hidden=true id="skip-content">3. Skip to Content</a>
50+
<a accesskey="4" href="#" tabindex="0" aria-hidden=true id="skip-splitter">4. Skip to Splitter</a>
51+
<a accesskey="5" href="#" tabindex="0" aria-hidden=true id="skip-map">5. Skip to Map</a>
52+
<a accesskey="6" href="#" tabindex="0" aria-hidden=true id="skip-instructions">6. Skip to Help</a>
53+
<a accesskey="7" href="#" tabindex="0" aria-hidden=true id="skip-feature">7. Skip to Feature Details</a>
54+
</div>
55+
<div id="panelTitle" class="fc bg borderBottom" style="display: flex; flex-direction: row;">
56+
<h1 id="panelText" class="fc" style="flex:1"></h1>
57+
<div id="languageSelectNode">
58+
</div>
59+
</div>
60+
</div>
61+
4562
<div id="leftPanel" class="leftWrapper">
46-
4763
<header id="panelTop" class="bg" style="color:transparent !important;">
4864
<!-- Panel Title -->
49-
<div id="panelTitle" class="fc bg borderBottom">
50-
<h1 class="fc" id="panelText">WCAG Viewer</h1>
51-
<div id="panelMenu" class="icon-menu icon-color"></div>
52-
<div class="skip" role="banner">
53-
<a accesskey="1" href="#" tabindex="0" id="skip-tools">1. Skip to Tools</a>
54-
<a accesskey="2" href="#" tabindex="0" id="skip-search">2. Skip to Search</a>
55-
<a accesskey="3" href="#" tabindex="0" id="skip-content">3. Skip to Content</a>
56-
<a accesskey="4" href="#" tabindex="0" id="skip-splitter">4. Skip to Splitter</a>
57-
<a accesskey="5" href="#" tabindex="0" id="skip-map">5. Skip to Map</a>
58-
<a accesskey="6" href="#" tabindex="0" id="skip-instructions">6. Skip to Help</a>
59-
<a accesskey="7" href="#" tabindex="0" id="skip-feature">7. Skip to Feature Details</a>
60-
</div>
61-
</div>
6265
<!-- Panel Tools -->
6366
<div id="panelTools" class="fc bg borderBottom" role="toolbar">
6467
<!--Tools are created programatically-->
6568
</div>
6669
<div id="panelSearch" class="fc bg borderBottom" >
67-
<div class="searchLabel"><label id="searchLabel" for="panelGeocoder">Search: </label></div>
70+
<div class="searchLabel"><label id="searchLabel" for="search_input">Search: </label></div>
6871
<div id="panelGeocoder"></div>
6972
</div>
7073
</header>
@@ -74,12 +77,11 @@ <h1 class="fc" id="panelText">WCAG Viewer</h1>
7477
</main>
7578
<footer id="panelBottom" class="bg">
7679
<span id="panelBottomSpan">Press <strong>ALT + 0 to 7</strong> keys for fast navigation</span>
77-
<div id="languageSelectNode"></div>
80+
<!-- <div id="languageSelectNode"></div> -->
7881
</footer>
7982
</div>
8083

8184
<div id="mapDiv" dir="ltr" tabindex=0></div>
82-
</div>
8385

8486
<script type="text/javascript" src="js/utils.js">
8587
</script>
@@ -92,7 +94,7 @@ <h1 class="fc" id="panelText">WCAG Viewer</h1>
9294
if(locale && locale.length===2) {
9395
locale = locale[1];
9496
}
95-
else locale = 'en-us';
97+
else locale = navigator.language.toLowerCase();//'en-us';
9698
document.documentElement.lang = locale;
9799

98100
var dojoConfig = {

‎js/FeatureList.js‎ renamed to ‎js/FeatureList/FeatureList.js‎

Lines changed: 61 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
22
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/on",
33
"dojo/Deferred", "dojo/promise/all", "dojo/query",
44
"esri/tasks/query", "esri/tasks/QueryTask",
5-
"dojo/text!application/dijit/templates/FeatureList.html",
5+
"dojo/text!application/FeatureList/templates/FeatureList.html",
66
"dojo/dom", "dojo/dom-class", "dojo/dom-attr", "dojo/dom-style", "dojo/dom-construct", "dojo/_base/event",
77
"dojo/string",
8-
"dojo/text!application/dijit/templates/FeatureListTemplate.html",
8+
"dojo/text!application/FeatureList/templates/FeatureListTemplate.html",
99
"dojo/i18n!application/nls/FeatureList",
10+
"dojo/i18n!application/nls/resources",
1011
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
1112
"esri/symbols/CartographicLineSymbol",
1213
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
1314
"esri/graphic", "esri/Color",
14-
"esri/dijit/InfoWindow",
1515
"dojo/NodeList-dom", "dojo/NodeList-traverse"
1616

1717
], function (
@@ -22,12 +22,11 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
2222
FeatureList,
2323
dom, domClass, domAttr, domStyle, domConstruct, event,
2424
string,
25-
listTemplate, i18n,
25+
listTemplate, i18n, Ri18n,
2626
SimpleMarkerSymbol, PictureMarkerSymbol,
2727
CartographicLineSymbol,
2828
SimpleFillSymbol, SimpleLineSymbol,
29-
Graphic, Color,
30-
InfoWindow
29+
Graphic, Color
3130
) {
3231
var Widget = declare("esri.dijit.FeatureList", [_WidgetBase, _TemplatedMixin, Evented], {
3332
// defaults
@@ -42,6 +41,13 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
4241
constructor: function (options, srcRefNode) {
4342
var defaults = lang.mixin({}, this.options, options);
4443
this.domNode = srcRefNode;
44+
45+
dojo.create("link", {
46+
href : "js/FeatureList/Templates/FeatureList.css",
47+
type : "text/css",
48+
rel : "stylesheet",
49+
}, document.head);
50+
4551
// properties
4652
this.set("map", defaults.map);
4753
var Layers = this._getLayers(defaults.layers);
@@ -166,18 +172,19 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
166172
if(pField.format.dateFormat) {
167173
fieldValue='FORMAT_DATE('+fieldName+',"'+pField.format.dateFormat+'")';
168174
}
175+
else if(pField.format.time) {
176+
fieldValue='FORMAT_TIME('+fieldName+',"'+pField.format.time+'")';
177+
}
169178
else if(pField.format.digitSeparator) {
170-
fieldValue='FORMAT_NUM('+fieldName+',"'+pField.format.places+'")';
179+
fieldValue='FORMAT_NUM('+fieldName+',"'+pField.format.places+'|'+pField.format.digitSeparator+'")';
171180
}
172181
else {
173182
fieldValue=fieldName;
174183
}
175184
}
176185

177186
content+='<tr class="featureItem_${_layerId}_${_featureId} hideAttr" tabindex="0" aria-label="'+pField.label+', '+fieldValue+',"">\n';
178-
content+=' <td valign="top">\n';
179-
content+=' <!--<img src="..\\images\\Filter0.png" alt="filter" class="filterBtn"/>-->\n';
180-
content+=' </td>\n';
187+
content+=' <td valign="top"></td>\n';
181188
content+=' <td valign="top" align="right">'+pField.label+'</td>\n';
182189
content+=' <td valign="top">:</td>\n';
183190
content+=' <td valign="top">'+fieldValue+'</td>\n';
@@ -218,12 +225,11 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
218225
_reloadList : function(ext) {
219226
if(!this._isVisible()) return;
220227
var loading_features = this.domNode.parentNode.parentNode.querySelector('#loading_features');
221-
//domStyle.set(loading_features, 'display', '-webkit-inline-box');
228+
222229
domClass.replace(loading_features, "showLoading", "hideLoading");
223230

224231
this.__reloadList(ext).then(function(results) {
225232
domClass.replace(loading_features, "hideLoading", "showLoading");
226-
//domStyle.set(loading_features, 'display', 'none');
227233
});
228234
},
229235

@@ -396,6 +402,7 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
396402
_content:content,
397403
_panTo: i18n.widgets.featureList.panTo,
398404
_zoomTo: i18n.widgets.featureList.zoomTo,
405+
hint:Ri18n.skip.featureDetaills,
399406
};
400407
lang.mixin(attributes, f.attributes);
401408
var nulls = window.tasks[r].layer.fields.map(function(f){return f.name;});
@@ -409,7 +416,7 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
409416
content = string.substitute(content, attributes);
410417
listTemplate=string.substitute(listTemplate, attributes);
411418
var result = string.substitute(listTemplate, attributes);
412-
var re = /((>)((?:http:\/\/www\.|https:\/\/www\.|ftp:\/\/www.|www\.)[a-z0-9]+(?:[\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(?:\/.*)?)(?:<))|(FORMAT_(DATE|NUM)\((-?\d*\.?\d*),\"(.+)\"\))/gm;
419+
var re = /((>)((?:http:\/\/www\.|https:\/\/www\.|ftp:\/\/www.|www\.)[a-z0-9]+(?:[\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(?:\/.*)?)(?:<))|(FORMAT_(DATE|TIME|NUM)\((-?\d*\.?\d*),\"(.+)\"\))/gm;
413420
do {
414421
var matches = re.exec(result);
415422
if(!matches) break;
@@ -420,14 +427,49 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
420427
result = result.replace(matches[3], "<a href='"+matches[3]+"' target='_blank'>Follow Link</a>");
421428
}
422429
else if(matches[6]==="DATE") {
423-
var date = new Date(Number(matches[7]));
424-
result = result.replace(matches[5], date.toLocaleDateString("en-US", {
425-
year: "numeric", month: "long", day: "numeric"
426-
}));
430+
var dateNum = matches[7];
431+
if(!isNaN(parseFloat(dateNum)) && isFinite(dateNum)) {
432+
var date = new Date(Number(dateNum));
433+
result = result.replace(matches[5], date.toLocaleDateString(
434+
document.documentElement.lang,
435+
{
436+
year: "numeric", month: "long", day: "numeric"
437+
}
438+
));
439+
} else
440+
result = result.replace(matches[5],'');
441+
}
442+
else if(matches[6]==="TIME") {
443+
var timeNum = matches[7];
444+
if(!isNaN(parseFloat(timeNum)) && isFinite(timeNum)) {
445+
var time = new Date(Number(timeNum));
446+
result = result.replace(matches[5], time.toLocaleDateString(
447+
document.documentElement.lang,
448+
{
449+
year: "numeric", month: "numeric", day: "numeric",
450+
hour: "2-digit", minute: "2-digit"
451+
}
452+
));
453+
} else
454+
result = result.replace(matches[5],'');
427455
}
428456
else if(matches[6]==="NUM") {
429-
var num = Number(matches[7]).toFixed(matches[8]);
430-
result = result.replace(matches[5], num);
457+
var num = matches[7];
458+
if(!isNaN(parseFloat(num)) && isFinite(num)) {
459+
num = Number(num);
460+
var d89=matches[8].split('|');
461+
var dec = Number(d89[0]);
462+
num = num.toLocaleString(document.documentElement.lang,
463+
{
464+
minimumFractionDigits: dec,
465+
maximumFractionDigits: dec,
466+
useGrouping: d89[1]
467+
}
468+
);
469+
470+
result = result.replace(matches[5], num);
471+
} else
472+
result = result.replace(matches[5],'');
431473
}
432474

433475
} while (true);

‎js/FeatureList/Templates/FeatureList.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
#featuresList {
2+
list-style: none;
3+
margin: 0px;
4+
padding-left: 0;
5+
-webkit-padding-start: 0;
6+
background-color: white;
7+
overflow-y: auto;
8+
overflow-x: hidden;
9+
}
10+
#featuresList li {
11+
margin: 3px;
12+
}
13+
14+
.borderLi {
15+
border: solid 1px gray;
16+
}
17+
18+
.featureItem h2 {
19+
font-size: 16px;
20+
text-align: left;
21+
}
22+
23+
/*.featureItem tr .filterBtn {
24+
width:18px;
25+
height:18px;
26+
opacity: 0.1;
27+
}
28+
29+
.featureItem tr:focus .filterBtn,
30+
.featureItem tr:hover .filterBtn
31+
{
32+
opacity: 1;
33+
}*/
34+
35+
36+

‎js/dijit/templates/FeatureList.html‎ renamed to ‎js/FeatureList/Templates/FeatureList.html‎

File renamed without changes.

‎js/dijit/templates/FeatureListTemplate.html‎ renamed to ‎js/FeatureList/Templates/FeatureListTemplate.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="featureItem">
2-
<table role="presentation">
2+
<table>
33
<tr>
44
<th valign="top">
55
<input id="featureButton_${_layerId}_${_featureId}" class="checkbox" type="checkbox" name="featureItem" value="${_layerId},${_featureId}" onchange="featureExpand(this)" onkeypress="featureExpandAndZoom(event, this)"/>
@@ -19,7 +19,7 @@
1919
</tr>
2020
<tr class="featureItem_${_layerId}_${_featureId} hideAttr">
2121
<td colspan="4" >
22-
<div class='goThereHint' style='right:50%;'>Alt + 7</div>
22+
<div class='goThereHint' style='left:20%; top:70%'><b>Alt&nbsp;+&nbsp;7</b> ${hint}</div>
2323
</td>
2424
</tr>
2525
${_content}

0 commit comments

Comments
 (0)