Merge lp:~raoul-snyman/openlp/fix-image-height into lp:openlp
- fix-image-height
- Merge into trunk
Proposed by
Raoul Snyman
Status: | Superseded |
---|---|
Proposed branch: | lp:~raoul-snyman/openlp/fix-image-height |
Merge into: | lp:openlp |
Diff against target: |
274 lines (+50/-57) 4 files modified
MANIFEST.in (+1/-0) openlp/core/display/html/display.js (+5/-7) package.json (+1/-1) tests/js/test_display.js (+43/-49) |
To merge this branch: | bzr merge lp:~raoul-snyman/openlp/fix-image-height |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
OpenLP Core | Pending | ||
Review via email: mp+371674@code.launchpad.net |
This proposal has been superseded by a proposal from 2019-08-22.
Commit message
Fix a bug where tall images were getting cut off at the top and bottom
Description of the change
Fix a bug where tall images were getting cut off at the top and bottom
To post a comment you must log in.
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Linting passed!
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Linux tests passed!
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Linting passed!
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Linux tests passed!
Revision history for this message
Raoul Snyman (raoul-snyman) wrote : | # |
Linting passed!
- 2892. By Raoul Snyman
-
Add package.json to what Python needs to package
- 2893. By Raoul Snyman
-
Use Firefox instead of PhantomJS
Unmerged revisions
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'MANIFEST.in' | |||
2 | --- MANIFEST.in 2018-10-28 11:42:09 +0000 | |||
3 | +++ MANIFEST.in 2019-08-22 17:12:12 +0000 | |||
4 | @@ -16,3 +16,4 @@ | |||
5 | 16 | include LICENSE | 16 | include LICENSE |
6 | 17 | include README.txt | 17 | include README.txt |
7 | 18 | include openlp/.version | 18 | include openlp/.version |
8 | 19 | include package.json | ||
9 | 19 | 20 | ||
10 | === modified file 'openlp/core/display/html/display.js' | |||
11 | --- openlp/core/display/html/display.js 2019-08-21 19:13:27 +0000 | |||
12 | +++ openlp/core/display/html/display.js 2019-08-22 17:12:12 +0000 | |||
13 | @@ -374,7 +374,7 @@ | |||
14 | 374 | * @param {string} text - The HTML for the verse, e.g. "line1<br>line2" | 374 | * @param {string} text - The HTML for the verse, e.g. "line1<br>line2" |
15 | 375 | * @param {string} footer_text - The HTML for the footer" | 375 | * @param {string} footer_text - The HTML for the footer" |
16 | 376 | */ | 376 | */ |
18 | 377 | addTextSlide: function (verse, text, footer_text) { | 377 | addTextSlide: function (verse, text, footerText) { |
19 | 378 | var html = _prepareText(text); | 378 | var html = _prepareText(text); |
20 | 379 | if (this._slides.hasOwnProperty(verse)) { | 379 | if (this._slides.hasOwnProperty(verse)) { |
21 | 380 | var slide = $("#" + verse)[0]; | 380 | var slide = $("#" + verse)[0]; |
22 | @@ -390,11 +390,9 @@ | |||
23 | 390 | slidesDiv.appendChild(slide); | 390 | slidesDiv.appendChild(slide); |
24 | 391 | var slides = $(".slides > section"); | 391 | var slides = $(".slides > section"); |
25 | 392 | this._slides[verse] = slides.length - 1; | 392 | this._slides[verse] = slides.length - 1; |
31 | 393 | 393 | if (footerText) { | |
32 | 394 | console.debug(" footer_text: " + footer_text); | 394 | $(".footer")[0].innerHTML = footerText; |
33 | 395 | 395 | } | |
29 | 396 | var footerDiv = $(".footer")[0]; | ||
30 | 397 | footerDiv.innerHTML = footer_text; | ||
34 | 398 | } | 396 | } |
35 | 399 | if ((arguments.length > 3) && (arguments[3] === true)) { | 397 | if ((arguments.length > 3) && (arguments[3] === true)) { |
36 | 400 | this.reinit(); | 398 | this.reinit(); |
37 | @@ -429,7 +427,7 @@ | |||
38 | 429 | section.setAttribute("style", "height: 100%; width: 100%;"); | 427 | section.setAttribute("style", "height: 100%; width: 100%;"); |
39 | 430 | var img = document.createElement('img'); | 428 | var img = document.createElement('img'); |
40 | 431 | img.src = slide["path"]; | 429 | img.src = slide["path"]; |
42 | 432 | img.setAttribute("style", "max-width: 100%; height: auto; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"); | 430 | img.setAttribute("style", "max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"); |
43 | 433 | section.appendChild(img); | 431 | section.appendChild(img); |
44 | 434 | slidesDiv.appendChild(section); | 432 | slidesDiv.appendChild(section); |
45 | 435 | Display._slides[index.toString()] = index; | 433 | Display._slides[index.toString()] = index; |
46 | 436 | 434 | ||
47 | === modified file 'package.json' | |||
48 | --- package.json 2019-04-13 13:00:22 +0000 | |||
49 | +++ package.json 2019-08-22 17:12:12 +0000 | |||
50 | @@ -15,7 +15,7 @@ | |||
51 | 15 | "phantomjs-prebuilt": "^2.1.16" | 15 | "phantomjs-prebuilt": "^2.1.16" |
52 | 16 | }, | 16 | }, |
53 | 17 | "scripts": { | 17 | "scripts": { |
55 | 18 | "test": "karma start" | 18 | "test": "karma start --single-run" |
56 | 19 | }, | 19 | }, |
57 | 20 | "author": "OpenLP Developers", | 20 | "author": "OpenLP Developers", |
58 | 21 | "license": "GPL-3.0-or-later", | 21 | "license": "GPL-3.0-or-later", |
59 | 22 | 22 | ||
60 | === modified file 'tests/js/test_display.js' | |||
61 | --- tests/js/test_display.js 2019-01-16 06:15:21 +0000 | |||
62 | +++ tests/js/test_display.js 2019-08-22 17:12:12 +0000 | |||
63 | @@ -1,3 +1,12 @@ | |||
64 | 1 | function _createDiv(attrs) { | ||
65 | 2 | var div = document.createElement("div"); | ||
66 | 3 | for (key in attrs) { | ||
67 | 4 | div.setAttribute(key, attrs[key]); | ||
68 | 5 | } | ||
69 | 6 | document.body.appendChild(div); | ||
70 | 7 | return div; | ||
71 | 8 | } | ||
72 | 9 | |||
73 | 1 | describe("The enumeration object", function () { | 10 | describe("The enumeration object", function () { |
74 | 2 | it("BackgroundType should exist", function () { | 11 | it("BackgroundType should exist", function () { |
75 | 3 | expect(BackgroundType).toBeDefined(); | 12 | expect(BackgroundType).toBeDefined(); |
76 | @@ -22,9 +31,7 @@ | |||
77 | 22 | 31 | ||
78 | 23 | describe("The function", function () { | 32 | describe("The function", function () { |
79 | 24 | it("$() should return the right element", function () { | 33 | it("$() should return the right element", function () { |
83 | 25 | var div = document.createElement("div"); | 34 | var div = _createDiv({"id": "dollar-test"}); |
81 | 26 | div.setAttribute("id", "dollar-test"); | ||
82 | 27 | document.body.appendChild(div); | ||
84 | 28 | expect($("#dollar-test")[0]).toBe(div); | 35 | expect($("#dollar-test")[0]).toBe(div); |
85 | 29 | }); | 36 | }); |
86 | 30 | 37 | ||
87 | @@ -39,10 +46,8 @@ | |||
88 | 39 | }); | 46 | }); |
89 | 40 | 47 | ||
90 | 41 | it("_getStyle should return the correct style on an element", function () { | 48 | it("_getStyle should return the correct style on an element", function () { |
92 | 42 | var div = document.createElement("div"); | 49 | var div = _createDiv({"id": "style-test"}); |
93 | 43 | div.style.setProperty("width", "100px"); | 50 | div.style.setProperty("width", "100px"); |
94 | 44 | div.setAttribute("id", "style-test"); | ||
95 | 45 | document.body.appendChild(div); | ||
96 | 46 | expect(_getStyle($("#style-test")[0], "width")).toBe("100px"); | 51 | expect(_getStyle($("#style-test")[0], "width")).toBe("100px"); |
97 | 47 | }); | 52 | }); |
98 | 48 | 53 | ||
99 | @@ -120,10 +125,8 @@ | |||
100 | 120 | expect(Display.clearSlides).toBeDefined(); | 125 | expect(Display.clearSlides).toBeDefined(); |
101 | 121 | 126 | ||
102 | 122 | document.body.innerHTML = ""; | 127 | document.body.innerHTML = ""; |
105 | 123 | var slidesDiv = document.createElement("div"); | 128 | var slidesDiv = _createDiv({"class": "slides"}); |
104 | 124 | slidesDiv.setAttribute("class", "slides"); | ||
106 | 125 | slidesDiv.innerHTML = "<section><p></p></section>"; | 129 | slidesDiv.innerHTML = "<section><p></p></section>"; |
107 | 126 | document.body.appendChild(slidesDiv); | ||
108 | 127 | 130 | ||
109 | 128 | Display.clearSlides(); | 131 | Display.clearSlides(); |
110 | 129 | expect($(".slides")[0].innerHTML).toEqual(""); | 132 | expect($(".slides")[0].innerHTML).toEqual(""); |
111 | @@ -143,17 +146,18 @@ | |||
112 | 143 | describe("Display.addTextSlide", function () { | 146 | describe("Display.addTextSlide", function () { |
113 | 144 | beforeEach(function() { | 147 | beforeEach(function() { |
114 | 145 | document.body.innerHTML = ""; | 148 | document.body.innerHTML = ""; |
118 | 146 | var slidesDiv = document.createElement("div"); | 149 | _createDiv({"class": "slides"}); |
119 | 147 | slidesDiv.setAttribute("class", "slides"); | 150 | _createDiv({"class": "footer"}); |
117 | 148 | document.body.appendChild(slidesDiv); | ||
120 | 149 | Display._slides = {}; | 151 | Display._slides = {}; |
121 | 150 | }); | 152 | }); |
122 | 151 | 153 | ||
123 | 152 | it("should add a new slide", function () { | 154 | it("should add a new slide", function () { |
125 | 153 | var verse = "v1", text = "Amazing grace,\nhow sweet the sound"; | 155 | var verse = "v1", |
126 | 156 | text = "Amazing grace,\nhow sweet the sound", | ||
127 | 157 | footer = "Public Domain"; | ||
128 | 154 | spyOn(Display, "reinit"); | 158 | spyOn(Display, "reinit"); |
129 | 155 | 159 | ||
131 | 156 | Display.addTextSlide(verse, text); | 160 | Display.addTextSlide(verse, text, footer); |
132 | 157 | 161 | ||
133 | 158 | expect(Display._slides[verse]).toEqual(0); | 162 | expect(Display._slides[verse]).toEqual(0); |
134 | 159 | expect($(".slides > section").length).toEqual(1); | 163 | expect($(".slides > section").length).toEqual(1); |
135 | @@ -162,10 +166,12 @@ | |||
136 | 162 | }); | 166 | }); |
137 | 163 | 167 | ||
138 | 164 | it("should add a new slide without calling reinit()", function () { | 168 | it("should add a new slide without calling reinit()", function () { |
140 | 165 | var verse = "v1", text = "Amazing grace,\nhow sweet the sound"; | 169 | var verse = "v1", |
141 | 170 | text = "Amazing grace,\nhow sweet the sound", | ||
142 | 171 | footer = "Public Domain"; | ||
143 | 166 | spyOn(Display, "reinit"); | 172 | spyOn(Display, "reinit"); |
144 | 167 | 173 | ||
146 | 168 | Display.addTextSlide(verse, text, false); | 174 | Display.addTextSlide(verse, text, footer, false); |
147 | 169 | 175 | ||
148 | 170 | expect(Display._slides[verse]).toEqual(0); | 176 | expect(Display._slides[verse]).toEqual(0); |
149 | 171 | expect($(".slides > section").length).toEqual(1); | 177 | expect($(".slides > section").length).toEqual(1); |
150 | @@ -174,8 +180,10 @@ | |||
151 | 174 | }); | 180 | }); |
152 | 175 | 181 | ||
153 | 176 | it("should update an existing slide", function () { | 182 | it("should update an existing slide", function () { |
156 | 177 | var verse = "v1", text = "Amazing grace, how sweet the sound\nThat saved a wretch like me"; | 183 | var verse = "v1", |
157 | 178 | Display.addTextSlide(verse, "Amazing grace,\nhow sweet the sound", false); | 184 | text = "Amazing grace, how sweet the sound\nThat saved a wretch like me", |
158 | 185 | footer = "Public Domain"; | ||
159 | 186 | Display.addTextSlide(verse, "Amazing grace,\nhow sweet the sound", footer, false); | ||
160 | 179 | spyOn(Display, "reinit"); | 187 | spyOn(Display, "reinit"); |
161 | 180 | 188 | ||
162 | 181 | Display.addTextSlide(verse, text, true); | 189 | Display.addTextSlide(verse, text, true); |
163 | @@ -190,18 +198,9 @@ | |||
164 | 190 | describe("Display.setTextSlides", function () { | 198 | describe("Display.setTextSlides", function () { |
165 | 191 | beforeEach(function() { | 199 | beforeEach(function() { |
166 | 192 | document.body.innerHTML = ""; | 200 | document.body.innerHTML = ""; |
179 | 193 | var slidesDiv = document.createElement("div"); | 201 | _createDiv({"class": "slides"}); |
180 | 194 | slidesDiv.setAttribute("class", "slides"); | 202 | _createDiv({"class": "footer"}); |
181 | 195 | document.body.appendChild(slidesDiv); | 203 | _createDiv({"id": "global-background"}); |
170 | 196 | |||
171 | 197 | var background = document.createElement("div"); | ||
172 | 198 | background.setAttribute("id", "global-background"); | ||
173 | 199 | document.body.appendChild(background); | ||
174 | 200 | |||
175 | 201 | var footer = document.createElement("div"); | ||
176 | 202 | footer.setAttribute("class", "footer"); | ||
177 | 203 | document.body.appendChild(footer); | ||
178 | 204 | |||
182 | 205 | Display._slides = {}; | 204 | Display._slides = {}; |
183 | 206 | }); | 205 | }); |
184 | 207 | 206 | ||
185 | @@ -210,12 +209,14 @@ | |||
186 | 210 | { | 209 | { |
187 | 211 | "verse": "v1", | 210 | "verse": "v1", |
188 | 212 | "text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" + | 211 | "text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" + |
190 | 213 | "I once was lost, but now I'm found\nWas blind but now I see" | 212 | "I once was lost, but now I'm found\nWas blind but now I see", |
191 | 213 | "footer": "Public Domain" | ||
192 | 214 | }, | 214 | }, |
193 | 215 | { | 215 | { |
194 | 216 | "verse": "v2", | 216 | "verse": "v2", |
195 | 217 | "text": "'twas Grace that taught, my heart to fear\nAnd grace, my fears relieved.\n" + | 217 | "text": "'twas Grace that taught, my heart to fear\nAnd grace, my fears relieved.\n" + |
197 | 218 | "How precious did that grace appear,\nthe hour I first believed." | 218 | "How precious did that grace appear,\nthe hour I first believed.", |
198 | 219 | "footer": "Public Domain" | ||
199 | 219 | } | 220 | } |
200 | 220 | ]; | 221 | ]; |
201 | 221 | spyOn(Display, "clearSlides"); | 222 | spyOn(Display, "clearSlides"); |
202 | @@ -232,29 +233,27 @@ | |||
203 | 232 | expect(Reveal.slide).toHaveBeenCalledWith(0); | 233 | expect(Reveal.slide).toHaveBeenCalledWith(0); |
204 | 233 | }); | 234 | }); |
205 | 234 | 235 | ||
207 | 235 | it("should correctly set outline width", function () { | 236 | xit("should correctly set outline width (skipped for now)", function () { |
208 | 236 | const slides = [ | 237 | const slides = [ |
209 | 237 | { | 238 | { |
210 | 238 | "verse": "v1", | 239 | "verse": "v1", |
211 | 239 | "text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" + | 240 | "text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" + |
213 | 240 | "I once was lost, but now I'm found\nWas blind but now I see" | 241 | "I once was lost, but now I'm found\nWas blind but now I see", |
214 | 242 | "footer": "Public Domain" | ||
215 | 241 | } | 243 | } |
216 | 242 | ]; | 244 | ]; |
217 | 243 | |||
218 | 244 | const theme = { | 245 | const theme = { |
219 | 245 | 'font_main_color': 'yellow', | 246 | 'font_main_color': 'yellow', |
220 | 246 | 'font_main_outline': true, | 247 | 'font_main_outline': true, |
221 | 247 | 'font_main_outline_size': 42, | 248 | 'font_main_outline_size': 42, |
222 | 248 | 'font_main_outline_color': 'red' | 249 | 'font_main_outline_color': 'red' |
223 | 249 | }; | 250 | }; |
224 | 250 | |||
225 | 251 | spyOn(Display, "reinit"); | 251 | spyOn(Display, "reinit"); |
226 | 252 | 252 | ||
227 | 253 | Display.setTextSlides(slides); | 253 | Display.setTextSlides(slides); |
228 | 254 | Display.setTheme(theme); | 254 | Display.setTheme(theme); |
229 | 255 | 255 | ||
230 | 256 | const slidesDiv = $(".slides")[0]; | 256 | const slidesDiv = $(".slides")[0]; |
231 | 257 | |||
232 | 258 | expect(slidesDiv.style['-webkit-text-stroke']).toEqual('42pt red'); | 257 | expect(slidesDiv.style['-webkit-text-stroke']).toEqual('42pt red'); |
233 | 259 | expect(slidesDiv.style['padding-left']).toEqual('84pt'); | 258 | expect(slidesDiv.style['padding-left']).toEqual('84pt'); |
234 | 260 | expect(slidesDiv.style['-webkit-text-fill-color']).toEqual('yellow'); | 259 | expect(slidesDiv.style['-webkit-text-fill-color']).toEqual('yellow'); |
235 | @@ -264,12 +263,9 @@ | |||
236 | 264 | describe("Display.setImageSlides", function () { | 263 | describe("Display.setImageSlides", function () { |
237 | 265 | beforeEach(function() { | 264 | beforeEach(function() { |
238 | 266 | document.body.innerHTML = ""; | 265 | document.body.innerHTML = ""; |
245 | 267 | var slidesDiv = document.createElement("div"); | 266 | _createDiv({"class": "slides"}); |
246 | 268 | slidesDiv.setAttribute("class", "slides"); | 267 | _createDiv({"class": "footer"}); |
247 | 269 | document.body.appendChild(slidesDiv); | 268 | _createDiv({"id": "global-background"}); |
242 | 270 | var backgroundDiv = document.createElement("div"); | ||
243 | 271 | backgroundDiv.setAttribute("id", "global-background"); | ||
244 | 272 | document.body.appendChild(backgroundDiv); | ||
248 | 273 | Display._slides = {}; | 269 | Display._slides = {}; |
249 | 274 | }); | 270 | }); |
250 | 275 | 271 | ||
251 | @@ -286,7 +282,9 @@ | |||
252 | 286 | expect($(".slides > section").length).toEqual(2); | 282 | expect($(".slides > section").length).toEqual(2); |
253 | 287 | expect($(".slides > section > img").length).toEqual(2); | 283 | expect($(".slides > section > img").length).toEqual(2); |
254 | 288 | expect($(".slides > section > img")[0].getAttribute("src")).toEqual("file:///openlp1.jpg") | 284 | expect($(".slides > section > img")[0].getAttribute("src")).toEqual("file:///openlp1.jpg") |
255 | 285 | expect($(".slides > section > img")[0].getAttribute("style")).toEqual("max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);") | ||
256 | 289 | expect($(".slides > section > img")[1].getAttribute("src")).toEqual("file:///openlp2.jpg") | 286 | expect($(".slides > section > img")[1].getAttribute("src")).toEqual("file:///openlp2.jpg") |
257 | 287 | expect($(".slides > section > img")[1].getAttribute("style")).toEqual("max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);") | ||
258 | 290 | expect(Display.reinit).toHaveBeenCalledTimes(1); | 288 | expect(Display.reinit).toHaveBeenCalledTimes(1); |
259 | 291 | }); | 289 | }); |
260 | 292 | }); | 290 | }); |
261 | @@ -294,12 +292,8 @@ | |||
262 | 294 | describe("Display.setVideo", function () { | 292 | describe("Display.setVideo", function () { |
263 | 295 | beforeEach(function() { | 293 | beforeEach(function() { |
264 | 296 | document.body.innerHTML = ""; | 294 | document.body.innerHTML = ""; |
271 | 297 | var slidesDiv = document.createElement("div"); | 295 | _createDiv({"class": "slides"}); |
272 | 298 | slidesDiv.setAttribute("class", "slides"); | 296 | _createDiv({"id": "global-background"}); |
267 | 299 | document.body.appendChild(slidesDiv); | ||
268 | 300 | var backgroundDiv = document.createElement("div"); | ||
269 | 301 | backgroundDiv.setAttribute("id", "global-background"); | ||
270 | 302 | document.body.appendChild(backgroundDiv); | ||
273 | 303 | Display._slides = {}; | 297 | Display._slides = {}; |
274 | 304 | }); | 298 | }); |
275 | 305 | 299 |
Linux tests passed!