diff --git a/_includes/maps/offshore-regions.html b/_includes/maps/offshore-regions.html index 86b7a3284..83d7b4276 100644 --- a/_includes/maps/offshore-regions.html +++ b/_includes/maps/offshore-regions.html @@ -2,8 +2,9 @@ {% for region in site.offshore_regions %} {% if include.href %}{% endif %} - {{ region.title }} - + {{ state.title }} + {% if include.href %}{% endif %} diff --git a/_includes/maps/state-areas.html b/_includes/maps/state-areas.html index de5f865b9..10a8a8d36 100644 --- a/_includes/maps/state-areas.html +++ b/_includes/maps/state-areas.html @@ -7,9 +7,11 @@ - {{ state.title }}: {{ value }} - + {{ state.title }} + + {% if include.href %}{% endif %} {% endfor %} diff --git a/_includes/state-map.html b/_includes/state-map.html index fb7a9a872..ca2395370 100644 --- a/_includes/state-map.html +++ b/_includes/state-map.html @@ -2,7 +2,7 @@ {% assign states_svg = '/maps/states/all.svg' %} {% assign offshore_svg = '/maps/offshore/all.svg' %} -
+
{% if include.offshore_regions != false %} diff --git a/_sass/components/_all.scss b/_sass/components/_all.scss index 60ede291f..67d32cf8b 100644 --- a/_sass/components/_all.scss +++ b/_sass/components/_all.scss @@ -21,3 +21,4 @@ @import 'flowchart'; @import 'tabs'; @import 'sticky'; +@import 'tooltip'; diff --git a/_sass/components/_tooltip.scss b/_sass/components/_tooltip.scss new file mode 100644 index 000000000..8c0d9c7d6 --- /dev/null +++ b/_sass/components/_tooltip.scss @@ -0,0 +1,18 @@ +.eiti-tooltip { + background: $white; + border: 2px solid $greenest-land; + max-width: 300px; + padding: $base-padding-lite; + padding-bottom: ($base-padding-lite / 2); + padding-top: 0.23em; // to account for verticality of text + position: absolute; + z-index: 9000; + + p { + @include heading('para-sm'); + + color: $greenest-land; + font-weight: $weight-bold; + margin: 0; + } +} diff --git a/_sass/elements/_maps.scss b/_sass/elements/_maps.scss index 453da3d42..b1d8aeb12 100644 --- a/_sass/elements/_maps.scss +++ b/_sass/elements/_maps.scss @@ -27,10 +27,22 @@ svg.map { .feature.offshore-area use { fill: $greenest-land; + + &:hover, + &:active, + &:focus { + fill: darken($greenest-land, 5%); + } } .feature:not([fill]) use { fill-opacity: 0; + + &:hover, + &:active, + &:focus { + fill-opacity: 0.3; + } } .feature[fill] use { diff --git a/js/components/eiti-tooltip-wrapper.js b/js/components/eiti-tooltip-wrapper.js new file mode 100644 index 000000000..6909a9571 --- /dev/null +++ b/js/components/eiti-tooltip-wrapper.js @@ -0,0 +1,122 @@ +(function(exports) { + + var depixelize = function(value) { + if (value.indexOf('px') > -1) { + return +value.substr(0, value.length - 2); + } else { + return value; + } + }; + + var pixelize = function(value) { + return value + 'px'; + }; + + var hideTooltip = function (tooltip) { + tooltip.attr('aria-hidden', true); + }; + + var attached = function() { + var self = d3.select(this); + var svg = d3.select('svg'); + var svgParent = self; + var titles = self.selectAll('title'); + var tiles = self.selectAll('use'); + + var tooltip, + tooltipText; + + var init = function(initialize) { + tooltip = self.select('.eiti-tooltip'); + + if (tooltip.empty()) { + tooltip = self.append('div') + .classed('eiti-tooltip', true); + } + + tooltip + .attr('aria-hidden', true); + + tooltipText = tooltip.select('p'); + + if (tooltipText.empty()) { + tooltipText = tooltip.append('p'); + } + + // clear text + // if no javascript runs, will serve as the tooltip + // otherwise, clear it so that it doesn't interfere with + // this tooltip + titles.text(''); + }; + + var update = function() { + var event = event || d3.event || window.event; + var elem = event.target || event.srcElement; + + var parentElement = d3.select(elem.parentElement); + var title = parentElement.select('title'); + + init(); + + tooltipText.text(function(){ + return title.attr('desc'); + }); + + tooltip + .attr('aria-hidden', false) + .attr('aria-label', function(){ + return title.attr('alt'); + }) + .style('left', function() { + var tooltipWidth = depixelize(tooltip.style('width')); + var svgWidth = depixelize(svg.style('width')); + + if (svgWidth <= tooltipWidth + event.layerX) { + return pixelize(event.layerX - tooltipWidth); + } else { + return pixelize(event.layerX); + } + }) + .style('top', function() { + var tooltipHeight = depixelize(tooltip.style('height')); + var svgHeight = depixelize(svg.style('height')); + + if (svgHeight <= tooltipHeight + event.layerY) { + return pixelize(event.layerY - tooltipHeight); + } else { + return pixelize(event.layerY); + } + }); + }; + + var hide = function () { + var event = event || window.event; + var elem = event.target || event.srcElement; + if (elem.nodeName === 'svg') { + var tooltip = self.select('.eiti-tooltip'); + hideTooltip(tooltip); + } + }; + + init(this); + + tiles.on('mouseover', update); + svg.on('mouseout', hide); + }; + + var detached = function() { }; + + exports.EITITooltipWrapper = document.registerElement('eiti-tooltip-wrapper', { + extends: 'div', + prototype: Object.create( + HTMLElement.prototype, + { + attachedCallback: {value: attached}, + detachdCallback: {value: detached} + } + ) + }); + +})(this); + diff --git a/js/lib/homepage.min.js b/js/lib/homepage.min.js index 220143a61..100a080d1 100644 --- a/js/lib/homepage.min.js +++ b/js/lib/homepage.min.js @@ -49,6 +49,7 @@ 'use strict'; __webpack_require__(7); + __webpack_require__(41); })(window); @@ -193,6 +194,135 @@ }); +/***/ }, + +/***/ 41: +/***/ function(module, exports) { + + (function(exports) { + + var depixelize = function(value) { + if (value.indexOf('px') > -1) { + return +value.substr(0, value.length - 2); + } else { + return value; + } + }; + + var pixelize = function(value) { + return value + 'px'; + }; + + var hideTooltip = function (tooltip) { + tooltip.attr('aria-hidden', true); + }; + + var attached = function() { + var self = d3.select(this); + var svg = d3.select('svg'); + var svgParent = self; + var titles = self.selectAll('title'); + var tiles = self.selectAll('use'); + + var tooltip, + tooltipText; + + var init = function(initialize) { + tooltip = self.select('.eiti-tooltip'); + + if (tooltip.empty()) { + tooltip = self.append('div') + .classed('eiti-tooltip', true); + } + + tooltip + .attr('aria-hidden', true); + + tooltipText = tooltip.select('p'); + + if (tooltipText.empty()) { + tooltipText = tooltip.append('p'); + } + + // clear <title> text + // if no javascript runs, <title> will serve as the tooltip + // otherwise, clear it so that it doesn't interfere with + // this tooltip + titles.text(''); + }; + + var update = function() { + var event = event || d3.event || window.event; + var elem = event.target || event.srcElement; + + var parentElement = d3.select(elem.parentElement); + var title = parentElement.select('title'); + + init(); + + tooltipText.text(function(){ + return title.attr('desc'); + }); + + tooltip + .attr('aria-hidden', false) + .attr('aria-label', function(){ + return title.attr('alt'); + }) + .style('left', function() { + var tooltipWidth = depixelize(tooltip.style('width')); + var svgWidth = depixelize(svg.style('width')); + + if (svgWidth <= tooltipWidth + event.layerX) { + return pixelize(event.layerX - tooltipWidth); + } else { + return pixelize(event.layerX); + } + }) + .style('top', function() { + var tooltipHeight = depixelize(tooltip.style('height')); + var svgHeight = depixelize(svg.style('height')); + + if (svgHeight <= tooltipHeight + event.layerY) { + return pixelize(event.layerY - tooltipHeight); + } else { + return pixelize(event.layerY); + } + }); + }; + + var hide = function () { + var event = event || window.event; + var elem = event.target || event.srcElement; + if (elem.nodeName === 'svg') { + var tooltip = self.select('.eiti-tooltip'); + hideTooltip(tooltip); + } + }; + + init(this); + + tiles.on('mouseover', update); + svg.on('mouseout', hide); + }; + + var detached = function() { }; + + exports.EITITooltipWrapper = document.registerElement('eiti-tooltip-wrapper', { + extends: 'div', + prototype: Object.create( + HTMLElement.prototype, + { + attachedCallback: {value: attached}, + detachdCallback: {value: detached} + } + ) + }); + + })(this); + + + /***/ } /******/ }); \ No newline at end of file diff --git a/js/lib/main.min.js b/js/lib/main.min.js index bc1402f5b..4b7add00c 100644 --- a/js/lib/main.min.js +++ b/js/lib/main.min.js @@ -50,44 +50,44 @@ 'use strict'; // 3rd party dependencies - var d3 = __webpack_require__(8); + var d3 = __webpack_require__(9); exports.d3 = d3; // Custom map projection - d3.geo.albersCustom = __webpack_require__(9); + d3.geo.albersCustom = __webpack_require__(10); // common 3rd-party dependencies - exports.queue = __webpack_require__(10); - exports.topojson = __webpack_require__(11); - exports.colorbrewer = __webpack_require__(12); - exports.$ = exports.jQuery = __webpack_require__(14); + exports.queue = __webpack_require__(11); + exports.topojson = __webpack_require__(12); + exports.colorbrewer = __webpack_require__(13); + exports.$ = exports.jQuery = __webpack_require__(15); // EITI site-wide common code - exports.eiti = __webpack_require__(15); + exports.eiti = __webpack_require__(16); // custom elements polyfill - __webpack_require__(16); + __webpack_require__(17); - exports.EITIMap = __webpack_require__(17); - exports.EITISlider = __webpack_require__(19); - exports.EITIToggle = __webpack_require__(20); + exports.EITIMap = __webpack_require__(18); + exports.EITISlider = __webpack_require__(20); + exports.EITIToggle = __webpack_require__(21); // FIXME: does this export anything? - __webpack_require__(21); + __webpack_require__(22); // XXX List.js's node module isn't CommonJS compatible, so we have to use a // built version. - exports.List = __webpack_require__(22); + exports.List = __webpack_require__(23); - exports.Glossary = __webpack_require__(23); - exports.Accordion = __webpack_require__(24); + exports.Glossary = __webpack_require__(24); + exports.Accordion = __webpack_require__(25); $(function () { var glossary = new exports.Glossary(), accordion = new exports.Accordion(); }); - var svg4everybody = __webpack_require__(25); + var svg4everybody = __webpack_require__(26); svg4everybody(); })(window); @@ -101,7 +101,8 @@ /* 5 */, /* 6 */, /* 7 */, -/* 8 */ +/* 8 */, +/* 9 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;!function() { @@ -9660,12 +9661,12 @@ }(); /***/ }, -/* 9 */ +/* 10 */ /***/ function(module, exports, __webpack_require__) { (function(exports) { - var d3 = exports.d3 || __webpack_require__(8); + var d3 = exports.d3 || __webpack_require__(9); var E = 1e-6; @@ -9845,7 +9846,7 @@ /***/ }, -/* 10 */ +/* 11 */ /***/ function(module, exports, __webpack_require__) { (function (global, factory) { @@ -9966,7 +9967,7 @@ })); /***/ }, -/* 11 */ +/* 12 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;!function() { @@ -10506,14 +10507,14 @@ /***/ }, -/* 12 */ +/* 13 */ /***/ function(module, exports, __webpack_require__) { - module.exports = __webpack_require__(13); + module.exports = __webpack_require__(14); /***/ }, -/* 13 */ +/* 14 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/). @@ -10834,7 +10835,7 @@ /***/ }, -/* 14 */ +/* 15 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! @@ -21848,14 +21849,14 @@ /***/ }, -/* 15 */ +/* 16 */ /***/ function(module, exports, __webpack_require__) { (function(exports) { 'use strict'; - var d3 = __webpack_require__(8); - var queue = __webpack_require__(10); + var d3 = __webpack_require__(9); + var queue = __webpack_require__(11); /* * @namespace eiti @@ -22565,21 +22566,21 @@ /***/ }, -/* 16 */ +/* 17 */ /***/ function(module, exports) { /*! (C) WebReflection Mit Style License */ (function(e,t,n,r){"use strict";function rt(e,t){for(var n=0,r=e.length;n<r;n++)vt(e[n],t)}function it(e){for(var t=0,n=e.length,r;t<n;t++)r=e[t],nt(r,b[ot(r)])}function st(e){return function(t){j(t)&&(vt(t,e),rt(t.querySelectorAll(w),e))}}function ot(e){var t=e.getAttribute("is"),n=e.nodeName.toUpperCase(),r=S.call(y,t?v+t.toUpperCase():d+n);return t&&-1<r&&!ut(n,t)?-1:r}function ut(e,t){return-1<w.indexOf(e+'[is="'+t+'"]')}function at(e){var t=e.currentTarget,n=e.attrChange,r=e.attrName,i=e.target;Q&&(!i||i===t)&&t.attributeChangedCallback&&r!=="style"&&e.prevValue!==e.newValue&&t.attributeChangedCallback(r,n===e[a]?null:e.prevValue,n===e[l]?null:e.newValue)}function ft(e){var t=st(e);return function(e){X.push(t,e.target)}}function lt(e){K&&(K=!1,e.currentTarget.removeEventListener(h,lt)),rt((e.target||t).querySelectorAll(w),e.detail===o?o:s),B&&pt()}function ct(e,t){var n=this;q.call(n,e,t),G.call(n,{target:n})}function ht(e,t){D(e,t),et?et.observe(e,z):(J&&(e.setAttribute=ct,e[i]=Z(e),e.addEventListener(p,G)),e.addEventListener(c,at)),e.createdCallback&&Q&&(e.created=!0,e.createdCallback(),e.created=!1)}function pt(){for(var e,t=0,n=F.length;t<n;t++)e=F[t],E.contains(e)||(n--,F.splice(t--,1),vt(e,o))}function dt(e){throw new Error("A "+e+" type is already registered")}function vt(e,t){var n,r=ot(e);-1<r&&(tt(e,b[r]),r=0,t===s&&!e[s]?(e[o]=!1,e[s]=!0,r=1,B&&S.call(F,e)<0&&F.push(e)):t===o&&!e[o]&&(e[s]=!1,e[o]=!0,r=1),r&&(n=e[t+"Callback"])&&n.call(e))}if(r in t)return;var i="__"+r+(Math.random()*1e5>>0),s="attached",o="detached",u="extends",a="ADDITION",f="MODIFICATION",l="REMOVAL",c="DOMAttrModified",h="DOMContentLoaded",p="DOMSubtreeModified",d="<",v="=",m=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,g=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],y=[],b=[],w="",E=t.documentElement,S=y.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},x=n.prototype,T=x.hasOwnProperty,N=x.isPrototypeOf,C=n.defineProperty,k=n.getOwnPropertyDescriptor,L=n.getOwnPropertyNames,A=n.getPrototypeOf,O=n.setPrototypeOf,M=!!n.__proto__,_=n.create||function mt(e){return e?(mt.prototype=e,new mt):this},D=O||(M?function(e,t){return e.__proto__=t,e}:L&&k?function(){function e(e,t){for(var n,r=L(t),i=0,s=r.length;i<s;i++)n=r[i],T.call(e,n)||C(e,n,k(t,n))}return function(t,n){do e(t,n);while((n=A(n))&&!N.call(n,t));return t}}():function(e,t){for(var n in t)e[n]=t[n];return e}),P=e.MutationObserver||e.WebKitMutationObserver,H=(e.HTMLElement||e.Element||e.Node).prototype,B=!N.call(H,E),j=B?function(e){return e.nodeType===1}:function(e){return N.call(H,e)},F=B&&[],I=H.cloneNode,q=H.setAttribute,R=H.removeAttribute,U=t.createElement,z=P&&{attributes:!0,characterData:!0,attributeOldValue:!0},W=P||function(e){J=!1,E.removeEventListener(c,W)},X,V=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,10)},$=!1,J=!0,K=!0,Q=!0,G,Y,Z,et,tt,nt;O||M?(tt=function(e,t){N.call(t,e)||ht(e,t)},nt=ht):(tt=function(e,t){e[i]||(e[i]=n(!0),ht(e,t))},nt=tt),B?(J=!1,function(){var e=k(H,"addEventListener"),t=e.value,n=function(e){var t=new CustomEvent(c,{bubbles:!0});t.attrName=e,t.prevValue=this.getAttribute(e),t.newValue=null,t[l]=t.attrChange=2,R.call(this,e),this.dispatchEvent(t)},r=function(e,t){var n=this.hasAttribute(e),r=n&&this.getAttribute(e),i=new CustomEvent(c,{bubbles:!0});q.call(this,e,t),i.attrName=e,i.prevValue=n?r:null,i.newValue=t,n?i[f]=i.attrChange=1:i[a]=i.attrChange=0,this.dispatchEvent(i)},s=function(e){var t=e.currentTarget,n=t[i],r=e.propertyName,s;n.hasOwnProperty(r)&&(n=n[r],s=new CustomEvent(c,{bubbles:!0}),s.attrName=n.name,s.prevValue=n.value||null,s.newValue=n.value=t[r]||null,s.prevValue==null?s[a]=s.attrChange=0:s[f]=s.attrChange=1,t.dispatchEvent(s))};e.value=function(e,o,u){e===c&&this.attributeChangedCallback&&this.setAttribute!==r&&(this[i]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",s)),t.call(this,e,o,u)},C(H,"addEventListener",e)}()):P||(E.addEventListener(c,W),E.setAttribute(i,1),E.removeAttribute(i),J&&(G=function(e){var t=this,n,r,s;if(t===e.target){n=t[i],t[i]=r=Z(t);for(s in r){if(!(s in n))return Y(0,t,s,n[s],r[s],a);if(r[s]!==n[s])return Y(1,t,s,n[s],r[s],f)}for(s in n)if(!(s in r))return Y(2,t,s,n[s],r[s],l)}},Y=function(e,t,n,r,i,s){var o={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:i};o[s]=e,at(o)},Z=function(e){for(var t,n,r={},i=e.attributes,s=0,o=i.length;s<o;s++)t=i[s],n=t.name,n!=="setAttribute"&&(r[n]=t.value);return r})),t[r]=function(n,r){c=n.toUpperCase(),$||($=!0,P?(et=function(e,t){function n(e,t){for(var n=0,r=e.length;n<r;t(e[n++]));}return new P(function(r){for(var i,s,o,u=0,a=r.length;u<a;u++)i=r[u],i.type==="childList"?(n(i.addedNodes,e),n(i.removedNodes,t)):(s=i.target,Q&&s.attributeChangedCallback&&i.attributeName!=="style"&&(o=s.getAttribute(i.attributeName),o!==i.oldValue&&s.attributeChangedCallback(i.attributeName,i.oldValue,o)))})}(st(s),st(o)),et.observe(t,{childList:!0,subtree:!0})):(X=[],V(function E(){while(X.length)X.shift().call(null,X.shift());V(E)}),t.addEventListener("DOMNodeInserted",ft(s)),t.addEventListener("DOMNodeRemoved",ft(o))),t.addEventListener(h,lt),t.addEventListener("readystatechange",lt),t.createElement=function(e,n){var r=U.apply(t,arguments),i=""+e,s=S.call(y,(n?v:d)+(n||i).toUpperCase()),o=-1<s;return n&&(r.setAttribute("is",n=n.toLowerCase()),o&&(o=ut(i.toUpperCase(),n))),Q=!t.createElement.innerHTMLHelper,o&&nt(r,b[s]),r},H.cloneNode=function(e){var t=I.call(this,!!e),n=ot(t);return-1<n&&nt(t,b[n]),e&&it(t.querySelectorAll(w)),t}),-2<S.call(y,v+c)+S.call(y,d+c)&&dt(n);if(!m.test(c)||-1<S.call(g,c))throw new Error("The type "+n+" is invalid");var i=function(){return f?t.createElement(l,c):t.createElement(l)},a=r||x,f=T.call(a,u),l=f?r[u].toUpperCase():c,c,p;return f&&-1<S.call(y,d+l)&&dt(l),p=y.push((f?v:d)+c)-1,w=w.concat(w.length?",":"",f?l+'[is="'+n.toLowerCase()+'"]':l),i.prototype=b[p]=T.call(a,"prototype")?a.prototype:_(H),rt(t.querySelectorAll(w),s),i}})(window,document,Object,"registerElement"); /***/ }, -/* 17 */ +/* 18 */ /***/ function(module, exports, __webpack_require__) { // globals d3, topojson, eiti (function(exports) { 'use strict'; - var CustomEvent = __webpack_require__(18); + var CustomEvent = __webpack_require__(19); exports.EITIMap = document.registerElement('eiti-map', { // 'extends': 'svg', @@ -23076,7 +23077,7 @@ /***/ }, -/* 18 */ +/* 19 */ /***/ function(module, exports) { /* WEBPACK VAR INJECTION */(function(global) { @@ -23131,13 +23132,13 @@ /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()))) /***/ }, -/* 19 */ +/* 20 */ /***/ function(module, exports, __webpack_require__) { // globals d3 (function(exports) { - var CustomEvent = __webpack_require__(18); + var CustomEvent = __webpack_require__(19); exports.EITISlider = registerElement('eiti-slider', { createdCallback: function() { @@ -23396,7 +23397,7 @@ /***/ }, -/* 20 */ +/* 21 */ /***/ function(module, exports) { (function(exports) { @@ -23538,7 +23539,7 @@ /***/ }, -/* 21 */ +/* 22 */ /***/ function(module, exports) { $( document ).ready(function() { @@ -23633,7 +23634,7 @@ /***/ }, -/* 22 */ +/* 23 */ /***/ function(module, exports, __webpack_require__) { ;(function(){ @@ -25113,7 +25114,7 @@ /***/ }, -/* 23 */ +/* 24 */ /***/ function(module, exports) { (function(exports) { @@ -25317,7 +25318,7 @@ /***/ }, -/* 24 */ +/* 25 */ /***/ function(module, exports) { (function(exports) { @@ -25478,7 +25479,7 @@ /***/ }, -/* 25 */ +/* 26 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!function(root, factory) { @@ -25487,7 +25488,7 @@ return root.svg4everybody = factory(); }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)) : "object" == typeof exports ? module.exports = factory() : root.svg4everybody = factory(); }(this, function() { - /*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */ + /*! svg4everybody v2.0.3 | github.com/jonathantneal/svg4everybody */ function embed(node, target) { // if the target exists if (target) { diff --git a/js/lib/narrative.min.js b/js/lib/narrative.min.js index 2eda5862a..f0c33b080 100644 --- a/js/lib/narrative.min.js +++ b/js/lib/narrative.min.js @@ -50,7 +50,7 @@ __webpack_require__(3); - var OpenListNav = __webpack_require__(26); + var OpenListNav = __webpack_require__(27); // exporting instance of OpenListNav because openListNav is // referenced in the markup: @@ -564,7 +564,7 @@ /***/ }, -/***/ 26: +/***/ 27: /***/ function(module, exports) { (function(exports) { diff --git a/js/lib/reconciliation.min.js b/js/lib/reconciliation.min.js index 7433ed805..cc5a51fab 100644 --- a/js/lib/reconciliation.min.js +++ b/js/lib/reconciliation.min.js @@ -49,7 +49,7 @@ 'use strict'; __webpack_require__(1); - __webpack_require__(27); + __webpack_require__(28); })(window); @@ -501,7 +501,7 @@ /***/ }, -/***/ 27: +/***/ 28: /***/ function(module, exports) { // globals d3, eiti, EITIBar diff --git a/js/lib/state-pages.min.js b/js/lib/state-pages.min.js index 350b39e8f..398d406a7 100644 --- a/js/lib/state-pages.min.js +++ b/js/lib/state-pages.min.js @@ -47,18 +47,19 @@ (function(exports) { 'use strict'; - __webpack_require__(28); __webpack_require__(29); - __webpack_require__(36); + __webpack_require__(30); __webpack_require__(37); __webpack_require__(38); __webpack_require__(39); + __webpack_require__(40); + __webpack_require__(41); __webpack_require__(7); __webpack_require__(3); - var OpenListNav = __webpack_require__(26); + var OpenListNav = __webpack_require__(27); // exporting instance of OpenListNav because openListNav is // referenced in the markup: @@ -711,7 +712,8 @@ /***/ }, -/* 8 */ +/* 8 */, +/* 9 */ /***/ function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;!function() { @@ -10270,8 +10272,8 @@ }(); /***/ }, -/* 9 */, -/* 10 */ +/* 10 */, +/* 11 */ /***/ function(module, exports, __webpack_require__) { (function (global, factory) { @@ -10392,18 +10394,18 @@ })); /***/ }, -/* 11 */, /* 12 */, /* 13 */, /* 14 */, -/* 15 */ +/* 15 */, +/* 16 */ /***/ function(module, exports, __webpack_require__) { (function(exports) { 'use strict'; - var d3 = __webpack_require__(8); - var queue = __webpack_require__(10); + var d3 = __webpack_require__(9); + var queue = __webpack_require__(11); /* * @namespace eiti @@ -11113,7 +11115,6 @@ /***/ }, -/* 16 */, /* 17 */, /* 18 */, /* 19 */, @@ -11123,7 +11124,8 @@ /* 23 */, /* 24 */, /* 25 */, -/* 26 */ +/* 26 */, +/* 27 */ /***/ function(module, exports) { (function(exports) { @@ -11333,8 +11335,8 @@ /***/ }, -/* 27 */, -/* 28 */ +/* 28 */, +/* 29 */ /***/ function(module, exports) { (function(exports) { @@ -11416,14 +11418,14 @@ /***/ }, -/* 29 */ +/* 30 */ /***/ function(module, exports, __webpack_require__) { (function(exports) { - __webpack_require__(30); + __webpack_require__(31); - var eiti = __webpack_require__(15); + var eiti = __webpack_require__(16); var WITHHELD_FLAG = 'Withheld'; var NO_DATA_FLAG = undefined; @@ -11728,32 +11730,32 @@ /***/ }, -/* 30 */ +/* 31 */ /***/ function(module, exports, __webpack_require__) { - var d3 = __webpack_require__(8); + var d3 = __webpack_require__(9); - d3.legend = __webpack_require__(31); + d3.legend = __webpack_require__(32); module.exports = d3; /***/ }, -/* 31 */ +/* 32 */ /***/ function(module, exports, __webpack_require__) { module.exports = { - color: __webpack_require__(32), - size: __webpack_require__(34), - symbol: __webpack_require__(35) + color: __webpack_require__(33), + size: __webpack_require__(35), + symbol: __webpack_require__(36) }; /***/ }, -/* 32 */ +/* 33 */ /***/ function(module, exports, __webpack_require__) { - var helper = __webpack_require__(33); + var helper = __webpack_require__(34); module.exports = function(){ @@ -11962,7 +11964,7 @@ /***/ }, -/* 33 */ +/* 34 */ /***/ function(module, exports) { module.exports = { @@ -12131,10 +12133,10 @@ /***/ }, -/* 34 */ +/* 35 */ /***/ function(module, exports, __webpack_require__) { - var helper = __webpack_require__(33); + var helper = __webpack_require__(34); module.exports = function(){ @@ -12336,10 +12338,10 @@ /***/ }, -/* 35 */ +/* 36 */ /***/ function(module, exports, __webpack_require__) { - var helper = __webpack_require__(33); + var helper = __webpack_require__(34); module.exports = function(){ @@ -12500,7 +12502,7 @@ /***/ }, -/* 36 */ +/* 37 */ /***/ function(module, exports) { (function(exports) { @@ -12897,12 +12899,12 @@ /***/ }, -/* 37 */ +/* 38 */ /***/ function(module, exports, __webpack_require__) { (function(exports) { - var eiti = __webpack_require__(15); + var eiti = __webpack_require__(16); // symbols for "private" variables var DATA = '__es_data__'; var X = '__es_x__'; @@ -13288,7 +13290,7 @@ /***/ }, -/* 38 */ +/* 39 */ /***/ function(module, exports) { (function(exports) { @@ -13344,7 +13346,7 @@ /***/ }, -/* 39 */ +/* 40 */ /***/ function(module, exports) { (function(exports) { @@ -13490,5 +13492,133 @@ +/***/ }, +/* 41 */ +/***/ function(module, exports) { + + (function(exports) { + + var depixelize = function(value) { + if (value.indexOf('px') > -1) { + return +value.substr(0, value.length - 2); + } else { + return value; + } + }; + + var pixelize = function(value) { + return value + 'px'; + }; + + var hideTooltip = function (tooltip) { + tooltip.attr('aria-hidden', true); + }; + + var attached = function() { + var self = d3.select(this); + var svg = d3.select('svg'); + var svgParent = self; + var titles = self.selectAll('title'); + var tiles = self.selectAll('use'); + + var tooltip, + tooltipText; + + var init = function(initialize) { + tooltip = self.select('.eiti-tooltip'); + + if (tooltip.empty()) { + tooltip = self.append('div') + .classed('eiti-tooltip', true); + } + + tooltip + .attr('aria-hidden', true); + + tooltipText = tooltip.select('p'); + + if (tooltipText.empty()) { + tooltipText = tooltip.append('p'); + } + + // clear <title> text + // if no javascript runs, <title> will serve as the tooltip + // otherwise, clear it so that it doesn't interfere with + // this tooltip + titles.text(''); + }; + + var update = function() { + var event = event || d3.event || window.event; + var elem = event.target || event.srcElement; + + var parentElement = d3.select(elem.parentElement); + var title = parentElement.select('title'); + + init(); + + tooltipText.text(function(){ + return title.attr('desc'); + }); + + tooltip + .attr('aria-hidden', false) + .attr('aria-label', function(){ + return title.attr('alt'); + }) + .style('left', function() { + var tooltipWidth = depixelize(tooltip.style('width')); + var svgWidth = depixelize(svg.style('width')); + + if (svgWidth <= tooltipWidth + event.layerX) { + return pixelize(event.layerX - tooltipWidth); + } else { + return pixelize(event.layerX); + } + }) + .style('top', function() { + var tooltipHeight = depixelize(tooltip.style('height')); + var svgHeight = depixelize(svg.style('height')); + + if (svgHeight <= tooltipHeight + event.layerY) { + return pixelize(event.layerY - tooltipHeight); + } else { + return pixelize(event.layerY); + } + }); + }; + + var hide = function () { + var event = event || window.event; + var elem = event.target || event.srcElement; + if (elem.nodeName === 'svg') { + var tooltip = self.select('.eiti-tooltip'); + hideTooltip(tooltip); + } + }; + + init(this); + + tiles.on('mouseover', update); + svg.on('mouseout', hide); + }; + + var detached = function() { }; + + exports.EITITooltipWrapper = document.registerElement('eiti-tooltip-wrapper', { + extends: 'div', + prototype: Object.create( + HTMLElement.prototype, + { + attachedCallback: {value: attached}, + detachdCallback: {value: detached} + } + ) + }); + + })(this); + + + /***/ } /******/ ]); \ No newline at end of file diff --git a/js/src/homepage.js b/js/src/homepage.js index a27e7aff6..0ec3e632a 100644 --- a/js/src/homepage.js +++ b/js/src/homepage.js @@ -2,6 +2,7 @@ 'use strict'; require('./../components/aria-tabs.js'); + require('./../components/eiti-tooltip-wrapper.js'); })(window); diff --git a/js/src/state-pages.js b/js/src/state-pages.js index f99e9fdcf..00b6f8114 100644 --- a/js/src/state-pages.js +++ b/js/src/state-pages.js @@ -7,6 +7,7 @@ require('./../components/eiti-bar-chart.js'); require('./../components/year-switcher-section.js'); require('./../components/eiti-data-map-table.js'); + require('./../components/eiti-tooltip-wrapper.js'); require('./../components/aria-tabs.js');