From af0fc72744dbd4bb6f0eb4e0a0fe3ec8d6ab47df Mon Sep 17 00:00:00 2001 From: t1m0n Date: Sat, 28 Nov 2015 19:50:05 +0300 Subject: [PATCH] add old files to vcs after renaming 'page' to 'docs' --- docs/css/github-gist.css | 218 +++++++++ docs/css/style.css | 1 + docs/jade/layout.jade | 36 ++ docs/jade/mixins/example-code.jade | 4 + docs/jade/mixins/example-content.jade | 3 + docs/jade/mixins/example-inline.jade | 4 + docs/jade/mixins/example.jade | 4 + docs/jade/mixins/param-header.jade | 14 + docs/jade/mixins/param.jade | 5 + docs/jade/pages/index-ru.jade | 606 ++++++++++++++++++++++++++ docs/js/highlight.pack.js | 1 + docs/sass/_docs.scss | 379 ++++++++++++++++ docs/sass/_reset.scss | 82 ++++ docs/sass/init.scss | 2 + 14 files changed, 1359 insertions(+) create mode 100644 docs/css/github-gist.css create mode 100644 docs/css/style.css create mode 100644 docs/jade/layout.jade create mode 100644 docs/jade/mixins/example-code.jade create mode 100644 docs/jade/mixins/example-content.jade create mode 100644 docs/jade/mixins/example-inline.jade create mode 100644 docs/jade/mixins/example.jade create mode 100644 docs/jade/mixins/param-header.jade create mode 100644 docs/jade/mixins/param.jade create mode 100644 docs/jade/pages/index-ru.jade create mode 100644 docs/js/highlight.pack.js create mode 100644 docs/sass/_docs.scss create mode 100644 docs/sass/_reset.scss create mode 100644 docs/sass/init.scss diff --git a/docs/css/github-gist.css b/docs/css/github-gist.css new file mode 100644 index 0000000..eb66fd1 --- /dev/null +++ b/docs/css/github-gist.css @@ -0,0 +1,218 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; + -webkit-text-size-adjust: none; +} + +.hljs-comment, +.bash .hljs-shebang, +.java .hljs-javadoc, +.javascript .hljs-javadoc, +.rust .hljs-preprocessor { + color: #969896; +} + +.hljs-string, +.apache .hljs-sqbracket, +.coffeescript .hljs-subst, +.coffeescript .hljs-regexp, +.cpp .hljs-preprocessor, +.c .hljs-preprocessor, +.javascript .hljs-regexp, +.json .hljs-attribute, +.makefile .hljs-variable, +.markdown .hljs-value, +.markdown .hljs-link_label, +.markdown .hljs-strong, +.markdown .hljs-emphasis, +.markdown .hljs-blockquote, +.nginx .hljs-regexp, +.nginx .hljs-number, +.objectivec .hljs-preprocessor .hljs-title, +.perl .hljs-regexp, +.php .hljs-regexp, +.xml .hljs-value, +.less .hljs-built_in, +.scss .hljs-built_in { + color: #df5000; +} + +.hljs-keyword, +.css .hljs-at_rule, +.css .hljs-important, +.http .hljs-request, +.ini .hljs-setting, +.haskell .hljs-type, +.java .hljs-javadoctag, +.javascript .hljs-tag, +.javascript .hljs-javadoctag, +.nginx .hljs-title, +.objectivec .hljs-preprocessor, +.php .hljs-phpdoc, +.sql .hljs-built_in, +.less .hljs-tag, +.less .hljs-at_rule, +.scss .hljs-tag, +.scss .hljs-at_rule, +.scss .hljs-important, +.stylus .hljs-at_rule, +.go .hljs-typename, +.swift .hljs-preprocessor { + color: #a71d5d; +} + +.apache .hljs-common, +.apache .hljs-cbracket, +.apache .hljs-keyword, +.bash .hljs-literal, +.bash .hljs-built_in, +.coffeescript .hljs-literal, +.coffeescript .hljs-built_in, +.coffeescript .hljs-number, +.cpp .hljs-number, +.cpp .hljs-built_in, +.c .hljs-number, +.c .hljs-built_in, +.cs .hljs-number, +.cs .hljs-built_in, +.css .hljs-attribute, +.css .hljs-hexcolor, +.css .hljs-number, +.css .hljs-function, +.haskell .hljs-number, +.http .hljs-literal, +.http .hljs-attribute, +.java .hljs-number, +.javascript .hljs-built_in, +.javascript .hljs-literal, +.javascript .hljs-number, +.json .hljs-number, +.makefile .hljs-keyword, +.markdown .hljs-link_reference, +.nginx .hljs-built_in, +.objectivec .hljs-literal, +.objectivec .hljs-number, +.objectivec .hljs-built_in, +.php .hljs-literal, +.php .hljs-number, +.python .hljs-number, +.ruby .hljs-prompt, +.ruby .hljs-constant, +.ruby .hljs-number, +.ruby .hljs-subst .hljs-keyword, +.ruby .hljs-symbol, +.rust .hljs-number, +.sql .hljs-number, +.puppet .hljs-function, +.less .hljs-number, +.less .hljs-hexcolor, +.less .hljs-function, +.less .hljs-attribute, +.scss .hljs-preprocessor, +.scss .hljs-number, +.scss .hljs-hexcolor, +.scss .hljs-function, +.scss .hljs-attribute, +.stylus .hljs-number, +.stylus .hljs-hexcolor, +.stylus .hljs-attribute, +.stylus .hljs-params, +.go .hljs-built_in, +.go .hljs-constant, +.swift .hljs-built_in, +.swift .hljs-number { + color: #0086b3; +} + +.apache .hljs-tag, +.cs .hljs-xmlDocTag, +.css .hljs-tag, +.xml .hljs-title, +.stylus .hljs-tag { + color: #63a35c; +} + +.bash .hljs-variable, +.cs .hljs-preprocessor, +.cs .hljs-preprocessor .hljs-keyword, +.css .hljs-attr_selector, +.css .hljs-value, +.ini .hljs-value, +.ini .hljs-keyword, +.javascript .hljs-tag .hljs-title, +.makefile .hljs-constant, +.nginx .hljs-variable, +.xml .hljs-tag, +.scss .hljs-variable { + color: #333333; +} + +.bash .hljs-title, +.coffeescript .hljs-title, +.cpp .hljs-title, +.c .hljs-title, +.cs .hljs-title, +.css .hljs-id, +.css .hljs-class, +.css .hljs-pseudo, +.ini .hljs-title, +.haskell .hljs-title, +.haskell .hljs-pragma, +.java .hljs-title, +.javascript .hljs-title, +.makefile .hljs-title, +.objectivec .hljs-title, +.perl .hljs-sub, +.php .hljs-title, +.python .hljs-decorator, +.python .hljs-title, +.ruby .hljs-parent, +.ruby .hljs-title, +.rust .hljs-title, +.xml .hljs-attribute, +.puppet .hljs-title, +.less .hljs-id, +.less .hljs-pseudo, +.less .hljs-class, +.scss .hljs-id, +.scss .hljs-pseudo, +.scss .hljs-class, +.stylus .hljs-class, +.stylus .hljs-id, +.stylus .hljs-pseudo, +.stylus .hljs-title, +.swift .hljs-title, +.diff .hljs-chunk { + color: #795da3; +} + +.coffeescript .hljs-reserved, +.coffeescript .hljs-attribute { + color: #1d3e81; +} + +.diff .hljs-chunk { + font-weight: bold; +} + +.diff .hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.diff .hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.markdown .hljs-link_url { + text-decoration: underline; +} diff --git a/docs/css/style.css b/docs/css/style.css new file mode 100644 index 0000000..e6cbbe3 --- /dev/null +++ b/docs/css/style.css @@ -0,0 +1 @@ +.-text-center-,.datepicker-promo,.promo-header{text-align:center}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0;color:#47A6EC}textarea{overflow:auto}html{color:#333;font-family:Tahoma,sans-serif;font-size:14px}p{line-height:1.3;margin-bottom:14px}h1,h2,h3,h4{font-family:'Fira Sans',sans-serif;line-height:1}h2{font-weight:100;font-size:32px;margin:48px 0 8px}h3{font-weight:500;font-size:18px;margin:24px 0 8px}h4{font-weight:400;color:#939393;font-size:16px;margin:24px 0 0}article h2,article h3{position:relative;z-index:1}article h2:after,article h3:after{content:'';background:rgba(255,154,25,.2);border-radius:4px;opacity:0;left:-8px;right:-8px;top:-10px;bottom:-4px;position:absolute;z-index:-1;transition:all .3s .7s linear}.nav,.nav-wrap{top:0;bottom:0}article h2.-hilited-:after,article h3.-hilited-:after{opacity:1}.container{max-width:960px;margin:0 auto;padding:1px 0}.container article{margin:60px 0 30px}@media all and (max-width:1525px){.container{margin-left:270px}}@media all and (max-width:1280px){.container{margin-right:20px}}@media all and (max-width:650px){.container{margin-right:20px;margin-left:20px}}input[type=text]{outline:0;height:32px;border:1px solid #b5b5b5;padding:0 8px;margin:0 0 14px;color:#444;font-family:Tahoma,sans-serif;transition:all .2s;width:250px}.hljs,.param-inline{font-family:Consolas,monospace}input[type=text]:focus{border-color:#ffd75c}ul{margin:0 0 16px}ul li{list-style:none;margin-bottom:8px}.example--label{background:#ececec;border-radius:0 0 4px 4px;position:absolute;padding:4px 12px;right:8px;top:0}.hljs{line-height:1.2;-moz-tab-size:4;tab-size:4}.example{border:1px solid #ececec;border-radius:4px;position:relative;margin:16px 0}.example .example-code{border:none;border-radius:0 0 4px 4px;border-top:1px solid #ececec;margin:0}.example-inline{background:red;display:inline-block;vertical-align:middle;margin:0 4px}.example-inline .hljs{padding:0 4px}.example-content{padding:32px}.example-content h1:first-child,.example-content h2:first-child,.example-content h3:first-child{margin-top:0}.example-content>:last-child{margin-bottom:0!important}a:hover{color:#ff767e}.example-code{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin:16px 0;font-size:13px}.param-inline i,.param-inline strong{display:inline-block;margin-right:4px;vertical-align:middle}.example-code code{padding:16px 32px}.param-inline strong{background:#efefef;color:#333;border-radius:4px;font-weight:400;padding:3px 6px 4px}.param-inline i{color:#838383;font-size:.95em;font-style:normal;font-weight:100;font-family:'Fira Sans',sans-serif}.promo-header{font-size:48px;font-weight:100}.promo-header span{display:block;font-size:.5em}.datepicker-promo .datepicker-inline,.param-header--label,.range-example span{display:inline-block}.range-example input[type=text]{width:150px}.range-example span{margin:0 8px}.param-header{margin-bottom:8px}.param-header h3{margin-bottom:2px}.param-header p{margin:0;font-size:13px}.param{margin-bottom:32px}.param-header--label{color:#707070;vertical-align:middle}.nav-wrap{background:#fff;position:fixed;overflow:hidden;width:250px;left:0;box-shadow:0 0 4px rgba(0,0,0,.3)}@media all and (max-width:650px){.nav-wrap{display:none}}.nav-wrap:after,.nav-wrap:before{content:'';pointer-events:none;position:absolute;left:0;right:0;height:28px}.nav-wrap:after{background:linear-gradient(to top,#fff,rgba(255,255,255,0));bottom:0}.nav{position:absolute;padding:18px;right:-20px;left:0;overflow:auto}.nav--section{margin-bottom:20px}.nav--section:last-child{margin-bottom:0}.nav--section-title{line-height:1;font-size:22px;margin:0 0 8px}.nav--section-title a{color:#000;text-decoration:none}.nav--section-title a:hover{color:#ff767e}.nav--subsection{margin-left:2px}.nav--subsection-title{font-size:13px;margin:0 0 8px;font-weight:400;font-family:Tahoma,sans-serif}.nav--subsection-title a{color:#787878;text-decoration:none}.nav--subsection-title a:hover{color:#ff767e} \ No newline at end of file diff --git a/docs/jade/layout.jade b/docs/jade/layout.jade new file mode 100644 index 0000000..1989797 --- /dev/null +++ b/docs/jade/layout.jade @@ -0,0 +1,36 @@ +include mixins/example +include mixins/example-content +include mixins/example-code +include mixins/example-inline +include mixins/param +include mixins/param-header + +doctype html +html + head + title Air Datepicker + meta(charset='UTF-8') + link(href='css/style.css', rel='stylesheet', type='text/css') + link(href='css/github-gist.css', rel='stylesheet', type='text/css') + link(href='../dist/css/datepicker.min.css', rel='stylesheet', type='text/css') + link(href='https://fonts.googleapis.com/css?family=Fira+Sans:400,300,500&subset=latin,cyrillic', rel='stylesheet', type='text/css') + script(src='../bower_components/jquery/dist/jquery.min.js') + script(src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js') + script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js') + script(src='../dist/js/datepicker.js') + script(src='../dist/js/i18n/datepicker.en.js') + + body + div.wrapper + main.main(role='main') + .container + block content + + script(src='js/navigation.js') + script. + var $code = $('code'); + $code.each(function (i, el) { + hljs.highlightBlock(el); + }) + + navigation.init(); \ No newline at end of file diff --git a/docs/jade/mixins/example-code.jade b/docs/jade/mixins/example-code.jade new file mode 100644 index 0000000..784e50e --- /dev/null +++ b/docs/jade/mixins/example-code.jade @@ -0,0 +1,4 @@ +mixin example-code(cl) + pre.example-code + code(class=cl) + block \ No newline at end of file diff --git a/docs/jade/mixins/example-content.jade b/docs/jade/mixins/example-content.jade new file mode 100644 index 0000000..35be5d4 --- /dev/null +++ b/docs/jade/mixins/example-content.jade @@ -0,0 +1,3 @@ +mixin example-content() + .example-content + block \ No newline at end of file diff --git a/docs/jade/mixins/example-inline.jade b/docs/jade/mixins/example-inline.jade new file mode 100644 index 0000000..6bf5e59 --- /dev/null +++ b/docs/jade/mixins/example-inline.jade @@ -0,0 +1,4 @@ +mixin example-inline(content, type) + span.example-inline + code(class= type). + #{content} \ No newline at end of file diff --git a/docs/jade/mixins/example.jade b/docs/jade/mixins/example.jade new file mode 100644 index 0000000..a196419 --- /dev/null +++ b/docs/jade/mixins/example.jade @@ -0,0 +1,4 @@ +mixin example() + .example + .example--label Пример + block \ No newline at end of file diff --git a/docs/jade/mixins/param-header.jade b/docs/jade/mixins/param-header.jade new file mode 100644 index 0000000..e6b26ca --- /dev/null +++ b/docs/jade/mixins/param-header.jade @@ -0,0 +1,14 @@ +mixin param-header(name, type, defaults) + header.param-header + h3= name + if type + p.param-header--row + span.param-header--label Тип: + +example-inline(type, 'js') + if (defaults || block) + p.param-header--row + span.param-header--label Значение по умполчанию: + if defaults + +example-inline(defaults, 'js') + if block + block diff --git a/docs/jade/mixins/param.jade b/docs/jade/mixins/param.jade new file mode 100644 index 0000000..0579de6 --- /dev/null +++ b/docs/jade/mixins/param.jade @@ -0,0 +1,5 @@ +mixin param(content, type) + span.param-inline + strong= content + if type + i= type diff --git a/docs/jade/pages/index-ru.jade b/docs/jade/pages/index-ru.jade new file mode 100644 index 0000000..2af5182 --- /dev/null +++ b/docs/jade/pages/index-ru.jade @@ -0,0 +1,606 @@ +extends ../layout + +block content + h1.promo-header + | AIR DATEPICKER + span легкий кроссбраузерный jQuery календарь + + p.-text-center- + .datepicker-here.datepicker-promo + script. + var $promo = $('.datepicker-promo'); + + $promo.datepicker() + + + article + h2#intro Описание + p + |Легкий (~20kb минифицированный js файл и ~5.5kb gziped) кроссбраузерный календарь, написан с использованием + +example-inline('es5') + | и + +example-inline('css flexbox', 'js') + |. Работает во всех современных браузерах: + | IE 10+, Chrome, Firefox, Safari 8+, Opera 17+. + + article + h2#install Установка + +example-code('html') bower i --save air-datepicker + p Либо можно скачать файлы напрямую с GitHub + + article + h2#usage Использование + p + |Подключите стили и скрипты из папки + +example-inline('/dist') + | : + + +example-code('html') + :code + + + + + + + p + | Календарь автоматически проинициализируется на элементах с классом + +example-inline('.datepicker-here', 'css') + | , при этом опции можно передать через + +example-inline('data', 'html') + | атрибуты. + +example-code('html') + :code + + h3 Ручная инициализация + +example-code('js'). + // Инициализация + $('#my-element').datepicker([options]) + + // Доступ к экземпляру объекта + $('#my-element').data('datepicker') + + article + h2#examples Примеры + h3 Инициализация с опциями по умолчанию + +example + +example-content + input(type='text').datepicker-here + +example-code('html') + :code + + + h3 Выбор нескольких дат + p + | Передайте параметр + +example-inline('{multipleDates: true}','js') + | для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число + +example-inline('{multipleDates: 3}','js') + | . + +example + +example-content + input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left').datepicker-here + +example-code('html') + :code + + + h3 Постоянно видимый календарь + p + | Проинициализируйте плагин на элементе, который не является текстовым полем, например на + +example-inline('
…
', 'html') + | , либо передайте параметр + +example-inline('{inline: true}', 'js') + | . + +example + +example-content + div.datepicker-here + +example-code('html') + :code +
+ + h3 Выбор месяца + +example + +example-content + input.datepicker-here(type='text' data-min-view='months' data-view='months' data-date-format='MM yyyy') + +example-code('html') + :code + + + h3 Минимальная и максимальные даты + p + | Чтобы ограничить выбор даты, используйте + +example-inline('minDate', 'js') + | и + +example-inline('maxDate', 'js') + | , которым нужно передать объект даты. + +example + +example-content + input#minMaxExample(type='text') + script. + $('#minMaxExample').datepicker({ + minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем + }) + +example-code('js'). + $('#minMaxExample').datepicker({ + minDate: new Date() // Можно выбрать тольо даты, идущие за сегодняшним днем + }) + + h3 Диапозон дат + p. + По умолчанию в плагине нет встроенного механизма выбора диапозона дат для нескольких текстовых полей. + Тем не менее это можно сделть вручную. + +example + +example-content + div.range-example + input(type='text' placeholder='Начало')#start + span – + input(type='text' placeholder='Конец')#end + + script. + var $start = $('#start'), + $end = $('#end'); + + $start.datepicker({ + onSelect: function (fd, date) { + $end.data('datepicker') + .update('minDate', date) + } + }) + + $end.datepicker({ + onSelect: function (fd, date) { + $start.data('datepicker') + .update('maxDate', date) + } + }) + + +example-code('js'). + var $start = $('#start'), + $end = $('#end'); + + $start.datepicker({ + onSelect: function (fd, date) { + $end.data('datepicker') + .update('minDate', date) + } + }) + + $end.datepicker({ + onSelect: function (fd, date) { + $start.data('datepicker') + .update('maxDate', date) + } + }) + + article + h2#localization Локализация + p + | Вы можете добавить свою локализацию в объект + +example-inline('Datepicker.language["my-lang"]', 'js') + | и при вызове календаря передать название языка в параметр + +example-inline('language', 'js') + + +example-code('js'). + Datepicker.language['my-lang'] = {...} + + $('.my-datepicker').datepicker({ + language: 'my-lang' + }) + + p + | Также объект локализации можно передавать непосредственно в + +example-inline('language', 'js') + + +example-code('js'). + $('.my-datepicker').datepicker({ + language: { + days: [...] + ... + } + }) + + p Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию. + + h3 Пример объекта локализации + +example-code('js'). + Datepicker.language['ru'] = { + days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'], + daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'], + daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'], + months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'], + monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'], + today: 'Сегодня', + clear: 'Очистить', + dateFormat: 'dd.mm.yyyy', + firstDay: 1 + }; + + article + h2#options Опции + + .param + +param-header('inline', 'boolean', 'false') + p Если true, то календарь будет виден постоянно. + + .param + +param-header('language', 'string|object', '"ru"') + p + | Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте + +example-inline('Datepicker.language', 'js') + | Если передан объект, то данные будут браться из него. + p Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию. + + .param + +param-header('startDate', 'Date', 'new Date()') + p Какую дату нужно показывать при инициализации календаря. + + .param + +param-header('firstDay', 'number', '""') + p. + Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 - воскресенье и 6 - суббота. + По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет. + + .param + +param-header('weekends', 'array', '[6, 0]') + p + | Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс + +example-inline('.-weekend-','css') + | . По умолчанию это суббота и воскресенье. + + .param + +param-header('dateFormat', 'string', '""') + p Формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет. + ul + li + +param('d') + | - дата + li + +param('dd') + | - дата с лидирующем нулем + li + +param('D') + | - сокращенное наименование дня + li + +param('DD') + | - полное наименование дня + li + +param('m') + | - номер мясяца + li + +param('mm') + | - номер месяца с лидирующем нулем + li + +param('M') + | - сокращенное наименовение месяца + li + +param('MM') + | - полное наименовение месяца + li + +param('yy') + | - сокращенный номер года + li + +param('yyyy') + | - полный номер года + li + +param('yyyy1') + | - первый год декады, в которую входит текущий год + li + +param('yyyy2') + | - последний год декады, в которую входит текущий год + + .param + +param-header('toggleSelected', 'boolean', 'true') + p Если true, то клик на выделенной дате снимет выделение. + + .param + +param-header('position', 'string', '"bottom left"') + p + | Позиционирование календаря отностиельно текстового поля. Первым значением задается основная ось позиционирования, + | воторым - положение на этой оси. Например + +example-inline('{position: "right top"}', 'js') + | - утсановит позицию клаендаря справа вверху от текстового поля. + + .param + +param-header('offset','number', 12) + p Отступ от основной оси позиционирования. + + .param + +param-header('view', 'string', '"days"') + p Начальный вид календаря. Возможноые значения: + ul + li + +example-inline('days','js') + | - отображение дней месяца + li + +example-inline('months','js') + | - отображение месяцев одного года + li + +example-inline('years','js') + | - отображение годов одной декады + + .param + +param-header('minView', 'string', '"days"') + p + | Минимальное представление календаря, по наступлению которого, выбор ячейки приведет к ее активации, а не переходу к следующему виду. + | Возможные значения такие же как и у параметра + +example-inline('view') + | . + + .param + +param-header('showOtherMonths', 'boolean', 'true') + p Если true, то будут отображаться дни других месяцев. + + .param + +param-header('selectOtherMonths', 'boolean', 'true') + p Если true, то можно будет выбрать дни из других месяцев. + + .param + +param-header('moveToOtherMonthsOnSelect', 'boolean', 'true') + p Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу. + + .param + +param-header('showOtherYears', 'boolean', 'true') + p Если true, то при отображении декады, будут показаны годы из других декад. + + .param + +param-header('selectOtherYears', 'boolean', 'true') + p Если true, то можно будет выбрать года из других декад + + .param + +param-header('moveToOtherYearsOnSelect', 'boolean', 'true') + p Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде. + + .param + +param-header('minDate', 'Date', '""') + p Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать. + + .param + +param-header('maxDate', 'Date', '""') + p Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать. + + .param + +param-header('disableNavWhenOutOfRange', 'boolean', 'true') + p Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации 'вперед', 'назад' + + .param + +param-header('multipleDates', 'boolean|number', 'false') + p Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом. + + .param + +param-header('multipleDatesSeparator', 'string', '","') + p Разделитель дат, который будет вставлен между датами при объеденения нескольких дат в одну строку. + + .param + +param-header('todayButton', 'boolean', 'false') + p Если true, то будет отображена кнопка "Сегодня". + + .param + +param-header('clearButton', 'boolean', 'false') + p Если true, то будет отображена кнопка "Очистить". + + .param + +param-header('showEvent','string','"focus"') + p Тип события, по наступлению которого будет показан календарь. + + .param + +param-header('autoClose', 'boolean', 'false') + p Если true, то при активации даты, календарь закроется. + + .param + +param-header('prevHtml', 'string', '') + p Контент кнопки 'предыдущий месяц|год|декада'. + + .param + +param-header('nextHtml', 'string', '') + p Контент кнопки 'следующий месяц|год|декада'. + + .param + +param-header('navTitles', 'object') + +example-code('js') + :code + navTitles = { + days: 'MM, yyyy', + months: 'yyyy', + years: 'yyyy1 - yyyy2' + }; + p + | Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозночения что и в + +example-inline('dateFormat', 'js') + | . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги. + +example-code('js') + :code + $('#my-datepicker').datepicker({ + navTitles: { + days: '

Выберете дату заезда

MM, yyyy' + } + }) + .param + +param-header('monthsField','string','"monthsShort"') + p Какое поле из объекта локализации использовать в качестве названий месяцев, когда каледнарь отображает год. + + article + h2#events События + .param + +param-header('onSelect(formattedDate, date, inst)', 'function', 'null') + p Функция обратного вызова при выборе даты. + ul + li + +param('formattedDate', 'string') + | - отформатированная дата. + li + +param('date', 'Date|array') + | - объект + +example-inline('Date', 'js') + | выбранной даты, если + +example-inline('{multipleDates: true}', 'js') + | , то будет передан массив таких объектов. + li + +param('inst','object') + | - экземпляр плагина. + + .param + +param-header('onChangeMonth(month, year)','function','null') + p Функция обратного вызова при изменении месяца. + ul + li + +param('month','number') + | - номер месяца (от 0 до 12), к которому осуществлен переход. + li + +param('year','number') + | - номер года, к которому осуществлен переход. + + .param + +param-header('onChangeYear(year)','function', 'null') + p Функция обратного вызова при изменении года. + ul + li + +param('year','number') + | - номер года, к которому осуществлен переход + + .param + +param-header('onChangeDecade(decade)','function', 'null') + p Функция обратного вызова при изменении декады. + ul + li + +param('decade','array') + | - массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается. + + .param + +param-header('onChangeView(view)', 'function', 'null') + p Функция обратного вызова при изменении вида календаря + ul + li + +param('view', 'string') + | - вид, к которому осуществлен переход (days, months, years). + + .param + +param-header('onRenderCell(date, cellType)', 'function', 'null') + p Функция обратного вызова при отрисовке ячейки календаря. + ul + li + +param('date', 'Date') + | - объект даты текущей ячейки + li + +param('cellType', 'string') + | - тип текущей ячейки (day, month, year). + p Функция должна возвращать объект, которой может состоять из трех полей: + +example-code('js'). + { + html: '', // Кастомный контент ячейки + classes: '', // Дополнительные классы для ячейки + disabled: '' // true/false, если true, то ячейку нельзя будет выбрать + } + h4 Пример + +example-code('js'). + $('#my-datepicker').datepicker({ + // Передаем функцию, которая добавляет 4 числу каждого месяца класс 'my-class' + // и делает их невозможными к выбору. + onRenderCell: function(date, cellType) { + if (cellType == 'day' && date.getDate() == 4) { + return { + classes: 'my-class', + disabled: true + } + } + } + }) + + article + h2#api API + p + | Досутп к экземпляру плагина осуществляется через + +example-inline('data') + | атрибут. + +example-code('js'). + var myDatepicker = $('#my-elem').datepicker().data('datepicker'); + + myDatepicker.show(); + + .param + +param-header('show()') + p Показывает календарь. + + .param + +param-header('hide()') + p Скрывает календарь. + + .param + +param-header('next()') + p Переходит на следующий месяц если вид days, на следующий год если months, и следующую декаду если years. + + .param + +param-header('prev()') + p Переходит на предыдщуий месяц если вид days, на предыдущий год если months, и предыдущую декаду если years. + + .param + +param-header('selectDate(date)') + ul + li + +param('date','Date') + | - дата в формате JavaScript + +example-inline('Date()', 'js') + p + | Выбирает переданную дату. Если + +example-inline('{multipleDates: false}','js') + | и уже есть активная дата, то она будет деактивирована. Если + +example-inline('{multipleDates: true}','js') + | то будет добавлена еще одна активная дата. + + .param + +param-header('removeDate(date)') + ul + li + +param('date','Date') + | - дата в формате JavaScript + +example-inline('Date()', 'js') + p + | Снимает выделение с переданной даты. + + .param + +param-header('update(field[, value])') + ul + li + +param('field','string|object') + | - название поля значение которого нужно обновить. + li + +param('field','string|*') + | - новое значение параметра + p. + Обновление опций календаря, после вызова метода он автоматически перерисуется. + Можно обновлять сразу же несколько параметров, для этого нужно передать объект с требуемыми полями. + + +example-code('js'). + var datepicker = $('#my-elem').datepicker().data('datepicker'); + + // Обновление одного параметра + datepicker.update('minDate', new Date()) + + // Обновление нескольких параметров + datepicker.update({ + position: "top right", + maxDate: new Date(), + todayButton: true + }) + + .param + +param-header('view') + p Устанавливает новое представление для календаря. + +example-code('js'). + datepicker.view = 'months'; + + .param + +param-header('date') + p + | Устанавливает новую отображаемую дату, нужно передать JavaScript + +example-inline('Date()') + + +example-code('js'). + datepicker.date = new Date(); \ No newline at end of file diff --git a/docs/js/highlight.pack.js b/docs/js/highlight.pack.js new file mode 100644 index 0000000..daf4665 --- /dev/null +++ b/docs/js/highlight.pack.js @@ -0,0 +1 @@ +!function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define("hljs",[],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return w(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(w(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function u(e){l+=""}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=i();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(o)}else"start"==g[0].event?f.push(g[0].node):f.pop(),c(g.splice(0,1)[0])}return l+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\b\w+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function l(e,t,a,i){function o(e,n){for(var t=0;t";return i+=e+'">',i+n+o}function p(){if(!L.k)return n(M);var e="",t=0;L.lR.lastIndex=0;for(var r=L.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(L,r);a?(B+=a[1],e+=h(a[0],n(r[0]))):e+=n(r[0]),t=L.lR.lastIndex,r=L.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof L.sL;if(e&&!x[L.sL])return n(M);var t=e?l(L.sL,M,!0,y[L.sL]):f(M,L.sL.length?L.sL:void 0);return L.r>0&&(B+=t.r),e&&(y[L.sL]=t.top),h(t.language,t.value,!1,!0)}function b(){return void 0!==L.sL?d():p()}function v(e,t){var r=e.cN?h(e.cN,"",!0):"";e.rB?(k+=r,M=""):e.eB?(k+=n(t)+r,M=""):(k+=r,M=t),L=Object.create(e,{parent:{value:L}})}function m(e,t){if(M+=e,void 0===t)return k+=b(),0;var r=o(t,L);if(r)return k+=b(),v(r,t),r.rB?0:t.length;var a=u(L,t);if(a){var i=L;i.rE||i.eE||(M+=t),k+=b();do L.cN&&(k+=""),B+=L.r,L=L.parent;while(L!=a.parent);return i.eE&&(k+=n(t)),M="",a.starts&&v(a.starts,""),i.rE?0:t.length}if(c(t,L))throw new Error('Illegal lexeme "'+t+'" for mode "'+(L.cN||"")+'"');return M+=t,t.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var R,L=i||N,y={},k="";for(R=L;R!=N;R=R.parent)R.cN&&(k=h(R.cN,"",!0)+k);var M="",B=0;try{for(var C,j,I=0;;){if(L.t.lastIndex=I,C=L.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),R=L;R.parent;R=R.parent)R.cN&&(k+="");return{r:B,value:k,language:e,top:L}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function f(e,t){t=t||E.languages||Object.keys(x);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(w(n)){var t=l(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function g(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function h(e,n,t){var r=n?R[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function p(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?l(n,r,!0):f(r),s=u(t);if(s.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(s,u(p),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=h(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=x[n]=t(e);r.aliases&&r.aliases.forEach(function(e){R[e]=n})}function N(){return Object.keys(x)}function w(e){return e=(e||"").toLowerCase(),x[e]||x[R[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},x={},R={};return e.highlight=l,e.highlightAuto=f,e.fixMarkup=g,e.highlightBlock=p,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("json",function(e){var t={literal:"true false null"},i=[e.QSM,e.CNM],l={cN:"value",e:",",eW:!0,eE:!0,c:i,k:t},c={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:!0,eE:!0,c:[e.BE],i:"\\n",starts:l}],i:"\\S"},n={b:"\\[",e:"\\]",c:[e.inherit(l,{cN:null})],i:"\\S"};return i.splice(i.length,0,c,n),{c:i,k:t,i:"\\S"}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("},r={cN:"rule",b:/[A-Z\_\.\-]+\s*:/,rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:/\S/,e:":",eE:!0,starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]};return{cI:!0,i:/[=\/|'\$]/,c:[e.CBCM,{cN:"id",b:/\#[A-Za-z0-9_-]+/},{cN:"class",b:/\.[A-Za-z0-9_-]+/},{cN:"attr_selector",b:/\[/,e:/\]/,i:"$"},{cN:"pseudo",b:/:(:)?[a-zA-Z0-9\_\-\+\(\)"']+/},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:/\S/,c:[e.CBCM,r]}]}});hljs.registerLanguage("xml",function(t){var s="[A-Za-z0-9\\._:-]+",c={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php"},e={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},t.C("",{r:10}),{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[e],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[e],starts:{e:"",rE:!0,sL:["actionscript","javascript","handlebars"]}},c,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},e]}]}});hljs.registerLanguage("markdown",function(e){return{aliases:["md","mkdown","mkd"],c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}| )",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].*?[\\)\\]]",rB:!0,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:!0,rE:!0,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:!0,eE:!0},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:!0,eE:!0}],r:10},{b:"^\\[.+\\]:",rB:!0,c:[{cN:"link_reference",b:"\\[",e:"\\]:",eB:!0,eE:!0,starts:{cN:"link_url",e:"$"}}]}]}});hljs.registerLanguage("javascript",function(e){return{aliases:["js"],k:{keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},c:[{cN:"pi",r:10,b:/^\s*['"]use (strict|asm)['"]/},e.ASM,e.QSM,{cN:"string",b:"`",e:"`",c:[e.BE,{cN:"subst",b:"\\$\\{",e:"\\}"}]},e.CLCM,e.CBCM,{cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{b:/\s*[);\]]/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:[e.CLCM,e.CBCM]}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+e.IR,r:0},{bK:"import",e:"[;$]",k:"import from as",c:[e.ASM,e.QSM]},{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]}],i:/#/}}); \ No newline at end of file diff --git a/docs/sass/_docs.scss b/docs/sass/_docs.scss new file mode 100644 index 0000000..5c11246 --- /dev/null +++ b/docs/sass/_docs.scss @@ -0,0 +1,379 @@ +/* ------------------------------------------------- + Page styles + ------------------------------------------------- */ + +$fontFamily: Tahoma, sans-serif; + +html { + color: #333; + font-family: $fontFamily; + font-size: 14px; +} + +p { + line-height: 1.3; + margin-bottom: 14px; +} + +h1, h2, h3, h4 { + font-family: 'Fira Sans', sans-serif; + line-height: 1; +} + +h2 { + font-weight: 100; + font-size: 32px; + margin: 48px 0 8px; +} + +h3 { + font-weight: 500; + font-size: 18px; + margin: 24px 0 8px; +} + +h4 { + font-weight: normal; + color: #939393; + font-size: 16px; + margin: 24px 0 0; +} + +article { + h2, h3 { + position: relative; + z-index: 1; + + &:after { + content: ''; + background: rgba(#FF9A19, .2); + border-radius: 4px; + opacity: 0; + left: -8px; + right: -8px; + top: -10px; + bottom: -4px; + position: absolute; + z-index: -1; + transition: all .3s .7s linear; + } + + &.-hilited- { + &:after { + opacity: 1; + } + } + } +} + + +.container { + max-width: 960px; + margin: 0 auto; + padding: 1px 0; + + article { + margin: 60px 0 30px; + } + + @media all and (max-width: 1525px) { + margin-left: 270px; + } + + @media all and (max-width: 1280px) { + margin-right: 20px; + } + + @media all and (max-width: 650px) { + margin-right: 20px; + margin-left: 20px; + } +} + +.-text-center- { + text-align: center; +} + +input[type='text'] { + outline: none; + height: 32px; + border: 1px solid #b5b5b5; + padding: 0 8px; + margin: 0 0 14px; + color: #444; + font-family: $fontFamily; + transition: all .2s; + width: 250px; + + &:focus { + border-color: #ffd75c; + } +} + +ul { + margin: 0 0 16px; + li { + list-style: none; + margin-bottom: 8px; + } +} + +/* Example + ------------------------------------------------- */ + +%example-label { + background: #ececec; + border-radius: 0 0 4px 4px; + position: absolute; + padding: 4px 12px; + right: 8px; + top: 0; +} + +$exampleBorderRadius: 4px; + +.hljs { + font-family: Consolas, monospace; + line-height: 1.2; + tab-size: 4; +} + +.example { + border: 1px solid #ececec; + border-radius: $exampleBorderRadius; + position: relative; + margin: 16px 0; + + .example-code { + border: none; + border-radius: 0 0 $exampleBorderRadius $exampleBorderRadius; + border-top: 1px solid #ececec; + margin: 0; + } +} + +.example-inline { + background: red; + display: inline-block; + vertical-align: middle; + margin: 0 4px; + + .hljs { + padding: 0 4px; + } +} + +.example--label { + @extend %example-label; +} + +.example-content { + padding: 32px; + + h1, h2, h3 { + &:first-child { + margin-top: 0; + } + } + + >*:last-child { + margin-bottom: 0 !important; + } +} + +a { + color: #47A6EC; + + &:hover { + color: #ff767e; + } +} + +.example-code { + border: 1px solid #ddd; + border-radius: $exampleBorderRadius; + overflow: hidden; + margin: 16px 0; + font-size: 13px; + + code { + padding: 16px 32px; + } +} + +// Param +// ------------------------------------------------- + + +.param-inline { + font-family: Consolas, monospace; + strong { + background: #efefef; + color: #333; + border-radius: $exampleBorderRadius; + font-weight: normal; + display: inline-block; + vertical-align: middle; + padding: 3px 6px 4px; + margin-right: 4px; + } + + i { + color: #838383; + font-size: .95em; + font-style: normal; + font-weight: 100; + font-family: 'Fira Sans', sans-serif; + display: inline-block; + vertical-align: middle; + margin-right: 4px; + } +} + +// Promo block +// ------------------------------------------------- + +.promo-header { + font-size: 48px; + font-weight: 100; + text-align: center; + + span { + display: block; + font-size: .5em; + } +} + +.datepicker-promo { + text-align: center; + + .datepicker-inline { + display: inline-block; + } +} + +// Range example +// ------------------------------------------------- + +.range-example { + input[type='text'] { + width: 150px; + } + span { + display: inline-block; + margin: 0 8px; + } +} + +// Param header +// ------------------------------------------------- + +.param-header { + margin-bottom: 8px; + h3 { + margin-bottom: 2px; + } + + p { + margin: 0; + font-size: 13px; + } +} + +.param-header--row { + +} + +.param { + margin-bottom: 32px; +} + +.param-header--label { + color: #707070; + display: inline-block; + vertical-align: middle; +} + +// Navigation +// ------------------------------------------------- + +.nav-wrap { + background: #fff; + position: fixed; + overflow: hidden; + width: 250px; + top: 0; + left: 0; + bottom: 0; + box-shadow: 0 0 4px rgba(0, 0, 0, .3); + + @media all and (max-width: 650px) { + display: none; + } + + &:after, &:before { + content: ''; + pointer-events: none; + position: absolute; + left: 0; + right: 0; + height: 28px; + } + + &:after { + background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0)); + bottom: 0; + } +} + +.nav { + position: absolute; + padding: 18px; + right: -20px; + top: 0; + left: 0; + bottom: 0; + overflow: auto; +} + +.nav--section { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; + } +} +.nav--section-title { + line-height: 1; + font-size: 22px; + margin: 0 0 8px; + + a { + color: #000; + text-decoration: none; + + &:hover { + color: #ff767e; + } + } +} +.nav--subsection { + margin-left: 2px; +} + +.nav--subsection-title { + font-size: 13px; + margin: 0 0 8px; + font-weight: normal; + font-family: Tahoma, sans-serif; + + + a { + color: #787878; + text-decoration: none; + + &:hover { + color: #ff767e; + } + } +} diff --git a/docs/sass/_reset.scss b/docs/sass/_reset.scss new file mode 100644 index 0000000..787329a --- /dev/null +++ b/docs/sass/_reset.scss @@ -0,0 +1,82 @@ +/* ------------------------------------------------- + Reset + ------------------------------------------------- */ + +applet, object, iframe, p, +blockquote, pre, a, abbr, acronym, address, big, +cite, code, del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, sub, sup, tt, var, u, i, center, dl, +dt, dd, ol, ul, li, fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, figure, figcaption, +footer, header, menu, nav, output, ruby, section, +summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; +} + +body { + margin: 0; +} + +html, body { + width: 100%; + height: 100%; +} + +* { + box-sizing: border-box; +} + +*:after, *:before { + box-sizing: border-box; +} + +// HTML 5 roles for ie8/eie9 +// ------------------------------------------------- + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} + +// Default font weight +// ------------------------------------------------- + +b, strong { + font-weight: bold; +} + +// Default font style +// ------------------------------------------------- + +i { + font-style: italic; +} + +// Remove link outline +// ------------------------------------------------- + +a { + outline: none; +} + +// Remove scroll in ie +// ------------------------------------------------- + +textarea { + overflow: auto; +} \ No newline at end of file diff --git a/docs/sass/init.scss b/docs/sass/init.scss new file mode 100644 index 0000000..bb7581e --- /dev/null +++ b/docs/sass/init.scss @@ -0,0 +1,2 @@ +@import "reset"; +@import "docs"; \ No newline at end of file