mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2024-11-14 01:20:27 +00:00
527 lines
17 KiB
JavaScript
527 lines
17 KiB
JavaScript
|
var FormImageCrop = function () {
|
||
|
|
|
||
|
|
var demo1 = function() {
|
||
|
|
$('#demo1').Jcrop();
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo2 = function() {
|
||
|
|
var jcrop_api;
|
||
|
|
|
||
|
|
$('#demo2').Jcrop({
|
||
|
|
onChange: showCoords,
|
||
|
|
onSelect: showCoords,
|
||
|
|
onRelease: clearCoords
|
||
|
|
},function(){
|
||
|
|
jcrop_api = this;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#coords').on('change','input',function(e){
|
||
|
|
var x1 = $('#x1').val(),
|
||
|
|
x2 = $('#x2').val(),
|
||
|
|
y1 = $('#y1').val(),
|
||
|
|
y2 = $('#y2').val();
|
||
|
|
jcrop_api.setSelect([x1,y1,x2,y2]);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Simple event handler, called from onChange and onSelect
|
||
|
|
// event handlers, as per the Jcrop invocation above
|
||
|
|
function showCoords(c)
|
||
|
|
{
|
||
|
|
$('#x1').val(c.x);
|
||
|
|
$('#y1').val(c.y);
|
||
|
|
$('#x2').val(c.x2);
|
||
|
|
$('#y2').val(c.y2);
|
||
|
|
$('#w').val(c.w);
|
||
|
|
$('#h').val(c.h);
|
||
|
|
};
|
||
|
|
|
||
|
|
function clearCoords()
|
||
|
|
{
|
||
|
|
$('#coords input').val('');
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo3 = function() {
|
||
|
|
// Create variables (in this scope) to hold the API and image size
|
||
|
|
var jcrop_api,
|
||
|
|
boundx,
|
||
|
|
boundy,
|
||
|
|
// Grab some information about the preview pane
|
||
|
|
$preview = $('#preview-pane'),
|
||
|
|
$pcnt = $('#preview-pane .preview-container'),
|
||
|
|
$pimg = $('#preview-pane .preview-container img'),
|
||
|
|
|
||
|
|
xsize = $pcnt.width(),
|
||
|
|
ysize = $pcnt.height();
|
||
|
|
|
||
|
|
console.log('init',[xsize,ysize]);
|
||
|
|
|
||
|
|
$('#demo3').Jcrop({
|
||
|
|
onChange: updatePreview,
|
||
|
|
onSelect: updatePreview,
|
||
|
|
aspectRatio: xsize / ysize
|
||
|
|
},function(){
|
||
|
|
// Use the API to get the real image size
|
||
|
|
var bounds = this.getBounds();
|
||
|
|
boundx = bounds[0];
|
||
|
|
boundy = bounds[1];
|
||
|
|
// Store the API in the jcrop_api variable
|
||
|
|
jcrop_api = this;
|
||
|
|
// Move the preview into the jcrop container for css positioning
|
||
|
|
$preview.appendTo(jcrop_api.ui.holder);
|
||
|
|
});
|
||
|
|
|
||
|
|
function updatePreview(c)
|
||
|
|
{
|
||
|
|
if (parseInt(c.w) > 0)
|
||
|
|
{
|
||
|
|
var rx = xsize / c.w;
|
||
|
|
var ry = ysize / c.h;
|
||
|
|
|
||
|
|
$pimg.css({
|
||
|
|
width: Math.round(rx * boundx) + 'px',
|
||
|
|
height: Math.round(ry * boundy) + 'px',
|
||
|
|
marginLeft: '-' + Math.round(rx * c.x) + 'px',
|
||
|
|
marginTop: '-' + Math.round(ry * c.y) + 'px'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo4 = function() {
|
||
|
|
var jcrop_api;
|
||
|
|
|
||
|
|
$('#demo4').Jcrop({
|
||
|
|
bgFade: true,
|
||
|
|
bgOpacity: .2,
|
||
|
|
setSelect: [ 60, 70, 540, 330 ]
|
||
|
|
},function(){
|
||
|
|
jcrop_api = this;
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#fadetog').change(function(){
|
||
|
|
jcrop_api.setOptions({
|
||
|
|
bgFade: this.checked
|
||
|
|
});
|
||
|
|
}).attr('checked', true);
|
||
|
|
Metronic.updateUniform('#fadetog');
|
||
|
|
|
||
|
|
$('#shadetog').change(function(){
|
||
|
|
if (this.checked) $('#shadetxt').slideDown();
|
||
|
|
else $('#shadetxt').slideUp();
|
||
|
|
jcrop_api.setOptions({
|
||
|
|
shade: this.checked
|
||
|
|
});
|
||
|
|
}).attr('checked', false);
|
||
|
|
|
||
|
|
// Define page sections
|
||
|
|
var sections = {
|
||
|
|
bgc_buttons: 'Change bgColor',
|
||
|
|
bgo_buttons: 'Change bgOpacity',
|
||
|
|
anim_buttons: 'Animate Selection'
|
||
|
|
};
|
||
|
|
// Define animation buttons
|
||
|
|
var ac = {
|
||
|
|
anim1: [217,122,382,284],
|
||
|
|
anim2: [20,20,580,380],
|
||
|
|
anim3: [24,24,176,376],
|
||
|
|
anim4: [347,165,550,355],
|
||
|
|
anim5: [136,55,472,183]
|
||
|
|
};
|
||
|
|
// Define bgOpacity buttons
|
||
|
|
var bgo = {
|
||
|
|
Low: .2,
|
||
|
|
Mid: .5,
|
||
|
|
High: .8,
|
||
|
|
Full: 1
|
||
|
|
};
|
||
|
|
// Define bgColor buttons
|
||
|
|
var bgc = {
|
||
|
|
R: '#900',
|
||
|
|
B: '#4BB6F0',
|
||
|
|
Y: '#F0B207',
|
||
|
|
G: '#46B81C',
|
||
|
|
W: 'white',
|
||
|
|
K: 'black'
|
||
|
|
};
|
||
|
|
// Create fieldset targets for buttons
|
||
|
|
for(i in sections)
|
||
|
|
insertSection(i,sections[i]);
|
||
|
|
|
||
|
|
function create_btn(c) {
|
||
|
|
var $o = $('<button />').addClass('btn small');
|
||
|
|
if (c) $o.append(c);
|
||
|
|
return $o;
|
||
|
|
}
|
||
|
|
|
||
|
|
var a_count = 1;
|
||
|
|
// Create animation buttons
|
||
|
|
for(i in ac) {
|
||
|
|
$('#anim_buttons .btn-group')
|
||
|
|
.append(
|
||
|
|
create_btn(a_count++).click(animHandler(ac[i])),
|
||
|
|
' '
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#anim_buttons .btn-group').append(
|
||
|
|
create_btn('Bye!').click(function(e){
|
||
|
|
$(e.target).addClass('active');
|
||
|
|
jcrop_api.animateTo(
|
||
|
|
[300,200,300,200],
|
||
|
|
function(){
|
||
|
|
this.release();
|
||
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||
|
|
}
|
||
|
|
);
|
||
|
|
return false;
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
// Create bgOpacity buttons
|
||
|
|
for(i in bgo) {
|
||
|
|
$('#bgo_buttons .btn-group').append(
|
||
|
|
create_btn(i).click(setoptHandler('bgOpacity',bgo[i])),
|
||
|
|
' '
|
||
|
|
);
|
||
|
|
}
|
||
|
|
// Create bgColor buttons
|
||
|
|
for(i in bgc) {
|
||
|
|
$('#bgc_buttons .btn-group').append(
|
||
|
|
create_btn(i).css({
|
||
|
|
background: bgc[i],
|
||
|
|
color: ((i == 'K') || (i == 'R'))?'white':'black'
|
||
|
|
}).click(setoptHandler('bgColor',bgc[i])), ' '
|
||
|
|
);
|
||
|
|
}
|
||
|
|
// Function to insert named sections into interface
|
||
|
|
function insertSection(k,v) {
|
||
|
|
$('#interface').prepend(
|
||
|
|
$('<fieldset></fieldset>').attr('id',k).append(
|
||
|
|
$('<h4></h4>').append(v),
|
||
|
|
'<div class="btn-toolbar"><div class="btn-group"></div></div>'
|
||
|
|
)
|
||
|
|
);
|
||
|
|
};
|
||
|
|
// Handler for option-setting buttons
|
||
|
|
function setoptHandler(k,v) {
|
||
|
|
return function(e) {
|
||
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||
|
|
$(e.target).addClass('active');
|
||
|
|
var opt = { };
|
||
|
|
opt[k] = v;
|
||
|
|
jcrop_api.setOptions(opt);
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
// Handler for animation buttons
|
||
|
|
function animHandler(v) {
|
||
|
|
return function(e) {
|
||
|
|
$(e.target).addClass('active');
|
||
|
|
jcrop_api.animateTo(v,function(){
|
||
|
|
$(e.target).closest('.btn-group').find('.active').removeClass('active');
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
$('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
|
||
|
|
$('#interface').show();
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo5 = function() {
|
||
|
|
// The variable jcrop_api will hold a reference to the
|
||
|
|
// Jcrop API once Jcrop is instantiated.
|
||
|
|
var jcrop_api;
|
||
|
|
|
||
|
|
// In this example, since Jcrop may be attached or detached
|
||
|
|
// at the whim of the user, I've wrapped the call into a function
|
||
|
|
initJcrop();
|
||
|
|
|
||
|
|
// The function is pretty simple
|
||
|
|
function initJcrop()//{{{
|
||
|
|
{
|
||
|
|
// Hide any interface elements that require Jcrop
|
||
|
|
// (This is for the local user interface portion.)
|
||
|
|
$('.requiresjcrop').hide();
|
||
|
|
|
||
|
|
// Invoke Jcrop in typical fashion
|
||
|
|
$('#demo5').Jcrop({
|
||
|
|
onRelease: releaseCheck
|
||
|
|
},function(){
|
||
|
|
|
||
|
|
jcrop_api = this;
|
||
|
|
jcrop_api.animateTo([100,100,400,300]);
|
||
|
|
|
||
|
|
// Setup and dipslay the interface for "enabled"
|
||
|
|
$('#can_click,#can_move,#can_size').attr('checked','checked');
|
||
|
|
Metronic.updateUniform('#can_click,#can_move,#can_size');
|
||
|
|
|
||
|
|
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
|
||
|
|
Metronic.updateUniform('#ar_lock,#size_lock,#bg_swap');
|
||
|
|
|
||
|
|
$('.requiresjcrop').show();
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
//}}}
|
||
|
|
|
||
|
|
// Use the API to find cropping dimensions
|
||
|
|
// Then generate a random selection
|
||
|
|
// This function is used by setSelect and animateTo buttons
|
||
|
|
// Mainly for demonstration purposes
|
||
|
|
function getRandom() {
|
||
|
|
var dim = jcrop_api.getBounds();
|
||
|
|
return [
|
||
|
|
Math.round(Math.random() * dim[0]),
|
||
|
|
Math.round(Math.random() * dim[1]),
|
||
|
|
Math.round(Math.random() * dim[0]),
|
||
|
|
Math.round(Math.random() * dim[1])
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
// This function is bound to the onRelease handler...
|
||
|
|
// In certain circumstances (such as if you set minSize
|
||
|
|
// and aspectRatio together), you can inadvertently lose
|
||
|
|
// the selection. This callback re-enables creating selections
|
||
|
|
// in such a case. Although the need to do this is based on a
|
||
|
|
// buggy behavior, it's recommended that you in some way trap
|
||
|
|
// the onRelease callback if you use allowSelect: false
|
||
|
|
function releaseCheck()
|
||
|
|
{
|
||
|
|
jcrop_api.setOptions({ allowSelect: true });
|
||
|
|
$('#can_click').attr('checked',false);
|
||
|
|
Metronic.updateUniform('#can_click');
|
||
|
|
};
|
||
|
|
|
||
|
|
// Attach interface buttons
|
||
|
|
// This may appear to be a lot of code but it's simple stuff
|
||
|
|
$('#setSelect').click(function(e) {
|
||
|
|
// Sets a random selection
|
||
|
|
jcrop_api.setSelect(getRandom());
|
||
|
|
});
|
||
|
|
$('#animateTo').click(function(e) {
|
||
|
|
// Animates to a random selection
|
||
|
|
jcrop_api.animateTo(getRandom());
|
||
|
|
});
|
||
|
|
$('#release').click(function(e) {
|
||
|
|
// Release method clears the selection
|
||
|
|
jcrop_api.release();
|
||
|
|
});
|
||
|
|
$('#disable').click(function(e) {
|
||
|
|
// Disable Jcrop instance
|
||
|
|
jcrop_api.disable();
|
||
|
|
// Update the interface to reflect disabled state
|
||
|
|
$('#enable').show();
|
||
|
|
$('.requiresjcrop').hide();
|
||
|
|
});
|
||
|
|
$('#enable').click(function(e) {
|
||
|
|
// Re-enable Jcrop instance
|
||
|
|
jcrop_api.enable();
|
||
|
|
// Update the interface to reflect enabled state
|
||
|
|
$('#enable').hide();
|
||
|
|
$('.requiresjcrop').show();
|
||
|
|
});
|
||
|
|
$('#rehook').click(function(e) {
|
||
|
|
// This button is visible when Jcrop has been destroyed
|
||
|
|
// It performs the re-attachment and updates the UI
|
||
|
|
$('#rehook,#enable').hide();
|
||
|
|
initJcrop();
|
||
|
|
$('#unhook,.requiresjcrop').show();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$('#unhook').click(function(e) {
|
||
|
|
// Destroy Jcrop widget, restore original state
|
||
|
|
jcrop_api.destroy();
|
||
|
|
// Update the interface to reflect un-attached state
|
||
|
|
$('#unhook,#enable,.requiresjcrop').hide();
|
||
|
|
$('#rehook').show();
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Hook up the three image-swapping buttons
|
||
|
|
$('#img1').click(function(e) {
|
||
|
|
$(this).addClass('active').closest('.btn-group')
|
||
|
|
.find('button.active').not(this).removeClass('active');
|
||
|
|
|
||
|
|
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg');
|
||
|
|
jcrop_api.setOptions({ bgOpacity: .6 });
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$('#img2').click(function(e) {
|
||
|
|
$(this).addClass('active').closest('.btn-group')
|
||
|
|
.find('button.active').not(this).removeClass('active');
|
||
|
|
|
||
|
|
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/pool.jpg');
|
||
|
|
jcrop_api.setOptions({ bgOpacity: .6 });
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
$('#img3').click(function(e) {
|
||
|
|
$(this).addClass('active').closest('.btn-group')
|
||
|
|
.find('button.active').not(this).removeClass('active');
|
||
|
|
|
||
|
|
jcrop_api.setImage('../../assets/global/plugins/jcrop/demos/demo_files/sago.jpg',function(){
|
||
|
|
this.setOptions({
|
||
|
|
bgOpacity: 1,
|
||
|
|
outerImage: '../../assets/global/plugins/jcrop/demos/demo_files/sagomod.jpg'
|
||
|
|
});
|
||
|
|
this.animateTo(getRandom());
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
// The checkboxes simply set options based on it's checked value
|
||
|
|
// Options are changed by passing a new options object
|
||
|
|
|
||
|
|
// Also, to prevent strange behavior, they are initially checked
|
||
|
|
// This matches the default initial state of Jcrop
|
||
|
|
|
||
|
|
$('#can_click').change(function(e) {
|
||
|
|
jcrop_api.setOptions({ allowSelect: !!this.checked });
|
||
|
|
jcrop_api.focus();
|
||
|
|
});
|
||
|
|
$('#can_move').change(function(e) {
|
||
|
|
jcrop_api.setOptions({ allowMove: !!this.checked });
|
||
|
|
jcrop_api.focus();
|
||
|
|
});
|
||
|
|
$('#can_size').change(function(e) {
|
||
|
|
jcrop_api.setOptions({ allowResize: !!this.checked });
|
||
|
|
jcrop_api.focus();
|
||
|
|
});
|
||
|
|
$('#ar_lock').change(function(e) {
|
||
|
|
jcrop_api.setOptions(this.checked?
|
||
|
|
{ aspectRatio: 4/3 }: { aspectRatio: 0 });
|
||
|
|
jcrop_api.focus();
|
||
|
|
});
|
||
|
|
$('#size_lock').change(function(e) {
|
||
|
|
jcrop_api.setOptions(this.checked? {
|
||
|
|
minSize: [ 80, 80 ],
|
||
|
|
maxSize: [ 350, 350 ]
|
||
|
|
}: {
|
||
|
|
minSize: [ 0, 0 ],
|
||
|
|
maxSize: [ 0, 0 ]
|
||
|
|
});
|
||
|
|
jcrop_api.focus();
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo6 = function() {
|
||
|
|
var api;
|
||
|
|
|
||
|
|
$('#demo6').Jcrop({
|
||
|
|
// start off with jcrop-light class
|
||
|
|
bgOpacity: 0.5,
|
||
|
|
bgColor: 'white',
|
||
|
|
addClass: 'jcrop-light'
|
||
|
|
},function(){
|
||
|
|
api = this;
|
||
|
|
api.setSelect([130,65,130+350,65+285]);
|
||
|
|
api.setOptions({ bgFade: true });
|
||
|
|
api.ui.selection.addClass('jcrop-selection');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#buttonbar').on('click','button',function(e){
|
||
|
|
var $t = $(this), $g = $t.closest('.btn-group');
|
||
|
|
$g.find('button.active').removeClass('active');
|
||
|
|
$t.addClass('active');
|
||
|
|
$g.find('[data-setclass]').each(function(){
|
||
|
|
var $th = $(this), c = $th.data('setclass'),
|
||
|
|
a = $th.hasClass('active');
|
||
|
|
if (a) {
|
||
|
|
api.ui.holder.addClass(c);
|
||
|
|
switch(c){
|
||
|
|
case 'jcrop-light':
|
||
|
|
api.setOptions({ bgColor: 'white', bgOpacity: 0.5 });
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'jcrop-dark':
|
||
|
|
api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'jcrop-normal':
|
||
|
|
api.setOptions({
|
||
|
|
bgColor: $.Jcrop.defaults.bgColor,
|
||
|
|
bgOpacity: $.Jcrop.defaults.bgOpacity
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else api.ui.holder.removeClass(c);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo7 = function() {
|
||
|
|
// I did JSON.stringify(jcrop_api.tellSelect()) on a crop I liked:
|
||
|
|
var c = {"x":13,"y":7,"x2":487,"y2":107,"w":474,"h":100};
|
||
|
|
|
||
|
|
$('#demo7').Jcrop({
|
||
|
|
bgFade: true,
|
||
|
|
setSelect: [c.x,c.y,c.x2,c.y2]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var demo8 = function() {
|
||
|
|
$('#demo8').Jcrop({
|
||
|
|
aspectRatio: 1,
|
||
|
|
onSelect: updateCoords
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateCoords(c)
|
||
|
|
{
|
||
|
|
$('#crop_x').val(c.x);
|
||
|
|
$('#crop_y').val(c.y);
|
||
|
|
$('#crop_w').val(c.w);
|
||
|
|
$('#crop_h').val(c.h);
|
||
|
|
};
|
||
|
|
|
||
|
|
$('#demo8_form').submit(function(){
|
||
|
|
if (parseInt($('#crop_w').val())) return true;
|
||
|
|
alert('Please select a crop region then press submit.');
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var handleResponsive = function() {
|
||
|
|
if ($(window).width() <= 1024 && $(window).width() >= 678) {
|
||
|
|
$('.responsive-1024').each(function(){
|
||
|
|
$(this).attr("data-class", $(this).attr("class"));
|
||
|
|
$(this).attr("class", 'responsive-1024 col-md-12');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$('.responsive-1024').each(function(){
|
||
|
|
if ($(this).attr("data-class")) {
|
||
|
|
$(this).attr("class", $(this).attr("data-class"));
|
||
|
|
$(this).removeAttr("data-class");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
//main function to initiate the module
|
||
|
|
init: function () {
|
||
|
|
|
||
|
|
if (!jQuery().Jcrop) {;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
Metronic.addResizeHandler(handleResponsive);
|
||
|
|
handleResponsive();
|
||
|
|
|
||
|
|
demo1();
|
||
|
|
demo2();
|
||
|
|
demo3();
|
||
|
|
demo4();
|
||
|
|
demo5();
|
||
|
|
demo6();
|
||
|
|
demo7();
|
||
|
|
demo8();
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}();
|