Skip to content

Commit

Permalink
CleanUp Css Media (#4)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@Horiatu
Horiatu authored Feb 2, 2017
1 parent 658e29b commit 788b4eb
Show file tree
Hide file tree
Showing 19 changed files with 983 additions and 646 deletions.
1,035 changes: 555 additions & 480 deletions css/styles.css
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion css/styles1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ http://reference.sitepoint.com/css/outline-color
}

.goThereHint {
background-color: black;
}

.searchBtn:focus, .searchClear:focus, .searchInput:focus {
Expand Down
42 changes: 22 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>WCAG Viewer</title>
<title>Accessible Viewer</title>
<!-- Define the versions of IE that will be used to render the page. See Microsoft documentation for details. Optional. -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down Expand Up @@ -35,36 +35,39 @@
<!-- Loading Indicator -->
<div class="loading-indicator" role="presentation">
<div class="loading-message" id="loading_message"></div>
<div id='loadingTitle'><h1>WCAG Viewer</h1></div>
<div id='loadingTitle'><h1>Accessible Viewer</h1></div>
</div>

<!-- Map -->
<!-- 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. -->

<div style="display:none;">
<div id="layoutTopPanel"/>
<div class="skip" role="banner">
<a accesskey="1" href="#" tabindex="0" aria-hidden=true id="skip-tools">1. Skip to Tools</a>
<a accesskey="2" href="#" tabindex="0" aria-hidden=true id="skip-search">2. Skip to Search</a>
<a accesskey="3" href="#" tabindex="0" aria-hidden=true id="skip-content">3. Skip to Content</a>
<a accesskey="4" href="#" tabindex="0" aria-hidden=true id="skip-splitter">4. Skip to Splitter</a>
<a accesskey="5" href="#" tabindex="0" aria-hidden=true id="skip-map">5. Skip to Map</a>
<a accesskey="6" href="#" tabindex="0" aria-hidden=true id="skip-instructions">6. Skip to Help</a>
<a accesskey="7" href="#" tabindex="0" aria-hidden=true id="skip-feature">7. Skip to Feature Details</a>
</div>
<div id="panelTitle" class="fc bg borderBottom" style="display: flex; flex-direction: row;">
<h1 id="panelText" class="fc" style="flex:1"></h1>
<div id="languageSelectNode">
</div>
</div>
</div>

<div id="leftPanel" class="leftWrapper">

<header id="panelTop" class="bg" style="color:transparent !important;">
<!-- Panel Title -->
<div id="panelTitle" class="fc bg borderBottom">
<h1 class="fc" id="panelText">WCAG Viewer</h1>
<div id="panelMenu" class="icon-menu icon-color"></div>
<div class="skip" role="banner">
<a accesskey="1" href="#" tabindex="0" id="skip-tools">1. Skip to Tools</a>
<a accesskey="2" href="#" tabindex="0" id="skip-search">2. Skip to Search</a>
<a accesskey="3" href="#" tabindex="0" id="skip-content">3. Skip to Content</a>
<a accesskey="4" href="#" tabindex="0" id="skip-splitter">4. Skip to Splitter</a>
<a accesskey="5" href="#" tabindex="0" id="skip-map">5. Skip to Map</a>
<a accesskey="6" href="#" tabindex="0" id="skip-instructions">6. Skip to Help</a>
<a accesskey="7" href="#" tabindex="0" id="skip-feature">7. Skip to Feature Details</a>
</div>
</div>
<!-- Panel Tools -->
<div id="panelTools" class="fc bg borderBottom" role="toolbar">
<!--Tools are created programatically-->
</div>
<div id="panelSearch" class="fc bg borderBottom" >
<div class="searchLabel"><label id="searchLabel" for="panelGeocoder">Search: </label></div>
<div class="searchLabel"><label id="searchLabel" for="search_input">Search: </label></div>
<div id="panelGeocoder"></div>
</div>
</header>
Expand All @@ -74,12 +77,11 @@ <h1 class="fc" id="panelText">WCAG Viewer</h1>
</main>
<footer id="panelBottom" class="bg">
<span id="panelBottomSpan">Press <strong>ALT + 0 to 7</strong> keys for fast navigation</span>
<div id="languageSelectNode"></div>
<!-- <div id="languageSelectNode"></div> -->
</footer>
</div>

<div id="mapDiv" dir="ltr" tabindex=0></div>
</div>

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

var dojoConfig = {
Expand Down
80 changes: 61 additions & 19 deletions js/FeatureList.js → js/FeatureList/FeatureList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
"dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/on",
"dojo/Deferred", "dojo/promise/all", "dojo/query",
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/text!application/dijit/templates/FeatureList.html",
"dojo/text!application/FeatureList/templates/FeatureList.html",
"dojo/dom", "dojo/dom-class", "dojo/dom-attr", "dojo/dom-style", "dojo/dom-construct", "dojo/_base/event",
"dojo/string",
"dojo/text!application/dijit/templates/FeatureListTemplate.html",
"dojo/text!application/FeatureList/templates/FeatureListTemplate.html",
"dojo/i18n!application/nls/FeatureList",
"dojo/i18n!application/nls/resources",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
"esri/graphic", "esri/Color",
"esri/dijit/InfoWindow",
"dojo/NodeList-dom", "dojo/NodeList-traverse"

], function (
Expand All @@ -22,12 +22,11 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
FeatureList,
dom, domClass, domAttr, domStyle, domConstruct, event,
string,
listTemplate, i18n,
listTemplate, i18n, Ri18n,
SimpleMarkerSymbol, PictureMarkerSymbol,
CartographicLineSymbol,
SimpleFillSymbol, SimpleLineSymbol,
Graphic, Color,
InfoWindow
Graphic, Color
) {
var Widget = declare("esri.dijit.FeatureList", [_WidgetBase, _TemplatedMixin, Evented], {
// defaults
Expand All @@ -42,6 +41,13 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
constructor: function (options, srcRefNode) {
var defaults = lang.mixin({}, this.options, options);
this.domNode = srcRefNode;

dojo.create("link", {
href : "js/FeatureList/Templates/FeatureList.css",
type : "text/css",
rel : "stylesheet",
}, document.head);

// properties
this.set("map", defaults.map);
var Layers = this._getLayers(defaults.layers);
Expand Down Expand Up @@ -166,18 +172,19 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
if(pField.format.dateFormat) {
fieldValue='FORMAT_DATE('+fieldName+',"'+pField.format.dateFormat+'")';
}
else if(pField.format.time) {
fieldValue='FORMAT_TIME('+fieldName+',"'+pField.format.time+'")';
}
else if(pField.format.digitSeparator) {
fieldValue='FORMAT_NUM('+fieldName+',"'+pField.format.places+'")';
fieldValue='FORMAT_NUM('+fieldName+',"'+pField.format.places+'|'+pField.format.digitSeparator+'")';
}
else {
fieldValue=fieldName;
}
}

content+='<tr class="featureItem_${_layerId}_${_featureId} hideAttr" tabindex="0" aria-label="'+pField.label+', '+fieldValue+',"">\n';
content+=' <td valign="top">\n';
content+=' <!--<img src="..\\images\\Filter0.png" alt="filter" class="filterBtn"/>-->\n';
content+=' </td>\n';
content+=' <td valign="top"></td>\n';
content+=' <td valign="top" align="right">'+pField.label+'</td>\n';
content+=' <td valign="top">:</td>\n';
content+=' <td valign="top">'+fieldValue+'</td>\n';
Expand Down Expand Up @@ -218,12 +225,11 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
_reloadList : function(ext) {
if(!this._isVisible()) return;
var loading_features = this.domNode.parentNode.parentNode.querySelector('#loading_features');
//domStyle.set(loading_features, 'display', '-webkit-inline-box');

domClass.replace(loading_features, "showLoading", "hideLoading");

this.__reloadList(ext).then(function(results) {
domClass.replace(loading_features, "hideLoading", "showLoading");
//domStyle.set(loading_features, 'display', 'none');
});
},

Expand Down Expand Up @@ -396,6 +402,7 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
_content:content,
_panTo: i18n.widgets.featureList.panTo,
_zoomTo: i18n.widgets.featureList.zoomTo,
hint:Ri18n.skip.featureDetaills,
};
lang.mixin(attributes, f.attributes);
var nulls = window.tasks[r].layer.fields.map(function(f){return f.name;});
Expand All @@ -409,7 +416,7 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
content = string.substitute(content, attributes);
listTemplate=string.substitute(listTemplate, attributes);
var result = string.substitute(listTemplate, attributes);
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;
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;
do {
var matches = re.exec(result);
if(!matches) break;
Expand All @@ -420,14 +427,49 @@ define(["dojo/Evented", "dojo/_base/declare", "dojo/_base/lang", "dojo/has", "es
result = result.replace(matches[3], "<a href='"+matches[3]+"' target='_blank'>Follow Link</a>");
}
else if(matches[6]==="DATE") {
var date = new Date(Number(matches[7]));
result = result.replace(matches[5], date.toLocaleDateString("en-US", {
year: "numeric", month: "long", day: "numeric"
}));
var dateNum = matches[7];
if(!isNaN(parseFloat(dateNum)) && isFinite(dateNum)) {
var date = new Date(Number(dateNum));
result = result.replace(matches[5], date.toLocaleDateString(
document.documentElement.lang,
{
year: "numeric", month: "long", day: "numeric"
}
));
} else
result = result.replace(matches[5],'');
}
else if(matches[6]==="TIME") {
var timeNum = matches[7];
if(!isNaN(parseFloat(timeNum)) && isFinite(timeNum)) {
var time = new Date(Number(timeNum));
result = result.replace(matches[5], time.toLocaleDateString(
document.documentElement.lang,
{
year: "numeric", month: "numeric", day: "numeric",
hour: "2-digit", minute: "2-digit"
}
));
} else
result = result.replace(matches[5],'');
}
else if(matches[6]==="NUM") {
var num = Number(matches[7]).toFixed(matches[8]);
result = result.replace(matches[5], num);
var num = matches[7];
if(!isNaN(parseFloat(num)) && isFinite(num)) {
num = Number(num);
var d89=matches[8].split('|');
var dec = Number(d89[0]);
num = num.toLocaleString(document.documentElement.lang,
{
minimumFractionDigits: dec,
maximumFractionDigits: dec,
useGrouping: d89[1]
}
);

result = result.replace(matches[5], num);
} else
result = result.replace(matches[5],'');
}

} while (true);
Expand Down
36 changes: 36 additions & 0 deletions js/FeatureList/Templates/FeatureList.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
#featuresList {
list-style: none;
margin: 0px;
padding-left: 0;
-webkit-padding-start: 0;
background-color: white;
overflow-y: auto;
overflow-x: hidden;
}
#featuresList li {
margin: 3px;
}

.borderLi {
border: solid 1px gray;
}

.featureItem h2 {
font-size: 16px;
text-align: left;
}

/*.featureItem tr .filterBtn {
width:18px;
height:18px;
opacity: 0.1;
}
.featureItem tr:focus .filterBtn,
.featureItem tr:hover .filterBtn
{
opacity: 1;
}*/



0 js/dijit/templates/FeatureList.html → js/FeatureList/Templates/FeatureList.html
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions js/dijit/templates/FeatureListTemplate.html → ...reList/Templates/FeatureListTemplate.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="featureItem">
<table role="presentation">
<table>
<tr>
<th valign="top">
<input id="featureButton_${_layerId}_${_featureId}" class="checkbox" type="checkbox" name="featureItem" value="${_layerId},${_featureId}" onchange="featureExpand(this)" onkeypress="featureExpandAndZoom(event, this)"/>
Expand All @@ -19,7 +19,7 @@
</tr>
<tr class="featureItem_${_layerId}_${_featureId} hideAttr">
<td colspan="4" >
<div class='goThereHint' style='right:50%;'>Alt + 7</div>
<div class='goThereHint' style='left:20%; top:70%'><b>Alt&nbsp;+&nbsp;7</b> ${hint}</div>
</td>
</tr>
${_content}
Expand Down
Loading

0 comments on commit 788b4eb

Please sign in to comment.