102 lines
3.7 KiB
Plaintext
102 lines
3.7 KiB
Plaintext
|
<style>
|
||
|
|
body{max-width: 100%;}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="/assets/cropper.js"></script>
|
||
|
|
<script type="text/javascript" src="/assets/jquery-cropper.js"></script>
|
||
|
|
<link href="/assets/cropper.css" rel="stylesheet"></link>
|
||
|
|
<div style='padding-left: 10px;display:flex; flex-wrap: wrap;width:100%;align-items: center;'>
|
||
|
|
<div style='display:inline-flex;flex-direction:column;margin-right: 10px;'>
|
||
|
|
<span style='display:inline-flex;'>
|
||
|
|
<label style='padding: 5px;'><%= t('custom_gallery.width') %>:</label><input type="text" name="width">
|
||
|
|
</span>
|
||
|
|
<span style='display:inline-flex;'>
|
||
|
|
<label style='padding: 5px;'><%= t('custom_gallery.height') %>:</label><input type="text" name="height">
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<button style='height: 50px;' onclick='change_config()'>修改裁減框長寬比</button>
|
||
|
|
</div>
|
||
|
|
<div style='display:flex; flex-wrap: wrap;width:100%'>
|
||
|
|
<% @img.each do |image| %>
|
||
|
|
<div class='<%= image.id %>' style='width:40%;max-width:40%;margin:10px 20px;'>
|
||
|
|
<img class='editimage' src="<%= image.file.get_org_url %>">
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
|
||
|
|
<script>
|
||
|
|
var cropper_img = [],options=[]
|
||
|
|
function change_config(){
|
||
|
|
var count = cropper_img.length
|
||
|
|
var aspect_value = parseInt($("input[name='width']").val())/parseInt($("input[name='height']").val())
|
||
|
|
for (var i=0;i<count;i++){
|
||
|
|
if (isNaN(aspect_value)){
|
||
|
|
try{
|
||
|
|
delete options[i]['aspectRatio']
|
||
|
|
}
|
||
|
|
catch{
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
options[i].aspectRatio = aspect_value
|
||
|
|
}
|
||
|
|
$('.editimage').eq(i).cropper('destroy').cropper(options[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var x=[],y=[],w=[],h=[]
|
||
|
|
var id = []
|
||
|
|
<% @img.each do |image| %>
|
||
|
|
<% if image.custom_album_crops.first.nil? %>
|
||
|
|
<% image.custom_album_crops.new() %>
|
||
|
|
<% end %>
|
||
|
|
<% if !image.custom_album_crops.first.crop_x.to_s.empty? %>
|
||
|
|
x.push(<%= image.custom_album_crops.first.crop_x %>)
|
||
|
|
y.push(<%= image.custom_album_crops.first.crop_y %>)
|
||
|
|
w.push(<%= image.custom_album_crops.first.crop_w %>)
|
||
|
|
h.push(<%= image.custom_album_crops.first.crop_h %>)
|
||
|
|
<% else %>
|
||
|
|
x.push('')
|
||
|
|
y.push('')
|
||
|
|
w.push('')
|
||
|
|
h.push('')
|
||
|
|
<% end %>
|
||
|
|
<% end %>
|
||
|
|
$('img.editimage').on('load',function() {
|
||
|
|
var temp = $('.editimage').parent()
|
||
|
|
temp.each(function(){id.push($(this).attr('class'))})
|
||
|
|
var image = $('.editimage')
|
||
|
|
var count = image.length
|
||
|
|
<% @img.each_with_index do |_,i| %>
|
||
|
|
options[<%= i %>] = {
|
||
|
|
data: {
|
||
|
|
x: x[<%= i %>],
|
||
|
|
y: y[<%= i %>],
|
||
|
|
width: w[<%= i %>],
|
||
|
|
height: h[<%= i %>]
|
||
|
|
},
|
||
|
|
crop: function (e) {
|
||
|
|
x[<%= i %>] = e.detail.x
|
||
|
|
y[<%= i %>] = e.detail.y
|
||
|
|
w[<%= i %>] = e.detail.width
|
||
|
|
h[<%= i %>] = e.detail.height
|
||
|
|
},
|
||
|
|
viewMode: 2,
|
||
|
|
zoomOnWheel: false,
|
||
|
|
autoCropArea: 1
|
||
|
|
};
|
||
|
|
cropper_img.push($('.editimage').eq(<%= i %>).cropper(options[<%= i %>]));
|
||
|
|
<% end %>
|
||
|
|
});
|
||
|
|
function save_data(){
|
||
|
|
$.ajax({
|
||
|
|
url : '/admin/custom_galleries/save_crop',
|
||
|
|
dataType : "json",
|
||
|
|
type : "post",
|
||
|
|
data:{x:x,y:y,w:w,h:h,id:id},
|
||
|
|
success:function(data){
|
||
|
|
window.location.href = data.href;
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert('Your server has some problem, please try again later!')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|