diff --git a/image_edit.libraries.yml b/image_edit.libraries.yml
index 704b7e1..c7a95cf 100644
--- a/image_edit.libraries.yml
+++ b/image_edit.libraries.yml
@@ -12,5 +12,3 @@ editor_code:
css/styles.css: {}
dependencies:
- image_edit/camanjs
- - core/jquery
- - core/jquery.once
diff --git a/js/image_edit.js b/js/image_edit.js
index 24ca78f..e392e72 100644
--- a/js/image_edit.js
+++ b/js/image_edit.js
@@ -1,4 +1,4 @@
-(function($, window) {
+(function(window) {
Drupal.behaviors.image_edit = {
attach: function (context) {
var canvas;
@@ -8,7 +8,7 @@
var imgForCanvas = new Image;
var imageID = null;
var caman;
- var $overlay = $(editorOverlaySelector);
+ var $overlay = document.querySelector(editorOverlaySelector);
var appliedFilters = [];
var sliderTypeFilters = ['hue', 'contrast', 'vibrance', 'sepia'];
var queue = [];
@@ -16,7 +16,7 @@
var processWatcher;
function closeOverlay(){
- $overlay.removeClass('open');
+ $overlay.classList.remove('open');
document.getElementById('canvas').remove();
clearInterval(processWatcher);
}
@@ -25,8 +25,8 @@
// Returns the index of the filter in the appliedFilters array
// or -1 if it is not applied
function isFilterApplied(filterName) {
- filterIndex = -1;
- appliedFilters.map((item, i) => {
+ var filterIndex = -1;
+ appliedFilters.map(function(item, i) {
var currItemName = Object.keys(item)[0];
if(currItemName == filterName) {
filterIndex = i;
@@ -48,7 +48,7 @@
// If filter is applied already,
// update value if it is a slider type filter
if (isSliderTypeFilter) {
- appliedFilters.map((item, i) => {
+ appliedFilters.map(function(item, i) {
var currItemName = Object.keys(item)[0];
if(currItemName == filterName) {
item[currItemName] = attributes;
@@ -64,13 +64,15 @@
}
// Open loading overlay
- var bottomPosOverlay = ($('#canvas-container').height() - $('#canvas').height()) + 'px';
- $('.inline-file-editor__canvas-overlay').addClass('show').css({'bottom': bottomPosOverlay, 'width': $('#canvas').width() + 'px'});
+ var bottomPosOverlay = (document.getElementById('canvas-container').offsetHeight - document.getElementById('canvas').offsetHeight) + 'px';
+ document.querySelector('.inline-file-editor__canvas-overlay').classList.add('show');
+ document.querySelector('.inline-file-editor__canvas-overlay').style.bottom = bottomPosOverlay;
+ document.querySelector('.inline-file-editor__canvas-overlay').style.width = document.getElementById('canvas').offsetWidth + 'px';
// Reset to original image
caman.revert();
// Execute all applied filters to the original image
- appliedFilters.forEach(filter => {
+ appliedFilters.forEach(function(filter) {
var currFilterName = Object.keys(filter)[0];
console.log('applying filter: ', currFilterName, ', value:', filter[currFilterName] );
if (Array.isArray(filter[currFilterName])) {
@@ -82,7 +84,7 @@
caman.render(function() {
// Set process to finished, and remove loading overlay
processIsRunning = false;
- $('.inline-file-editor__canvas-overlay').removeClass('show');
+ document.querySelector('.inline-file-editor__canvas-overlay').classList.remove('show');
});
}
@@ -93,69 +95,81 @@
queue.push([filterName, attributes]);
}
- $('img').once('image-edit-processed').each(function(){
- imageID = $(this).data('image-id');
- if (imageID) {
- var editBtn = "";
- $(this).parent().addClass('inline-file-editor__img-parent').append(editBtn);
+ document.querySelectorAll('img').forEach(function(img) {
+ if (!img.classList.contains('image-edit-processed')) {
+ img.classList.add('image-edit-processed');
+ imageID = img.getAttribute('data-image-id');
+ if (imageID) {
+ var editBtn = "";
+ img.parentElement.classList.add('inline-file-editor__img-parent');
+ img.parentElement.insertAdjacentHTML('beforeend', editBtn);
+ }
}
});
- $('.inline-file-editor__edit-button').once('image-edit-initialized').click(function(event) {
- event.preventDefault();
- $img = $(this).parent().find('img');
- imgSrc = $img.attr('src');
- imgForCanvas.src = imgSrc;
- imageID = $img.data('image-id');
+ document.querySelectorAll('.inline-file-editor__edit-button').forEach(function(button) {
+ if (!button.classList.contains('image-edit-initialized')) {
+ button.classList.add('image-edit-initialized');
+ button.addEventListener('click', function(event) {
+ event.preventDefault();
+ $img = button.parentElement.querySelector('img');
+ imgSrc = $img.getAttribute('src');
+ imgForCanvas.src = imgSrc;
+ imageID = $img.getAttribute('data-image-id');
- // Process the queue
- processWatcher = setInterval(function(){
- console.log('checking for processes');
- if(processIsRunning || queue.length < 1) {
- return;
- }
- // Set processing to true.
- // (processing will be released in applyFilter function at caman.render callback function)
- processIsRunning = true;
+ // Process the queue
+ processWatcher = setInterval(function(){
+ console.log('checking for processes');
+ if(processIsRunning || queue.length < 1) {
+ return;
+ }
+ // Set processing to true.
+ // (processing will be released in applyFilter function at caman.render callback function)
+ processIsRunning = true;
- // Execute the fist item of the queue
- var processToRun = queue.shift();
- var processFilterName = processToRun[0];
- var processAttributes = processToRun[1];
- applyFilter(processFilterName, processAttributes);
- return;
- }
- , 300);
+ // Execute the first item of the queue
+ var processToRun = queue.shift();
+ var processFilterName = processToRun[0];
+ var processAttributes = processToRun[1];
+ applyFilter(processFilterName, processAttributes);
+ return;
+ }, 300);
- // Reset controls
- $('.control-button').removeClass('active');
- $('input[type=range]').val(0);
+ // Reset controls
+ document.querySelectorAll('.control-button').forEach(function(controlButton) {
+ controlButton.classList.remove('active');
+ });
+ document.querySelectorAll('input[type=range]').forEach(function(inputRange) {
+ inputRange.value = 0;
+ });
- // Open editing overlay
- if (!imageID) {
- alert(Drupal.t("This Image is not editable."));
- } else {
- // Create canvas element
- var canv = document.createElement('canvas');
- canv.id = 'canvas';
- document.getElementById('canvas-container').appendChild(canv);
- $overlay.addClass('open');
- }
+ // Open editing overlay
+ if (!imageID) {
+ alert(Drupal.t("This Image is not editable."));
+ } else {
+ // Create canvas element
+ var canv = document.createElement('canvas');
+ canv.id = 'canvas';
+ document.getElementById('canvas-container').appendChild(canv);
+ $overlay.classList.add('open');
+ }
- canvas = document.getElementById('canvas');
- ctx = canvas.getContext('2d');
- canvas.width = event.target.width;
- canvas.height = event.target.height;
- // Initialize caman and reset it if necessary
- caman = Caman('#canvas', imgSrc, function() {
- appliedFilters = [];
- });
+ canvas = document.getElementById('canvas');
+ ctx = canvas.getContext('2d');
+ canvas.width = event.target.width;
+ canvas.height = event.target.height;
+ // Initialize caman and reset it if necessary
+ caman = Caman('#canvas', imgSrc, function() {
+ appliedFilters = [];
+ });
+ });
+ }
});
- $('.inline-file-editor').once('image-edit-processed').each(function() {
- $('#savebtn').click(function(e) {
- var randomNumber = Math.floor((Math.random() * 100) + 1);;
- var imgSrc = $img.attr('src');
+ document.querySelectorAll('.inline-file-editor').forEach(function(editor) {
+ editor.querySelector('#savebtn').addEventListener('click', function(e) {
+ var randomNumber = Math.floor((Math.random() * 100) + 1);
+ var imgSrc = $img.getAttribute('src');
var cacheBust = 'cache=bust' + randomNumber;
if( imgSrc.lastIndexOf('?') === -1 ) {
cacheBust = '?' + cacheBust;
@@ -163,36 +177,44 @@
cacheBust = '&' + cacheBust;
}
- $.ajax(
- '/image_edit/replace/' + imageID,
- {
- dataType: 'text',
- data: canvas.toDataURL().split(',').slice(1).join(''),// only interested in the base64-part
- method: 'POST',
- success: function (data, textStatus, jqXHR) {
- // forcing a reload of the image
- $img.attr('src', imgSrc + cacheBust);
- closeOverlay();
- },
- error: function (jqXHR, textStatus, errorThrown) {
- alert(Drupal.t('The image cannot be saved.'));
- console.log("failure");
- console.log(jqXHR);
- }
+ var formData = new FormData();
+ formData.append('image_data', canvas.toDataURL().split(',')[1]); // only interested in the base64-part
+
+ fetch('/image_edit/replace/' + imageID, {
+ method: 'POST',
+ body: formData,
+ })
+ .then(function(response) {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
}
- );
- });
-
- $('#resetbtn').on('click', function(e) {
+ return response.text();
+ })
+ .then(function(data) {
+ // forcing a reload of the image
+ $img.setAttribute('src', imgSrc + cacheBust);
+ closeOverlay();
+ })
+ .catch(function(error) {
+ alert(Drupal.t('The image cannot be saved.'));
+ console.error("Failure:", error);
+ });
+ });
+
+ editor.querySelector('#resetbtn').addEventListener('click', function(e) {
ctx.drawImage(imgForCanvas, 0, 0, imgForCanvas.width, imgForCanvas.height);
caman = Caman(canvas);
caman.revert();
- $('input[type=range]').val(0);
- $('.control-button').removeClass('active');
+ document.querySelectorAll('input[type=range]').forEach(function(inputRange) {
+ inputRange.value = 0;
+ });
+ document.querySelectorAll('.control-button').forEach(function(controlButton) {
+ controlButton.classList.remove('active');
+ });
appliedFilters = [];
});
- $('#close').click(closeOverlay);
+ editor.querySelector('#close').addEventListener('click', closeOverlay);
/* FILTER BUTTONS */
@@ -215,158 +237,153 @@
caman.contrast(10);
caman.jarques();
});
+
+ function handleFilterChange(event) {
+ var filterName = event.target.getAttribute('data-filter');
+ var filterValue = Number.parseInt(event.target.value);
+ handleFilterChange(filterName, filterValue);
+ }
- $('#hue').on('change', function(event) {
- handleFilterChange('hue', Number.parseInt($(this).val()));
- });
-
- $('#contrast').on('change', function(event) {
- handleFilterChange('contrast', Number.parseInt($(this).val()));
- });
-
- $('#vibrance').on('change', function(event) {
- handleFilterChange('vibrance', Number.parseInt($(this).val()));
- });
-
- $('#sepia').on('change', function(event) {
- handleFilterChange('sepia', Number.parseInt($(this).val()));
- });
+ editor.querySelector('#hue').addEventListener('change', handleFilterChange);
+ editor.querySelector('#contrast').addEventListener('change', handleFilterChange);
+ editor.querySelector('#vibrance').addEventListener('change', handleFilterChange);
+ editor.querySelector('#sepia').addEventListener('change', handleFilterChange);
- $('#brightnessbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#brightnessbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('brightness', 30);
});
- $('#noisebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#noisebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('noise', 10);
});
- $('#contrastbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#contrastbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('contrast', 10);
});
- $('#sepiabtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#sepiabtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('sepia', 20);
});
- $('#colorbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#colorbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('colorize', [60, 105, 218, 10]);
});
- $('#vintagebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#vintagebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('vintage');
});
- $('#lomobtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#lomobtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('lomo');
});
- $('#embossbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#embossbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('emboss');
});
- $('#tiltshiftbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#tiltshiftbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('tiltShift', { angle: 90, focusWidth: 600});
});
- $('#radialblurbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#radialblurbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('radialBlur');
});
- $('#edgeenhancebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#edgeenhancebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('edgeEnhance');
});
- $('#posterizebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#posterizebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('posterize', [8, 8]);
});
- $('#claritybtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#claritybtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('clarity');
});
- $('#orangepeelbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#orangepeelbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('orangePeel');
});
- $('#sincitybtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#sincitybtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('sinCity');
});
- $('#sunrisebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#sunrisebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('sunrise');
});
- $('#crossprocessbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#crossprocessbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('crossProcess');
});
- $('#lovebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#lovebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('love');
});
- $('#grungybtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#grungybtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('grungy');
});
- $('#jarquesbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#jarquesbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('jarques');
});
- $('#pinholebtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#pinholebtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('pinhole');
});
- $('#oldbootbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#oldbootbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('oldBoot');
});
- $('#glowingsunbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#glowingsunbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('glowingSun');
});
- $('#hazydaysbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#hazydaysbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('hazyDays');
});
- $('#hdrbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#hdrbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('hdreffect');
});
- $('#oldpaperbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#oldpaperbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('oldpaper');
});
- $('#pleasantbtn').on('click', function(e) {
- $(this).toggleClass('active');
+ editor.querySelector('#pleasantbtn').addEventListener('click', function(e) {
+ e.target.classList.toggle('active');
handleFilterChange('pleasant');
});
});
}
}
-})(window.jQuery, window);
\ No newline at end of file
+})(window);
\ No newline at end of file