saidamirkattan/Media.RCL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Media.RCL

Browse Source
This commit is contained in:
Said
2026-08-05 21:16:09 +03:00
commit 685015a3a4
166 changed files with 7590 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wwwroot/css/cropper.min.css
Vendored
+304
View File
@@ -0,0 +1,304 @@
/*!
* Cropper.js v1.6.1
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2023-09-17T03:44:17.565Z
*/
.cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.cropper-container img {
backface-visibility: hidden;
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%
}
.cropper-canvas,
.cropper-crop-box,
.cropper-drag-box,
.cropper-modal,
.cropper-wrap-box {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0
}
.cropper-canvas,
.cropper-wrap-box {
overflow: hidden
}
.cropper-drag-box {
background-color: #fff;
opacity: 0
}
.cropper-modal {
background-color: #000;
opacity: .5
}
.cropper-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, .75);
overflow: hidden;
width: 100%
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: .5;
position: absolute
}
.cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: 33.33333%;
left: 0;
top: 33.33333%;
width: 100%
}
.cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: 33.33333%;
top: 0;
width: 33.33333%
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: .75;
position: absolute;
top: 50%;
width: 0
}
.cropper-center:after,
.cropper-center:before {
background-color: #eee;
content: " ";
display: block;
position: absolute
}
.cropper-center:before {
height: 1px;
left: -3px;
top: 0;
width: 7px
}
.cropper-center:after {
height: 7px;
left: 0;
top: -3px;
width: 1px
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: .1;
position: absolute;
width: 100%
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0
}
.cropper-line {
background-color: #39f
}
.cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px
}
.cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px
}
.cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px
}
.cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0
}
.cropper-point {
background-color: #39f;
height: 5px;
opacity: .75;
width: 5px
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px
}
@media (min-width:768px) {
.cropper-point.point-se {
height: 15px;
width: 15px
}
}
@media (min-width:992px) {
.cropper-point.point-se {
height: 10px;
width: 10px
}
}
@media (min-width:1200px) {
.cropper-point.point-se {
height: 5px;
opacity: .75;
width: 5px
}
}
.cropper-point.point-se:before {
background-color: #39f;
bottom: -50%;
content: " ";
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%
}
.cropper-invisible {
opacity: 0
}
.cropper-bg {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0
}
.cropper-hidden {
display: none !important
}
.cropper-move {
cursor: move
}
.cropper-crop {
cursor: crosshair
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed
}
wwwroot/js/crop.js
+112
View File
@@ -0,0 +1,112 @@
var modal;
var cropper;
var myDropzone;
var dropzone;
var cropped;
var croppedImage;
function startCropper() {
console.log("startcropper")
dropzone = document.getElementById('dropzone')
cropped = document.getElementById('cropped')
croppedImage = document.getElementById('cropped-image')
initTingle();
Dropzone.autoDiscover = false
myDropzone = new Dropzone("div#dropzone", {
url: "test",
maxFiles: 1,
autoProcessQueue: false,
addedfile: file => {
myDropzone.removeAllFiles();
modal.open();
openCropper(file)
},
maxfilesexceeded: () => {
console.log("max File Exceeded")
}
});
}
function openCropper(file) {
var pic = new FileReader();
pic.readAsDataURL(file)
console.log(file)
if (cropper !== undefined) {
cropper.destroy();
}
pic.onload = function () {
image.src = pic.result
cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
},
});
}
}
function initTingle() {
modal = new tingle.modal({
footer: true,
stickyFooter: false,
closeMethods: ['button', 'escape'],
closeLabel: "Close",
cssClass: ['custom-class-1', 'custom-class-2'],
onOpen: function () {
},
onClose: function () {
},
beforeClose: function () {
// here's goes some logic
// e.g. save content before closing the modal
return true; // close the modal
return false; // nothing happens
},
});
// set content
modal.setContent(`<div><img id="image" class="w-full block " /></div>`);
// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function () {
crop();
modal.close();
});
// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function () {
// here goes some logic
modal.close();
});
// open modal
}
function crop() {
croppedImage.src = cropper.getCroppedCanvas().toDataURL('image/jpeg')
dropzone.classList.toggle("hidden");
cropped.classList.toggle("hidden");
return croppedImage.src;
}
function removeCropped() {
croppedImage.removeAttribute('src')
dropzone.classList.toggle("hidden");
cropped.classList.toggle("hidden");
}
wwwroot/js/cropper.min.js
Vendored
+19
View File
File diff suppressed because one or more lines are too long
wwwroot/js/mediaInterop.js
+79
View File
@@ -0,0 +1,79 @@
class CropperInterop {
static initCropper(imgId, options, dotNetObject) {
const image = document.getElementById(imgId);
if (!image) return;
// Clean up existing instance if any
if (image.cropper) {
image.cropper.destroy();
}
new Cropper(image, {
...options,
ready() {
// Optional: notify dotnet that it's ready
}
});
}
static getCroppedCanvasData(imgId) {
const image = document.getElementById(imgId);
if (!image || !image.cropper) return null;
return image.cropper.getCroppedCanvas().toDataURL();
}
static setAspectRatio(imgId, ratio) {
const image = document.getElementById(imgId);
if (!image || !image.cropper) return;
image.cropper.setAspectRatio(ratio);
}
static destroy(imgId) {
const image = document.getElementById(imgId);
if (image && image.cropper) {
image.cropper.destroy();
}
}
static setFullWidth(imgId) {
const image = document.getElementById(imgId);
if (!image || !image.cropper) return;
const data = image.cropper.getImageData();
// Use setData for natural dimensions
image.cropper.setData({ x: 0, width: data.naturalWidth });
}
static setFullHeight(imgId) {
const image = document.getElementById(imgId);
if (!image || !image.cropper) return;
const data = image.cropper.getImageData();
// Use setData for natural dimensions
image.cropper.setData({ y: 0, height: data.naturalHeight });
}
}
window.initCropper = (imgId, options, dotNetHelper) => {
CropperInterop.initCropper(imgId, options, dotNetHelper);
};
window.getCroppedImage = (imgId) => {
return CropperInterop.getCroppedCanvasData(imgId);
};
window.setCropperAspectRatio = (imgId, ratio) => {
CropperInterop.setAspectRatio(imgId, ratio);
};
window.destroyCropper = (imgId) => {
CropperInterop.destroy(imgId);
};
window.setCropperFullWidth = (imgId) => {
CropperInterop.setFullWidth(imgId);
};
window.setCropperFullHeight = (imgId) => {
CropperInterop.setFullHeight(imgId);
};
wwwroot/lib/cropper.min.css
Vendored Executable
+9
View File
@@ -0,0 +1,9 @@
/*!
* Cropper.js v1.5.13
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2022-11-20T05:30:43.444Z
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
wwwroot/lib/cropper.min.js
Vendored Executable
+10
View File
File diff suppressed because one or more lines are too long