c80_map_floors 0.1.0.25 → 0.2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +7 -2
- data/app/assets/javascripts/buttons/button_back_to_map.js +18 -17
- data/app/assets/javascripts/map_objects/building.js +3 -10
- data/app/assets/javascripts/src/main.js +44 -33
- data/app/assets/javascripts/view/building_info/building_info.js +11 -11
- data/app/assets/javascripts/view/search_gui.js +7 -3
- data/app/assets/stylesheets/view/buttons/back_to_map_button.scss +3 -2
- data/app/assets/stylesheets/view/elems/building_info.scss +1 -1
- data/app/helpers/c80_map_floors/model_floor_helper.rb +26 -0
- data/app/models/c80_map_floors/floor.rb +8 -4
- data/lib/c80_map_floors/version.rb +1 -1
- data/map_padding_tuning.jpg +0 -0
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 29c8408b56215867ecb61bc6c0c96541a8b3645c
|
4
|
+
data.tar.gz: ee01051314c85f074b1d9acb033095fa1095cee0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d8ccb255f481143ab61df377077b9205d0d9df7162d4c5fc9569a8d49a3abf4989b68149af9a276f01d719b87ebe6465eb419f1541d5004e28e459a4d8e7f199
|
7
|
+
data.tar.gz: 60502338215bf6d3c889ac9cce8ef9e288d833c659af2f158f19eb6ee6f4c315c7a099f650f885ffe524bba819f39273db5a5fd647673f39770ed9a221e1bf71
|
data/README.md
CHANGED
@@ -69,12 +69,17 @@ Create in host app's assets\javascripts:
|
|
69
69
|
$(document).ready(function() {
|
70
70
|
if ($('#map_wrapper').length) {
|
71
71
|
InitMap({
|
72
|
-
dnd_enable:false
|
72
|
+
dnd_enable:false,
|
73
|
+
debug: true,
|
74
|
+
left_padding: 50,
|
75
|
+
right_padding: 50,
|
76
|
+
focus_area_width: 500,
|
77
|
+
focus_area_height: 500
|
73
78
|
});
|
74
79
|
}
|
75
80
|
});
|
76
81
|
```
|
77
|
-
|
82
|
+
![map padding tuning](map_padding_tuning.jpg)
|
78
83
|
|
79
84
|
# Helpers
|
80
85
|
```
|
@@ -6,12 +6,13 @@ function BackToMapButton() {
|
|
6
6
|
var _this = this;
|
7
7
|
|
8
8
|
var _cnt = null;
|
9
|
-
var
|
9
|
+
var _$btn = null;
|
10
|
+
|
11
|
+
var __$building_info = null; // вспомогательно: относительно окна выравниваем кнопку
|
12
|
+
var __$mcontainer = null; // вспомогательно: для выравнивания кнопки
|
10
13
|
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
var _onClick = function () {
|
14
|
+
var _onClick = function (e) {
|
15
|
+
e.preventDefault();
|
15
16
|
_map.setMode('viewing');
|
16
17
|
|
17
18
|
if (_map.current_building) {
|
@@ -44,13 +45,13 @@ function BackToMapButton() {
|
|
44
45
|
_map = link_to_map;
|
45
46
|
_cnt = $('<div></div>').addClass('back_to_map_button');
|
46
47
|
_cnt.appendTo($(parent_div_selector));
|
47
|
-
|
48
|
+
_$btn = $('<a href="#" id="BackToMapButton">Обратно на карту</a>');
|
48
49
|
//noinspection JSUnresolvedFunction
|
49
|
-
|
50
|
-
_cnt.append(
|
50
|
+
_$btn.on('click', _onClick);
|
51
|
+
_cnt.append(_$btn);
|
51
52
|
|
52
|
-
// фиксируем
|
53
|
-
|
53
|
+
__$building_info = $('.building_info'); // фиксируем вспомогательные элементы
|
54
|
+
__$mcontainer = $('.mcontainer'); // фиксируем вспомогательные элементы
|
54
55
|
|
55
56
|
};
|
56
57
|
|
@@ -63,25 +64,25 @@ function BackToMapButton() {
|
|
63
64
|
};
|
64
65
|
var __show = function () {
|
65
66
|
// фиксируем
|
66
|
-
var building_info_top =
|
67
|
-
var building_info_height =
|
67
|
+
var building_info_top = __$building_info.offset().top - __$mcontainer.offset().top;
|
68
|
+
var building_info_height = __$building_info.outerHeight(true);
|
68
69
|
|
69
70
|
// считаем
|
70
71
|
var btn_top = building_info_top + building_info_height;
|
71
|
-
var btn_left =
|
72
|
+
var btn_left = __$building_info.offset().left - __$mcontainer.offset().left;
|
72
73
|
|
73
74
|
// позиционируем
|
74
|
-
|
75
|
-
|
75
|
+
_$btn.css('top', btn_top + 'px');
|
76
|
+
_$btn.css('left', btn_left + 'px');
|
76
77
|
|
77
78
|
// показываем
|
78
|
-
|
79
|
+
_$btn.css('opacity','1');
|
79
80
|
_cnt.css('display', 'block');
|
80
81
|
};
|
81
82
|
|
82
83
|
_this.hide = function () {
|
83
84
|
_cnt.css('display', 'none');
|
84
|
-
|
85
|
+
_$btn.css('opacity', '0');
|
85
86
|
}
|
86
87
|
|
87
88
|
}
|
@@ -104,14 +104,7 @@ function Building() {
|
|
104
104
|
}
|
105
105
|
if (map_floor_as_json["img_bg"]["url"] != "null") {
|
106
106
|
|
107
|
-
//
|
108
|
-
|
109
|
-
// сначала возьём координаты coords_img здания
|
110
|
-
var tmp = _options["coords_img"].split(",");
|
111
|
-
var xx = parseFloat(tmp[0]);
|
112
|
-
var yy = parseFloat(tmp[1]);
|
113
|
-
|
114
|
-
// и сложим их с корректирующими координатами coords этажа
|
107
|
+
// картинку этажа рисуем по значениям из базы
|
115
108
|
var xx2 = 0;
|
116
109
|
var yy2 = 0;
|
117
110
|
if (map_floor_as_json["coords"].length) {
|
@@ -125,8 +118,8 @@ function Building() {
|
|
125
118
|
|
126
119
|
// просим карту нарисовать картинку с данными характеристиками
|
127
120
|
_$image_bg = _map.draw_map_object_image_bg(map_floor_as_json["img_bg"]["url"], {
|
128
|
-
x:
|
129
|
-
y:
|
121
|
+
x: xx2,
|
122
|
+
y: yy2,
|
130
123
|
width: map_floor_as_json["img_bg_width"],
|
131
124
|
height: map_floor_as_json["img_bg_height"]
|
132
125
|
}/*, 'building'*/);
|
@@ -24,18 +24,17 @@ var InitMap = function (params) {
|
|
24
24
|
var y = (window_height - image_height)/2;
|
25
25
|
// - to delete end -----------------------------------------------------------------------------------------------------------------------
|
26
26
|
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
);
|
27
|
+
var map_params = {
|
28
|
+
source:LOCS_HASH,
|
29
|
+
scale: scale,
|
30
|
+
x: x,
|
31
|
+
y: y,
|
32
|
+
mapwidth: MAP_WIDTH,
|
33
|
+
mapheight: MAP_HEIGHT,
|
34
|
+
height: window_height
|
35
|
+
};
|
36
|
+
map_params = $.extend(map_params, params);
|
37
|
+
map_on_index_page = $('#map_wrapper').beMap(map_params);
|
39
38
|
|
40
39
|
};
|
41
40
|
|
@@ -44,7 +43,6 @@ var InitMap = function (params) {
|
|
44
43
|
var Map = function () {
|
45
44
|
var self = this;
|
46
45
|
|
47
|
-
self.debug = false;
|
48
46
|
self.o = {
|
49
47
|
source: 'locations.json', // data
|
50
48
|
height: 400, // viewbox height, pixels
|
@@ -59,7 +57,12 @@ var InitMap = function (params) {
|
|
59
57
|
scale: 1,
|
60
58
|
x: 0,
|
61
59
|
y: 0,
|
62
|
-
dnd_enable: true
|
60
|
+
dnd_enable: true,
|
61
|
+
debug: false,
|
62
|
+
left_padding: 20,
|
63
|
+
focus_area_width: 520,
|
64
|
+
top_padding: 20,
|
65
|
+
focus_area_height: 520
|
63
66
|
};
|
64
67
|
self.svg = null;
|
65
68
|
self.svg_overlay = null;
|
@@ -295,7 +298,7 @@ var InitMap = function (params) {
|
|
295
298
|
self.draw_childs(data["buildings"]);
|
296
299
|
|
297
300
|
// проверим, всё ли уместилось
|
298
|
-
self.
|
301
|
+
self.invalidateViewArea();
|
299
302
|
|
300
303
|
// инициализируем класс, обслуживающий поиск
|
301
304
|
self.search_gui_klass = new SearchGUI(self);
|
@@ -390,7 +393,7 @@ var InitMap = function (params) {
|
|
390
393
|
// ------------------------------------------------------------------------------------------------------------------------
|
391
394
|
|
392
395
|
|
393
|
-
self.
|
396
|
+
self.invalidateViewArea();
|
394
397
|
|
395
398
|
}).resize();
|
396
399
|
|
@@ -724,7 +727,7 @@ var InitMap = function (params) {
|
|
724
727
|
return pageC - scale * logicC;
|
725
728
|
};
|
726
729
|
|
727
|
-
/* ---
|
730
|
+
/* --- invalidateViewArea BEGIN --------------------------------------------------------------------------------- */
|
728
731
|
|
729
732
|
var _$m = $("#map_wrapper");
|
730
733
|
var _$b = $('.container');//$('footer .container');
|
@@ -733,21 +736,24 @@ var InitMap = function (params) {
|
|
733
736
|
var _is_debug_drawn = false;
|
734
737
|
var _$address_p = $('#paddress'); // 20161003: после редизайна надо дополнительно позиционировать блок с адресом
|
735
738
|
|
736
|
-
self.
|
737
|
-
|
739
|
+
self.invalidateViewArea = function () {
|
740
|
+
console.log('<invalidateViewArea>');
|
738
741
|
|
739
742
|
// рассчитаем "константы" - прямоугольник, в который надо вписывать картинки зданий при входе в них
|
740
|
-
self.X1 =
|
743
|
+
self.X1 = self.o.left_padding;
|
744
|
+
self.X2 = self.o.left_padding + self.o.focus_area_width;
|
745
|
+
|
746
|
+
self.Y1 = self.o.top_padding;
|
747
|
+
self.Y2 = self.o.top_padding + self.o.focus_area_height;
|
748
|
+
|
749
|
+
self.CX = (self.X2 + self.X1) / 2;
|
750
|
+
self.CY = (self.Y2 + self.Y1) / 2;
|
751
|
+
|
741
752
|
self.X1S = _$b.offset().left + 200;
|
742
|
-
self.Y1 = 73;
|
743
753
|
self.Y1S = 140;
|
744
|
-
self.X2 = self.X1 + _$b.width() * .5;
|
745
754
|
self.X2S = self.X1 + _$b.width() * .4;
|
746
755
|
self.X3 = self.X1 + _$b.width() - 100;
|
747
|
-
self.Y2 = _$m.height() - 20;
|
748
756
|
self.Y2S = _$m.height() - 80;
|
749
|
-
self.CX = (self.X2 - self.X1) / 2 - 2 + self.X1;
|
750
|
-
self.CY = (self.Y2 - self.Y1) / 2 - 2 + self.Y1;
|
751
757
|
|
752
758
|
self.X10 = _$b.offset().left + 15;
|
753
759
|
self.X20 = self.X10 + _$b.width();
|
@@ -760,21 +766,24 @@ var InitMap = function (params) {
|
|
760
766
|
if (self.container) $container_buttons.css("margin-top", (self.container.height() -10) + "px");
|
761
767
|
|
762
768
|
// DEBUG
|
763
|
-
if (self.debug) {
|
769
|
+
if (self.o.debug) {
|
764
770
|
|
765
771
|
if (!_is_debug_drawn) {
|
766
772
|
_is_debug_drawn = true;
|
767
773
|
|
768
|
-
var style = "display:block;position:absolute;background-color:#00ff00;opacity:0.
|
774
|
+
var style = "display:block;position:absolute;background-color:#00ff00;opacity:0.7;";
|
769
775
|
var style_x = style + "width:1px;height:800px;top:0;left:{X}px;";
|
770
776
|
var style_y = style + "width:3000px;height:1px;left:0;top:{Y}px;";
|
771
777
|
//var style_dot = style + 'width:4px;height:4px;left:{X}px;top:{Y}px;';
|
772
778
|
|
773
779
|
var to_draw = [
|
774
|
-
{x: self.
|
775
|
-
{x: self.
|
776
|
-
{y: self.
|
777
|
-
{y: self.
|
780
|
+
{x: self.X1},
|
781
|
+
{x: self.X2},
|
782
|
+
{y: self.Y1},
|
783
|
+
{y: self.Y2},
|
784
|
+
//{x: self.X20},
|
785
|
+
//{y: self.Y10},
|
786
|
+
//{y: self.Y20},
|
778
787
|
{x: self.CX},
|
779
788
|
{y: self.CY}
|
780
789
|
];
|
@@ -799,7 +808,7 @@ var InitMap = function (params) {
|
|
799
808
|
|
800
809
|
};
|
801
810
|
|
802
|
-
/* ---
|
811
|
+
/* --- invalidateViewArea END ----------------------------------------------------------------------------------- */
|
803
812
|
|
804
813
|
self.addEvent = function (target, eventType, func) {
|
805
814
|
self.events.push(new AppEvent(target, eventType, func));
|
@@ -942,7 +951,9 @@ var InitMap = function (params) {
|
|
942
951
|
};
|
943
952
|
|
944
953
|
self._draw_map_object_image_bg_onload = function ($image) {
|
945
|
-
|
954
|
+
setTimeout(function() {
|
955
|
+
self.clear_all_map_object_image_bg();
|
956
|
+
}, 500);
|
946
957
|
self.__compose_css_style_for_map_object_image($image); // рассчитаем позиционирующий стиль и применим его к созданной оверлейной картинке
|
947
958
|
};
|
948
959
|
|
@@ -12,7 +12,7 @@ function BuildingInfo(options) {
|
|
12
12
|
|
13
13
|
var _this = this;
|
14
14
|
|
15
|
-
var
|
15
|
+
var _$el_building_info = null;
|
16
16
|
|
17
17
|
// текуще отображаемое здание (Это данные от C80MapFloors::MapBuilding, метод my_as_json5)
|
18
18
|
var _cur_map_building_json;
|
@@ -137,18 +137,18 @@ function BuildingInfo(options) {
|
|
137
137
|
};
|
138
138
|
|
139
139
|
this.show = function() {
|
140
|
-
|
140
|
+
_$el_building_info.css("top", _$el_building_info.data("init"));
|
141
141
|
};
|
142
142
|
|
143
143
|
this.hide = function() {
|
144
144
|
|
145
|
-
if (
|
146
|
-
|
145
|
+
if (_$el_building_info.data("init") == undefined) {
|
146
|
+
_$el_building_info.data('init', _$el_building_info.css("top"));
|
147
147
|
}
|
148
148
|
|
149
|
-
var h =
|
150
|
-
|
151
|
-
|
149
|
+
var h = _$el_building_info.height() + 100;
|
150
|
+
_$el_building_info.css("top", -h+'px');
|
151
|
+
_$el_building_info.css("display", "block");
|
152
152
|
};
|
153
153
|
|
154
154
|
/**
|
@@ -220,7 +220,7 @@ function BuildingInfo(options) {
|
|
220
220
|
|
221
221
|
// TODO:: этот код должен переехать туда, где будем выводить инфо о площади без арендатора
|
222
222
|
/*// заполняем данными ссылку 'Оставить заявку'
|
223
|
-
var $a_make_order =
|
223
|
+
var $a_make_order = _$el_building_info.find('.c80_order_invoking_btn');
|
224
224
|
$a_make_order.data('comment-text', 'Здравствуйте, оставляю заявку на площадь: ' + area_json["title"]);
|
225
225
|
$a_make_order.data('subj-id', area_json["id"]);*/
|
226
226
|
|
@@ -229,7 +229,7 @@ function BuildingInfo(options) {
|
|
229
229
|
};
|
230
230
|
|
231
231
|
this.set_left = function(left) {
|
232
|
-
|
232
|
+
_$el_building_info.css("left", left + "px");
|
233
233
|
};
|
234
234
|
|
235
235
|
//------------------------------------------------------------------------------------------------------------------------
|
@@ -253,7 +253,7 @@ function BuildingInfo(options) {
|
|
253
253
|
this._fInit = function (options) {
|
254
254
|
|
255
255
|
// фиксируем html-узел
|
256
|
-
|
256
|
+
_$el_building_info = $('.building_info');
|
257
257
|
|
258
258
|
// TODO:: _options extend options
|
259
259
|
_options = $.extend(_options, options);
|
@@ -267,7 +267,7 @@ function BuildingInfo(options) {
|
|
267
267
|
});
|
268
268
|
|
269
269
|
// находим заголовок
|
270
|
-
_$title =
|
270
|
+
_$title = _$el_building_info.find('h3');
|
271
271
|
|
272
272
|
};
|
273
273
|
|
@@ -122,8 +122,10 @@ function SearchGUI(link_to_map) {
|
|
122
122
|
*/
|
123
123
|
this.position_inside = function () {
|
124
124
|
//console.log('<position_inside> [breakpoint].');
|
125
|
-
_$container
|
126
|
-
|
125
|
+
if (_$container != null) { // может быть null, если вдруг gui поиска не пришёл с сервера
|
126
|
+
_$container.css("left", -200);
|
127
|
+
_$container.css("top", _$container.data('init_position_top'));
|
128
|
+
}
|
127
129
|
};
|
128
130
|
|
129
131
|
/**
|
@@ -131,7 +133,9 @@ function SearchGUI(link_to_map) {
|
|
131
133
|
* Например, когда переходим в режим редактирования.
|
132
134
|
*/
|
133
135
|
this.position_hide = function () {
|
134
|
-
_$container
|
136
|
+
if (_$container != null) { // может быть null, если вдруг gui поиска не пришёл с сервера
|
137
|
+
_$container.css("top", -200);
|
138
|
+
}
|
135
139
|
};
|
136
140
|
|
137
141
|
//--[ private ]-----------------------------------------------------------------------------------------------------
|
@@ -1,5 +1,5 @@
|
|
1
1
|
#BackToMapButton {
|
2
|
-
background-color: #
|
2
|
+
background-color: #5FCE4B;
|
3
3
|
color: #fff !important;
|
4
4
|
display: block;
|
5
5
|
font-size: 17px;
|
@@ -20,9 +20,10 @@
|
|
20
20
|
text-transform: uppercase;
|
21
21
|
/*font-family: FrankRegular, sans-serif;*/
|
22
22
|
font-weight: normal;
|
23
|
+
margin: 10px 0;
|
23
24
|
|
24
25
|
&:hover {
|
25
|
-
background-color: #
|
26
|
+
background-color: #3377A8;
|
26
27
|
}
|
27
28
|
|
28
29
|
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
# Предыстория: изначально карта создавалась на основе арта 101км.
|
2
|
+
# Чтобы при приближении к картинке этажа не возникало мыла,
|
3
|
+
# я их готовил размерами в 2 раза больше.
|
4
|
+
# Теперь пришёл единый psd (карта s40), в котором картинки этажей
|
5
|
+
# уже размещены и позиционированы поверх картинки карты. И нет
|
6
|
+
# надобности увеличивать их в 2 раза.
|
7
|
+
#
|
8
|
+
# Поэтому: методы модели Floor обращаются теперь к этому хелперу,
|
9
|
+
# задача которого - выдавать размеры картинок этажей. 20170413
|
10
|
+
# + в host приложении можно переопределить этот функционал.
|
11
|
+
#
|
12
|
+
module C80MapFloors
|
13
|
+
module ModelFloorHelper
|
14
|
+
|
15
|
+
def get_width(image)
|
16
|
+
img = MiniMagick::Image.open(image.path)
|
17
|
+
img['width']/2
|
18
|
+
end
|
19
|
+
|
20
|
+
def get_height(image)
|
21
|
+
img = MiniMagick::Image.open(image.path)
|
22
|
+
img['height']/2
|
23
|
+
end
|
24
|
+
|
25
|
+
end
|
26
|
+
end
|
@@ -14,13 +14,16 @@ module C80MapFloors
|
|
14
14
|
mount_uploader :img_bg, C80MapFloors::FloorImageUploader # TODO:: FloorImageUploader класс должен использоваться только для загрузки img_bg [потому что 78aasq]
|
15
15
|
mount_uploader :img_overlay, C80MapFloors::FloorImageUploader
|
16
16
|
|
17
|
+
include C80MapFloors::ModelFloorHelper
|
18
|
+
|
17
19
|
# NOTE:: Т.к. для этажей используются картинки в два раза детальнее (в два раза больше, чем оригинал карты), то делим попалам
|
18
20
|
# размеры картинки уйдут в js - они помогут её css-абсолютно правильно масштабировать и позиционировать
|
19
21
|
def img_bg_width
|
20
22
|
res = nil
|
21
23
|
if img_bg.present?
|
22
|
-
|
23
|
-
|
24
|
+
res = get_width(img_bg)
|
25
|
+
# img = MiniMagick::Image.open(img_bg.path)
|
26
|
+
# res = img["width"]/2
|
24
27
|
end
|
25
28
|
res
|
26
29
|
end
|
@@ -28,8 +31,9 @@ module C80MapFloors
|
|
28
31
|
def img_bg_height
|
29
32
|
res = nil
|
30
33
|
if img_bg.present?
|
31
|
-
|
32
|
-
|
34
|
+
res = get_height(img_bg)
|
35
|
+
# img = MiniMagick::Image.open(img_bg.path)
|
36
|
+
# res = img["height"]/2
|
33
37
|
end
|
34
38
|
res
|
35
39
|
end
|
Binary file
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: c80_map_floors
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- C80609A
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-04-
|
11
|
+
date: 2017-04-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -169,6 +169,7 @@ files:
|
|
169
169
|
- app/controllers/c80_map_floors/application_controller.rb
|
170
170
|
- app/controllers/c80_map_floors/map_ajax_controller.rb
|
171
171
|
- app/helpers/c80_map_floors/application_helper.rb
|
172
|
+
- app/helpers/c80_map_floors/model_floor_helper.rb
|
172
173
|
- app/helpers/c80_map_floors/search_gui_helper.rb
|
173
174
|
- app/models/c80_map_floors/area.rb
|
174
175
|
- app/models/c80_map_floors/area_representator.rb
|
@@ -220,6 +221,7 @@ files:
|
|
220
221
|
- lib/c80_map_floors/version.rb
|
221
222
|
- lib/integer.rb
|
222
223
|
- lib/search_result.rb
|
224
|
+
- map_padding_tuning.jpg
|
223
225
|
homepage: http://www.vorsa-park.ru
|
224
226
|
licenses:
|
225
227
|
- MIT
|