/**
* Cropper Component<BR>
* <BR><BR><img src=/tk/lib/components/w/img/cropper.png width=30% style="border:1px lime dashed;padding:20px">
* <BR><BR><a href="/tk/lib/components/w/html/cropper.html">DEMO</a>
*/
class Cropper extends HTMLElement {
constructor() {
wc.group("Cropper.constructor")
super();
wc.groupEnd();
};
/**
* Set observable values here. When Changed, attributeChangedCallback is invoked
* @observedAttributes
*/
static get observedAttributes() {
wc.group("Cropper.observedAttributes");
this.observables = [];
wc.groupEnd();
return this.observables;
};
/**
* Initial Markup
* @private
* @_template
*/
_template() {
wc.group("Cropper.template");
if (this.properties.filechoose == "true") {var fc = "block";} else {var fc = "none";}
if (this.properties.filesave == "true") {var fs = "block";} else {var fs = "none";}
var temp = `
<div class="wc-cropper-wrapper">
<div id="${this.id}-editor">
<input type="file" id="cropper-file-chooser" class="cropit-image-input" style="display:none">
<div class="cropit-preview"></div>
<div style=padding-top:20px!important;>
<input type="range" class="cropit-image-zoom-input">
</div>
<div style=padding-top:20px!important>
<button id="wc-cropper-export" class="wc-cropper-export btn btn-primary btn-lg btn-block" style="display:${fs}">SAVE IMAGE</button>
</div>
<!-- conditional file chooser -->
<button id="${this.id}-choose-btn" class="wc-chooser-btn btn btn-outline-success btn-block" style="display:${fc}">CHOOSE FILE</button>
</div>
</div>`
wc.groupEnd();
return temp;
};
/**
* Called when this is attached to DOM
* @connectedCallback.
*/
connectedCallback() {
wc.group("Cropper.connectedCallback")
let self = this;
// GET PROPERTIES AND INTERESTING ELEMENTS
this._initialize();
// ADD COMPONENT MARKTOP
this.innerHTML = this._template()
setTimeout(function(){
self.editor = $("#" + self.id + "-editor");
//$("[type=file]").css("margin-left","-2000px")
$("#" + self.id + "-choose-btn").css("margin-bottom","-25px").on("click", function() {
$("[type=file]").click()
});
let crop = self.editor.cropit({
minZoom: "fit",
maxZoom: self.properties.maxzoom,
freeMove: true,
smallImage: "reject",
exportZoom: self.properties.savesize,
imageBackground: true,
imageState: {src: `${self.properties.img}`},
onFileChange: function(e) {
wc.log("onFileChange:", e);
},
onFileReaderError: function(e) {
wc.log("onFileReaderError:", e);
wc.publish("wc-cropper", {
time: new Date().getTime(),
action: "error",
id: self.id,
eid: 2100,
msg: e.message
});
},
onImageLoading: function(e) {
// CROPIT HARD RESET
$('.cropit-preview').removeClass('cropit-image-loaded');
$('.cropit-preview-background').attr('src','');
$('.cropit-preview-image').attr('src','');
$('.cropit-preview-image').removeAttr('style');
$('.cropit-preview-image').attr('style','transform-origin: left top 0px; will-change: transform;');
$('input.cropit-image-input').val('');
$('.cropit-image-zoom-input').val('0');
wc.log("onImageLoading:", e);
},
onImageLoaded: function(e) {
wc.log("onImageLoaded:", e);
wc.publish("wc-cropper", {
time: new Date().getTime(),
action: "file",
id: self.id
});
},
onImageError: function(e) {
wc.log("onImageError:", e);
if (e.code != 0) {
wc.publish("wc-cropper", {
time: new Date().getTime(),
action: "error",
id: self.id,
eid: 2000,
msg: e.message
});
}
},
onZoomEnabled: function(e) {
wc.log("onZoomEnabled:", e);
},
onZoomDisabled: function(e) {
wc.log("onZoomDisabled:", e);
//self.editor.cropit('reenable');
},
onZoomChange: function(e) {
wc.log("onZoomChange:", e);
},
onZoomOffset: function(e) {
wc.log("onZoomOffset:", e);
},
});
$('.wc-cropper-export').click(function() {
var imageData = self.editor.cropit('export');
if (0) {
var tab = window.open('about:blank', '_blank');
tab.document.write("<img src=" + imageData + ">"); // where 'html' is a variable containing your HTML
tab.document.close(); // to finish loading the page
} else {
wc.publish("wc-cropper", {
time: new Date().getTime(),
action: "save",
id: this.id,
img: imageData
});
}
});
}, 0);
// REPOSITION WHEN A MODAL IS SHOWN
$('.modal').on('show.bs.modal', this._reposition);
// ADD STATS AND OTHER FINAL STUFF
this._finalize();
wc.groupEnd();
};
/**
* Centers the dialog
* @private
* @_reposition
*/
_reposition() {
wc.group("Cropper._reposition");
var modal = $(this), dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
wc.groupEnd();
}
/**
* Called with .setAttribute(...) function call
* @attributeChangedCallback
*/
attributeChangedCallback(attr, oldval, newval) {
wc.group("Cropper.attributeChangedCallback:", attr, oldval, newval);
this.properties = this.properties || [];
let obs = Cropper.observedAttributes;
for (let i = 0; i < obs.length; i++) {
if (newval) {
this.properties[obs[i]] = newval;
}
}
// YOUR CODE FOR CHANGES GO HERE (MAYBE NULL FIRST TIME THROUGH)
try {
switch(attr)
{
case "header":
break;
default:
break;
}
} catch(e) {
wc.warn(e.name + ' > ' + e.message);
}
wc.groupEnd();
};
/**
* Stores DOM elements of interest for future use
* @private
* @_fetchElements
*/
_fetchElements() {
wc.group("Cropper._fetchElements");
this.dom = this.dom || [];
this.dom.content = this.innerHTML;
wc.groupEnd();
};
/**
* Component attributes are _fetched and defaults are set if undefined
* @private
* @_fetchAttributes
*/
_fetchAttributes() {
wc.group("Cropper._fetchAttributes");
this.properties = {
cname : "Cropper",
author : "Mel M. Heravi",
version : "1.0",
filechoose : "false",
filesave : "false"
};
// SAVE WIDGET SPECIFIC PROPERTIES
this.propertiesW = [];
// SAVE ALL OTHER PROPERTIES
let attrs = wc.getAttributes(this)
for (var key in attrs) {
let attr = this.getAttribute(key) || this.properties.key;
this.properties[key] = this.getAttribute(key);
this.propertiesW[key] = this.getAttribute(key);
wc.log(key + ": " + attrs[key]);
}
// SET ALL INITIAL ATTRIBUTES
for (var key in this.properties) {
switch(key)
{
case "header":
break;
default:
break;
}
}
wc.log("ATTRIBUTES: ", this.properties);
wc.groupEnd();
};
/**
* configure the instance object and artifacts
* @configure
*/
configure(aname) {
wc.group("Cropper.configure:", aname);
// IF JSON VARIABLE (aname) IS PROVIDED
if (aname) {
this._process(aname);
} else {
let self = this;
$.getJSON(this.properties.cfg, function(data) {
self._process(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert("ERROR: INCOMING TEXT " + jqXHR.responseText);
});
}
wc.groupEnd();
};
/**
* _process the instance object and artifacts
* @private
* @_process
*/
_process(data) {
wc.group("Cropper._process:", data);
// DO WHATEVER WITH THE DATA
wc.groupEnd();
};
/**
* Initialize component
* @private
* @_initialize
*/
_initialize() {
wc.group("Cropper._initialize:", this.id);
// FETCH ALL INTERESTING ELEMENTS
this._fetchElements();
// FETCH ALL ATTRIBUTES
this._fetchAttributes();
wc.groupEnd();
};
/**
* Save data for analytics and final wrap up
* @private
* @_finalize
*/
_finalize() {
wc.group("Cropper._finalize:", this.id);
this.classList.add("wc");
// ADD ANALYTICS HERE
wc.setStats(this, this.properties.cname, this.properties.version);
// SHOW IT NOW (NO FLICKERS)
this.style.visibility = "visible";
wc.groupEnd();
};
/**
* Invoked When component is removed. Usually with a .remove() function call
* @disconnectedCallback
*/
disconnectedCallback() {
wc.group("Cropper.disconnectedCallback")
// FREE MEMORY AND CLEANUP
wc.groupEnd();
};
/**
* PUBLIC METHOD TO SAVE THE IMAGES
* @save
*/
save() {
wc.group("Cropper.save")
$('.wc-cropper-export').click();
wc.groupEnd();
}
}
window.customElements.define('wc-cropper', Cropper);