├── autotypograf.vanilla.js
├── README.md
├── jquery.autotypograf.js
├── LICENSE
└── example.html


/autotypograf.vanilla.js:
--------------------------------------------------------------------------------
 1 | function autotypograf(elem, prefs) {
 2 |     prefs = prefs || {};
 3 |     prefs.live = true;
 4 | 
 5 |     var lastVal = $elem.val(),
 6 |         typograf = new Typograf(prefs);
 7 | 
 8 |     elem.addEventListener('input', function(e) {
 9 |         var val = $elem.val();
10 |         if(val !== lastVal) {
11 |             var pos = getCaretPosition(elem);
12 |             lastVal = typograf.execute(val);
13 |             elem.value = lastVal;
14 |             setCaretPosition(elem, pos === val.length ? lastVal.length : pos);
15 |         }
16 | 
17 |         elem.value = typograf.execute(lastVal);
18 |     }, false);
19 | 
20 |     function getCaretPosition(elem) {
21 |         return elem.selectionStart || 0;
22 |     }
23 | 
24 |     function setCaretPosition(elem, pos) {
25 |         elem.setSelectionRange && elem.setSelectionRange(pos, pos);
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Типографирование на лету
 2 | ===
 3 | 
 4 | Позволяет типографировать текст при вводе в текстовое поле.
 5 | 
 6 | ## Использование с jQuery
 7 | ```html
 8 | <script src="./node_modules/typograf/dist/typograf.js"></script>
 9 | <script src="./jquery.autotypograf.js"></script>
10 | ...
11 | <input type="text" val=""/>
12 | <script>
13 |     $('input').autotypograf({locale: ['ru', 'en-US']});
14 | </script>
15 | ```
16 | 
17 | ## Использование без jQuery
18 | ```html
19 | <script src="./node_modules/typograf/dist/typograf.js"></script>
20 | <script src="./autotypograf.vanilla.js"></script>
21 | ...
22 | <input type="text" val="" id="text" />
23 | <script>
24 |     autotypograf(document.getElementById('text'), {locale: ['ru', 'en-US']});
25 | </script>
26 | ```
27 | 
28 | ## [Пример](https://typograf.github.io/jquery-typograf/example.html)
29 | 
30 | ## [Лицензия](./LICENSE)
31 | MIT License
32 | 


--------------------------------------------------------------------------------
/jquery.autotypograf.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 | $.fn.autotypograf = function(prefs) {
 4 |     prefs = prefs || {};
 5 |     prefs.live = true;
 6 | 
 7 |     var typograf = new Typograf(prefs);
 8 | 
 9 |     $.each(this, function() {
10 |         var $elem = $(this),
11 |             lastVal = $elem.val();
12 | 
13 |         $elem
14 |             .on('input', function(e) {
15 |                 var val = $elem.val();
16 |                 if(val !== lastVal) {
17 |                     var pos = getCaretPosition(this);
18 |                     lastVal = typograf.execute(val);
19 |                     $elem.val(lastVal);
20 |                     setCaretPosition(this, pos === val.length ? lastVal.length : pos);
21 |                 }
22 |             })
23 |             .val(typograf.execute(lastVal));
24 |     });
25 | 
26 |     function getCaretPosition(elem) {
27 |         return elem.selectionStart || 0;
28 |     }
29 | 
30 |     function setCaretPosition(elem, pos) {
31 |         elem.setSelectionRange && elem.setSelectionRange(pos, pos);
32 |     }
33 | };
34 | 
35 | })(jQuery);
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ## Лицензия
 2 | The MIT License (MIT)
 3 | 
 4 | © 2015 Денис Селезнев, <hcodes@yandex.ru>
 5 | 
 6 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
 7 | 
 8 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
 9 | 
