From 991d0ac8f2fb29755aa3dbf6e3af3644c336c381 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Tue, 30 Sep 2014 20:51:34 +0400 Subject: [PATCH] edit --- LICENSE | 20 ---- bower.json | 14 ++- examples/css/all.css | 155 +++++++++++++++++++++++++ examples/js/all.js | 269 +++++++++++++++++++++++++++++++++++++++++++ package.json | 8 +- 5 files changed, 440 insertions(+), 26 deletions(-) delete mode 100644 LICENSE create mode 100644 examples/css/all.css create mode 100644 examples/js/all.js diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 2120474..0000000 --- a/LICENSE +++ /dev/null @@ -1,20 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2013 Iliya Garakh - -Permission is hereby granted, free of charge, to any person obtaining a copy of -this software and associated documentation files (the "Software"), to deal in -the Software without restriction, including without limitation the rights to -use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of -the Software, and to permit persons to whom the Software is furnished to do so, -subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS -FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR -COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER -IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN -CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/bower.json b/bower.json index c63536b..bbe805c 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,20 @@ { "name": "kladrapi-jsclient", - "version": "2.0", + "version": "1.9.1-pre", + "main": "jquery.kladr.min.js", "homepage": "https://github.com/garakh/kladrapi-jsclient", "authors": [ - "Alexandr Yakovlev ", - "Iliya Garakh " + "Alexandr Yakovlev " ], - "description": "Плагин для автодополнения полей адреса при вводе.", + "license": "Public Domain", + "description": "jQuery Kladr", "keywords": [ "kladr", "jquery" ], + "ignore": [ + "gulpfile.js", + "package.json", + "*.md" + ] } diff --git a/examples/css/all.css b/examples/css/all.css new file mode 100644 index 0000000..ea35463 --- /dev/null +++ b/examples/css/all.css @@ -0,0 +1,155 @@ +/* ---------------------- common -------------------- */ + +body, input { + color: #555; + font-size: 14px; + font-family: Helvetica, Arial, sans-serif; +} +input, button { + outline: none; +} +.address { + width: 400px; + margin: 40px auto 0; + padding: 40px 40px 30px; + border: 2px solid #e1e1e1; + background-color: #f7f7f7; + box-shadow: rgba(0,0,0,0.075) 1px 1px 5px; +} +.address h1 { + margin: 0; + padding: 0; + font-size: 20px; + padding-bottom: 40px; + text-align: center; +} +.field { + margin-bottom: 10px; + padding: 0; +} +.field input { + height: 2em; + width: 370px; + border: 1px solid #d8d8d8; + padding: 0 7px; + color: #666; +} + + +/* ------------------ one string example ----------------- */ + +#one_string .address { + width: 500px; +} +#one_string .field input { + width: 470px; +} + + +/* -------------------- form example ------------------- */ + +#form .field { + margin-bottom: 20px; +} +#form .field label { + display: inline-block; + width: 80px; + vertical-align: middle; +} +#form .field input { + width: 295px; +} +#form .tooltip { + position: absolute; + top: 16px; + left: 360px; + width: 120px; + color: #b94a48; + padding: 8px 10px; + border-radius: 5px; + border: 1px solid #eed3d7; + background-color: #f2dede; + opacity: 0.8; +} +#form .tooltip b { + position: absolute; + display: block; + left: -14px; + width: 0; + height: 0; + color: transparent; + border: 7px solid; + border-right-color: #f2dede; +} + + +/* ----------------- form with map example ---------------- */ + +#form_with_map .address { + width: 808px; + padding: 40px; +} +#form_with_map .address .kladr-error { + color: #df2c0f; +} +#form_with_map .col-1 { + float: left; +} +#form_with_map .col-2{ + margin-left: 384px; +} +#form_with_map .field { + margin-bottom: 20px; +} +#form_with_map .field label { + display: inline-block; + width: 80px; + vertical-align: middle; +} +#form_with_map .field input { + width: 240px; +} +#form_with_map .panel-map { + width: 384px; + height: 582px; + padding: 20px; + border: 1px solid #d8d8d8; + background: #ffffff; + background-size: 400px 250px; +} +#form_with_map .addition { + padding-top: 15px; +} +#form_with_map .addition .block { + display: block; + height: 165px; + padding: 20px; + margin-bottom: 20px; + background-color: #fcfcfc; + border: 1px solid #d8d8d8; + font-size: 13px; +} +#form_with_map .addition .block { + width: 298px; +} +#form_with_map .addition .block:nth-child(1) { + height: 88px; + line-height: 20px; +} +#form_with_map .addition .title { + font-weight: bold; + font-size: 14px; + margin: 0; + margin-bottom: 10px; +} +#form_with_map .addition ul { + margin: 0; + padding: 0; + list-style-type: none; +} +#form_with_map .addition li { + margin-bottom: 5px; +} +#form_with_map .addition .name { + font-style: italic; +} \ No newline at end of file diff --git a/examples/js/all.js b/examples/js/all.js new file mode 100644 index 0000000..1d41621 --- /dev/null +++ b/examples/js/all.js @@ -0,0 +1,269 @@ +$(function () { + // Simple example + (function () { + var $container = $(document.getElementById('simple')); + + $container + .find('[name="city"]') + .kladr({ + type: $.kladr.type.city + }); + })(); + + // One string example + (function () { + var $container = $(document.getElementById('one_string')); + + $container + .find('[name="address"]') + .kladr({ + oneString: true + }); + })(); + + // Form example + (function () { + var $container = $(document.getElementById('form')); + + var $region = $container.find('[name="region"]'); + var $district = $container.find('[name="district"]'); + var $city = $container.find('[name="city"]'); + var $street = $container.find('[name="street"]'); + var $building = $container.find('[name="building"]'); + + var $tooltip = $container.find('.tooltip'); + + $() + .add($region) + .add($district) + .add($city) + .add($street) + .add($building) + .kladr({ + parentInput: $container.find('.js-form-address'), + verify: true, + select: function (obj) { + setLabel($(this), obj.type); + $tooltip.hide(); + }, + check: function (obj) { + if (obj) { + setLabel($(this), obj.type); + $tooltip.hide(); + } + else { + showError($(this), 'Введено неверно'); + } + } + }); + + $region.kladr('type', $.kladr.type.region); + $district.kladr('type', $.kladr.type.district); + $city.kladr('type', $.kladr.type.city); + $street.kladr('type', $.kladr.type.street); + $building.kladr('type', $.kladr.type.building); + + // Отключаем проверку введённых данных для строений + $building.kladr('verify', false); + + function setLabel ($input, text) { + text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase(); + $input.parent().find('label').text(text); + } + + function showError ($input, message) { + $tooltip.find('span').text(message); + + var inputOffset = $input.offset(); + var inputWidth = $input.outerWidth(); + var inputHeight = $input.outerHeight(); + + var tooltipHeight = $tooltip.outerHeight(); + + $tooltip.css({ + left: (inputOffset.left + inputWidth + 10) + 'px', + top: (inputOffset.top + (inputHeight - tooltipHeight) / 2 - 1) + 'px' + }); + + $tooltip.show(); + } + })(); + + // Form with map example + (function () { + var $container = $(document.getElementById('form_with_map')); + + var $region = $container.find('[name="region"]'), + $district = $container.find('[name="district"]'), + $city = $container.find('[name="city"]'), + $street = $container.find('[name="street"]'), + $building = $container.find('[name="building"]'); + + var map = null, + map_created = false; + + $() + .add($region) + .add($district) + .add($city) + .add($street) + .add($building) + .kladr({ + parentInput: $container.find('.js-form-address'), + withParents: true, + verify: true, + labelFormat: function (obj, query) { + var label = ''; + + var name = obj.name.toLowerCase(); + query = query.name.toLowerCase(); + + var start = name.indexOf(query); + start = start > 0 ? start : 0; + + if (obj.typeShort) { + label += obj.typeShort + '. '; + } + + if (query.length < obj.name.length) { + label += obj.name.substr(0, start); + label += '' + obj.name.substr(start, query.length) + ''; + label += obj.name.substr(start + query.length, obj.name.length - query.length - start); + } else { + label += '' + obj.name + ''; + } + + return label; + }, + select: function (obj) { + $(this).parent().find('label').text(obj.type); + + log(obj); + addressUpdate(); + mapUpdate(); + }, + check: function (obj) { + if (obj) { + $(this).parent().find('label').text(obj.type); + } + + log(obj); + addressUpdate(); + mapUpdate(); + } + }); + + $region.kladr('type', $.kladr.type.region); + $district.kladr('type', $.kladr.type.district); + $city.kladr('type', $.kladr.type.city); + $street.kladr('type', $.kladr.type.street); + $building.kladr('type', $.kladr.type.building); + + // Отключаем проверку введённых данных для строений + $building.kladr('verify', false); + + ymaps.ready(function () { + if (map_created) return; + map_created = true; + + map = new ymaps.Map('map', { + center: [55.76, 37.64], + zoom: 12, + controls: [] + }); + + map.controls.add('zoomControl', { + position: { + right: 10, + top: 10 + } + }); + }); + + function mapUpdate () { + var zoom = 4; + + var address = $.kladr.getAddress($container.find('.js-form-address'), function (objs) { + var result = '', + name = '', + type = ''; + + for (var i in objs) { + if (objs.hasOwnProperty(i)) { + if ($.type(objs[i]) === 'object') { + name = objs[i].name; + type = ' ' + objs[i].type; + } + else { + name = objs[i]; + type = ''; + } + + if (result) result += ', '; + result += type + name; + + switch (objs[i].contentType) { + case $.kladr.type.region: + zoom = 4; + break; + + case $.kladr.type.district: + zoom = 7; + break; + + case $.kladr.type.city: + zoom = 10; + break; + + case $.kladr.type.street: + zoom = 13; + break; + + case $.kladr.type.building: + zoom = 16; + break; + } + } + } + + return result; + }); + + if (address && map_created) { + var geocode = ymaps.geocode(address); + geocode.then(function (res) { + map.geoObjects.each(function (geoObject) { + map.geoObjects.remove(geoObject); + }); + + var position = res.geoObjects.get(0).geometry.getCoordinates(), + placemark = new ymaps.Placemark(position, {}, {}); + + map.geoObjects.add(placemark); + map.setCenter(position, zoom); + }); + } + } + + function addressUpdate () { + var address = $.kladr.getAddress($container.find('.js-form-address')); + + $container.find('#address').text(address); + } + + function log (obj) { + var $log, i; + + $container.find('.js-log li').hide(); + + for (i in obj) { + $log = $container.find('#' + i); + + if ($log.length) { + $log.find('.value').text(obj[i]); + $log.show(); + } + } + } + })(); +}); \ No newline at end of file diff --git a/package.json b/package.json index 68431cd..f8cf617 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "kladrapi-jsclient", - "version": "2.0.0", + "version": "1.9.1-pre", "description": "jQuery Kladr", "main": "jquery.kladr.min.js", "directories": { "example": "examples" }, "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build": "npm install && gulp" }, "repository": { "type": "git", @@ -18,6 +18,10 @@ "email": "xescoder@gmail.com", "url": "ru.linkedin.com/in/xescoder/" }, + "keywords": [ + "kladr", + "jquery" + ], "license": "Public Domain", "bugs": { "url": "https://github.com/garakh/kladrapi-jsclient/issues"