Download as
Browse Code »

Commit 0e0100791e5a57cd02f430fe3a06d99a8b3e868a

Authored by Michel Felipe
1 parent 2709b687
Exists in master and in 2 other branches production, staging

Added the all files of ie6-warning component like a common folder

Showing 13 changed files with 395 additions and 0 deletions   Show diff stats
images/ie6-warning/README.md 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,50 @@
  1 +#IE6 Upgrade Warning
  2 +
  3 +![Example Screenshot](http://img683.imageshack.us/img683/3734/exampleuk.png)
  4 +
  5 +NOTE: This is based off http://code.google.com/p/ie6-upgrade-warning/. Thanks to him for a great script, I've taken it further so that people can localize the messaging into different languages.
  6 +
  7 +The ie6-upgrade-warning is a little script (7.9kb) that displays a warning message politely informing the user to upgrade the browser to a newer version (links to newest IE, Firefox, Opera, Safari, Chrome are provided).
  8 +
  9 +The webpage is still visible behind a transparent background, but access to it is prevented. The idea is to force users to upgrade from IE6 and avoid the website from a bad reputation that website is not rendering correctly in IE6.
  10 +
  11 +Provides a much more sane way of localization.
  12 +
  13 +## Usage
  14 +
  15 +Look at the index.html file for example. This is a work in progress, as I'm refactoring someone else's code.
  16 +
  17 +## Changelog
  18 +
  19 +* Fixed JS Lint errors
  20 +* Parameterized configObj so that you can set an imgPath as well as localizations lookup object
  21 +
  22 +## Contributers
  23 +
  24 +- [renatocarvalho](https://github.com/renatocarvalho)
  25 +
  26 +## License
  27 +
  28 +The MIT License (MIT)
  29 +
  30 +Copyright (c) 2013 Mihai Ile
  31 +
  32 +Copyright (c) 2013 Jaime Bueza
  33 +
  34 +Permission is hereby granted, free of charge, to any person obtaining a copy
  35 +of this software and associated documentation files (the "Software"), to deal
  36 +in the Software without restriction, including without limitation the rights
  37 +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  38 +copies of the Software, and to permit persons to whom the Software is
  39 +furnished to do so, subject to the following conditions:
  40 +
  41 +The above copyright notice and this permission notice shall be included in all
  42 +copies or substantial portions of the Software.
  43 +
  44 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  45 +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  46 +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  47 +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  48 +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  49 +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  50 +SOFTWARE.
... ...
images/ie6-warning/background_browser.gif 0 → 100644
View file @0e01007

753 Bytes
images/ie6-warning/background_browser_hover.gif 0 → 100644
View file @0e01007

596 Bytes
images/ie6-warning/browser_chrome.gif 0 → 100644
View file @0e01007

4.83 KB
images/ie6-warning/browser_firefox.gif 0 → 100644
View file @0e01007

4.09 KB
images/ie6-warning/browser_ie.gif 0 → 100644
View file @0e01007

3.52 KB
images/ie6-warning/browser_opera.gif 0 → 100644
View file @0e01007

3.19 KB
images/ie6-warning/browser_safari.gif 0 → 100644
View file @0e01007

4.71 KB
images/ie6-warning/css/ie-warning.css 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,20 @@
  1 +div#_d {
  2 + margin: 47px 0;
  3 + border: 1px solid #777 !important;
  4 + box-shadow: 0 0 8px #888;
  5 + background: #FFF4F4 !important;
  6 + width: 710px !important;
  7 + height: inherit !important;
  8 + min-height: 265px;
  9 +}
  10 +
  11 +ul#_ul li {
  12 + float: left;
  13 +}
  14 +
  15 +h1#_h {
  16 + text-align: center;
  17 + margin: 13px 25px;
  18 + font-family: 'Open Sans', sans-serif !important;
  19 + font-size: 1.5em !important;
  20 +}