10 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
11 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="utf-8" />
  5 |         <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  6 |         <script src="https://typograf.github.io/build/typograf.js"></script>
  7 |         <script src="jquery.autotypograf.js"></script>
  8 |         <title>Пример использования jquery.autotypograf.js</title>
  9 |         <style>
 10 |             .page
 11 |             {
 12 |                 padding: 20px 50px;
 13 |             }
 14 | 
 15 |             h1
 16 |             {
 17 |                 font-family: Georgia, serif;
 18 |                 font-style: italic;
 19 |                 font-weight: normal;
 20 |             }
 21 | 
 22 |             textarea
 23 |             {
 24 |                 width: 100%;
 25 |             }
 26 | 
 27 |             #example
 28 |             {
 29 |                 display: none;
 30 |             }
 31 | 
 32 |             #example-label,
 33 |             #example-html-label
 34 |             {
 35 |                 font-style: italic;
 36 |             }
 37 | 
 38 |             #example-text,
 39 |             #example-html-text
 40 |             {
 41 |                 width: 100%;
 42 |                 padding: 5px;
 43 |                 margin-bottom: 1em;
 44 |                 min-height: 2em;
 45 |                 background: #f0f0f0;
 46 |             }
 47 | 
 48 |             .row
 49 |             {
 50 |                 margin-top: 1em;
 51 |             }
 52 | 
 53 |             .entity-nb
 54 |             {
 55 |                 opacity: .4;
 56 |                 background: green;
 57 |             }
 58 |         </style>
 59 |     </head>
 60 |     <body>
 61 |         <div class="page">
 62 |             <h1>Типографика на лету</h1>
 63 |             <div class="row">
 64 |                 <textarea autocomplete="off" placeholder="Введите текст" rows="10"></textarea><br />
 65 |             </div>
 66 |             <div class="row"><input type="button" id="start" value="Пример ввода" /></div>
 67 |             <div class="row">
 68 |                 <div id="example">
 69 |                     <div id="example-label">Вводимый текст:</div>
 70 |                     <div id="example-text"></div>
 71 |                 </div>
 72 |             </div>
 73 |             <div class="row">
 74 |                 <div id="example-html">
 75 |                     <div id="example-html-label">Подсветка неразрывных пробелов:</div>
 76 |                     <div id="example-html-text"></div>
 77 |                 </div>
 78 |             </div>
 79 |         </div>
 80 |         <script>
 81 |         (function() {
 82 |             function highlightText(text) {
 83 |                 [
 84 |                     [/(\u00A0|&nbsp;|&#160;)/g, '\u00A0', 'NO-BREAK SPACE'],
 85 |                     [/(\u202F|&#8239;)/g, '\u202F', 'NARROW NO-BREAK SPACE'],
 86 |                     [/(\u2011|&#8209;)/g, '\u2011', 'NON-BREAKING HYPHEN']
 87 |                 ].forEach(function(el) {
 88 |                     text = text.replace(el[0], '<span class="entity-nb" title="' + el[2] + '">' + el[1] + '</span>');
 89 |                 });
 90 | 
 91 |                 return text;
 92 |             }
 93 | 
 94 |             var textarea = $('textarea'),
 95 |                 text = '"Будь прост, но не слишком! Простейшее - амёба." Э. Кроткий',
 96 |                 position = 0,
 97 |                 currentText = '',
 98 |                 timer;
 99 | 
100 |             $(document).ready(function() {
101 |                 textarea.autotypograf({
102 |                     locale: ['ru', 'en-US']
103 |                 });
104 |             })
105 | 
106 |             textarea.on('input', function() {
107 |                 setTimeout(function() {
108 |                     $('#example-html-text').html(highlightText(textarea.val()));
109 |                 }, 1);
110 |             });
111 | 
112 |             $('#start').click(function() {
113 |                 if(timer) {
114 |                     clearInterval(timer);
115 |                     timer = null;
116 |                 }
117 | 
118 |                 position = 0;
119 | 
120 |                 $('#example').show();
121 |                 timer = setInterval(function() {
122 |                     currentText = text.substr(0, position);
123 |                     position++;
124 | 
125 |                     textarea.val(currentText).trigger('input');
126 |                     $('#example-text').html(highlightText(currentText));
127 | 
128 |                     if(position > text.length) {
129 |                         clearInterval(timer);
130 |                         timer = null;
131 |                     }
132 |                 }, 100);
133 |             });
134 |         })();
135 |         </script>
136 |     </body>
137 | </html>
138 | 


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