// Update panel (when selecting / de-selecting objects)
function updatePanel(selection) {
if (!selection) {
$('#align').addClass('align-off');
$('#object-specific').html(canvas_panel);
$('#preset').append("<option value='custom'>Custom</option>");
presets.forEach(function (preset) {
$('#preset').append(
"<option value='" +
preset.id +
"'>" +
preset.name +
'</option>'
);
});
$('#preset').val(activepreset);
$('#canvas-duration input').val(duration / 1000);
$('#preset').niceSelect();
updatePanelValues();
colormode = 'back';
o_fill.setColor(canvas.backgroundColor);
} else if (
selection &&
canvas.getActiveObjects().length == 1 &&
canvas.getActiveObject().get('assetType') == 'audio'
) {
$('#object-specific').html(audio_panel);
$('#object-volume input').val(
canvas.getActiveObject().get('volume') * 200
);
} else if (
selection &&
canvas.getActiveObjects().length == 1 &&
canvas.getActiveObject().get('type') != 'group'
) {
if (!cropping) {
updateChromaUI();
checkFilter();
}
$('#align').removeClass('align-off');
$('#object-specific').html(object_panel);
if (
canvas.getActiveObject().get('type') == 'image' &&
!canvas.getActiveObject().get('assetType')
) {
$('#object-specific').append(image_panel);
$('#object-specific').append(image_more_panel);
} else if (
canvas.getActiveObject().get('id').indexOf('Video') >= 0
) {
$('#object-specific').append(image_panel);
$('#object-specific').append(video_more_panel);
} else {
$('#object-specific').append(back_panel);
}
objects.forEach(function (object) {
if (object.id != canvas.getActiveObject().get('id')) {
$('#masks').append(
"<option value='" +
object.id +
"'>" +
object.id +
'</option>'
);
}
});
$('#masks').niceSelect();
var selectme = document.getElementById('select-opacity');
o_slider = new RangeSlider(selectme, {
design: '2d',
theme: 'default',
handle: 'round',
popup: null,
showMinMaxLabels: false,
unit: '%',
min: 0,
max: 100,
value: 100,
onmove: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
canvas.getActiveObject().set({
opacity: x / 100,
});
canvas.renderAll();
},
onfinish: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
updateObjectValues('opacity');
},
onstart: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
},
});
if (canvas.getActiveObject().get('type') == 'rect') {
$('#object-specific').append(shape_panel);
} else if (
canvas.getActiveObject().get('type') == 'path' ||
canvas.getActiveObject().get('type') == 'circle'
) {
$('#object-specific').append(path_panel);
} else if (canvas.getActiveObject().get('type') == 'textbox') {
$('#object-specific').append(text_panel);
selectme = document.getElementById('select-letter');
o_letter_slider = new RangeSlider(selectme, {
design: '2d',
theme: 'default',
handle: 'round',
popup: null,
showMinMaxLabels: false,
unit: '%',
min: -200,
max: 200,
value: parseFloat(
(canvas.getActiveObject().get('charSpacing') / 10).toFixed(
2
)
),
onmove: function (x) {
document
.getElementById('text-h')
.getElementsByTagName('input')[0].value = x;
canvas.getActiveObject().set({ charSpacing: x * 10 });
canvas.renderAll();
updatePanelValues();
},
onfinish: function (x) {
document
.getElementById('text-h')
.getElementsByTagName('input')[0].value = x;
updateObjectValues('opacity3');
},
onstart: function (x) {
document
.getElementById('text-h')
.getElementsByTagName('input')[0].value = x;
},
});
selectme = document.getElementById('select-line');
o_line_slider = new RangeSlider(selectme, {
design: '2d',
theme: 'default',
handle: 'round',
popup: null,
showMinMaxLabels: false,
unit: '%',
min: 1,
max: 500,
value: parseFloat(
(canvas.getActiveObject().get('lineHeight') * 100).toFixed(
2
)
),
onmove: function (x) {
document
.getElementById('text-v')
.getElementsByTagName('input')[0].value = x;
canvas
.getActiveObject()
.set({ lineHeight: parseFloat(x / 100) });
canvas.renderAll();
},
onfinish: function (x) {
document
.getElementById('text-v')
.getElementsByTagName('input')[0].value = x;
updateObjectValues('opacity3');
},
onstart: function (x) {
document
.getElementById('text-v')
.getElementsByTagName('input')[0].value = x;
},
});
updateTextValues();
}
$('#object-specific').append(stroke_panel);
$('#object-specific').append(shadow_panel);
$('#line-cap').niceSelect();
updatePanelValues();
} else if (
canvas.getActiveObjects().length > 1 ||
canvas.getActiveObject().get('type') == 'group'
) {
$('#align').removeClass('align-off');
$('#object-specific').html(object_panel);
if (canvas.getActiveObject().get('type') == 'group') {
if (
canvas.getActiveObject().get('assetType') == 'animatedText'
) {
$('#object-specific').append(other_panel);
$('#object-specific').append(animated_text_panel);
$('#object-specific').append(start_animation_panel);
fonts.forEach(function (font) {
$('#font-picker').append(
"<option value='" + font + "'>" + font + '</option>'
);
});
$('#font-picker').val(
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.fontFamily
);
$('#font-picker').niceSelect();
$('#text-color input').val(
convertToHex(
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.fill
)
);
$('#color-text-side').css(
'background-color',
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.fill
);
text_animation_list.forEach(function (preset) {
$('#preset-picker').append(
"<option value='" +
preset.name +
"'>" +
preset.label +
'</option>'
);
});
$('#preset-picker').val(
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.preset
);
$('#preset-picker').niceSelect();
$('.order-toggle-item-active').removeClass(
'order-toggle-item-active'
);
$('.order-toggle-item-active-2').removeClass(
'order-toggle-item-active-2'
);
if (
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.order == 'backward'
) {
$('#order-backward').addClass('order-toggle-item-active');
} else {
$('#order-forward').addClass('order-toggle-item-active');
}
if (
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.typeAnim == 'letter'
) {
$('#type-letters').addClass('order-toggle-item-active-2');
} else {
$('#type-words').addClass('order-toggle-item-active-2');
}
$('#easing-picker').val(
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.easing
);
$('#easing-picker').niceSelect();
$('#durationinput').val(
animatedtext.find(
(x) => x.id == canvas.getActiveObject().id
).props.duration / 1000
);
$('#masks').niceSelect();
}
/*
if (canvas.getActiveObject().isGroup) {
$("#object-specific").append(group_panel);
} else {
$("#object-specific").append(other_panel);
}
objects.forEach(function(object){
if (object.id != canvas.getActiveObject().get("id")) {
$("#masks").append("<option value='"+object.id+"'>"+object.id+"</option>");
}
});
$("#masks").niceSelect();
*/
} else {
$('#object-specific').append(selection_panel);
}
var selectme = document.getElementById('select-opacity');
o_slider = new RangeSlider(selectme, {
design: '2d',
theme: 'default',
handle: 'round',
popup: null,
showMinMaxLabels: false,
unit: '%',
min: 0,
max: 100,
value: 100,
onmove: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
canvas.getActiveObject().set({ opacity: x / 100 });
canvas.renderAll();
},
onfinish: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
updateObjectValues('opacity');
},
onstart: function (x) {
document
.getElementById('object-o')
.getElementsByTagName('input')[0].value = x;
},
});
updatePanelValues();
}
}
function convertToHex(nonHexColorString) {
var ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = nonHexColorString;
return ctx.fillStyle.toUpperCase();
}
function updateStrokeValues() {
const object = canvas.getActiveObject();
$('.line-join-active').removeClass('line-join-active');
if (
object.get('strokeDashArray') == false &&
object.get('strokeWidth') == 0
) {
$('#miter').addClass('line-join-active');
$('#miter img').attr('src', 'assets/miter-active.svg');
} else if (object.get('strokeDashArray') == false) {
$('#bevel').addClass('line-join-active');
$('#bevel img').attr('src', 'assets/bevel-active.svg');
} else if (object.get('strokeDashArray') == [10, 5]) {
$('#round').addClass('line-join-active');
$('#round img').attr('src', 'assets/round-active.svg');
} else {
$('#small-dash').addClass('line-join-active');
$('#small-dash img').attr('src', 'assets/dash2-active.svg');
}
}
function toggleAnimationOrder() {
var object = canvas.getActiveObject();
$('.order-toggle-item-active').removeClass(
'order-toggle-item-active'
);
if ($(this).attr('id') == 'order-backward') {
animatedtext
.find((x) => x.id == object.id)
.setProp({ order: 'backward' }, canvas);
} else if ($(this).attr('id') == 'order-forward') {
animatedtext
.find((x) => x.id == object.id)
.setProp({ order: 'forward' }, canvas);
}
$(this).addClass('order-toggle-item-active');
animate(currenttime, false);
save();
}
function toggleAnimationType() {
var object = canvas.getActiveObject();
$('.order-toggle-item-active-2').removeClass(
'order-toggle-item-active-2'
);
if ($(this).attr('id') == 'type-words') {
animatedtext
.find((x) => x.id == object.id)
.setProp({ typeAnim: 'word' }, canvas);
} else if ($(this).attr('id') == 'type-letters') {
animatedtext
.find((x) => x.id == object.id)
.setProp({ typeAnim: 'letter' }, canvas);
}
$(this).addClass('order-toggle-item-active-2');
animate(currenttime, false);
save();
}
$(document).on(
'click',
'.order-toggle-item:not(.order-toggle-item-active)',
toggleAnimationOrder
);
$(document).on(
'click',
'.order-toggle-item-2:not(.order-toggle-item-active-2)',
toggleAnimationType
);
function updateTextValues() {
const object = canvas.getActiveObject();
fonts.forEach(function (font) {
$('#font-picker').append(
"<option value='" + font + "'>" + font + '</option>'
);
});
$('#font-picker').val(object.get('fontFamily'));
$('#font-picker').niceSelect();
$('#text-h input').val(
parseFloat((object.get('charSpacing') / 10).toFixed(2))
);
$('#text-v input').val(
parseFloat((object.get('lineHeight') * 100).toFixed(2))
);
if (object.get('textAlign') == 'left') {
$('#align-text-left').addClass('align-text-active');
$('#align-text-left img').attr(
'src',
'assets/align-text-left-active.svg'
);
} else if (object.get('textAlign') == 'center') {
$('#align-text-center').addClass('align-text-active');
$('#align-text-center img').attr(
'src',
'assets/align-text-center-active.svg'
);
} else if (object.get('textAlign') == 'right') {
$('#align-text-right').addClass('align-text-right-active');
$('#align-text-right img').attr(
'src',
'assets/align-text-right-active.svg'
);
} else {
$('#align-text-justify').addClass('align-text-justify-active');
$('#align-text-justify img').attr(
'src',
'assets/align-text-justify-active.svg'
);
}
if (
object.get('fontWeight') == 'bold' ||
object.get('fontWeight') == 700
) {
$('#format-bold').addClass('format-text-active');
$('#format-bold img').attr('src', 'assets/bold-active.svg');
}
if (object.get('fontStyle') == 'italic') {
$('#format-italic').addClass('format-text-active');
$('#format-italic img').attr('src', 'assets/italic-active.svg');
}
if (object.get('underline') == true) {
$('#format-underline').addClass('format-text-active');
$('#format-underline img').attr(
'src',
'assets/underline-active.svg'
);
}
if (object.get('linethrough') == true) {
$('#format-strike').addClass('format-text-active');
$('#format-strike img').attr('src', 'assets/strike-active.svg');
}
}
// Update panel inputs based on object values
function updatePanelValues() {
if (canvas.getActiveObject()) {
if (canvas.getActiveObject().get('assetType') == 'audio') {
$('#object-volume input').val(
canvas.getActiveObject().get('volume') * 200
);
return false;
}
setting = true;
var tempstore = false;
var object = canvas.getActiveObject();
if (
canvas.getActiveObjects.length > 1 ||
object.get('type') == 'activeSelection'
) {
object = object.toGroup();
object.set({
shadow: {
blur: 0,
color: 'black',
offsetX: 0,
offsetY: 0,
opacity: 0,
},
});
tempstore = true;
}
if (object.get('assetType') == 'animatedText') {
$('#animated-text input').val(
animatedtext.find((x) => x.id == object.id).text
);
}
if (objects.find((x) => x.id == object.get('id'))) {
if (
$(
"#masks option[value='" +
objects.find((x) => x.id == object.get('id')).mask +
"']"
).length == 0
) {
$('#masks').val('none');
objects.find((x) => x.id == object.get('id')).mask = 'none';
object.clipPath = null;
canvas.renderAll();
} else {
$('#masks').val(
objects.find((x) => x.id == object.get('id')).mask
);
}
$('#masks').niceSelect('update');
}
updateStrokeValues();
$('#object-x input').val(
parseFloat(
(
object.get('left') -
artboard.get('left') -
(object.get('width') * object.get('scaleX')) / 2
).toFixed(2)
)
);
$('#object-y input').val(
parseFloat(
(
object.get('top') -
artboard.get('top') -
(object.get('height') * object.get('scaleY')) / 2
).toFixed(2)
)
);
$('#object-w input').val(
parseFloat(
(object.get('width') * object.get('scaleX')).toFixed(2)
)
);
$('#object-h input').val(
parseFloat(
(object.get('height') * object.get('scaleY')).toFixed(2)
)
);
$('#object-r input').val(
parseFloat(object.get('angle').toFixed(2))
);
$('#object-stroke input').val(
parseFloat(object.get('strokeWidth').toFixed(2))
);
if (object.get('type') != 'group') {
$('#object-shadow-x input').val(
parseFloat(object.shadow.offsetX.toFixed(2))
);
$('#object-shadow-y input').val(
parseFloat(object.shadow.offsetY.toFixed(2))
);
$('#object-blur input').val(
parseFloat(object.shadow.blur.toFixed(2))
);
colormode = 'stroke';
o_fill.setColor(object.get('stroke'));
colormode = 'shadow';
o_fill.setColor(object.shadow.color);
}
o_slider.setValue(object.get('opacity') * 100);
if (object.get('type') == 'rect') {
$('#object-corners input').val(
parseFloat(object.get('rx').toFixed(2))
);
colormode = 'fill';
o_fill.setColor(object.get('fill'));
} else if (
object.get('type') == 'path' ||
object.get('type') == 'circle' ||
object.get('type') == 'textbox'
) {
colormode = 'fill';
o_fill.setColor(object.get('fill'));
}
if (tempstore) {
object.toActiveSelection();
canvas.renderAll();
}
setting = false;
} else {
$('#canvas-w input').val(artboard.get('width'));
$('#canvas-h input').val(artboard.get('height'));
}
}
// Update opacity input
function updateInputs(id) {
if (canvas.getActiveObject().get('assetType') == 'audio') {
return false;
}
if ($('#object-o input').val() > 100) {
$('#object-o input').val(100);
} else if ($('#object-o input').val() < 0) {
$('#object-o input').val(0);
}
o_slider.setValue($('#object-o input').val());
if (
!isNaN(parseFloat($('#object-color-fill-opacity input').val())) &&
id == 'object-color-fill-opacity'
) {
if ($('#object-color-fill-opacity input').val() > 100) {
$('#object-color-fill-opacity').val(100);
} else if ($('#object-color-fill-opacity input').val() < 0) {
$('#object-color-fill-opacity input').val(0);
}
colormode = 'fill';
o_fill.setColor(
'rgba(' +
o_fill.getColor().toRGBA()[0] +
',' +
o_fill.getColor().toRGBA()[1] +
',' +
o_fill.getColor().toRGBA()[2] +
',' +
$('#object-color-fill-opacity input').val() / 100 +
')'
);
}
if (
!isNaN(
parseFloat($('#object-color-stroke-opacity input').val())
) &&
id == 'object-color-stroke-opacity'
) {
if ($('#object-color-stroke-opacity input').val() > 100) {
$('#object-color-stroke-opacity').val(100);
} else if ($('#object-color-stroke-opacity input').val() < 0) {
$('#object-color-stroke-opacity input').val(0);
}
colormode = 'stroke';
o_fill.setColor(
'rgba(' +
o_fill.getColor().toRGBA()[0] +
',' +
o_fill.getColor().toRGBA()[1] +
',' +
o_fill.getColor().toRGBA()[2] +
',' +
$('#object-color-stroke-opacity input').val() / 100 +
')'
);
}
if (
!isNaN(
parseFloat($('#object-color-shadow-opacity input').val())
) &&
id == 'object-color-shadow-opacity'
) {
if ($('#object-color-shadow-opacity input').val() > 100) {
$('#object-color-shadow-opacity').val(100);
} else if ($('#object-color-shadow-opacity input').val() < 0) {
$('#object-color-shadow-opacity input').val(0);
}
colormode = 'shadow';
o_fill.setColor(
'rgba(' +
o_fill.getColor().toRGBA()[0] +
',' +
o_fill.getColor().toRGBA()[1] +
',' +
o_fill.getColor().toRGBA()[2] +
',' +
$('#object-color-shadow-opacity input').val() / 100 +
')'
);
}
}
// Update object position based on panel input values
function updateObjectValues(type) {
autoSave();
if (canvas.getActiveObjects().length > 0) {
if ($(this).find('input').val() || type) {
var object = canvas.getActiveObject();
if ($(this).attr('id') == 'animated-text') {
return false;
}
if ($(this).attr('id') == 'animated-text-duration') {
var obj = p_keyframes.find((x) => x.id == object.id);
var length = obj.end - obj.start;
if ($(this).find('input').val() * 1000 > length) {
$(this)
.find('input')
.val(length / 1000);
}
animatedtext
.find((x) => x.id == object.id)
.setProp(
{ duration: $(this).find('input').val() * 1000 },
canvas
);
save();
return false;
}
if ($(this).attr('id') == 'object-volume') {
newKeyframe(
'volume',
canvas.getActiveObject(),
currenttime,
parseFloat($(this).find('input').val()) / 200,
true
);
canvas
.getActiveObject()
.set(
'volume',
parseFloat($(this).find('input').val()) / 200
);
}
editingpanel = true;
var selection = false;
const tempselection = canvas.getActiveObjects();
const id = $(this).attr('id');
updateInputs(id);
if (tempselection.length > 1) {
object = object.toGroup();
selection = true;
}
if (objects.find((x) => x.id == object.get('id'))) {
objects.find((x) => x.id == object.get('id')).mask =
$('#masks').val();
if ($('#masks').val() == 'none') {
object.clipPath = null;
canvas.renderAll();
} else {
object.clipPath = canvas.getItemById($('#masks').val());
canvas.renderAll();
}
}
object.set({
left:
parseFloat($('#object-x input').val()) +
artboard.get('left') +
(object.get('width') * object.get('scaleX')) / 2,
top:
parseFloat($('#object-y input').val()) +
artboard.get('top') +
(object.get('height') * object.get('scaleY')) / 2,
scaleX: parseFloat(
$('#object-w input').val() / object.get('width')
),
scaleY: parseFloat(
$('#object-h input').val() / object.get('height')
),
angle: parseFloat($('#object-r input').val()),
opacity: parseFloat($('#object-o input').val() / 100),
strokeWidth: parseFloat($('#object-stroke input').val()),
});
if (object.get('type') != 'group') {
object.set({
shadow: {
color: object.shadow.color,
offsetX: parseFloat($('#object-shadow-x input').val()),
offsetY: parseFloat($('#object-shadow-y input').val()),
opacity: 1,
blur: parseFloat($('#object-blur input').val()),
},
});
}
canvas.renderAll();
if (tempselection.length > 1) {
object.toActiveSelection();
object = canvas.getActiveObject();
}
canvas.discardActiveObject();
tempselection.forEach(function (obj) {
keyframeChanges(obj, type, id, selection);
});
if (object) {
reselect(object);
editingpanel = false;
}
$('#' + id + ' input').focus();
save();
if (type) {
updatePanelValues();
} else if ($(this).find('input').val().length > 0) {
updatePanelValues();
}
}
} else {
if (
$(this).attr('id') == 'canvas-w' ||
$(this).attr('id') == 'canvas-h'
) {
artboard.set({
width: parseFloat($('#canvas-w input').val()),
height: parseFloat($('#canvas-h input').val()),
});
canvas.renderAll();
resizeCanvas();
if (activepreset != 'custom') {
if (
presets.find((x) => x.id == activepreset).width !=
$('#canvas-w input').val() ||
presets.find((x) => x.id == activepreset).height !=
$('#canvas-h input').val()
) {
activepreset = 'custom';
updatePanel();
}
}
} else if ($(this).attr('id') == 'canvas-duration') {
if (!isNaN(parseFloat($(this).find('input').val()))) {
setDuration(parseFloat($(this).find('input').val()) * 1000);
}
}
if (!isNaN(parseFloat($('#canvas-color-opacity input').val()))) {
if ($('#canvas-color-opacity input').val() > 100) {
$('#canvas-color-opacity input').val(100);
} else if ($('#canvas-color-opacity input').val() < 0) {
$('#canvas-color-opacity input').val(0);
}
colormode = 'back';
o_fill.setColor(
'rgba(' +
o_fill.getColor().toRGBA()[0] +
',' +
o_fill.getColor().toRGBA()[1] +
',' +
o_fill.getColor().toRGBA()[2] +
',' +
$('#canvas-color-opacity input').val() / 100 +
')'
);
}
}
}
function setTextAnimation() {
var object = canvas.getActiveObject();
animatedtext
.find((x) => x.id == object.id)
.reset(
$(this).parent().find('input').val(),
animatedtext.find((x) => x.id == object.id).props,
canvas
);
}
$(document).on('input', '.property-input', updateObjectValues);
$(document).on('change', '.property-input', updateObjectValues);
$(document).on('change', '#masks', updateObjectValues);
$(document).on('click', '#animatedset', setTextAnimation);
// Toggle picker (maybe it could be condensed?)
function togglePicker() {
const object = canvas.getActiveObject();
if (!o_fill.isOpen()) {
newcolorkeyframe = true;
if ($(this).attr('id') == 'object-color-fill') {
colormode = 'fill';
o_fill.setColor(object.get('fill'));
} else if ($(this).attr('id') == 'object-color-stroke') {
colormode = 'stroke';
o_fill.setColor(object.get('stroke'));
} else if ($(this).attr('id') == 'canvas-color') {
colormode = 'back';
o_fill.setColor(canvas.backgroundColor);
} else if ($(this).attr('id') == 'chroma-color') {
colormode = 'chroma';
if (object.filters.find((x) => x.type == 'RemoveColor')) {
o_fill.setColor(
object.filters.find((x) => x.type == 'RemoveColor').color
);
} else {
o_fill.setColor('#FFF');
}
} else if ($(this).attr('id') == 'text-color') {
colormode = 'text';
o_fill.setColor(
animatedtext.find((x) => x.id == object.id).props.fill
);
} else {
colormode = 'shadow';
o_fill.setColor(object.shadow.color);
}
newcolorkeyframe = false;
o_fill.show();
} else {
o_fill.hide();
}
}
$(document).on('click', '#canvas-color', togglePicker);
$(document).on('click', '#object-color-fill', togglePicker);
$(document).on('click', '#object-color-stroke', togglePicker);
$(document).on('click', '#object-color-shadow', togglePicker);
$(document).on('click', '#chroma-color', togglePicker);
$(document).on('click', '#text-color', togglePicker);
window.onLoadImage = function (temp) {
$(temp).css('background-image', 'none');
};
// Populate shape grid on left panel
function populateGrid(type) {
if (type == 'shape-tool') {
$('#shapes-row').html('');
$('#emojis-row').html('');
shape_grid_items.forEach(function (item) {
$('#shapes-row').append(
"<div class='grid-item'><img onload='onLoadImage(this)' draggable=false src='" +
item +
"'></div>"
);
});
emoji_items.forEach(function (item) {
$('#emojis-row').append(
"<div class='grid-emoji-item'><img onload='onLoadImage(this)' draggable=false src='" +
item +
"'></div>"
);
});
} else if (type == 'image-tool') {
$('#images-grid').html('');
image_categories.forEach(function (category) {
$('#categories').append(
"<div class='category' data-name='" +
category.name +
"'><img onload='onLoadImage(this)' src='" +
category.image +
"'>" +
category.name +
'</div>'
);
});
} else if (type == 'video-tool') {
$('#images-grid').html('');
video_categories.forEach(function (category) {
$('#categories').append(
"<div class='category' data-name='" +
category.name +
"'><img onload='onLoadImage(this)' src='" +
category.image +
"'>" +
category.name +
'</div>'
);
});
} else if (type == 'images-tab') {
$('#images-grid').html('');
var flag = false;
uploaded_images
.slice()
.reverse()
.forEach(function (item) {
if (!item.hidden) {
flag = true;
$('#images-grid').append(
"<div class='image-grid-item' data-src='" +
item.src +
"' data-type='" +
item.type +
"' data-key='" +
item.key +
"'><img class='delete-media' draggable=false src='assets/more-options.svg'><img draggable=false onload='onLoadImage(this)' class='image-thing' src='" +
item.thumb +
"'</div>"
);
}
});
$('#landing').remove();
if (!flag) {
$('#upload-tabs').after(
'<div id="landing" class="upload-landing"><div id="landing-text">Your uploaded images will show up here for easy access.</div></div>'
);
}
} else if (type == 'videos-tab') {
$('#images-grid').html('');
var flag = false;
uploaded_videos
.slice()
.reverse()
.forEach(function (item) {
if (!item.hidden) {
flag = true;
$('#images-grid').append(
"<div class='video-grid-item' data-src='" +
item.src +
"' data-type='" +
item.type +
"' data-key='" +
item.key +
"'><img class='delete-media' draggable=false src='assets/more-options.svg'><img draggable=false onload='onLoadImage(this)' class='image-thing' src='" +
item.thumb +
"'></div>"
);
}
});
$('#landing').remove();
if (!flag) {
$('#upload-tabs').after(
'<div id="landing" class="upload-landing"><div id="landing-text">Your uploaded videos will show up here for easy access.</div></div>'
);
}
} else if (type == 'audio-tool') {
var flag = false;
audio_items.forEach(function (item) {
if (item.src == background_key) {
flag = true;
$('#audio-list').append(
"<div class='audio-item audio-item-active' data-src='" +
item.src +
"'><div class='audio-preview'><img src='assets/play-button.svg'></div><img class='audio-thumb' src='" +
item.thumb +
"'><div class='audio-info'><div class='audio-info-title'>" +
item.name +
"</div><a href='" +
item.link +
"' target='_blank' class='audio-info-desc'>" +
item.desc +
"</a><div class='audio-info-duration'>" +
item.duration +
'</div></div></div></div>'
);
} else {
$('#audio-list').append(
"<div class='audio-item' data-src='" +
item.src +
"'><div class='audio-preview'><img src='assets/play-button.svg'></div><img class='audio-thumb' src='" +
item.thumb +
"'><div class='audio-info'><div class='audio-info-title'>" +
item.name +
"</div><a href='" +
item.link +
"' target='_blank' class='audio-info-desc'>" +
item.desc +
"</a><div class='audio-info-duration'>" +
item.duration +
'</div></div></div></div>'
);
}
});
} else if (type == 'text-tool') {
$('#shapes-cont').append("<p class='row-title'>Animated</p>");
$('#shapes-cont').append(
"<div class='animated-text-grid'></div>"
);
text_animation_list.forEach(function (text) {
$('.animated-text-grid').append(
"<div class='animated-text-item noselect' data-id='" +
text.name +
"'><img draggable='false' class='noselect' src='" +
text.src +
"'></div>"
);
});
$('#shapes-cont').append("<p class='row-title'>Sans Serif</p>");
text_items.sansserif.forEach(function (text) {
WebFont.load({
google: {
families: [text.fontname],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
text.fontname +
"' style='font-family: " +
text.fontname +
", sans-serif'>" +
text.name +
'</div>'
);
});
$('#shapes-cont').append("<p class='row-title'>Serif</p>");
text_items.serif.forEach(function (text) {
WebFont.load({
google: {
families: [text.fontname],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
text.fontname +
"' style='font-family: " +
text.fontname +
"'>" +
text.name +
'</div>'
);
});
$('#shapes-cont').append("<p class='row-title'>Monospace</p>");
text_items.monospace.forEach(function (text) {
WebFont.load({
google: {
families: [text.fontname],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
text.fontname +
"' style='font-family: " +
text.fontname +
"'>" +
text.name +
'</div>'
);
});
$('#shapes-cont').append("<p class='row-title'>Handwriting</p>");
text_items.handwriting.forEach(function (text) {
WebFont.load({
google: {
families: [text.fontname],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
text.fontname +
"' style='font-family: " +
text.fontname +
"'>" +
text.name +
'</div>'
);
});
$('#shapes-cont').append("<p class='row-title'>Display</p>");
text_items.display.forEach(function (text) {
WebFont.load({
google: {
families: [text.fontname],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
text.fontname +
"' style='font-family: " +
text.fontname +
"'>" +
text.name +
'</div>'
);
});
}
}
function scrollBottom() {
if (
$(this).scrollTop() + $(this).innerHeight() >=
$(this)[0].scrollHeight - 50
) {
loadMoreMedia();
}
if ($(this).scrollTop() > 0) {
$('#search-fixed').addClass('search-scrolling');
} else {
$('.search-scrolling').removeClass('search-scrolling');
}
}
function addAnimatedText() {
var newtext = new AnimatedText('Your text', {
left: artboard.get('left') + artboard.get('width') / 2,
top: artboard.get('top') + artboard.get('height') / 2,
preset: $(this).attr('data-id'),
typeAnim: 'letter',
order: 'forward',
fontFamily: 'Syne',
duration: 1000,
easing: 'easeInQuad',
fill: '#FFFFFF',
});
animatedtext.push(newtext);
newtext.render(canvas);
}
$(document).on('click', '.animated-text-item', addAnimatedText);
// Switch active panel in the library
function updateBrowser(type) {
$('#browser').scrollTop(0);
if (type == 'image-tool') {
$('#browser-container').html(image_browser);
populateGrid(type);
$('#browser').on('scroll', scrollBottom);
} else if (type == 'shape-tool') {
$('#browser-container').html(shape_browser);
populateGrid(type);
$('#browser').on('scroll', scrollBottom);
} else if (type == 'video-tool') {
$('#browser-container').html(video_browser);
populateGrid(type);
$('#browser').on('scroll', scrollBottom);
} else if (type == 'text-tool') {
$('#browser-container').html(text_browser);
populateGrid(type);
$('#browser').on('scroll', scrollBottom);
} else if (type == 'upload-tool') {
$('#browser-container').html(upload_browser);
populateGrid('images-tab');
$('#browser').on('scroll', scrollBottom);
} else if (type == 'audio-tool') {
$('#browser-container').html(audio_browser);
populateGrid(type);
$('#browser').on('scroll', scrollBottom);
}
}
// Switch tab in the uploads depending on item being uploaded
function updateUploadType() {
$('.upload-tab-active').removeClass('upload-tab-active');
$(this).addClass('upload-tab-active');
populateGrid($(this).attr('id'));
}
$(document).on(
'click',
'.upload-tab:not(.upload-tab-active)',
updateUploadType
);
// Switch tool
function switchTool(e) {
$('#browser').removeClass('collapsed');
$('#canvas-area').removeClass('canvas-full');
if ($(this).attr('id') == 'more-tool') {
showMore();
return false;
}
resizeCanvas();
var act = $('.tool-active');
if (act.attr('id') == 'image-tool') {
act.find('img').attr('src', 'assets/image.svg');
} else if (act.attr('id') == 'text-tool') {
act.find('img').attr('src', 'assets/text.svg');
} else if (act.attr('id') == 'mockup-tool') {
act.find('img').attr('src', 'assets/mockup.svg');
} else if (act.attr('id') == 'video-tool') {
act.find('img').attr('src', 'assets/video.svg');
} else if (act.attr('id') == 'shape-tool') {
act.find('img').attr('src', 'assets/shape.svg');
} else if (act.attr('id') == 'upload-tool') {
act.find('img').attr('src', 'assets/uploads.svg');
} else if (act.attr('id') == 'audio-tool') {
act.find('img').attr('src', 'assets/audio.svg');
}
$('.tool-active').removeClass('tool-active');
$(this).addClass('tool-active');
if ($(this).attr('id') == 'image-tool') {
$(this).find('img').attr('src', 'assets/image-active.svg');
} else if ($(this).attr('id') == 'text-tool') {
$(this).find('img').attr('src', 'assets/text-active.svg');
} else if ($(this).attr('id') == 'mockup-tool') {
$(this).find('img').attr('src', 'assets/mockup-active.svg');
} else if ($(this).attr('id') == 'video-tool') {
$(this).find('img').attr('src', 'assets/video-active.svg');
} else if ($(this).attr('id') == 'shape-tool') {
$(this).find('img').attr('src', 'assets/shape-active.svg');
} else if ($(this).attr('id') == 'upload-tool') {
$(this).find('img').attr('src', 'assets/uploads-active.svg');
} else if ($(this).attr('id') == 'audio-tool') {
$(this).find('img').attr('src', 'assets/audio-active.svg');
}
updateBrowser($(this).attr('id'));
resetHeight();
}
$(document).on('click', '.tool:not(.tool-active)', switchTool);
// Replace image or video by dragging on top and holding a key
function replaceObject(src, object) {
var img = new Image();
var width = object.width;
var height = object.height;
oldsrc = object._originalElement.currentSrc;
oldobj = object;
img.onload = function () {
object.setElement(img);
object.set('width', width);
object.set('height', height);
canvas.renderAll();
};
img.src = src;
}
// Drag object from the panel
function dragObject(e) {
if (e.which == 3) {
return false;
}
var drag = $(this).clone();
drag.css({
background: 'transparent',
boxShadow: 'none',
color: '#000',
});
drag.appendTo('body');
drag.css({
position: 'absolute',
zIndex: 9999999,
left: $(this).offset().left,
top: $(this).offset().top,
width: canvas.getZoom() * drag.width(),
pointerEvents: 'none',
opacity: 0,
});
var pageX = e.pageX;
var pageY = e.pageY;
var offset = drag.offset();
var offsetx = drag.offset().left + drag.width() / 2 - e.pageX;
var offsety = drag.offset().top + drag.height() / 2 - e.pageY;
var replacing = false;
draggingPanel = true;
var move = false;
canvas.discardActiveObject();
canvas.renderAll();
function dragging(e) {
$('#bottom-area').addClass('noselect');
$('#toolbar').addClass('noselect');
$('#browser').addClass('noselect');
$('#properties').addClass('noselect');
$('#controls').addClass('noselect');
move = true;
var left = offset.left + (e.pageX - pageX);
var top = offset.top + (e.pageY - pageY);
drag.offset({ left: left, top: top });
if (
overCanvas &&
canvas.getActiveObject() &&
!replacing &&
canvas.getActiveObject().type == 'image' &&
(drag.hasClass('image-grid-item') ||
drag.hasClass('video-grid-item'))
) {
if (e.ctrlKey) {
drag.css('visibility', 'hidden');
replaceObject(
drag.attr('data-src'),
canvas.getActiveObject()
);
replacing = true;
} else {
$('#replace-image').addClass('replace-active');
}
} else if (
(replacing && !canvas.getActiveObject()) ||
(replacing && !e.ctrlKey)
) {
drag.css('visibility', 'visible');
replaceObject(oldsrc, oldobj);
replacing = false;
canvas.discardActiveObject();
$('#replace-image').removeClass('replace-active');
} else {
$('#replace-image').removeClass('replace-active');
}
if (overCanvas) {
drag.css({ opacity: 1 });
} else {
drag.css({ opacity: 0.5 });
}
}
function released(e) {
$('#replace-image').removeClass('replace-active');
$('#bottom-area').removeClass('noselect');
$('#toolbar').removeClass('noselect');
$('#browser').removeClass('noselect');
$('#properties').removeClass('noselect');
$('#controls').removeClass('noselect');
draggingPanel = false;
$('body').off('mousemove', dragging).off('mouseup', released);
canvasx = canvas.getPointer(e).x;
canvasy = canvas.getPointer(e).y;
var xpos = canvasx + offsetx - artboard.get('left');
var ypos = canvasy + offsety - artboard.get('top');
if (!overCanvas && move) {
drag.remove();
return false;
}
if (move && !replacing) {
if (drag.hasClass('grid-item')) {
newSVG(
drag.find('img').attr('src'),
xpos,
ypos,
drag.width(),
false
);
} else if (drag.hasClass('image-external-grid-item')) {
$('#load-image').addClass('loading-active');
savePixabayImage(
drag.attr('data-src'),
xpos,
ypos,
drag.width()
);
} else if (drag.hasClass('video-external-grid-item')) {
savePixabayVideo(
drag.attr('data-src'),
drag.find('img').attr('src'),
xpos,
ypos
);
} else if (drag.hasClass('image-grid-item')) {
$('#load-image').addClass('loading-active');
loadImage(
drag.attr('data-src'),
xpos,
ypos,
drag.width(),
false
);
} else if (drag.hasClass('grid-emoji-item')) {
$('#load-image').addClass('loading-active');
loadImage(
drag.find('img').attr('src'),
xpos,
ypos,
drag.width(),
false
);
} else if (drag.hasClass('add-text')) {
if (drag.attr('id') == 'heading-text') {
newTextbox(
50,
700,
'Add a heading',
canvasx - artboard.get('left'),
canvasy - artboard.get('top'),
drag.width(),
false,
drag.attr('data-font')
);
} else if (drag.attr('id') == 'subheading-text') {
newTextbox(
22,
500,
'Add a subheading',
canvasx - artboard.get('left'),
canvasy - artboard.get('top'),
drag.width(),
false,
drag.attr('data-font')
);
} else if (drag.attr('id') == 'body-text') {
newTextbox(
18,
400,
'Add body text',
canvasx - artboard.get('left'),
canvasy - artboard.get('top'),
drag.width(),
false,
drag.attr('data-font')
);
} else {
newTextbox(
18,
400,
'Your text',
canvasx - artboard.get('left'),
canvasy - artboard.get('top'),
drag.width(),
false,
drag.attr('data-font')
);
}
} else if (drag.hasClass('video-grid-item')) {
$('#load-video').addClass('loading-active');
loadVideo(drag.attr('data-src'), canvasx, canvasy);
}
} else if (!move && !replacing) {
if (drag.hasClass('grid-item')) {
newSVG(
drag.find('img').attr('src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
100,
true
);
} else if (drag.hasClass('image-external-grid-item')) {
savePixabayImage(
drag.attr('data-src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
150
);
} else if (drag.hasClass('video-external-grid-item')) {
savePixabayVideo(
drag.attr('data-src'),
drag.find('img').attr('src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2
);
} else if (drag.hasClass('image-grid-item')) {
$('#load-image').addClass('loading-active');
loadImage(
drag.attr('data-src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
150,
true
);
} else if (drag.hasClass('grid-emoji-item')) {
$('#load-image').addClass('loading-active');
loadImage(
drag.find('img').attr('src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
50,
true
);
} else if (drag.hasClass('add-text')) {
if (drag.attr('id') == 'heading-text') {
newTextbox(
50,
700,
'Add a heading',
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
drag.width(),
true,
drag.attr('data-font')
);
} else if (drag.attr('id') == 'subheading-text') {
newTextbox(
22,
500,
'Add a subheading',
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
drag.width(),
true,
drag.attr('data-font')
);
} else if (drag.attr('id') == 'body-text') {
newTextbox(
18,
400,
'Add body text',
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
drag.width(),
true,
drag.attr('data-font')
);
} else {
newTextbox(
18,
400,
'Your text',
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
drag.width(),
true,
drag.attr('data-font')
);
}
} else if (drag.hasClass('video-grid-item')) {
$('#load-video').addClass('loading-active');
loadVideo(
drag.attr('data-src'),
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
true
);
}
}
drag.remove();
}
$('body').on('mouseup', released).on('mousemove', dragging);
}
$(document).on('mousedown', '.image-grid-item', dragObject);
$(document).on('mousedown', '.video-grid-item', dragObject);
$(document).on('mousedown', '.grid-item', dragObject);
$(document).on('mousedown', '.grid-emoji-item', dragObject);
$(document).on('mousedown', '.add-text', dragObject);
$(document).on('mousedown click mouseup', '.credit', function (e) {
e.stopPropagation();
});
// Collapse library
function collapsePanel() {
$('#browser').addClass('collapsed');
$('#behind-browser').addClass('collapsed');
$('#canvas-area').addClass('canvas-full');
var act = $('.tool-active');
if (act.attr('id') == 'image-tool') {
act.find('img').attr('src', 'assets/image.svg');
} else if (act.attr('id') == 'text-tool') {
act.find('img').attr('src', 'assets/text.svg');
} else if (act.attr('id') == 'mockup-tool') {
act.find('img').attr('src', 'assets/mockup.svg');
} else if (act.attr('id') == 'video-tool') {
act.find('img').attr('src', 'assets/video.svg');
} else if (act.attr('id') == 'shape-tool') {
act.find('img').attr('src', 'assets/shape.svg');
} else if (act.attr('id') == 'upload-tool') {
act.find('img').attr('src', 'assets/uploads.svg');
}
$('.tool-active').removeClass('tool-active');
resizeCanvas();
}
$(document).on('click', '#collapse', collapsePanel);
$(document).on('click', '.tool-active', collapsePanel);
// Change canvas dimensions to selected preset
function setPreset() {
if ($(this).val() != 'custom') {
artboard.set({
width: presets.find((x) => x.id == $(this).val()).width,
height: presets.find((x) => x.id == $(this).val()).height,
});
canvas.renderAll();
resizeCanvas();
}
activepreset = $(this).val();
updatePanel();
save();
}
$(document).on('change', '#preset', setPreset);
function setTextPreset() {
var object = canvas.getActiveObject();
animatedtext
.find((x) => x.id == object.id)
.setProp({ preset: $(this).val() }, canvas);
save();
}
function setTextEasing() {
var object = canvas.getActiveObject();
animatedtext
.find((x) => x.id == object.id)
.setProp({ easing: $(this).val() }, canvas);
save();
}
$(document).on('change', '#preset-picker', setTextPreset);
$(document).on('change', '#easing-picker', setTextEasing);
// Delete media from the panel
function deleteMedia(e) {
e.preventDefault();
e.stopPropagation();
var key = $(this).parent().attr('data-key');
if (
window.confirm(
'Are you sure you want to permanently delete this asset? It will also remove any instances of it in the canvas.'
)
) {
deleteAsset(key);
}
}
$(document).on('mousedown', '.delete-media', deleteMedia);
// Save layer name
function saveLayerName() {
$('.name-active').prop('readonly', true);
if ($('.name-active').val() == '') {
$('.name-active').val('Untitled layer');
}
objects.find(
(x) =>
x.id == $('.name-active').parent().parent().attr('data-object')
).label = $('.name-active').val();
save();
$('.name-active').removeClass('name-active');
if (window.getSelection) {
if (window.getSelection().empty) {
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) {
window.getSelection().removeAllRanges();
}
} else if (document.selection) {
document.selection.empty();
}
editinglayer = false;
}
$(document).on('focusout', '.layer-custom-name', saveLayerName);
// Zoom to specific level
function zoomTo() {
var zoom;
if ($(this).attr('data-zoom') == 'in') {
zoom = canvas.getZoom() + 0.2;
} else if ($(this).attr('data-zoom') == 'out') {
zoom = canvas.getZoom() - 0.2;
} else {
zoom = parseInt($(this).attr('data-zoom')) / 100;
}
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.setZoom(1);
canvas.renderAll();
var vpw = canvas.width / zoom;
var vph = canvas.height / zoom;
var x = artboard.left + artboard.width / 2 - vpw / 2;
var y = artboard.top + artboard.height / 2 - vph / 2;
canvas.absolutePan({ x: x, y: y });
canvas.setZoom(zoom);
canvas.renderAll();
$('#zoom-level span').html(
(canvas.getZoom() * 100).toFixed(0) + '%'
);
}
$(document).on('click', '.zoom-options-item', zoomTo);
// Add background audio (temporary)
function addBackgroundAudio() {
background_audio = new Audio('assets/audio.wav');
}
// Hide all modals
function hideModals() {
$('.modal-open').removeClass('modal-open');
}
$('#background-overlay').on('click', hideModals);
// Open download modal
function downloadModal() {
if (!recording) {
hideModals();
$('#download-modal').addClass('modal-open');
$('#background-overlay').addClass('modal-open');
}
}
$('#download').on('click', downloadModal);
// Open import/export modal
function importExportModal() {
hideModals();
$('#import-export-modal').toggleClass('modal-open');
$('#background-overlay').toggleClass('modal-open');
}
$('#share').on('click', importExportModal);
function searchInput() {
var value = $(this).val().toLowerCase();
if (value == '') {
$('#delete-search').removeClass('show-delete');
} else {
$('#delete-search').addClass('show-delete');
}
}
function fancyTimeFormat(duration) {
var hrs = ~~(duration / 3600);
var mins = ~~((duration % 3600) / 60);
var secs = ~~duration % 60;
var ret = '';
if (hrs > 0) {
ret += '' + hrs + ':' + (mins < 10 ? '0' : '');
}
ret += '' + mins + ':' + (secs < 10 ? '0' : '');
ret += '' + secs;
return ret;
}
function loadMoreMedia() {
var value = $('#browser-search input').val();
if (value != '' && page != false) {
page += 1;
if ($('#image-tool').hasClass('tool-active')) {
var URL =
'https://pixabay.com/api/?key=' +
API_KEY +
'&q=' +
encodeURIComponent(value) +
'&page=' +
page;
$.getJSON(URL, function (data) {
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
$('#images-grid').append(
"<div class='image-grid-item image-external-grid-item' data-src='" +
hit.webformatURL +
"'><a class='credit' href='" +
hit.pageURL +
"' target='_blank'>" +
hit.user +
"</a><img draggable=false onload='onLoadImage(this)' src='" +
hit.webformatURL +
"'</div>"
);
});
} else {
page = false;
}
});
} else if ($('#video-tool').hasClass('tool-active')) {
var URL =
'https://pixabay.com/api/videos/?key=' +
API_KEY +
'&q=' +
encodeURIComponent(value) +
'&page=' +
page;
$.getJSON(URL, function (data) {
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
var video = hit.videos.medium.url;
$('#images-grid').append(
"<div class='image-grid-item video-external-grid-item' data-src='" +
video +
"'><a class='credit' href='" +
hit.pageURL +
"' target='_blank'>" +
hit.user +
"</a><div id='time-video'>" +
fancyTimeFormat(hit.duration) +
"</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
);
createVideoThumbnail(video, 250, 0, true).then(function (
data
) {
$(".image-grid-item[data-src='" + video + "']")
.find('img')
.attr('src', data);
});
});
} else {
page = false;
}
});
}
}
}
function search() {
page = 1;
var value = $('#browser-search input').val();
if ($('#image-tool').hasClass('tool-active')) {
var URL =
'https://pixabay.com/api/?key=' +
API_KEY +
'&q=' +
encodeURIComponent(value) +
'&page=' +
page;
$('#images-grid').html('');
if (value != '') {
$('#pixabay').addClass('hide-pixabay');
$('#landing').addClass('hide-landing');
$.getJSON(URL, function (data) {
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
$('#images-grid').append(
"<div class='image-grid-item image-external-grid-item' data-src='" +
hit.webformatURL +
"'><a class='credit' href='" +
hit.pageURL +
"' target='_blank'>" +
hit.user +
"</a><img draggable=false onload='onLoadImage(this)' src='" +
hit.webformatURL +
"'</div>"
);
});
} else {
$('#shapes-cont').html(
"<div id='no-results'>Sorry, we couldn't find any results for "" +
encodeURIComponent(value) +
'". Please try a different query.</div>'
);
}
});
} else {
$('#pixabay').removeClass('hide-pixabay');
$('#landing').removeClass('hide-landing');
}
} else if ($('#video-tool').hasClass('tool-active')) {
var URL =
'https://pixabay.com/api/videos/?key=' +
API_KEY +
'&q=' +
encodeURIComponent(value);
$('#images-grid').html('');
if (value != '') {
$('#landing').addClass('hide-landing');
$('#pixabay').addClass('hide-pixabay');
$.getJSON(URL, function (data) {
if (parseInt(data.totalHits) > 0) {
$.each(data.hits, function (i, hit) {
var video = hit.videos.medium.url;
$('#images-grid').append(
"<div class='image-grid-item video-external-grid-item' data-src='" +
video +
"'><a class='credit' href='" +
hit.pageURL +
"' target='_blank'>" +
hit.user +
"</a><div id='time-video'>" +
fancyTimeFormat(hit.duration) +
"</div><img draggable=false onload='onLoadImage(this)' src='assets/transparent.png'</div>"
);
//createVideoThumbnail(video, 250, 0, true).then(function(data){
$(".image-grid-item[data-src='" + video + "']")
.find('img')
.attr(
'src',
'https://i.vimeocdn.com/video/' +
hit.picture_id +
'_640x360.jpg'
);
//});
});
} else {
$('#shapes-cont').html(
"<div id='no-results'>Sorry, we couldn't find any results for "" +
encodeURIComponent(value) +
'". Please try a different query.</div>'
);
}
});
} else {
$('#pixabay').removeClass('hide-pixabay');
$('#landing').removeClass('hide-landing');
}
} else if ($('#shape-tool').hasClass('tool-active')) {
if (value == '') {
$('#shapes-cont').html(
'<p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div>'
);
populateGrid('shape-tool');
} else {
$('.row-title').remove();
$('.gallery-row').remove();
$('#shapes-cont').html("<div class='gallery-row'></div>");
var combined = shape_grid_items.concat(emoji_items);
var flag = false;
combined.forEach(function (item) {
if (item.indexOf(value) > -1) {
flag = true;
if (item.indexOf('emoji') > -1) {
$('.gallery-row').append(
"<div class='grid-emoji-item'><img draggable=false src='" +
item +
"'></div>"
);
} else {
$('.gallery-row').append(
"<div class='grid-item'><img draggable=false src='" +
item +
"'></div>"
);
}
}
});
if (!flag) {
$('#shapes-cont').html(
"<div id='no-results'>Sorry, we couldn't find any results for "" +
encodeURIComponent(value) +
'". Please try a different query.</div>'
);
}
}
} else if ($('#text-tool').hasClass('tool-active')) {
if (value == '') {
$('#browser-container').html(text_browser);
populateGrid('text-tool');
} else {
$('#shapes-cont').html('');
$('.row-title').remove();
var flag = false;
fonts.forEach(function (font) {
if (font.toLowerCase().indexOf(value) > -1) {
flag = true;
WebFont.load({
google: {
families: [font],
},
});
$('#shapes-cont').append(
"<div id='item-text' class='add-text noselect' data-font='" +
font +
"' style='font-family: " +
font +
"'>" +
font +
'</div>'
);
}
});
if (!flag) {
$('#shapes-cont').html(
"<div id='no-results'>Sorry, we couldn't find any results for "" +
encodeURIComponent(value) +
'". Please try a different query.</div>'
);
}
}
}
}
function searchCategory() {
$('#browser-search input').val($(this).attr('data-name'));
$('#delete-search').addClass('show-delete');
search();
$('#pixabay').addClass('hide-pixabay');
}
function deleteSearch() {
$('#browser-search input').val('');
$('#delete-search').removeClass('show-delete');
if ($('#shape-tool').hasClass('tool-active')) {
$('#shapes-cont').html(
'<p class="row-title">Shapes</p><div class="gallery-row" id="shapes-row"></div><p class="row-title">Emojis</p><div class="gallery-row" id="emojis-row"></div>'
);
populateGrid('shape-tool');
} else if ($('#image-tool').hasClass('tool-active')) {
$('#images-grid').html('');
$('#landing').removeClass('hide-landing');
$('#pixabay').removeClass('hide-pixabay');
} else if ($('#video-tool').hasClass('tool-active')) {
$('#images-grid').html('');
$('#landing').removeClass('hide-landing');
$('#pixabay').removeClass('hide-pixabay');
} else if ($('#text-tool').hasClass('tool-active')) {
$('#browser-container').html(text_browser);
populateGrid('text-tool');
}
}
$(document).on('click', '#delete-search', deleteSearch);
$(document).on('input', '#browser-search input', searchInput);
$(document).on('click', '#search-button', search);
$(document).on('click', '.category', searchCategory);
function replaceAudioBackground() {
var src = $(this).attr('data-src');
newAudioLayer(src);
/*
if ($(this).hasClass("audio-item-active")) {
background_audio = false;
background_key = false;
$(this).removeClass("audio-item-active");
save();
} else {
var src = $(this).attr("data-src");
if (background_audio != false) {
$("#audio-upload-button").removeClass("remove-audio");
$("#audio-upload-button").html('<img src="assets/upload.svg"> Upload audio');
}
db.collection("projects").doc({id: 1}).update({
audiosrc: src,
});
background_audio = new Audio(src);
background_audio.crossOrigin = "anonymous";
background_key = src;
save();
$(this).addClass("audio-item-active");
}
*/
}
$(document).on('click', '.audio-item', replaceAudioBackground);
function previewAudioBackground(e) {
e.preventDefault();
e.stopPropagation();
var src = $(this).parent().attr('data-src');
if ($(this).find('img').attr('src') == 'assets/play-button.svg') {
temp_audio = new Audio(src);
temp_audio.crossOrigin = 'anonymous';
temp_audio.currentTime = 0;
temp_audio.play();
$(this).find('img').attr('src', 'assets/pause-button.svg');
} else {
if (temp_audio != false) {
temp_audio.pause();
}
$(this).find('img').attr('src', 'assets/play-button.svg');
}
}
$(document).on('click', '.audio-preview', previewAudioBackground);
/* Filters options */
function checkFilter() {
resetFilters();
if (canvas.getActiveObject()) {
var obj = canvas.getActiveObject();
if (
canvas.getActiveObjects().length == 1 &&
(obj.type == 'image' || obj.type == 'video')
) {
var value = 'none';
if (obj.filters.length > 0) {
obj.filters.forEach(function (filter) {
if (
filter.type == 'BlackWhite' ||
filter.type == 'Invert' ||
filter.type == 'Sepia' ||
filter.type == 'Kodachrome' ||
filter.type == 'Polaroid' ||
filter.type == 'Technicolor' ||
filter.type == 'Brownie' ||
filter.type == 'Vintage'
) {
value = filter.type;
} else if (filter.type == 'Brightness') {
sliders
.find((x) => x.name == 'filter-brightness')
.slider.setValue(filter.brightness * 100);
} else if (filter.type == 'Contrast') {
sliders
.find((x) => x.name == 'filter-contrast')
.slider.setValue(filter.contrast * 100);
} else if (filter.type == 'Vibrance') {
sliders
.find((x) => x.name == 'filter-vibrance')
.slider.setValue(filter.vibrance * 100);
} else if (filter.type == 'Saturation') {
sliders
.find((x) => x.name == 'filter-saturation')
.slider.setValue(filter.saturation * 100);
} else if (filter.type == 'HueRotation') {
sliders
.find((x) => x.name == 'filter-hue')
.slider.setValue(filter.rotation * 100);
} else if (filter.type == 'Blur') {
blurslider.setValue(filter.blur * 100);
} else if (filter.type == 'Noise') {
noiseslider.setValue(filter.noise);
}
$('#filters-list').val(value);
$('#filters-list').niceSelect('update');
});
} else {
$('#filters-list').val(value);
$('#filters-list').niceSelect('update');
}
}
}
}
function clearFilters() {
if (canvas.getActiveObject()) {
var obj = canvas.getActiveObject();
obj.filters = $.grep(obj.filters, function (i) {
return (
i.type != 'BlackWhite' &&
i.type != 'Invert' &&
i.type != 'Sepia' &&
i.type != 'Kodachrome' &&
i.type != 'Polaroid' &&
i.type != 'Technicolor' &&
i.type != 'Brownie' &&
i.type != 'Vintage'
);
});
canvas.renderAll();
}
}
function applyFilter(name) {
if (canvas.getActiveObject()) {
var obj = canvas.getActiveObject();
if (name == 'Sepia') {
obj.filters.push(new f.Sepia());
} else if (name == 'Invert') {
obj.filters.push(new f.Invert());
} else if (name == 'BlackWhite') {
obj.filters.push(new f.BlackWhite());
} else if (name == 'Kodachrome') {
obj.filters.push(new f.Kodachrome());
} else if (name == 'Polaroid') {
obj.filters.push(new f.Polaroid());
} else if (name == 'Technicolor') {
obj.filters.push(new f.Technicolor());
} else if (name == 'Vintage') {
obj.filters.push(new f.Vintage());
} else if (name == 'Brownie') {
obj.filters.push(new f.Brownie());
}
obj.applyFilters();
canvas.renderAll();
save();
}
}
function updateMediaFilters() {
var value = $(this).val();
if (canvas.getActiveObject()) {
clearFilters();
applyFilter(value);
}
}
$(document).on('change', '#filters select', updateMediaFilters);
function resetFilters() {
if (canvas.getActiveObject()) {
var object = canvas.getActiveObject();
if (object.filters) {
if (!object.filters.find((x) => x.type == 'Blur')) {
blurslider.setValue(0);
}
if (!object.filters.find((x) => x.type == 'Noise')) {
noiseslider.setValue(0);
}
if (object.filters.length > 0) {
sliders.forEach(function (slider) {
var name = '';
if (slider.name == 'filter-hue') {
name = 'HueRotation';
} else if (slider.name == 'filter-brightness') {
name = 'Brightness';
} else if (slider.name == 'filter-vibrance') {
name = 'Vibrance';
} else if (slider.name == 'filter-contrast') {
name = 'Contrast';
} else if (slider.name == 'filter-saturation') {
name = 'Saturation';
}
if (!object.filters.find((x) => x.type == name)) {
slider.slider.setValue(0);
}
});
} else {
sliders.forEach(function (slider) {
slider.slider.setValue(0);
});
}
} else {
sliders.forEach(function (slider) {
slider.slider.setValue(0);
});
}
}
}
function removeFilters() {
sliders.forEach(function (slider) {
slider.slider.setValue(0);
});
}
$(document).on('click', '#reset-filters', removeFilters);
function updateChromaValues() {
if (canvas.getActiveObject()) {
var obj = canvas.getActiveObject();
if ($('.status-active').attr('id') == 'status-on') {
if (obj.filters.find((x) => x.type == 'RemoveColor')) {
obj.filters.find((x) => x.type == 'RemoveColor').distance =
chromaslider.getValue() / 100;
obj.filters.find((x) => x.type == 'RemoveColor').color = $(
'#chroma-color input'
).val();
} else {
obj.filters.push(
new f.RemoveColor({
distance: chromaslider.getValue() / 100,
color: $('#chroma-color input').val(),
})
);
}
obj.applyFilters();
canvas.renderAll();
save();
} else {
if (obj.filters.find((x) => x.type == 'RemoveColor')) {
obj.filters = $.grep(obj.filters, function (i) {
return i.type != 'RemoveColor';
});
obj.applyFilters();
canvas.renderAll();
save();
}
}
}
}
function updateChromaUI() {
if (canvas.getActiveObject()) {
var obj = canvas.getActiveObject();
if (obj.filters) {
if (obj.filters.length > 0) {
if (obj.filters.find((x) => x.type == 'RemoveColor')) {
$('.status-active').removeClass('status-active');
$('#status-on').addClass('status-active');
chromaslider.setValue(
obj.filters.find((x) => x.type == 'RemoveColor').distance
);
$('#chroma-color input').val(
obj.filters.find((x) => x.type == 'RemoveColor').color
);
$('#color-chroma-side').css(
'background-color',
obj.filters.find((x) => x.type == 'RemoveColor').color
);
} else {
$('.status-active').removeClass('status-active');
$('#status-off').addClass('status-active');
chromaslider.setValue(1);
$('#chroma-color input').val('#FFFFFF');
$('#color-chroma-side').css('background-color', '#FFFFF');
}
}
}
}
}
function toggleChroma() {
if (canvas.getActiveObject()) {
$('.status-active').removeClass('status-active');
$(this).addClass('status-active');
updateChromaValues();
}
}
$(document).on(
'click',
'.status-trigger:not(.status-active)',
toggleChroma
);
async function getColor() {
try {
const selectedColor = await eyeDropper.open();
colormode = 'chroma';
o_fill.setColor(selectedColor.sRGBHex);
} catch (err) {}
}
$(document).on('click', '.pcr-current-color', getColor);
function closeFilters() {
$('.show-filters').removeClass('show-filters');
}
function openFilters() {
$('#filters-parent').addClass('show-filters');
}
$(document).on('click', '#filters-button', openFilters);
$(document).on('click', '#filters-close', closeFilters);
function toggleSpeed(e) {
e.stopPropagation();
e.preventDefault();
$('#speed-settings').toggleClass('show-speed');
$('#speed-arrow').toggleClass('arrow-on');
}
function setSpeed(e) {
e.stopPropagation();
e.preventDefault();
speed = parseFloat($(this).attr('data-speed'));
$('#speed span').html($(this).html());
toggleSpeed(e);
save();
}
$(document).on('click', '.speed', setSpeed);
$(document).on('click', '#speed', toggleSpeed);
function showMore() {
$('#more-over').css(
'top',
$('#more-tool').offset().top + 5 - $('#more-over').height() / 4
);
$('#more-over').addClass('more-show');
}
function hideMore() {
$('#more-over').removeClass('more-show');
}
function handleLottieUpload() {
var filething = $('#filepick3').get(0).files;
var reader = new FileReader();
reader.onload = function (event) {
newLottieAnimation(
artboard.get('left') + artboard.get('width') / 2,
artboard.get('top') + artboard.get('height') / 2,
event.target.result
);
};
reader.readAsDataURL(filething.item(0));
}
$(document).on('change', '#filepick3', handleLottieUpload);
function uploadLottie() {
$('#filepick3').click();
}
$(document).on('click', '#upload-lottie', uploadLottie);