... ...
images/ie6-warning/index.html 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,36 @@
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 + "http://www.w3.org/TR/html4/strict.dtd">
  3 +
  4 +<html lang="en">
  5 +<head>
  6 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7 + <title>IE6 Warning Revamp</title>
  8 + <meta name="generator" content="TextMate http://macromates.com/">
  9 + <meta name="author" content="Jaime Bueza">
  10 + <!-- Date: 2010-06-16 -->
  11 +</head>
  12 +<body>
  13 +
  14 +</body>
  15 +<!--[if lte IE 6]>
  16 + <link rel="stylesheet" type="text/css" href="css/ie-warning.css"/>
  17 + <script src="localization/en_US.js"></script>
  18 + <script src="warning.js"></script>
  19 + <script>
  20 + window.onload=function(){
  21 + ie6Warning(function() {
  22 + var languageMap = {};
  23 + //specifies a JSON hash table for localization
  24 + if(window.IE6WarningLocalizations) {
  25 + languageMap = window.IE6WarningLocalizations;
  26 + }
  27 +
  28 + return {
  29 + imgPath: "./", //specifies the path to the icons of each browser
  30 + localizations: languageMap
  31 + };
  32 + });
  33 + };
  34 + </script>
  35 +<![endif]-->
  36 +</html>
... ...
images/ie6-warning/localization/en_US.js 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,17 @@
  1 +//render this via backend
  2 +window.IE6WarningLocalizations ={
  3 + msg1: "Did you know that your Internet Explorer is out of date?",
  4 + msg2: "To get the best possible experience using our website we recommend that you upgrade to a newer version or other web browser. A list of the most popular web browsers can be found below.",
  5 + msg3: "Just click on the icons to get to the download page",
  6 + br1: "Internet Explorer 7+",
  7 + br2: "Firefox 3+",
  8 + br3: "Safari 5+",
  9 + br4: "Opera 9.5+",
  10 + br5: "Chrome 5.0+",
  11 + url1: "http://www.microsoft.com/windows/Internet-explorer/default.aspx",
  12 + url2: "http://www.mozilla.com/firefox/",
  13 + url3: "http://www.apple.com/safari/download/",
  14 + url4: "http://www.opera.com/download/",
  15 + url5: "http://www.google.com/chrome"
  16 +};
  17 +
... ...
images/ie6-warning/localization/pt_BR.js 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,17 @@
  1 +//render this via backend
  2 +window.IE6WarningLocalizations ={
  3 + msg1: "Você sabia que o seu Internet Explorer está desatualizado?",
  4 + msg2: "Para obter uma melhor experiência possível usando nosso website, recomendamos que atualize seu navegador para uma versão mais nova ou outro navegador web. Veja abaixo a lista dos navegadores web mais populares.",
  5 + msg3: "Basta clicar em um dos ícones para ser direcionado para a página de download",
  6 + br1: "Internet Explorer 7+",
  7 + br2: "Firefox 3+",
  8 + br3: "Safari 5+",
  9 + br4: "Opera 9.5+",
  10 + br5: "Chrome 5.0+",
  11 + url1: "http://www.microsoft.com/brasil/windows/internet-explorer/",
  12 + url2: "http://www.mozilla.com/pt-BR/firefox/",
  13 + url3: "http://www.apple.com/br/safari/download/",
  14 + url4: "http://www.opera.com/download/",
  15 + url5: "http://www.google.com/chrome?hl=pt-BR"
  16 +};
  17 +
... ...
images/ie6-warning/warning.js 0 → 100644
  Diff comments   View file @0e01007
