├── LICENSE
├── letsee
    ├── letsee.css
    └── letsee.js
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Ilya Skriblovsky
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/letsee/letsee.css:
--------------------------------------------------------------------------------
 1 | body.letsee-active {
 2 |     margin-top: 40px;
 3 | }
 4 | 
 5 | #letsee-panel {
 6 |     position: fixed;
 7 |     display: none;
 8 |     top: 0;
 9 |     width: 100%;
10 | 
11 |     margin: 0;
12 | 
13 |     background: #e0e0e0;
14 |     border-bottom: 1px solid #808080;
15 | 
16 |     font-size: 18px;
17 |     line-height: 1.6;
18 |     text-align: center;
19 |     text-shadow: 0 1px 1px #fff;
20 | }
21 | body.letsee-active #letsee-panel {
22 |     display: block;
23 | }
24 | 
25 | #letsee-panel * {
26 |     user-select: none;
27 |     -webkit-user-select: none;
28 |     -moz-user-select: none;
29 | 
30 |     vertical-align: middle;
31 | }
32 | 
33 | #letsee-panel dl, #letsee-panel dt, #letsee-panel dd {
34 |     display: inline-block;
35 | }
36 | 
37 | #letsee-panel dl {
38 |     margin: 0;
39 | }
40 | #letsee-panel dt {
41 |     margin: 0 0px 0 25px;
42 |     color: #444;
43 | }
44 | #letsee-panel dd {
45 |     margin: 0 5px;
46 | }
47 | 
48 | #letsee-panel input[type="checkbox"] {
49 |     width: 18px;
50 |     height: 18px;
51 | }
52 | 
53 | .letsee-change-fontsize {
54 |     padding: 0 0.25em;
55 |     margin: 0 2px;
56 |     border: 1px solid transparent;
57 |     text-decoration: none !important;
58 | }
59 | .letsee-fontsize-small  { font-size: 14px !important; }
60 | .letsee-fontsize-medium { font-size: 18px !important; }
61 | .letsee-fontsize-large  { font-size: 24px !important; }
62 | .letsee-fontsize-active {
63 |     border: 1px solid #777;
64 |     border-radius: 4px;
65 |     background: #ccc;
66 |     box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset
67 | }
68 | 
69 | .letsee-colors span {
70 |     padding: 0 5px;
71 |     margin: 0 2px;
72 |     font-size: 120%;
73 |     border-radius: 4px;
74 | }
75 | .letsee-colors-bonw span { color: #000 !important; background: #fff; }
76 | .letsee-colors-wonb span { color: #fff !important; background: #000; }
77 | .letsee-colors {
78 |     border: 1px solid transparent;
79 |     padding: 5px 0;
80 |     text-decoration: none !important;
81 | }
82 | .letsee-colors-active {
83 |     border: 1px solid #777;
84 |     border-radius: 4px;
85 |     box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset
86 | }
87 | 
88 | 
89 | .letsee-turn-off {
90 |     margin-left: 60px;
91 | }
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # `ПРОЕКТ УСТАРЕЛ И БОЛЬШЕ НЕ ПОДДЕРЖИВАЕТСЯ`
  2 | 
  3 | Если вы ищете как добавить на ваш сайт режим для слабовидящих, рассмотрите эти альтернативы:
  4 | 
  5 | * https://slabovid.ru/info/access/
  6 | * https://lidrekon.ru/slep/
  7 | * https://wp-lessons.com/comfortable-reading-premium
  8 | 
  9 | ---
 10 | 
 11 | # letsee — Режим для слабовидящих для любого сайта
 12 | 
 13 | Letsee adapts any website for visually impaired people
 14 | 
 15 | [English version is below](#install)
 16 | 
 17 | ## Установка
 18 | 
 19 | Разместите папку `letsee` там, где хранятся статические файлы (*.js, *.css) на вашем сайте. В шаблоне всех страниц сайта в блоке `<head>` разместите код подключения скрипта:
 20 | ```html
 21 | <link rel="stylesheet" href="/letsee/letsee.css"/>
 22 | <script src="/letsee/letsee.js"></script>
 23 | ```
 24 | Измените пути к css- и js-файлам, если необходимо.
 25 | 
 26 | В нужном месте шаблона разместите ссылку «Режим для слабовидящих»:
 27 | ```html
 28 | <a href="javascript://" onclick="letsee_toggle_panel()">Версия для слабовидящих</a>
 29 | ```
 30 | 
 31 | Всё готово!
 32 | 
 33 | ## Настройка
 34 | 
 35 | При необходимости можно задать собственные CSS-правила для разных режимов, которые пользователь может включить с помощью `letsee`. Для этого нужно разместить такой код *перед* тэгом `<script>`, загружающим `letsee.js`:
 36 | ```html
 37 | <script>
 38 |     letsee_custom_css = {
 39 |         enabled: '...', // CSS-правила, которые будут применяться когда включен режим для слабовидящих
 40 |         images_hidden: '...', // правила для режима без картинок
 41 |         colors: {
 42 |             bonw: '...', // правила для режима чёрный-на-белом
 43 |             wonb: '...' // правила для инверсного режима белый-на-чёрном
 44 |         }
 45 |     };
 46 | </script>
 47 | ```
 48 | 
 49 | Например, такой код спрячет ссылку на режим для слабовидящих когда этот режим уже включен, а также спрячет блок слайдшоу если пользователь отключил картинки:
 50 | ```html
 51 | <script>
 52 |     letsee_custom_css = {
 53 |         enabled: '#enable_letsee { display: none; }',
 54 |         images_hidden: '#slideshow { display: none; }'
 55 |     }
 56 | </script>
 57 | <a id="enable_letsee" href="javascript://" onclick="letsee_toggle_panel()">Версия для слабовидящих</a>
 58 | ```
 59 | 
 60 | 
 61 | ## Install
 62 | 
 63 | Upload `letsee` folder to your website, preferrably into where other *.js and *.css files are stored. Put this code into toplevel site template inside `<head>` block:
 64 | ```html
 65 | <link rel="stylesheet" href="/letsee/letsee.css"/>
 66 | <script src="/letsee/letsee.js"></script>
 67 | ```
 68 | Change paths to css- and js-file if needed.
 69 | 
 70 | Use this code where you want to place a link on the mode for visually impaired people:
 71 | ```html
 72 | <a href="javascript://" onclick="letsee_toggle_panel()">Accessibility mode</a>
 73 | ```
 74 | 
 75 | That's all!
 76 | 
 77 | ## Configuration
 78 | 
 79 | You may set additional CSS rules for different modes that user may select using `letsee` panel. Put this code *before* `<script>` tag that includes `letsee.js`:
 80 | ```html
 81 | <script>
 82 |     letsee_custom_css = {
 83 |         enabled: '...', // CSS rules that will apply when the accessibility mode is enabled
 84 |         images_hidden: '...', // CSS rules for no-images mode
 85 |         colors: {
 86 |             bonw: '...', // rules for black-on-white mode
 87 |             wonb: '...' // rules for inverse white-on-black mode
 88 |         }
 89 |     };
 90 | </script>
 91 | ```
 92 | 
 93 | For example, this code will hide accessibility mode link if the mode is enabeld and also will hide a slideshow if user choosed to disable images:
 94 | ```html
 95 | <script>
 96 |     letsee_custom_css = {
 97 |         enabled: '#enable_letsee { display: none; }',
 98 |         images_hidden: '#slideshow { display: none; }'
 99 |     }
100 | </script>
101 | <a id="enable_letsee" href="javascript://" onclick="letsee_toggle_panel()">Accessibility mode</a>
102 | ```
103 | 


--------------------------------------------------------------------------------
/letsee/letsee.js:
--------------------------------------------------------------------------------
  1 | ;(function ($) {
  2 | 
  3 | var style_tag = $('<style>').appendTo('body');
  4 | var letsee_custom_css = {};
  5 | 
  6 | if (window.letsee_custom_css)
  7 |     letsee_custom_css = window.letsee_custom_css;
  8 | 
  9 | function set_css(css) {
 10 |     style_tag.text(css);
 11 | }
 12 | 
 13 | 
 14 | function gen_base_css() {
 15 |     return ('*:not(.letsee-guard) {' +
 16 |             '   line-height: 1.3 !important;' +
 17 |             '   text-shadow: none !important;' +
 18 |             '}' +
 19 |             'a:not(.letsee-guard) {' +
 20 |             '   text-decoration: underline !important;' +
 21 |             '}')
 22 | }
 23 | 
 24 | 
 25 | function gen_font_size_css(font_size) {
 26 |     if (font_size == null)
 27 |         return '';
 28 | 
 29 |     return ('*:not(.letsee-guard) {'
 30 |           + '     font-size: ' + font_size + 'px !important;'
 31 |           + '}');
 32 | }
 33 | 
 34 | function gen_images_css(hide) {
 35 |     if (! hide)
 36 |         return '';
 37 | 
 38 |     return (letsee_custom_css.images_hidden || '') + 'img { display: none !important; }';
 39 | }
 40 | 
 41 | function gen_colors_css(colors) {
 42 |     if (! colors)
 43 |         return '';
 44 | 
 45 |     var props;
 46 |     switch (colors)
 47 |     {
 48 |         case 'bonw': props = 'color: #000 !important; background: #fff !important;'; break;
 49 |         case 'wonb': props = 'color: #fff !important; background: #000 !important;'; break;
 50 |     }
 51 | 
 52 |     if (props)
 53 |         return (letsee_custom_css.colors && letsee_custom_css.colors[colors] || '') + '*:not(.letsee-guard) {' + props + '}';
 54 |     else
 55 |         return '';
 56 | }
 57 | 
 58 | function gen_css(options) {
 59 |     if (!options.enabled)
 60 |         return '';
 61 | 
 62 |     return (
 63 |         (letsee_custom_css.enabled || '') +
 64 |         gen_base_css() +
 65 |         gen_font_size_css(options.font_size) +
 66 |         gen_images_css(options.hide_images) +
 67 |         gen_colors_css(options.colors)
 68 |     );
 69 | }
 70 | 
 71 | 
 72 | var panel = $(
 73 |         '<dl id="letsee-panel">'
 74 |       +     '<dt>Размер шрифта:</dt>'
 75 |       +     '<dd>'
 76 |       +         '<a href="#" class="letsee-change-fontsize letsee-fontsize-small letsee-fontsize-active" data-letsee-fontsize="17">A</a>'
 77 |       +         '<a href="#" class="letsee-change-fontsize letsee-fontsize-medium" data-letsee-fontsize="21">A</a>'
 78 |       +         '<a href="#" class="letsee-change-fontsize letsee-fontsize-large"  data-letsee-fontsize="25">A</a>'
 79 |       +     '</dd>'
 80 |       +     '<dt>'
 81 |       +         '<label for="letsee-hide-images">'
 82 |       +             'Отключить изображения'
 83 |       +             '<input type="checkbox" id="letsee-hide-images" class="letsee-hide-images"/>'
 84 |       +         '</label>'
 85 |       +     '</dt>'
 86 |       +     '<dt>Цвета:</dt>'
 87 |       +     '<dd>'
 88 |       +         '<a href="#" class="letsee-colors letsee-colors-bonw letsee-colors-active" data-letsee-colors="bonw"><span>A</span></a>'
 89 |       +         '<a href="#" class="letsee-colors letsee-colors-wonb" data-letsee-colors="wonb"><span>A</span></a>'
 90 |       +     '</dd>'
 91 | 
 92 |       +     '<dt><a href="#" class="letsee-turn-off">Выключить</a></dt>'
 93 |       + '</dl>'
 94 |     )
 95 |     .addClass('letsee-guard')
 96 |     .find('*')
 97 |         .addClass('letsee-guard')
 98 |         .end()
 99 | 
100 |     .find('.letsee-change-fontsize')
101 |         .on('click', function () {
102 |             $(this).closest('dl').find('.letsee-change-fontsize').removeClass('letsee-fontsize-active');
103 |             $(this).addClass('letsee-fontsize-active');
104 |             apply_panel();
105 |             return false;
106 |         })
107 |         .end()
108 | 
109 |     .find('.letsee-colors')
110 |         .on('click', function () {
111 |             $(this).closest('dl').find('.letsee-colors').removeClass('letsee-colors-active');
112 |             $(this).addClass('letsee-colors-active');
113 |             apply_panel();
114 |             return false;
115 |         })
116 |         .end()
117 | 
118 |     .find('.letsee-hide-images')
119 |         .on('change', apply_panel)
120 |         .end()
121 | 
122 |     .on('click', '.letsee-turn-off', function () {
123 |         letsee_toggle_panel();
124 |         return false;
125 |     })
126 | 
127 |     .prependTo('body');
128 | 
129 | function panel2options() {
130 |     return {
131 |         enabled: $('body').hasClass('letsee-active'),
132 |         font_size: panel.find('.letsee-fontsize-active').attr('data-letsee-fontsize'),
133 |         hide_images: panel.find('.letsee-hide-images').prop('checked'),
134 |         colors: panel.find('.letsee-colors-active').attr('data-letsee-colors')
135 |     };
136 | }
137 | function options2panel(options) {
138 |     $('body').toggleClass('letsee-active', !!options.enabled);
139 | 
140 |     panel.find('.letsee-change-fontsize')
141 |          .removeClass('letsee-fontsize-active')
142 |          .filter('[data-letsee-fontsize="' + (options.font_size || 17) + '"]')
143 |          .addClass('letsee-fontsize-active');
144 | 
145 |     panel.find('.letsee-hide-images').prop('checked', !!options.hide_images);
146 | 
147 |     panel.find('.letsee-colors')
148 |          .removeClass('letsee-colors-active')
149 |          .filter('[data-letsee-colors="' + (options.colors || 'bonw') + '"]')
150 |          .addClass('letsee-colors-active');
151 | }
152 | 
153 | function apply_panel() {
154 |     set_css(gen_css(panel2options()));
155 |     save_options(panel2options());
156 | }
157 | 
158 | 
159 | function set_cookie(name, value) {
160 |     document.cookie = name + '=' + encodeURIComponent(value) + ';expires=Mon,01-Jan-2050 00:00:00 GMT;path=/';
161 | }
162 | function get_cookie(name) {
163 |     if (!document.cookie) return null;
164 | 
165 |     var cookies = document.cookie.split(';');
166 |     for (var i = 0; i < cookies.length; i++)
167 |     {
168 |         var cookie = $.trim(cookies[i]);
169 |         if (cookie.substring(0, name.length + 1) == (name + '='))
170 |             return decodeURIComponent(cookie.substring(name.length + 1));
171 |     }
172 | }
173 | function save_options(options) {
174 |     set_cookie('letsee', JSON.stringify(options));
175 | }
176 | function load_options() {
177 |     try
178 |     {
179 |         return JSON.parse(get_cookie('letsee'));
180 |     }
181 |     catch (e)
182 |     {
183 |         return {}
184 |     }
185 | }
186 | 
187 | 
188 | window.letsee_toggle_panel = function () {
189 |     $('body').toggleClass('letsee-active');
190 |     apply_panel();
191 | }
192 | 
193 | 
194 | var options = load_options();
195 | options2panel(options);
196 | set_css(gen_css(options));
197 | 
198 | })(jQuery);
199 | 


--------------------------------------------------------------------------------