Skip to content

Commit 416505c

Browse files
graham-trottgraham-trott
committed
Add a 'dissolve'
1 parent 6dbcf20 commit 416505c

File tree

2 files changed

+80
-4
lines changed

2 files changed

+80
-4
lines changed

‎dist/plugins/ppshow.js

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,18 @@ const EasyCoder_PP = {
3737
case `dissolve`:
3838
if (compiler.nextTokenIs(`to`)) {
3939
value = compiler.getNextValue();
40+
let duration = EasyCoder_Value.constant(`1.0`, false);
41+
if (compiler.tokenIs(`duration`)){
42+
duration= compiler.getNextValue();
43+
}
4044
compiler.addCommand({
4145
domain: `pp`,
4246
keyword: `pp`,
4347
lino,
4448
action: `dissolve`,
4549
name: symbolRecord.name,
46-
value
50+
value,
51+
duration
4752
});
4853
return true;
4954
}
@@ -165,12 +170,15 @@ const EasyCoder_PP = {
165170
let symbolRecord;
166171
let element;
167172
let inner;
173+
let newInner;
168174
let container;
175+
let steps;
169176
let pp;
170177
let values;
171178
let value;
172179
let w;
173180
let h;
181+
let n;
174182
const nConst = (content) => {
175183
return {
176184
type: `constant`,
@@ -194,6 +202,18 @@ const EasyCoder_PP = {
194202
* program.getValue(defaults.aspectH) / program.getValue(defaults.aspectW);
195203
container.style[`height`] = `${Math.round(height)}px`;
196204
};
205+
const step = (n, then) => {
206+
const opacity = parseFloat(n) / steps;
207+
newInner.style[`opacity`] = opacity;
208+
inner.style[`opacity`] = 1.0 - opacity;
209+
if (n < steps) {
210+
setTimeout(function () {
211+
step(n + 1, then);
212+
}, 100);
213+
} else {
214+
then();
215+
}
216+
};
197217
switch (action) {
198218
case `attachDiv`:
199219
symbolRecord = program.getSymbolRecord(command.container);
@@ -290,6 +310,7 @@ const EasyCoder_PP = {
290310
element.style[`border`] = `${program.getValue(values.panelBorder)}`;
291311
container.appendChild(element);
292312
inner = document.createElement(`div`);
313+
inner.style[`position`] = `absolute`;
293314
inner.style[`margin`] = `${program.getValue(values.panelPadding)}`;
294315
inner.style[`font-face`] = program.getValue(values.fontFace);
295316
inner.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
@@ -310,7 +331,24 @@ const EasyCoder_PP = {
310331
symbolRecord = program.getSymbolRecord(command.name);
311332
element = symbolRecord.element[symbolRecord.index];
312333
value = program.getValue(command.value);
313-
element.inner.innerHTML = value.split(`\n`).join(`<br>`);
334+
steps = Math.round(parseFloat(program.getValue(command.duration)) * 10);
335+
inner = element.inner;
336+
newInner = document.createElement(`div`);
337+
newInner.style[`position`] = `absolute`;
338+
newInner.style[`margin`] = inner.style[`margin`];
339+
newInner.style[`font-face`] = inner.style[`font-face`];
340+
newInner.style[`font-size`] = inner.style[`font-size`];
341+
newInner.style[`font-weight`] = inner.style[`font-weight`];
342+
newInner.style[`font-style`] = inner.style[`font-style`];
343+
newInner.style[`color`] = inner.style[`color`];
344+
newInner.style[`text-align`] = inner.style[`text-align`];
345+
newInner.innerHTML = value.split(`\n`).join(`<br>`);
346+
element.appendChild(newInner);
347+
step(0, function () {
348+
inner.innerHTML = newInner.innerHTML;
349+
inner.style[`opacity`] = 1.0;
350+
element.removeChild(newInner);
351+
});
314352
break;
315353
}
316354
return command.pc + 1;

‎js/plugins/ppshow.js

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,18 @@ const EasyCoder_PP = {
3737
case `dissolve`:
3838
if (compiler.nextTokenIs(`to`)) {
3939
value = compiler.getNextValue();
40+
let duration = EasyCoder_Value.constant(`1.0`, false);
41+
if (compiler.tokenIs(`duration`)){
42+
duration= compiler.getNextValue();
43+
}
4044
compiler.addCommand({
4145
domain: `pp`,
4246
keyword: `pp`,
4347
lino,
4448
action: `dissolve`,
4549
name: symbolRecord.name,
46-
value
50+
value,
51+
duration
4752
});
4853
return true;
4954
}
@@ -165,12 +170,15 @@ const EasyCoder_PP = {
165170
let symbolRecord;
166171
let element;
167172
let inner;
173+
let newInner;
168174
let container;
175+
let steps;
169176
let pp;
170177
let values;
171178
let value;
172179
let w;
173180
let h;
181+
let n;
174182
const nConst = (content) => {
175183
return {
176184
type: `constant`,
@@ -194,6 +202,18 @@ const EasyCoder_PP = {
194202
* program.getValue(defaults.aspectH) / program.getValue(defaults.aspectW);
195203
container.style[`height`] = `${Math.round(height)}px`;
196204
};
205+
const step = (n, then) => {
206+
const opacity = parseFloat(n) / steps;
207+
newInner.style[`opacity`] = opacity;
208+
inner.style[`opacity`] = 1.0 - opacity;
209+
if (n < steps) {
210+
setTimeout(function () {
211+
step(n + 1, then);
212+
}, 100);
213+
} else {
214+
then();
215+
}
216+
};
197217
switch (action) {
198218
case `attachDiv`:
199219
symbolRecord = program.getSymbolRecord(command.container);
@@ -290,6 +310,7 @@ const EasyCoder_PP = {
290310
element.style[`border`] = `${program.getValue(values.panelBorder)}`;
291311
container.appendChild(element);
292312
inner = document.createElement(`div`);
313+
inner.style[`position`] = `absolute`;
293314
inner.style[`margin`] = `${program.getValue(values.panelPadding)}`;
294315
inner.style[`font-face`] = program.getValue(values.fontFace);
295316
inner.style[`font-size`] = `${program.getValue(values.fontSize) * h / 1000}px`;
@@ -310,7 +331,24 @@ const EasyCoder_PP = {
310331
symbolRecord = program.getSymbolRecord(command.name);
311332
element = symbolRecord.element[symbolRecord.index];
312333
value = program.getValue(command.value);
313-
element.inner.innerHTML = value.split(`\n`).join(`<br>`);
334+
steps = Math.round(parseFloat(program.getValue(command.duration)) * 10);
335+
inner = element.inner;
336+
newInner = document.createElement(`div`);
337+
newInner.style[`position`] = `absolute`;
338+
newInner.style[`margin`] = inner.style[`margin`];
339+
newInner.style[`font-face`] = inner.style[`font-face`];
340+
newInner.style[`font-size`] = inner.style[`font-size`];
341+
newInner.style[`font-weight`] = inner.style[`font-weight`];
342+
newInner.style[`font-style`] = inner.style[`font-style`];
343+
newInner.style[`color`] = inner.style[`color`];
344+
newInner.style[`text-align`] = inner.style[`text-align`];
345+
newInner.innerHTML = value.split(`\n`).join(`<br>`);
346+
element.appendChild(newInner);
347+
step(0, function () {
348+
inner.innerHTML = newInner.innerHTML;
349+
inner.style[`opacity`] = 1.0;
350+
element.removeChild(newInner);
351+
});
314352
break;
315353
}
316354
return command.pc + 1;

0 commit comments

Comments
 (0)