File: /var/www/html/tmpr/../tmpr/../tmpr/..//elementsMachine/demo.js
/**
* Imagist instance and methods for global accessing
*/
var basic, full, fullInit, fullDestroy, changed = [];
$(function(){
SyntaxHighlighter.all();
/**
* BASIC USAGE EXAMPLE
*/
basic = $('#basic .plugin img').imagist({
width: 600,
height: 600
});
/**
* FULL FEATURED EXAMPLE
*/
var onerror = function() {
alert('"' + this.src + '" could not load');
};
(fullInit = function() {
full = $('#full .plugin img').imagist({
canvasWidth: 600,
canvasHeight: 600,
positionX: 0,
positionY: 0,
width: 600,
flipH: true,
error: onerror,
background: '#cc0000',
loading: function(process) {
$('#full .progress-bar').css('width', process + '%');
},
change: function(allOpts, changedProps) {
changed = changedProps;
if (is_changed("layer")) {
// Layer list
var list = $('#full .layer-list').html('');
var sameOrigin = true;
var template = $(''
+ ' <tr class="list-group-item h4" draggable="true">'
+ ' <td> <span class="src "></span></td> '
+ '<td width=150 align=right><a class="remove"><i class="icon-trash "></i></a> '
+ ' <a class="down"><i class="icon-arrow-down"></i></a> '
+ ' <a class="up"><i class="icon-arrow-up"></i></a> </td> '
+ '</tr>');
for (var i = 0; i < allOpts.layers.length; i++) {
if ( ! this.layers[ allOpts.layers[i].index ].sameOrigin ) {
sameOrigin = false;
}
list.prepend(
template.clone()
.data('index', allOpts.layers[i].index)
.find('.src').html(allOpts.layers[i].src)
.addClass(allOpts.layers[i].active ? 'active' : '')
.attr('href', allOpts.layers[i].src)
.parents('tr')
);
}
// Same-origin policy warning
if (!sameOrigin) {
$('#full .same-origin-warning').show();
} else {
$('#full .same-origin-warning').hide();
}
}
// Active layer parameters
is_changed("layer") && $('#full .active-layer-src').attr('href', allOpts.src).html(allOpts.src);
is_changed("canvasWidth") && $('#full input.canvas-width').val(allOpts.canvasWidth);
is_changed("canvasHeight") && $('#full input.canvas-height').val(allOpts.canvasHeight);
is_changed("opacity") && $('#full input.opacity').val(allOpts.opacity);
is_changed("positionX") && $('#full input.position-x').val(allOpts.positionX);
is_changed("positionY") && $('#full input.position-y').val(allOpts.positionY);
is_changed("width") && $('#full input.width').val(allOpts.width);
is_changed("height") && $('#full input.height').val(allOpts.height);
is_changed("rotation") && $('#full input.rotation').val(allOpts.rotation);
is_changed("background") && $('#full input.background').val(allOpts.background);
is_changed("flipV") && $('#full input.flip-v').prop('checked', allOpts.flipV);
is_changed("flipH") && $('#full input.flip-h').prop('checked', allOpts.flipH);
}
}).addLayer('assets/images/imagist-logo.png', {
rotation: 0,
positionX:10,
positionY: 10,
opacity: 100
})
$('#full .controls-destroyed').hide();
$('#full .controls-initialized').show();
// Fix static inputs with defaults
$('#full input.enabled').prop('checked', true);
$('#full input.rotate').prop('checked', true);
$('#full input.move').prop('checked', true);
$('#full input.resize').prop('checked', true);
$('#full input.overflow').prop('checked', true);
$('#full input.layer').val('');
})();
/**
* Destroy function
*/
fullDestroy = function() {
full.destroy();
full = null;
$('#full .controls-destroyed').show();
$('#full .controls-initialized').hide();
};
/**
* Init
*/
$('#full .controls-destroyed button.init').click(fullInit);
/**
* Destroy
*/
$('#full .controls-initialized button.destroy').click(fullDestroy);
/**
* Save as
*/
$('#full .controls-initialized button.saveas').parents("form").submit(function() {
$(this).find("input[type='hidden']").val(full.render());
});
/**
* Add layer (layer list)
*/
$('#full button.add-new-layer').click(function(){
full && full.addLayer($('#full input.layer').val(), {
error: onerror
});
});
$('#full input.layer').on('keydown', function(e) {
full && e.keyCode === 13 && $('#full button.layer-btn').click();
});
$('#full .upload-image').uploader({
xhr: {
success: function(response) {
full && full.addLayer(response.file);
}
}
});
/**
* Remove layer (layer list)
*/
$('#full .layer-list').on('click', 'a.remove', function() {
full && full.removeLayer($(this).parents('tr').data('index'));
});
/**
* Bring front (layer list)
*/
$('#full .layer-list').on('click', 'a.up', function() {
full && full.bringFront($(this).parents('tr').data('index'));
});
/**
* Send back (layer list)
*/
$('#full .layer-list').on('click', 'a.down', function() {
full && full.sendBack($(this).parents('tr').data('index'));
});
/**
* Activate layer (layer list)
*/
$('#full .layer-list').on('click', '.src', function(ev) {
ev.preventDefault();
full && full.activateLayer($(this).parents('tr').data('index') * 1);
});
/**
* Set canvas width, height
*/
$('#full .set-canvas-sizes').click(function() {
full && full.set({
canvasWidth: $('#full .canvas-width').val() * 1,
canvasHeight: $('#full .canvas-height').val() * 1
});
});
/**
* Set active layer's width and height
*/
$('#full .set-sizes').click(function() {
full && full.set({
width: $('#full .width').val() * 1,
height: $('#full .height').val() * 1
});
});
/**
* Set active layer's positionX and positionY
*/
$('#full .set-position').click(function() {
full && full.set({
positionX: $('#full .position-x').val() * 1,
positionY: $('#full .position-y').val() * 1
});
});
/**
* Set active layer's rotation
*/
$('#full .set-rotation').click(function() {
full && full.set({ rotation: $('#full .rotation').val() * 1 });
});
/**
* Set active layer's opacity
*/
$('#full .set-opacity').click(function() {
full && full.set({ opacity: $('#full .opacity').val() * 1 });
});
/**
* Set active layer's background
*/
$('#full .set-background').click(function() {
full && full.set({ background: $('#full .background').val() });
});
/**
* Flip active layer
*/
$('#full .flip-h').change(function() {
full && full.activeLayer.flipHorizontal( $(this).is(':checked') );
});
$('#full .flip-v').change(function() {
full && full.activeLayer.flipVertical( $(this).is(':checked') );
});
/**
* Remove active layer
*/
$('#full button.remove-layer-btn').click(function() {
full && full.removeLayer();
});
/**
* Bring front (active layer)
*/
$('#full button.bring-front').on('click', function() {
full && full.bringFront();
});
/**
* Send back (active layer)
*/
$('#full button.send-back').on('click', function() {
full && full.sendBack();
});
/**
* Export parameters (active layer)
*/
$('#full button.export').on('click', function() {
full && alert( JSON.stringify(full.get()) );
});
$('#full input.enabled').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enable();
} else {
full.disable();
}
}
});
$('#full input.rotate').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableRotate();
} else {
full.disableRotate();
}
}
});
$('#full input.move').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableMove();
} else {
full.disableMove();
}
}
});
$('#full input.resize').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.enableResize();
} else {
full.disableResize();
};
};
});
$('#full input.overflow').on('change', function() {
if ( full ) {
if ( $(this).is(':checked') ) {
full.showOverflow();
} else {
full.hideOverflow();
};
};
});
$('#full-modal').on('show.bs.modal', function(ev) {
$('img', this).attr('src', full.render());
});
function is_changed(propName) {
return changed.indexOf("all") > -1 ||
changed.indexOf("layer") > -1 ||
changed.indexOf(propName) > -1;
}
});