... ... @@ -0,0 +1,255 @@
  1 +(function(window, undefined) {
  2 + var fn = function(cb) {
  3 + var configObj = {};
  4 + if(typeof(cb) == 'function') {
  5 + configObj = cb();
  6 + }
  7 + //accessor method
  8 + var LOC = function(key) {
  9 + return configObj['localizations'][key];
  10 + };
  11 +
  12 + var imgPath = configObj['imgPath'];
  13 + var msg1 = LOC('msg1');
  14 + var msg2 = LOC('msg2');
  15 + var msg3 = LOC('msg3');
  16 + var br1 = LOC('br1');
  17 + var br2 = LOC('br2');;
  18 + var br3 = LOC('br3');
  19 + var br4 = LOC('br4');
  20 + var br5 = LOC('br5');
  21 + var url1 = LOC('url1');
  22 + var url2 = LOC('url2');
  23 + var url3 = LOC('url3');
  24 + var url4 = LOC('url4');
  25 + var url5 = LOC('url5');
  26 +
  27 + // oldschool from gcode
  28 + var _body = document.getElementsByTagName('body')[0];
  29 + var _d = document.createElement('div');
  30 + var _l = document.createElement('div');
  31 + var _h = document.createElement('h1');
  32 + var _p1 = document.createElement('p');
  33 + var _p2 = document.createElement('p');
  34 + var _ul = document.createElement('ul');
  35 + var _li1 = document.createElement('li');
  36 + var _li2 = document.createElement('li');
  37 + var _li3 = document.createElement('li');
  38 + var _li4 = document.createElement('li');
  39 + var _li5 = document.createElement('li');
  40 + var _ico1 = document.createElement('div');
  41 + var _ico2 = document.createElement('div');
  42 + var _ico3 = document.createElement('div');
  43 + var _ico4 = document.createElement('div');
  44 + var _ico5 = document.createElement('div');
  45 + var _lit1 = document.createElement('div');
  46 + var _lit2 = document.createElement('div');
  47 + var _lit3 = document.createElement('div');
  48 + var _lit4 = document.createElement('div');
  49 + var _lit5 = document.createElement('div');
  50 + _body.appendChild(_l);
  51 + _body.appendChild(_d);
  52 + _d.appendChild(_h);
  53 + _d.appendChild(_p1);
  54 + _d.appendChild(_p2);
  55 + _d.appendChild(_ul);
  56 + _ul.appendChild(_li1);
  57 + _ul.appendChild(_li2);
  58 + _ul.appendChild(_li3);
  59 + _ul.appendChild(_li4);
  60 + _ul.appendChild(_li5);
  61 + _li1.appendChild(_ico1);
  62 + _li2.appendChild(_ico2);
  63 + _li3.appendChild(_ico3);
  64 + _li4.appendChild(_ico4);
  65 + _li5.appendChild(_ico5);
  66 + _li1.appendChild(_lit1);
  67 + _li2.appendChild(_lit2);
  68 + _li3.appendChild(_lit3);
  69 + _li4.appendChild(_lit4);
  70 + _li5.appendChild(_lit5);
  71 + _d.setAttribute('id','_d');
  72 + _l.setAttribute('id','_l');
  73 + _h.setAttribute('id','_h');
  74 + _p1.setAttribute('id','_p1');
  75 + _p2.setAttribute('id','_p2');
  76 + _ul.setAttribute('id','_ul');
  77 + _li1.setAttribute('id','_li1');
  78 + _li2.setAttribute('id','_li2');
  79 + _li3.setAttribute('id','_li3');
  80 + _li4.setAttribute('id','_li4');
  81 + _li5.setAttribute('id','_li5');
  82 + _ico1.setAttribute('id','_ico1');
  83 + _ico2.setAttribute('id','_ico2');
  84 + _ico3.setAttribute('id','_ico3');
  85 + _ico4.setAttribute('id','_ico4');
  86 + _ico5.setAttribute('id','_ico5');
  87 + _lit1.setAttribute('id','_lit1');
  88 + _lit2.setAttribute('id','_lit2');
  89 + _lit3.setAttribute('id','_lit3');
  90 + _lit4.setAttribute('id','_lit4');
  91 + _lit5.setAttribute('id','_lit5');
  92 + var _width = document.documentElement.clientWidth;
  93 + var _height = document.documentElement.clientHeight;
  94 + var _dl = document.getElementById('_l');
  95 + _dl.style.width = _width+"px";
  96 + _dl.style.height = _height+"px";
  97 + _dl.style.position = "absolute";
  98 + _dl.style.top = "0px";
  99 + _dl.style.left = "0px";
  100 + _dl.style.filter = "alpha(opacity=50)";
  101 + _dl.style.background = "#fff";
  102 + var _dd = document.getElementById('_d');
  103 + _ddw = 650;
  104 + _ddh = 260;
  105 + _dd.style.width = _ddw+"px";
  106 + _dd.style.height = _ddh+"px";
  107 + _dd.style.position = "absolute";
  108 + _dd.style.top = ((_height-_ddh)/2)+"px";
  109 + _dd.style.left = ((_width-_ddw)/2)+"px";
  110 + _dd.style.padding = "20px";
  111 + _dd.style.background = "#fff";
  112 + _dd.style.border = "1px solid #ccc";
  113 + _dd.style.fontFamily = "'Lucida Grande','Lucida Sans Unicode',Arial,Verdana,sans-serif";
  114 + _dd.style.listStyleType = "none";
  115 + _dd.style.color = "#4F4F4F";
  116 + _dd.style.fontSize = "12px";
  117 + _h.appendChild(document.createTextNode(msg1));
  118 + var _hd = document.getElementById('_h');
  119 + _hd.style.display = "block";
  120 + _hd.style.fontSize = "1.3em";
  121 + _hd.style.marginBottom = "0.5em";
  122 + _hd.style.color = "#333";
  123 + _hd.style.fontFamily = "Helvetica,Arial,sans-serif";
  124 + _hd.style.fontWeight = "bold";
  125 + _p1.appendChild(document.createTextNode(msg2));
  126 + var _p1d = document.getElementById('_p1');
  127 + _p1d.style.marginBottom = "1em";
  128 + _p2.appendChild(document.createTextNode(msg3));
  129 + var _p2d = document.getElementById('_p2');
  130 + _p2d.style.marginBottom = "1em";
  131 + var _uld = document.getElementById('_ul');
  132 + _uld.style.listStyleImage = "none";
  133 + _uld.style.listStylePosition = "outside";
  134 + _uld.style.listStyleType = "none";
  135 + _uld.style.margin = "0 px auto";
  136 + _uld.style.padding = "0px";
  137 + _uld.style.paddingLeft = "10px";
  138 + var _li1d = document.getElementById('_li1');
  139 + var _li2d = document.getElementById('_li2');
  140 + var _li3d = document.getElementById('_li3');
  141 + var _li4d = document.getElementById('_li4');
  142 + var _li5d = document.getElementById('_li5');
  143 + var _li1ds = _li1d.style;
  144 + var _li2ds = _li2d.style;
  145 + var _li3ds = _li3d.style;
  146 + var _li4ds = _li4d.style;
  147 + var _li5ds = _li5d.style;
  148 + _li1ds.background = _li2ds.background = _li3ds.background = _li4ds.background = _li5ds.background = "transparent url('"+imgPath+"background_browser.gif') no-repeat scroll left top";
  149 + _li1ds.cursor = _li2ds.cursor = _li3ds.cursor = _li4ds.cursor = _li5ds.cursor = "pointer";
  150 + _li1d.onclick = function() {window.location = url1; };
  151 + _li2d.onclick = function() {window.location = url2; };
  152 + _li3d.onclick = function() {window.location = url3; };
  153 + _li4d.onclick = function() {window.location = url4; };
  154 + _li5d.onclick = function() {window.location = url5; };
  155 +
  156 + var addEvent = window.addEventListener ? function (elem, type, method) {
  157 + elem.addEventListener(type, method, false);
  158 + } : function (elem, type, method) {
  159 + elem.attachEvent('on' + type, method);
  160 + };
  161 +
  162 + addEvent(_li1d,'mouseover',function(){
  163 + _li1d.style.background = "url('"+imgPath+"background_browser_hover.gif') no-repeat scroll left top"
  164 + });
  165 +
  166 + addEvent(_li1d,'mouseout',function(){
  167 + _li1d.style.background = "transparent url('"+imgPath+"background_browser.gif') no-repeat scroll left top";
  168 + });
  169 +
  170 + addEvent(_li2d,'mouseover',function(){
  171 + _li2d.style.background = "url('"+imgPath+"background_browser_hover.gif') no-repeat scroll left top"
  172 + });
  173 +
  174 + addEvent(_li2d,'mouseout',function(){
  175 + _li2d.style.background = "transparent url('"+imgPath+"background_browser.gif') no-repeat scroll left top";
  176 + });
  177 +
  178 + addEvent(_li3d,'mouseover',function(){
  179 + _li3d.style.background = "url('"+imgPath+"background_browser_hover.gif') no-repeat scroll left top"
  180 + });
  181 +
  182 + addEvent(_li3d,'mouseout',function(){
  183 + _li3d.style.background = "url('"+imgPath+"background_browser.gif') no-repeat scroll left top"
  184 + });
  185 +
  186 + addEvent(_li4d,'mouseover',function(){
  187 + _li4d.style.background = "url('"+imgPath+"background_browser_hover.gif') no-repeat scroll left top"
  188 + });
  189 +
  190 + addEvent(_li4d,'mouseout',function(){
  191 + _li4d.style.background = "url('"+imgPath+"background_browser.gif') no-repeat scroll left top"
  192 + });
  193 +
  194 + addEvent(_li5d,'mouseover',function(){
  195 + _li5d.style.background = "url('"+imgPath+"background_browser_hover.gif') no-repeat scroll left top"
  196 + });
  197 +
  198 + addEvent(_li5d,'mouseout',function(){
  199 + _li5d.style.background = "url('"+imgPath+"background_browser.gif') no-repeat scroll left top"
  200 + });
  201 +
  202 + _li1ds.styleFloat = _li2ds.styleFloat = _li3ds.styleFloat = _li4ds.styleFloat = _li5ds.styleFloat = "left";
  203 + _li1ds.width = _li2ds.width = _li3ds.width = _li4ds.width = _li5ds.width = "120px";
  204 + _li1ds.height = _li2ds.height = _li3ds.height = _li4ds.height = _li5ds.height = "122px";
  205 + _li1ds.margin = _li2ds.margin = _li3ds.margin = _li4ds.margin = _li5ds.margin = "0 10px 10px 0";
  206 + var _ico1d = document.getElementById('_ico1');
  207 + var _ico2d = document.getElementById('_ico2');
  208 + var _ico3d = document.getElementById('_ico3');
  209 + var _ico4d = document.getElementById('_ico4');
  210 + var _ico5d = document.getElementById('_ico5');
  211 + var _ico1ds = _ico1d.style;
  212 + var _ico2ds = _ico2d.style;
  213 + var _ico3ds = _ico3d.style;
  214 + var _ico4ds = _ico4d.style;
  215 + var _ico5ds = _ico5d.style;
  216 + _ico1ds.width = _ico2ds.width = _ico3ds.width = _ico4ds.width = _ico5ds.width = "100px";
  217 + _ico1ds.height = _ico2ds.height = _ico3ds.height = _ico4ds.height = _ico5ds.height = "100px";
  218 + _ico1ds.margin = _ico2ds.margin = _ico3ds.margin = _ico4ds.margin = _ico5ds.margin = "1px auto";
  219 + _ico1ds.background = "transparent url('"+imgPath+"browser_ie.gif') no-repeat scroll left top";
  220 + _ico2ds.background = "transparent url('"+imgPath+"browser_firefox.gif') no-repeat scroll left top";
  221 + _ico3ds.background = "transparent url('"+imgPath+"browser_safari.gif') no-repeat scroll left top";
  222 + _ico4ds.background = "transparent url('"+imgPath+"browser_opera.gif') no-repeat scroll left top";
  223 + _ico5ds.background = "transparent url('"+imgPath+"browser_chrome.gif') no-repeat scroll left top";
  224 + _lit1.appendChild(document.createTextNode(br1));
  225 + _lit2.appendChild(document.createTextNode(br2));
  226 + _lit3.appendChild(document.createTextNode(br3));
  227 + _lit4.appendChild(document.createTextNode(br4));
  228 + _lit5.appendChild(document.createTextNode(br5));
  229 + var _lit1d = document.getElementById('_lit1');
  230 + var _lit2d = document.getElementById('_lit2');
  231 + var _lit3d = document.getElementById('_lit3');
  232 + var _lit4d = document.getElementById('_lit4');
  233 + var _lit5d = document.getElementById('_lit5');
  234 + var _lit1ds = _lit1d.style;
  235 + var _lit2ds = _lit2d.style;
  236 + var _lit3ds = _lit3d.style;
  237 + var _lit4ds = _lit4d.style;
  238 + var _lit5ds = _lit5d.style;
  239 + _lit1ds.color = _lit2ds.color = _lit3ds.color = _lit4ds.color = _lit5ds.color = "#808080";
  240 + _lit1ds.fontSize = _lit2ds.fontSize = _lit3ds.fontSize = _lit4ds.fontSize = _lit5ds.fontSize = "0.8em";
  241 + _lit1ds.height = _lit2ds.height = _lit3ds.height = _lit4ds.height = _lit5ds.height = "18px";
  242 + _lit1ds.lineHeight = _lit2ds.lineHeight = _lit3ds.lineHeight = _lit4ds.lineHeight = _lit5ds.lineHeight = "17px";
  243 + _lit1ds.margin = _lit2ds.margin = _lit3ds.margin = _lit4ds.margin = _lit5ds.margin = "1px auto";
  244 + _lit1ds.width = _lit2ds.width = _lit3ds.width = _lit4ds.width = _lit5ds.width = "118px";
  245 + _lit1ds.textAlign = _lit2ds.textAlign = _lit3ds.textAlign = _lit4ds.textAlign = _lit5ds.textAlign = "center";
  246 + };
  247 +
  248 +
  249 + //safely set it into global namespace.
  250 + if(window.ie6Warning === undefined || !ie6Warning) {
  251 + window.ie6Warning = fn;
  252 + }
  253 +
  254 +
  255 +})(window);
... ...