parent
2ba0771c94
commit
2c337b5c1c
8 changed files with 406 additions and 184 deletions
@ -0,0 +1,28 @@ |
||||
var OFF = 0, WARN = 1, ERROR = 2; |
||||
|
||||
module.exports = exports = { |
||||
"root": true, |
||||
env: { |
||||
'es6': true, // We are writing ES6 code
|
||||
'browser': true, // for the browser
|
||||
'commonjs': true // and use require() for stylesheets
|
||||
}, |
||||
"parserOptions": { |
||||
"ecmaFeatures": { |
||||
"modules": true |
||||
}, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules":{ |
||||
"no-console": OFF, |
||||
"jsx-quotes": WARN, |
||||
"no-unused-vars": WARN, |
||||
"no-undef": WARN |
||||
|
||||
}, |
||||
"globals": { |
||||
"$": true |
||||
}, |
||||
|
||||
"extends": ["eslint:recommended"] |
||||
}; |
||||
@ -1,24 +1,128 @@ |
||||
/** |
||||
* Created by mitri4 on 23.06.17. |
||||
*/ |
||||
|
||||
// $(document).ready(function() {
|
||||
//
|
||||
// $uploadCrop = $('#stamp').croppie({
|
||||
// enableExif: true,
|
||||
// viewport: {
|
||||
// width: 200,
|
||||
// height: 200,
|
||||
// type: 'circle'
|
||||
// },
|
||||
// boundary: {
|
||||
// width: 300,
|
||||
// height: 300
|
||||
// }
|
||||
// });
|
||||
//
|
||||
//
|
||||
//
|
||||
// });
|
||||
(function($) { |
||||
$.fn.invisible = function() { |
||||
return this.each(function() { |
||||
$(this).css("visibility", "hidden"); |
||||
$(this).hide(); |
||||
}); |
||||
}; |
||||
$.fn.visible = function() { |
||||
return this.each(function() { |
||||
$(this).css("visibility", "visible"); |
||||
$(this).show(); |
||||
}); |
||||
}; |
||||
}(jQuery)); |
||||
|
||||
|
||||
$(document).ready(function () { |
||||
|
||||
var $uploadCrop, |
||||
rawImg, |
||||
imagePreview, |
||||
imageInputField; |
||||
|
||||
function readFile(input) { |
||||
if (input.files && input.files[0]) { |
||||
var reader = new FileReader(); |
||||
|
||||
reader.onload = function (e) { |
||||
$('#imageCropper').addClass('ready'); |
||||
rawImg = e.target.result; |
||||
$('#containerUpload').trigger("ShowModal"); |
||||
}; |
||||
reader.readAsDataURL(input.files[0]); |
||||
} else { |
||||
alert("Sorry - you're browser doesn't support the FileReader API"); |
||||
} |
||||
} |
||||
|
||||
$uploadCrop = $('#imageCropper').croppie({ |
||||
enableExif: true, |
||||
enforceBoundary: false, |
||||
viewport: { |
||||
width: 200, |
||||
height: 200, |
||||
type: 'circle' |
||||
}, |
||||
boundary: { |
||||
width: 300, |
||||
height: 300 |
||||
} |
||||
}); |
||||
|
||||
// select file
|
||||
$('.img_load img').on('click', function() { |
||||
var thisId = $(this).closest('.img_load').attr('id'); |
||||
var tmbId = 'id_tmb_' + thisId.substring(3); |
||||
$('#' + tmbId).val(''); |
||||
$('#id_' + thisId).click(); |
||||
imagePreview = thisId; |
||||
imageInputField = 'id_' + thisId; |
||||
// console.log('#id_' + thisId)
|
||||
}); |
||||
|
||||
// set file in input hidden filed
|
||||
$('.img_load input[type=file]').on('change', function () {readFile(this)}); |
||||
|
||||
$('#containerUpload').on("ShowModal", function( ) { |
||||
$('#containerUpload').visible(); |
||||
$uploadCrop.croppie('bind', { |
||||
url: rawImg |
||||
}).then(function(){ |
||||
console.log('jQuery bind complete'); |
||||
}); |
||||
}); |
||||
|
||||
$('#cropImageBtn').on('click', function (ev) { |
||||
$uploadCrop.croppie('result', { |
||||
type: 'base64', |
||||
format: 'png', |
||||
size: 'viewport' |
||||
}).then(function (resp) { |
||||
// console.log(resp);
|
||||
$('#' + imagePreview + ' img').attr('src', resp); |
||||
$('#containerUpload').trigger("CloseModal"); |
||||
$('#' + imagePreview + ' .del_image').show(); |
||||
}) |
||||
}); |
||||
|
||||
$('#containerUpload').on("CloseModal", function( ) { |
||||
$('#containerUpload').invisible(); |
||||
$('#' + imageInputField).val(''); |
||||
}); |
||||
|
||||
var closeButtons=document.getElementsByClassName("modal-upload__cleaner-btn"); |
||||
|
||||
for (var i = 0; i < closeButtons.length; i++) { |
||||
|
||||
var closeBtn = closeButtons[i]; |
||||
closeBtn.addEventListener('click',function () { |
||||
$('#containerUpload').trigger("CloseModal"); |
||||
}) |
||||
|
||||
} |
||||
|
||||
$('.img_load .del_image').on('click', function(e) { |
||||
e.preventDefault(); |
||||
var this_id = $(this).closest('.img_load').attr('id'); |
||||
var tmb_id = 'id_tmb_' + this_id.substring(3); |
||||
var dlg_msg = $('#dialog-message'); |
||||
dlg_msg.dialog({ |
||||
title: 'Удалить изображение?', |
||||
buttons:{ |
||||
'Да': function(){ |
||||
$('#' + tmb_id).val(''); |
||||
$('#' + this_id + ' img').attr('src', '/static/img/upload-' + this_id + '.png'); |
||||
$('#' + this_id + '-clear_id').attr('checked', true); |
||||
$('#' + this_id + ' .del_image').hide(); |
||||
dlg_msg.dialog('close'); |
||||
}, |
||||
'Нет': function(){ |
||||
dlg_msg.dialog('close'); |
||||
} |
||||
} |
||||
}).html('Нажмите "Да", чтобы удалить изображение'); |
||||
dlg_msg.dialog('open'); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
Loading…
Reference in new issue