Skip to content

Commit b085373

Browse files
graham-trottgraham-trott
committed
Deal with text alignment
1 parent dcc77bf commit b085373

File tree

2 files changed

+68
-38
lines changed

2 files changed

+68
-38
lines changed

‎dist/plugins/ppshow.js

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,10 @@ const EasyCoder_PP = {
156156
let element;
157157
let inner;
158158
let newInner;
159+
let text;
160+
let newText;
159161
let container;
162+
let padding;
160163
let steps;
161164
let pp;
162165
let values;
@@ -181,7 +184,7 @@ const EasyCoder_PP = {
181184
const setupContainer = (program, container) => {
182185
EasyCoder_PP.pp.container = container;
183186
container.style[`position`] = `relative`;
184-
container.style[`overflow`] = `hidden`;
187+
// container.style[`overflow`] = `hidden`;
185188
const defaults = EasyCoder_PP.pp.defaults;
186189
const height = parseFloat(container.offsetWidth)
187190
* program.getValue(defaults.aspectH) / program.getValue(defaults.aspectW);
@@ -292,45 +295,57 @@ const EasyCoder_PP = {
292295
element.style[`width`] = `${program.getValue(values.panelWidth) * w / 1000}px`;
293296
element.style[`height`] = `${program.getValue(values.panelHeight) * h / 1000}px`;
294297
element.style[`background`] = program.getValue(values.panelBackground);
295-
element.style[`border`] = `${program.getValue(values.panelBorder)}`;
298+
element.style[`border`] = program.getValue(values.panelBorder);
296299
container.appendChild(element);
300+
padding = program.getValue(values.panelPadding);
297301
inner = document.createElement(`div`);
298302
inner.style[`position`] = `absolute`;
299-
inner.style[`margin`] = `${program.getValue(values.panelPadding)}`;
300-
inner.style[`font-face`] = program.getValue(values.fontFace);
301-
inner.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
302-
inner.style[`font-weight`] = program.getValue(values.fontWeight);
303-
inner.style[`font-style`] = program.getValue(values.fontStyle);
304-
inner.style[`color`] = program.getValue(values.fontColor);
305-
inner.style[`text-align`] = program.getValue(values.textAlign);
303+
inner.style[`left`] = padding;
304+
inner.style[`top`] = padding;
305+
inner.style[`width`] = `calc(100% - ${padding} - ${padding})`;
306306
element.appendChild(inner);
307307
element.inner = inner;
308+
text = document.createElement(`div`);
309+
text.style[`font-face`] = program.getValue(values.fontFace);
310+
text.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
311+
text.style[`font-weight`] = program.getValue(values.fontWeight);
312+
text.style[`font-style`] = program.getValue(values.fontStyle);
313+
text.style[`color`] = program.getValue(values.fontColor);
314+
text.style[`text-align`] = program.getValue(values.textAlign);
315+
inner.appendChild(text);
316+
inner.text = text;
308317
break;
309318
case`setText`:
310319
symbolRecord = program.getSymbolRecord(command.name);
311320
element = symbolRecord.element[symbolRecord.index];
312321
value = program.getValue(command.value);
313-
element.inner.innerHTML = value.split(`\n`).join(`<br>`);
322+
element.inner.text.innerHTML = value.split(`\n`).join(`<br>`);
314323
break;
315324
case `dissolve`:
316325
symbolRecord = program.getSymbolRecord(command.name);
317326
element = symbolRecord.element[symbolRecord.index];
318327
value = program.getValue(command.value);
319328
steps = Math.round(parseFloat(program.getValue(command.duration)) * 10);
320329
inner = element.inner;
330+
text = inner.text;
321331
newInner = document.createElement(`div`);
322332
newInner.style[`position`] = `absolute`;
323-
newInner.style[`margin`] = inner.style[`margin`];
324-
newInner.style[`font-face`] = inner.style[`font-face`];
325-
newInner.style[`font-size`] = inner.style[`font-size`];
326-
newInner.style[`font-weight`] = inner.style[`font-weight`];
327-
newInner.style[`font-style`] = inner.style[`font-style`];
328-
newInner.style[`color`] = inner.style[`color`];
329-
newInner.style[`text-align`] = inner.style[`text-align`];
330-
newInner.innerHTML = value.split(`\n`).join(`<br>`);
333+
newInner.style[`left`] = inner.style[`left`];
334+
newInner.style[`top`] = inner.style[`top`];
335+
newInner.style[`width`] = inner.style[`width`];
331336
element.appendChild(newInner);
337+
newText = document.createElement(`div`);
338+
newText.style[`font-face`] = text.style[`font-face`];
339+
newText.style[`font-size`] = text.style[`font-size`];
340+
newText.style[`font-weight`] = text.style[`font-weight`];
341+
newText.style[`font-style`] = text.style[`font-style`];
342+
newText.style[`color`] = text.style[`color`];
343+
newText.style[`text-align`] = text.style[`text-align`];
344+
newText.innerHTML = value.split(`\n`).join(`<br>`);
345+
newInner.appendChild(newText);
346+
newInner.text = newText;
332347
step(0, function () {
333-
inner.innerHTML = newInner.innerHTML;
348+
text.innerHTML = newText.innerHTML;
334349
inner.style[`opacity`] = 1.0;
335350
element.removeChild(newInner);
336351
});

‎js/plugins/ppshow.js

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,10 @@ const EasyCoder_PP = {
156156
let element;
157157
let inner;
158158
let newInner;
159+
let text;
160+
let newText;
159161
let container;
162+
let padding;
160163
let steps;
161164
let pp;
162165
let values;
@@ -181,7 +184,7 @@ const EasyCoder_PP = {
181184
const setupContainer = (program, container) => {
182185
EasyCoder_PP.pp.container = container;
183186
container.style[`position`] = `relative`;
184-
container.style[`overflow`] = `hidden`;
187+
// container.style[`overflow`] = `hidden`;
185188
const defaults = EasyCoder_PP.pp.defaults;
186189
const height = parseFloat(container.offsetWidth)
187190
* program.getValue(defaults.aspectH) / program.getValue(defaults.aspectW);
@@ -292,45 +295,57 @@ const EasyCoder_PP = {
292295
element.style[`width`] = `${program.getValue(values.panelWidth) * w / 1000}px`;
293296
element.style[`height`] = `${program.getValue(values.panelHeight) * h / 1000}px`;
294297
element.style[`background`] = program.getValue(values.panelBackground);
295-
element.style[`border`] = `${program.getValue(values.panelBorder)}`;
298+
element.style[`border`] = program.getValue(values.panelBorder);
296299
container.appendChild(element);
300+
padding = program.getValue(values.panelPadding);
297301
inner = document.createElement(`div`);
298302
inner.style[`position`] = `absolute`;
299-
inner.style[`margin`] = `${program.getValue(values.panelPadding)}`;
300-
inner.style[`font-face`] = program.getValue(values.fontFace);
301-
inner.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
302-
inner.style[`font-weight`] = program.getValue(values.fontWeight);
303-
inner.style[`font-style`] = program.getValue(values.fontStyle);
304-
inner.style[`color`] = program.getValue(values.fontColor);
305-
inner.style[`text-align`] = program.getValue(values.textAlign);
303+
inner.style[`left`] = padding;
304+
inner.style[`top`] = padding;
305+
inner.style[`width`] = `calc(100% - ${padding} - ${padding})`;
306306
element.appendChild(inner);
307307
element.inner = inner;
308+
text = document.createElement(`div`);
309+
text.style[`font-face`] = program.getValue(values.fontFace);
310+
text.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
311+
text.style[`font-weight`] = program.getValue(values.fontWeight);
312+
text.style[`font-style`] = program.getValue(values.fontStyle);
313+
text.style[`color`] = program.getValue(values.fontColor);
314+
text.style[`text-align`] = program.getValue(values.textAlign);
315+
inner.appendChild(text);
316+
inner.text = text;
308317
break;
309318
case`setText`:
310319
symbolRecord = program.getSymbolRecord(command.name);
311320
element = symbolRecord.element[symbolRecord.index];
312321
value = program.getValue(command.value);
313-
element.inner.innerHTML = value.split(`\n`).join(`<br>`);
322+
element.inner.text.innerHTML = value.split(`\n`).join(`<br>`);
314323
break;
315324
case `dissolve`:
316325
symbolRecord = program.getSymbolRecord(command.name);
317326
element = symbolRecord.element[symbolRecord.index];
318327
value = program.getValue(command.value);
319328
steps = Math.round(parseFloat(program.getValue(command.duration)) * 10);
320329
inner = element.inner;
330+
text = inner.text;
321331
newInner = document.createElement(`div`);
322332
newInner.style[`position`] = `absolute`;
323-
newInner.style[`margin`] = inner.style[`margin`];
324-
newInner.style[`font-face`] = inner.style[`font-face`];
325-
newInner.style[`font-size`] = inner.style[`font-size`];
326-
newInner.style[`font-weight`] = inner.style[`font-weight`];
327-
newInner.style[`font-style`] = inner.style[`font-style`];
328-
newInner.style[`color`] = inner.style[`color`];
329-
newInner.style[`text-align`] = inner.style[`text-align`];
330-
newInner.innerHTML = value.split(`\n`).join(`<br>`);
333+
newInner.style[`left`] = inner.style[`left`];
334+
newInner.style[`top`] = inner.style[`top`];
335+
newInner.style[`width`] = inner.style[`width`];
331336
element.appendChild(newInner);
337+
newText = document.createElement(`div`);
338+
newText.style[`font-face`] = text.style[`font-face`];
339+
newText.style[`font-size`] = text.style[`font-size`];
340+
newText.style[`font-weight`] = text.style[`font-weight`];
341+
newText.style[`font-style`] = text.style[`font-style`];
342+
newText.style[`color`] = text.style[`color`];
343+
newText.style[`text-align`] = text.style[`text-align`];
344+
newText.innerHTML = value.split(`\n`).join(`<br>`);
345+
newInner.appendChild(newText);
346+
newInner.text = newText;
332347
step(0, function () {
333-
inner.innerHTML = newInner.innerHTML;
348+
text.innerHTML = newText.innerHTML;
334349
inner.style[`opacity`] = 1.0;
335350
element.removeChild(newInner);
336351
});

0 commit comments

Comments
 (0)