pageflow-linkmap-page 0.2.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +32 -44
- data/README.md +14 -4
- data/app/assets/javascript/pageflow/linkmap_page/editor/collections/areas_collection.js +21 -12
- data/app/assets/javascript/pageflow/linkmap_page/editor/controllers/side_bar_controller.js +23 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/models/area.js +36 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/models/masks_delegator.js +16 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/models/new_area_file_selection_handler.js +1 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/models/page_configuration_mixin.js +84 -27
- data/app/assets/javascript/pageflow/linkmap_page/editor/models/stored_mask_sprite.js +25 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/routers/side_bar_router.js +3 -1
- data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_item.jst.ejs +14 -5
- data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_masks_preview.jst.ejs +2 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_outlines.jst.ejs +2 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/templates/select_area_position_hint.jst.ejs +4 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/areas_list_view.js +6 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/configuration_editor_view.js +9 -4
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/edit_area_view.js +15 -11
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/editable_areas_mode_view.js +6 -1
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/area_item_embedded_view.js +78 -56
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/area_masks_preview_embedded_view.js +219 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/area_outlines_embedded_view.js +126 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/areas_embedded_view.js +34 -3
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/inputs/area_mask_input_view.js +35 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor/views/select_area_position_hint_view.js +39 -0
- data/app/assets/javascript/pageflow/linkmap_page/editor.js +12 -1
- data/app/assets/javascript/pageflow/linkmap_page/page_type.js +35 -35
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/area_contains.js +18 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/area_redraw.js +29 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/color_map.js +122 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/image_data.js +59 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/mask.js +37 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/mask_sprite.js +68 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/masks.js +99 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/remote_image.js +38 -0
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap.js +137 -9
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_audio_player_controls.js +1 -1
- data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_panorama.js +24 -18
- data/app/assets/javascript/pageflow/linkmap_page.js +1 -1
- data/app/assets/stylesheets/pageflow/linkmap_page/animations/{rotate.css.scss → rotate.scss} +0 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/action_buttons.scss +66 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/area_outlines.scss +13 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/{file_areas.css.scss → file_areas.scss} +0 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/inputs/area_mask.scss +3 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/masks_preview.scss +15 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/{resizable.css.scss → resizable.scss} +0 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/editor/select_area_position_hint.scss +9 -0
- data/app/assets/stylesheets/pageflow/linkmap_page/{editor.css.scss → editor.scss} +28 -41
- data/app/assets/stylesheets/pageflow/linkmap_page/themes/{default.css.scss → default.scss} +2 -3
- data/app/assets/stylesheets/pageflow/{linkmap_page.css.scss → linkmap_page.scss} +15 -18
- data/app/controllers/pageflow/linkmap_page/mask_sprites_controller.rb +26 -0
- data/app/helpers/pageflow/linkmap_page/areas_helper.rb +19 -4
- data/app/models/pageflow/linkmap_page/mask_sprite.rb +15 -0
- data/app/views/pageflow/linkmap_page/areas/_div.html.erb +4 -7
- data/config/locales/de.yml +184 -6
- data/config/locales/en.yml +149 -7
- data/config/routes.rb +2 -2
- data/db/migrate/20170330201200_create_mask_sprites.rb +12 -0
- data/lib/generators/pageflow_linkmap_page/install/install_generator.rb +1 -0
- data/lib/pageflow/linkmap_page/version.rb +1 -1
- data/pageflow-linkmap-page.gemspec +10 -11
- data/spec/controllers/pageflow/linkmap_page/mask_sprites_controller_spec.rb +108 -0
- data/spec/helpers/pageflow/linkmap_page/areas_helper_spec.rb +23 -2
- metadata +75 -59
- data/config/locales/new/inverted.de.yml +0 -10
- data/config/locales/new/inverted.en.yml +0 -10
- data/config/locales/new/scaled_on_phone_hint.de.yml +0 -11
- data/config/locales/new/scaled_on_phone_hint.en.yml +0 -11
- data/config/locales/new/scroll_indicators_v.de.yml +0 -6
- data/config/locales/new/scroll_indicators_v.en.yml +0 -6
- data/config/locales/new/text_only_area_type.de.yml +0 -11
- data/config/locales/new/text_only_area_type.en.yml +0 -11
- data/config/locales/new/typo.en.yml +0 -6
@@ -1,7 +1,7 @@
|
|
1
|
-
<%= content_tag(:div, class: "linkmap_areas") do %>
|
1
|
+
<%= content_tag(:div, class: "linkmap_areas", data: data_attributes) do %>
|
2
2
|
<% (configuration['linkmap_areas'].presence || []).each_with_index do |attributes, index| %>
|
3
|
-
<%= linkmap_area(entry, attributes, index) do %>
|
4
|
-
|
3
|
+
<%= linkmap_area(entry, attributes, index, configuration['background_type']) do %>
|
4
|
+
<canvas class="visited_image"></canvas>
|
5
5
|
|
6
6
|
<% if configuration['background_type'] == 'hover_video' &&
|
7
7
|
!Pageflow::ImageFile.find_by_id(configuration['hover_image_id']) %>
|
@@ -11,10 +11,7 @@
|
|
11
11
|
file_type: 'video_file',
|
12
12
|
class: 'hover_image') %>
|
13
13
|
<% else %>
|
14
|
-
|
15
|
-
'hover_image',
|
16
|
-
class: 'hover_image',
|
17
|
-
style_group: :panorama) %>
|
14
|
+
<canvas class="hover_image"></canvas>
|
18
15
|
<% end %>
|
19
16
|
|
20
17
|
<div class="linkmap_marker <%= attributes['marker'] %>">
|
data/config/locales/de.yml
CHANGED
@@ -2,9 +2,11 @@ de:
|
|
2
2
|
activerecord:
|
3
3
|
attributes:
|
4
4
|
pageflow/linkmap_page/area:
|
5
|
-
|
6
|
-
|
5
|
+
inverted: Invertieren
|
6
|
+
link_description: 'Linkbeschreibung: Text'
|
7
|
+
link_title: 'Linkbeschreibung: Titel'
|
7
8
|
marker: Linkmarkierung
|
9
|
+
mask_perma_id: Maske
|
8
10
|
name: Bezeichnung
|
9
11
|
page_transition: Seitenwechsel-Animation
|
10
12
|
target_id: Ziel
|
@@ -18,22 +20,30 @@ de:
|
|
18
20
|
audio_file: Audio Datei
|
19
21
|
external_site: Externer Verweis
|
20
22
|
page: Seitenverweis
|
23
|
+
text_only: Nur Text
|
21
24
|
pageflow:
|
22
25
|
linkmap_page:
|
23
|
-
|
26
|
+
color_map:
|
27
|
+
too_many_components: Das ausgewählte Bild enthält zu viele verschiedene Farbtöne. Es können maximal 20 Bereiche durch das Maskenbild bestimmt werden. Stellen Sie sicher, dass bei der Erstellung des Maskenbildes keine Kantenglättung verwendet wurde, da dies die Zahl der im Bild auftretenden Farbtöne stark erhöhen kann.
|
28
|
+
default_page_transition: "(Standard)"
|
24
29
|
editor:
|
25
30
|
area_types:
|
26
31
|
audio_file: Audio Datei
|
27
32
|
external_site: Externer Verweis
|
28
33
|
page: Seitenverweis
|
34
|
+
text_only: Nur Text
|
29
35
|
templates:
|
30
36
|
edit_area:
|
31
37
|
back: Zurück
|
32
38
|
destroy: Löschen
|
33
39
|
embedded:
|
34
40
|
area_item:
|
35
|
-
edit:
|
36
|
-
|
41
|
+
edit: DELETE
|
42
|
+
hide_marker: Linkmarkierung deaktivieren
|
43
|
+
set_mask: Maske auswählen
|
44
|
+
show_marker: Linkmarkierung aktivieren
|
45
|
+
toggle_marker: DELETE
|
46
|
+
unset_mask: Frei positionierbar machen
|
37
47
|
file_area_item:
|
38
48
|
edit: Bearbeiten
|
39
49
|
remove: Entfernen
|
@@ -41,20 +51,182 @@ de:
|
|
41
51
|
file_areas:
|
42
52
|
add: Hinzufügen
|
43
53
|
label: Audios
|
54
|
+
select_area_position_hint:
|
55
|
+
cancel: Abbrechen
|
44
56
|
views:
|
57
|
+
area_mask_input_view:
|
58
|
+
present: "(Aktiv)"
|
45
59
|
areas_list:
|
46
60
|
add: Hinzufügen
|
47
61
|
label: Bereiche
|
48
62
|
edit_area_view:
|
49
63
|
confirm_destroy: Bereich wirklich löschen?
|
64
|
+
embedded:
|
65
|
+
area_item:
|
66
|
+
external_link_disabled: Externe Links sind im Editor deaktiviert.
|
67
|
+
scaled_on_phone_hint:
|
68
|
+
orientations:
|
69
|
+
both: Phone Layout
|
70
|
+
landscape: Landscape Phone Layout
|
71
|
+
portrait: Portrait Phone Layout
|
72
|
+
text: Das Panorama wird im %{orientation} skaliert, um eine Mindestgröße der Hotspots für die Touch-Eingabe zu gewährleisten. Hotspots vergrößern, um Skalierung zu vermeiden.
|
73
|
+
select_area_position_hint:
|
74
|
+
drag_hint: Wähle einen Bereich für den Hotspot durch Klicken und Ziehen mit der Maus.
|
75
|
+
select_mask_hint: Klicke auf einen der farbigen Bereiche des Masken-Bildes, um einen Bereich für den Hotspot auszuwählen.
|
76
|
+
select_mask_or_drag_hint: Klicke auf einen der farbigen Bereiche des Masken-Bildes oder wähle einen frei positionierten Bereich durch Klicken und Ziehen mit der Maus.
|
50
77
|
help_entries:
|
51
78
|
page_type:
|
52
79
|
menu_item: Hotspots
|
53
|
-
text:
|
80
|
+
text: |-
|
81
|
+
# Hotspots
|
82
|
+
|
83
|
+
*Verweise mit konfigurierbaren Klickbereichen*
|
84
|
+
|
85
|
+
Hotspots können Audio-Dateien abspielen, interne Verweise auf andere
|
86
|
+
Seiten im Pageflow sein oder auf externe Seiten verlinken. Es können
|
87
|
+
so viele Hotspots angelegt werden wie gewünscht.
|
88
|
+
|
89
|
+
Der Panorama Typ entscheidet darüber, ob die Seite ein
|
90
|
+
Hintergrund-Bild oder Hintergrund-Video zeigt. (Beachte, dass
|
91
|
+
Hintergrund-Videos auf mobilen Geräten nicht abgespielt werden,
|
92
|
+
deshalb wähle ein zusätzliches Panorama-Bild für die mobile Version)
|
93
|
+
|
94
|
+
Die Hotspot-Seite ermöglicht auch die Nutzung von Panorama-Bildern,
|
95
|
+
die größer sind, als der sichtbare Bildschirmbereich. So können Nutzer
|
96
|
+
diese Seiten auch horizontal oder vertikal durch scrollen erkunden.
|
97
|
+
|
98
|
+
Um einen Hotspot zu erstellen, klicke auf „Bereiche“ und wähle
|
99
|
+
zwischen „Audio“, „Seitenverweis“ oder „Externer Verweis“.
|
100
|
+
|
101
|
+
Diese „Bereiche" können auf zwei unterschiedliche Arten dargestellt
|
102
|
+
werden:
|
103
|
+
|
104
|
+
## Hotspots als Kreise
|
105
|
+
|
106
|
+
Ein weißer Kreis, dessen Position und Größe frei gewählt werden kann,
|
107
|
+
markiert den Hotspot. Hierzu klicke beim entsprechenden Hotspot auf
|
108
|
+
den Button mit dem Auge-Symbol und ziehe den Kreis dann an die
|
109
|
+
gewünschte Position. Bei Auswahl einer Audio-Datei erscheint innerhalb
|
110
|
+
des Kreises ein Kopfhörer-Symbol mit einem Inline-Audio-Player. Dessen
|
111
|
+
Größe hängt von der Größe des Kreises ab. Je näher der Mauszeiger
|
112
|
+
Richtung Kreis bewegt wird, desto heller/sichtbarer wird dieser. Mit
|
113
|
+
Klick auf den Kopfhörer wird der Audio-Player gestartet und gestoppt.
|
114
|
+
|
115
|
+
## Individuell gestaltete Hotspots
|
116
|
+
|
117
|
+
Alternativ kann ein zweites Panorama-Bild verwendet werden, um das
|
118
|
+
Aussehen der Hotspots zu bestimmen, über denen sich der Cursor
|
119
|
+
befindet. Es müssen zwei Panorama-Bilder vorbereitet werden:
|
120
|
+
|
121
|
+
1. Ein Bild mit allen Hotspots im inaktiven Modus (z.B. eine Karte, auf der Städte mit schwarzen Punkten markiert sind)
|
122
|
+
2. Ein Bild mit allen Hotspots im aktiven Zustand (z.B. die selbe Karte, aber mit roten Punkten als Markierung)
|
123
|
+
|
124
|
+
Die rechteckigen Bereiche der Hotspots werden nun so positioniert,
|
125
|
+
dass sie die graphischen Darstellungen der Hotspots im Bild
|
126
|
+
überdecken. Befindet sich der Cursor über einem der Bereiche, wird
|
127
|
+
genau in diesem Ausschnitt der entsprechende Teil des Hover-Bildes
|
128
|
+
gezeigt. Der Hotspot erscheint daher aktiv, während alle anderen
|
129
|
+
Hotspots weiterhin inaktiv dargestellt werden.
|
130
|
+
|
131
|
+
An Stelle von Bildern können auch Videos verwendet werden. Folgende
|
132
|
+
Kombinationen sind möglich:
|
133
|
+
|
134
|
+
1. Hintergrund-Bild mit Hover-Bild
|
135
|
+
2. Hintergrund-Video mit Hover-Bild
|
136
|
+
3. Hintergrund-Bild mit Hover-Video
|
137
|
+
|
138
|
+
Falls die vom User bereits besuchten Bereiche anschliessend anders
|
139
|
+
dargestellt werden sollen, kann ein „Visited-Bild“ festgelegt werden,
|
140
|
+
das dann zum Beispiel einen bestimmten Hotspot nach dem Klick in einer
|
141
|
+
abgeschwächten Farbe zeigt.
|
142
|
+
|
143
|
+
## Frei geformte Hotspots
|
144
|
+
|
145
|
+
Es ist nicht immer möglich, die visuellen Elemente eines
|
146
|
+
Panorama-Bildes so mit rechteckigen Hotspots zu überdecken, dass sich
|
147
|
+
keine Überschneidungen ergeben. Möchte man zum Beispiel die Länder auf
|
148
|
+
einer Landkarte als Hotspots verwenden, so dass stets das unter dem
|
149
|
+
Cursor befindliche Land in einer anderern Farbe angezeigt wird, lässt
|
150
|
+
sich dies mit einem einzelnen Hover-Bild nicht umsetzen: Sobald der
|
151
|
+
Bereich eines Hotspots über die Landesgrenze hinausragt, erscheint
|
152
|
+
auch immer ein Teil des Nachbarlandes in der aktiven Farbe.
|
153
|
+
|
154
|
+
Für diese Fälle kann ein sogenanntes Masken-Bild eingesetzt werden, um
|
155
|
+
die Umrisse der Hotspots frei zu bestimmen. Es sollte sich dabei um
|
156
|
+
ein PNG-Bild mit transparentem Hintergrund handeln, auf dem die
|
157
|
+
gewünschten Hotspot-Bereiche durch einfarbige Flächen dargestellt
|
158
|
+
sind. Die Abmessungen des Bildes müssen denen des Panorama- und des
|
159
|
+
Hover-Bildes entsprechen.
|
160
|
+
|
161
|
+
Für das Landkarten-Beispiel könnte also eine identisch proportionierte
|
162
|
+
Karte verwendet werden, auf der die Länder jeweils mit einem einzelnen
|
163
|
+
Farbton gefüllt sind, Meere und Landesteile, die nicht mit einem
|
164
|
+
Hotspot versehen werden sollen, aber transparent bleiben.
|
165
|
+
|
166
|
+
Nachdem das Masken-Bild ausgewählt wurde, kann beim Erstellen eines
|
167
|
+
Hotspots nicht nur ein Bereich mit der Maus gezogen, sondern auch ein
|
168
|
+
vordefinierter farbiger Bereich aus dem Masken-Bild angeklickt werden.
|
169
|
+
|
170
|
+
Die Umrisse des Hotspots entsprechen dann genau dem ausgewählten
|
171
|
+
farbigen Bereich im Masken-Bild. Entsprechend wird das Hover-Bild nur
|
172
|
+
innerhalb dieses Bereiches dargestellt.
|
173
|
+
|
174
|
+
Bei der Zuordnung der Bereiche ist dabei nur die Farbe
|
175
|
+
ausschlaggebend: der Bereich eines Hotspots muss keine
|
176
|
+
zusammenhängende Fläche darstellen. So können, um das Karten-Beispiel
|
177
|
+
ein letztes Mal aufzugreifen, auch die zu einem Land gehörenden Inseln
|
178
|
+
zusammen mit dem Festland hervorgehoben werden, ohne dass das Meer,
|
179
|
+
welches die Inseln umgibt, Teil des anklickbaren Bereichs sein
|
180
|
+
müsste.
|
181
|
+
|
182
|
+
Wichtig: Bei der Erstellung des Masken-Bildes muss in der
|
183
|
+
Grafik-Anwendung Kantenglättung deaktiviert werden, da zur präzisen
|
184
|
+
Abgrenzung der Bereiche scharf getrennte Farbbereiche nötig
|
185
|
+
sind. Kantenglättung führt zur Entstehung kleiner Farbverläufe im
|
186
|
+
Bild, die dann als mehrere Bereiche erkannt werden. Für Bilder mit
|
187
|
+
einer zu großen Zahl an Farbtönen wird bei Auswahl als Masken-Bild
|
188
|
+
eine Fehlermeldung gezeigt.
|
189
|
+
|
190
|
+
Im Moment ist es nicht möglich, die Masken-Bild-Funktion zusammen mit
|
191
|
+
einem Hover-Video zu verwenden.
|
192
|
+
|
193
|
+
## Textoptionen
|
194
|
+
|
195
|
+
Die Hotspots können mit einem Titel benannt und mit weiteren Text
|
196
|
+
versehen werden. Der Text kann in fett, kursiv und unterstrichen
|
197
|
+
formatiert werden.
|
198
|
+
|
199
|
+
## Atmo Optionen
|
200
|
+
|
201
|
+
Wie bei den anderen Seitentypen auch, kann im Hintergrund ein
|
202
|
+
zusätzliches Audiofile abgespielt werden. Für die Kombination mit
|
203
|
+
Audio-Hotspots ist es neben “Ausblenden” und “Weiterspielen” zudem
|
204
|
+
möglich, die Option “Leiser weiterspielen” auszuwählen. Das kann
|
205
|
+
sinnvoll sein, wenn zum Beispiel ein im Hintergrund laufender Titel
|
206
|
+
von einem kurzen Interview überlagert wird.
|
207
|
+
|
208
|
+
## Weitere Optionen
|
209
|
+
|
210
|
+
Unter „Optionen" können folgende Regeln definiert werden:
|
211
|
+
|
212
|
+
Scrollbereich auf aktive Bereiche beschränken: Hierbei wird
|
213
|
+
verhindert, dass die User sich in Bildbereiche ausserhalb der Hotspots
|
214
|
+
bewegen können.
|
215
|
+
|
216
|
+
Scrollumgebung erzwingen: Hierbei wird der sichtbare Bereich so
|
217
|
+
verkleinert, dass User sich durch die Seite scrollen müssen, um alle
|
218
|
+
Hotspots zu sehen.
|
219
|
+
|
220
|
+
Am Bildrand scrollen deaktivieren: Hierbei wird das sonst automatische
|
221
|
+
Scrollen unterdrückt, sobald User die Maus zum Bildrand bewegen.
|
222
|
+
|
223
|
+
Typische Anwendungsbeispiele: Menüseite, Multiple Choice, Entdeckungstour
|
54
224
|
manage_sites: Verweise verwalten
|
55
225
|
page:
|
226
|
+
scroll_down: Nach unten scrollen
|
56
227
|
scroll_left: Nach links scrollen
|
57
228
|
scroll_right: Nach rechts scrollen
|
229
|
+
scroll_up: Nach oben scrollen
|
58
230
|
page_attributes:
|
59
231
|
add_environment:
|
60
232
|
inline_help: Panorama etwas vergrößern, um Scrollen in beide Richtungen zu erlauben.
|
@@ -84,6 +256,9 @@ de:
|
|
84
256
|
label: Verlinkte Seiten
|
85
257
|
linkmap_areas:
|
86
258
|
label: Verweisbereiche
|
259
|
+
linkmap_color_map_image_id:
|
260
|
+
inline_help: Bild mit farbigen Bereichen, die die Umrisse von Hotspots bestimmen. Weitere Hinweise im Hilfe-Eintrag des Hotspot-Seitentyps.
|
261
|
+
label: Masken-Bild
|
87
262
|
margin_scrolling_disabled:
|
88
263
|
inline_help: Panorama nicht automatisch scrollen, wenn der Cursor bewegt wird.
|
89
264
|
label: Am Bildrand scrollen deaktivieren
|
@@ -111,8 +286,11 @@ de:
|
|
111
286
|
areas: Bereiche
|
112
287
|
inline_help:
|
113
288
|
pageflow/linkmap_page/area:
|
289
|
+
inverted: Dunkle Piktogramme für die Verwendung auf hellen Hintergründen anzeigen.
|
114
290
|
link_title: Die Beschreibung wird in einem Overlay angezeigt, wenn sich der Cursor über dem Hotspot befindet.
|
115
291
|
marker: Wähle die visuelle Darstellung des Hotspots.
|
292
|
+
mask_perma_id: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt.
|
293
|
+
mask_perma_id_disabled: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt. Nur verfügbar, wenn ein Masken-Bild im 'Dateien'-Tab der Hotspot-Seite festgelegt wurde und als Panorama-Typ nicht 'Hover Video' ausgewählt wurde.
|
116
294
|
name: Gib hier eine Bezeichnung ein, um später bei in der Verweis-Übersicht direkt zu erkennen, um welchen Verweis es sich handelt. Die Bezeichnung ist für die Leser nicht sichtbar.
|
117
295
|
page_transition: Wähle hier den Effekt, der beim Übergang zur Zielseite des Verweises benutzt werden soll.
|
118
296
|
target_id: Objekt auf das der Hotspot verlinkt.
|
data/config/locales/en.yml
CHANGED
@@ -2,9 +2,11 @@ en:
|
|
2
2
|
activerecord:
|
3
3
|
attributes:
|
4
4
|
pageflow/linkmap_page/area:
|
5
|
+
inverted: Invert
|
5
6
|
link_description: Link decription text
|
6
7
|
link_title: Link description title
|
7
8
|
marker: Link display
|
9
|
+
mask_perma_id: Mask
|
8
10
|
name: Label
|
9
11
|
page_transition: Page transition
|
10
12
|
target_id: Target
|
@@ -18,22 +20,30 @@ en:
|
|
18
20
|
audio_file: Audio file
|
19
21
|
external_site: External link
|
20
22
|
page: Page link
|
23
|
+
text_only: Text only
|
21
24
|
pageflow:
|
22
25
|
linkmap_page:
|
23
|
-
|
26
|
+
color_map:
|
27
|
+
too_many_components: The selected image contains too many different color values. There is a maximal number of 20 areas that can be determined via the mask image. Make sure that anti aliasing was turned off while creating the mask image. Anti aliasing leads to color gradients inside the image which prevent usage as mask image.
|
28
|
+
default_page_transition: "(Default)"
|
24
29
|
editor:
|
25
30
|
area_types:
|
26
31
|
audio_file: Audio file
|
27
32
|
external_site: External link
|
28
33
|
page: Page link
|
34
|
+
text_only: Text only
|
29
35
|
templates:
|
30
36
|
edit_area:
|
31
37
|
back: Back
|
32
38
|
destroy: Delete
|
33
39
|
embedded:
|
34
40
|
area_item:
|
35
|
-
edit:
|
36
|
-
|
41
|
+
edit: DELETE
|
42
|
+
hide_marker: Hide marker
|
43
|
+
set_mask: Select mask
|
44
|
+
show_marker: Show marker
|
45
|
+
toggle_marker: DELETE
|
46
|
+
unset_mask: Detach from mask
|
37
47
|
file_area_item:
|
38
48
|
edit: Edit
|
39
49
|
remove: Remove
|
@@ -41,20 +51,146 @@ en:
|
|
41
51
|
file_areas:
|
42
52
|
add: Add
|
43
53
|
label: Label
|
54
|
+
select_area_position_hint:
|
55
|
+
cancel: Cancel
|
44
56
|
views:
|
57
|
+
area_mask_input_view:
|
58
|
+
present: "(Active)"
|
45
59
|
areas_list:
|
46
60
|
add: Add
|
47
61
|
label: Areas
|
48
62
|
edit_area_view:
|
49
63
|
confirm_destroy: Really delete this area?
|
64
|
+
embedded:
|
65
|
+
area_item:
|
66
|
+
external_link_disabled: External links are deactivated inside the editor.
|
67
|
+
scaled_on_phone_hint:
|
68
|
+
orientations:
|
69
|
+
both: phones
|
70
|
+
landscape: phones in landscape orientation
|
71
|
+
portrait: phones in portrait orientation
|
72
|
+
text: The panorama will be scaled on %{orientation} to ensure minimum hotspot size for touch interaction. Increase hotspot size to prevent scaling.
|
73
|
+
select_area_position_hint:
|
74
|
+
drag_hint: Select the hotspot's dimension by clicking and dragging somewhere inside the panorama.
|
75
|
+
select_mask_hint: Click on one of the colored areas of the mask image to determine the hotspots shape and position.
|
76
|
+
select_mask_or_drag_hint: Click on one of the colored areas of the mask image or select the hotspot's dimensions by clicking and dragging somewhere inside the panorama.
|
50
77
|
help_entries:
|
51
78
|
page_type:
|
52
79
|
menu_item: Hotspots
|
53
|
-
text:
|
80
|
+
text: |-
|
81
|
+
# Hotspots
|
82
|
+
|
83
|
+
Links with configurable click areas.
|
84
|
+
|
85
|
+
Hotspots can play audio files, link to other pages in a Pageflow or to external websites. You can define as many hotspots as you want.
|
86
|
+
|
87
|
+
Decide if you want to show a background image or a background video. (Keep in mind, that background videos will not be played on mobile devices, therefore use an additional fallback image for the mobile version)
|
88
|
+
|
89
|
+
The hotspot page type allows to use panoramic images that are wider and taller than the screen-size. It enables users to explore these images by horizontal or vertical scrolling.
|
90
|
+
|
91
|
+
To add a Hotspot just click on „Areas“ and choose between „Audio“, „Internal link“, or „External link“.
|
92
|
+
|
93
|
+
There are two ways to display hotspot areas:
|
94
|
+
|
95
|
+
## Hotspots as circles
|
96
|
+
|
97
|
+
Display a white circle whose position and size can be defined by dragging. Click on the eye-symbol button of the corresponding hotspot and move this circle onto the desired position. If you use an audio file, a headphone-symbol will appear within the circle. The size of the symbol depends on the circle´s size. The circle becomes more visible when the cursor moves closer to it.
|
98
|
+
|
99
|
+
## Individually designed hotspots
|
100
|
+
|
101
|
+
Alternatively, an additional panorama image can be used to determine the look of hotspots when the cursor hovers above them. Two images have to be prepared:
|
102
|
+
|
103
|
+
1. An image with all hotspots in an inactive state (e.g. a map with cities represented by black dots)
|
104
|
+
2. An image with all hotspots in an active state (e.g. the same map with red dots representing cities)
|
105
|
+
|
106
|
+
Now the rectangular hotspot areas are positioned to cover the graphic representations of the hotspots. When the cursor hovers above one of the hotspots, the corresponding part of the hover-image will be displayed inside the hotspot's area. That way the hotspot is displayed in its active state while all others remain inactive.
|
107
|
+
|
108
|
+
It is also possible to use videos instead of images. The following combinations are possible:
|
109
|
+
|
110
|
+
1. Background image with hover image
|
111
|
+
2. Background video with hover image
|
112
|
+
3. Background image with hover video
|
113
|
+
|
114
|
+
If you wish to mark hotspots as \"already visited\" you can also upload a „Visited-Image“ which then shows a certain spot in a different color after visiting the linked page.
|
115
|
+
|
116
|
+
## Free form hotspots
|
117
|
+
|
118
|
+
It's not always possible to cover the visual elements of a
|
119
|
+
panorama image with rectangular hotspots without creating
|
120
|
+
overlapping hotspot areas. For example, trying to turn the
|
121
|
+
countries on a map into clickable areas that change color
|
122
|
+
when the cursor hovers a country is not possible with a
|
123
|
+
single hover image: soon as a hotspot is not properly
|
124
|
+
contained inside a county's borders, a part of the
|
125
|
+
neighbor country changes its color together with the
|
126
|
+
hovered country.
|
127
|
+
|
128
|
+
For cases like this, we can use a so called mask image,
|
129
|
+
allowing us to freely determine the shape of our
|
130
|
+
hotspots. We need to create PNG image with transparent
|
131
|
+
background on which the desired hotspot areas are
|
132
|
+
represented as unicolor areas. The dimensions of the image
|
133
|
+
have to match those of the panorama and hover images.
|
134
|
+
|
135
|
+
For the map example, we could come up with an identically
|
136
|
+
proportioned map image, in which each country's shape is
|
137
|
+
filled with a different color leaving oceans and other
|
138
|
+
non-clickable parts transparent.
|
139
|
+
|
140
|
+
Once the map image has been selected, we can not only
|
141
|
+
create new hotspots by dragging rectangular shapes, but
|
142
|
+
also by clicking on of predefined colored areas given in
|
143
|
+
the mask image.
|
144
|
+
|
145
|
+
The shape of the hotspot corresponds exactly to the
|
146
|
+
selected color area. Also when the hotspot is hovered the
|
147
|
+
hover image is displayed cropped to that shape.
|
148
|
+
|
149
|
+
When determining hotspot areas, only the area's color is
|
150
|
+
taking into account: areas do not need to be connected.
|
151
|
+
|
152
|
+
Hence, turning to the map example one last time, islands
|
153
|
+
belonging to a country can also be highlighted together
|
154
|
+
with the mainland when it is hovered, while the sea
|
155
|
+
surrounding those islands need not be part of the
|
156
|
+
clickable area.
|
157
|
+
|
158
|
+
Important: Make sure that anti aliasing is turned off in
|
159
|
+
your image composing application while preparing the mask
|
160
|
+
image. We require a mask image with sharp edges and
|
161
|
+
clearly separated areas. Anti aliasing on the other hand
|
162
|
+
creates tiny color gradients which are then treated as
|
163
|
+
multiple pixel sized areas. If an image contains too many
|
164
|
+
different color values, trying to select it as a mask
|
165
|
+
image leads to an error message inside the editor.
|
166
|
+
|
167
|
+
At the moment, it is not possible to use mask images in
|
168
|
+
combintation with hover images.
|
169
|
+
|
170
|
+
## Text options
|
171
|
+
|
172
|
+
Both of these hotspot types can be entitled and have additional text/description.
|
173
|
+
The description editor contains basic formatting options like bold, italic & underline.
|
174
|
+
|
175
|
+
## Atmo options
|
176
|
+
|
177
|
+
Every Hotspot page, can play an additional backround sound that can optionally stop or continue playing (at the same or a lower volume) while an audio-Hotspot is playing.
|
178
|
+
|
179
|
+
## Further options
|
180
|
+
|
181
|
+
Restrict scrolling to hotspot areas: Only scroll between hotspots.
|
182
|
+
|
183
|
+
Force scrolling: Ensure there is a margin which ensures the panorama can be scrolled both vertically and horizontally.
|
184
|
+
|
185
|
+
Deactivate scrolling at image border: Do not scroll in panorama view when user moves the cursor.
|
186
|
+
|
187
|
+
Examples of application: Menu site, multiple choice, exploration tour
|
54
188
|
manage_sites: Manage links
|
55
189
|
page:
|
190
|
+
scroll_down: Scroll down
|
56
191
|
scroll_left: Scroll left
|
57
192
|
scroll_right: Scroll right
|
193
|
+
scroll_up: Scroll up
|
58
194
|
page_attributes:
|
59
195
|
add_environment:
|
60
196
|
inline_help: Zoom panorama to allow scrolling in both directions.
|
@@ -64,7 +200,7 @@ en:
|
|
64
200
|
background_type:
|
65
201
|
label: Panorama type
|
66
202
|
values:
|
67
|
-
hover_video:
|
203
|
+
hover_video: Background image/hover video
|
68
204
|
image: Background image/hover image
|
69
205
|
video: Background video/hover image
|
70
206
|
hover_image_id:
|
@@ -79,11 +215,14 @@ en:
|
|
79
215
|
label: Hover video
|
80
216
|
limit_scrolling:
|
81
217
|
inline_help: Enable scrolling only if there hotspot areas outside the view port.
|
82
|
-
label:
|
218
|
+
label: Restrict to hotspot areas
|
83
219
|
linked_linkmap_page_perma_ids:
|
84
220
|
label: Page links
|
85
221
|
linkmap_areas:
|
86
222
|
label: Link areas
|
223
|
+
linkmap_color_map_image_id:
|
224
|
+
inline_help: Image with colored areas which determine the shape of hotspots. Further instructions can be found in the help entry of the hotspot page type.
|
225
|
+
label: Mask image
|
87
226
|
margin_scrolling_disabled:
|
88
227
|
inline_help: Do not scroll panorama when the cursor moves.
|
89
228
|
label: Disable autoscroll in page margin
|
@@ -111,8 +250,11 @@ en:
|
|
111
250
|
areas: Areas
|
112
251
|
inline_help:
|
113
252
|
pageflow/linkmap_page/area:
|
253
|
+
inverted: Display dark pictograms to improve visibility on light backgrounds.
|
114
254
|
link_title: The description is displayed inside an overlay when the cursor hovers the hotspot.
|
115
|
-
marker:
|
255
|
+
marker: 'Choose the hotspot''s visual appearance. '
|
256
|
+
mask_perma_id: Colored area inside mask image which determines the shape of the hotspot.
|
257
|
+
mask_perma_id_disabled: Colored area inside mask image which determines the shape of the hotspot. Only available if a mask image has been selected on the hotspot page's 'Files' tab and the panorama type is not 'Hover video'.
|
116
258
|
name: Choose a label to recognize the link within the overview. This label is for your orientation only and will not be displayed to the reader.
|
117
259
|
page_transition: Choose the animation, that will be used to transition to the link's target page.
|
118
260
|
target_id: Object the hotspot links to.
|
data/config/routes.rb
CHANGED
@@ -0,0 +1,12 @@
|
|
1
|
+
class CreateMaskSprites < ActiveRecord::Migration
|
2
|
+
def change
|
3
|
+
create_table :pageflow_linkmap_page_mask_sprites do |t|
|
4
|
+
t.belongs_to :image_file
|
5
|
+
t.string :attachment_file_name
|
6
|
+
t.string :attachment_content_type
|
7
|
+
t.integer :attachment_file_size, limit: 8
|
8
|
+
t.datetime :attachment_updated_at
|
9
|
+
t.timestamps
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
@@ -9,28 +9,27 @@ Gem::Specification.new do |spec|
|
|
9
9
|
spec.authors = ['Codevise Solutions Ltd.']
|
10
10
|
spec.email = ['info@codevise.de']
|
11
11
|
spec.summary = 'Pageflow page type for a page that contains customizable link areas'
|
12
|
-
spec.homepage = '
|
12
|
+
spec.homepage = 'https://github.com/codevise/pageflow-linkmap-page'
|
13
13
|
spec.license = 'MIT'
|
14
14
|
|
15
15
|
spec.files = `git ls-files`.split($/)
|
16
16
|
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
17
17
|
spec.require_paths = ['lib']
|
18
18
|
|
19
|
-
spec.
|
20
|
-
spec.add_runtime_dependency 'pageflow-external-links', '~> 0.3'
|
19
|
+
spec.required_ruby_version = '~> 2.1'
|
21
20
|
|
22
|
-
|
23
|
-
spec.add_runtime_dependency '
|
21
|
+
spec.add_runtime_dependency 'pageflow', ['>= 0.10', '< 13']
|
22
|
+
spec.add_runtime_dependency 'pageflow-external-links', ['>= 0.3', '< 2']
|
24
23
|
|
25
|
-
spec.add_development_dependency 'bundler'
|
26
|
-
spec.add_development_dependency 'rake'
|
24
|
+
spec.add_development_dependency 'bundler', '~> 1.0'
|
25
|
+
spec.add_development_dependency 'rake', '~> 12.0'
|
27
26
|
spec.add_development_dependency 'rspec-rails', '~> 3.0'
|
28
|
-
spec.add_development_dependency 'factory_girl_rails'
|
29
|
-
spec.add_development_dependency 'sqlite3'
|
27
|
+
spec.add_development_dependency 'factory_girl_rails', '~> 4.5'
|
28
|
+
spec.add_development_dependency 'sqlite3', '~> 1.3'
|
30
29
|
|
31
30
|
# Browser like integration testing
|
32
|
-
spec.add_development_dependency 'capybara'
|
31
|
+
spec.add_development_dependency 'capybara', '~> 2.13'
|
33
32
|
|
34
33
|
# Semantic versioning rake tasks
|
35
|
-
spec.add_development_dependency 'semmy', '~> 0
|
34
|
+
spec.add_development_dependency 'semmy', '~> 1.0'
|
36
35
|
end
|