var Settings = {
dragging: null,
actionAllow: true,
lineDragging: false,
elementID: 0,
mouseY: null,
mouseX: null,
targetY: null,
targetX: null,
setScroll: $(window).scrollTop(),
arrayBlocks: null,
arrayElements: null,
insertCords: {},
modalType: null,
stylesObject: {},
styles: {
'fonts': {
'tags': ['h1','h1','h2','h2', 'h3', 'h3', 'div', 'div'],
'types': ['fz', 'fc', 'fz', 'fc', 'fz', 'fc', 'fz', 'fc'],
'names': ['Заголовок H1','Заголовок H1', 'Заголовок H2','Заголовок H2', 'Заголовок H3','Заголовок H3', 'Обычный текст', 'Обычный текст']
},
'background': {
'tags': ['div', 'div', 'div', 'div', 'div', 'div'],
'types': ['bgc', 'bgu', 'bgp', 'bgs', 'bgr', 'bgo'],
'names': ['Цвет фона', 'Фоновое изображение', 'Расположение изоброжения', 'Размер изображение', 'Повтор изображения', 'Прозрачность']
},
'border': {
'tags': ['div', 'div', 'div', 'div', 'div', 'div', 'div', 'div'],
'types': ['blc', 'blw', 'brc', 'brw', 'btc', 'btw', 'bbc', 'bbw'],
'names': ['Обводка лево цвет', 'Обводка лево ширина', 'Обводка право цвет', 'Обводка право ширина','', '', '', '']
},
'padding': {
'tags': ['div', 'div', 'div', 'div'],
'types': ['pl', 'pr', 'pt', 'pb'],
'names': ['Отступ слева', 'Отступ справа', 'Отступ сверху', 'Отступ снизу']
}
},
element: {},
netElement: {},
netCords: {},
cache: null,
}
function Editor () {
this.Settings = Settings;
}
// getJsonNet
Editor.prototype.getJsonArch = function () {
$this.setArrayElements();
netArray = new Object();
$('.drop-area').each(function(a) {
netArray.wrappers = Array();
$('.wrapper-outside').each(function(wi) {
netArray.wrappers[wi] = new Object();
netArray.wrappers[wi].id = $(this).attr('data-id');
netArray.wrappers[wi].rows = Array();
$(this).find('.drop-row').each(function(ri) {
netArray.wrappers[wi].rows[ri] = new Object();
netArray.wrappers[wi].rows[ri].id = $(this).attr('data-id');
netArray.wrappers[wi].rows[ri].cols = Array();
$(this).find('.drop-col').each(function(ci) {
netArray.wrappers[wi].rows[ri].cols[ci] = new Object();
netArray.wrappers[wi].rows[ri].cols[ci].class = $(this).attr('class').match(/\bcol\S+/g).join(' ');
netArray.wrappers[wi].rows[ri].cols[ci].elements = Array();
$(this).find('.drop-element').each(function(ei) {
dropBox = $(this).find('.drop-box');
type = dropBox.attr('data-type');
dropBoxIn = dropBox.children();
rowClass = dropBoxIn.attr('class').match(/\brow\S+/g);
rowClass = (rowClass == null) ? 'none' : rowClass.toString();
array = decodeURIComponent($(this).find('input[name=content]').val());
array = $.parseJSON('[' + array + ']');
array2 = JSON.stringify(array);
array2 = encodeURIComponent(array2);
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei] = new Object();
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei].id = $(this).attr('data-id');
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei].type = type;
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei].class = rowClass;
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei].colClass = netArray.wrappers[wi].rows[ri].cols[ci].class;
netArray.wrappers[wi].rows[ri].cols[ci].elements[ei].content = array2;
});
});
});
});
});
styleArray = Settings.stylesObject;
$.each( Settings.stylesObject, function(i, v) {
e = $('#spg_'+i);
styleArray[i].class = e.attr('class');
});
// console.log(netArray);
// console.log(styleArray);
postArray = netArray;
styleArray = styleArray;
return {
'dom': postArray,
'css': styleArray
};
}
Editor.prototype.showSaveBlock = function() {
$('#drag-save').fadeIn();
}
// saveDDRefresh
Editor.prototype.editorRefresh = function(url) {
html = encodeURIComponent( this.getJsonArch() );
$.ajax({
url: '/scr/saveDD',
type: 'post',
data: 'html='+html,
success: function (data) {
window.location.href = url;
}
});
event.preventDefault();
}
Editor.prototype.editorCancel = function() {
window.location.reload();
event.preventDefault();
}
// saveDD
Editor.prototype.editorSave = function() {
loadingOverlay('full');
arr = this.getJsonArch() // setStylesObj();
dom = arr.dom;
css = arr.css;
id = $('#siteID').val();
// console.log(css);
$.ajax({
url: '/scr/saveDD',
type: 'post',
data: {
'id': id,
'dom': dom,
'css': css
},
success: function (data) {
console.log(data);
exitOverlay();
$('#drag-save').fadeOut();
}
});
}
Editor.prototype.arrayReturn = function(v) {
box = v['box'];
x1 = v['offset'].left;
y1 = v['offset'].top;
x2 = x1 + box.outerWidth(true);
y2 = y1 + box.outerHeight(true);
returnObj = {
arr: v,
box: box,
inner: v['inner'],
offset: v['offset'],
x1: x1,
y1: y1,
x2: x2,
y2: y2,
}
return returnObj;
}
Editor.prototype.renderCol = function (row) {
bi = 0;
ri = row.parent().parent().index();
cols = row.find('.drop-col');
cols.each(function(ci){
col = $(this);
col.find('.drop-element').each(function(ei){
row = col.parent();
offset = $(this).offset();
w = $(this).outerWidth(true);
h = $(this).outerHeight(true);
$('#line-'+bi+''+ri+''+ci+''+ei).css({
width: w - 1,
height: h - 1,
top: (offset.top)+'px',
left: (offset.left)+'px'
});
moveLineH = $('.move-line[data-box='+bi+'][data-row='+ri+'][data-col='+ci+'][data-element='+ei+'][data-pos=height]');
if(moveLineH.length > 0) {
moveLineH.css({
width: w - 20,
top: (offset.top + h - 10)+'px',
left: (offset.left + 10)+'px'
}).find('.arrows').css({
'margin-left': ((w - 20)/2 - 7)+'px',
}).parent().find('.move').css({
width: w - 20,
});
}
moveLineW = $('.move-line[data-box='+bi+'][data-row='+ri+'][data-col='+ci+'][data-pos=width]');
if(moveLineH.length > 0) {
moveLineW.css({
height: row.height()+'px',
}).find('.arrows').css({
'margin-top': (row.height()/2-7)+'px',
}).parent().find('.move').css({
height: row.height() - 20,
});
}
});
});
}
Editor.prototype.renderNet = function () {
$this = this
$this.setArrayElements();
var lines = $('#lines');
lines.html('')
$('#wrap_lines').html('');
arrayBlocks = Settings.arrayBlocks;
var lineNames = '
Новый блок
';
lineNames += 'Новый столбец
';
lineNames += 'Внутрь блока
';
$('.wrapper-outside').each(function(i) {
wrapLeft = $('');
pos = $(this).offset();
w = $(this).width();
h = $(this).outerHeight();
t = pos.top;
l = pos.left;
buttons = '';
wrap = $(''+buttons+'
');
wrap.css({
width: $(this).outerWidth()+'px',
height: h+'px',
top: t+'px',
left: l+'px'
});
text = $('Сделать общий стиль у выделенных блоков
');
text.css({
width: $(this).outerWidth()+'px',
'margin-top': (h/2)-30+'px',
});
wrap.append(text);
id = $(this).attr('data-id');
wrapBlock = $('');
$('#wrap_lines').append(wrapBlock);
wrapBlock.append(wrap).append(wrap);
});
// Every box
$.each(arrayBlocks, function(bi, vb){
// Every row
$.each(vb['inner'], function(ri, vr) {
vr = arrayBlocks[bi][ri];
vr = $this.arrayReturn(vr);
html = $(''+lineNames+'
');
lines.append(html);
html.css({
width: (vr.x2 - vr.x1 - 2)+'px',
height: (vr.y2 - vr.y1 - 2)+'px',
top: (vr.y1)+'px',
left: (vr.x1)+'px'
});
var max_col_height = 10;
$.each(vr.inner, function(ci, vc) {
vc = arrayBlocks[bi][ri][ci];
vc = $this.arrayReturn(vc);
h = parseInt(vc.box.css('height'));
if(h > max_col_height) max_col_height = h;
});
// Every col
$.each(vr.inner, function(ci, vc) {
vc = arrayBlocks[bi][ri][ci];
vc = $this.arrayReturn(vc);
// Every element
$.each(vc.inner, function(ei, ve) {
ve = arrayBlocks[bi][ri][ci][ei];
ve = $this.arrayReturn(ve);
element = ve.box;
styles = element.getStyle();
count = vr.inner.length; // count of cols in that row
offset = ve.offset;
type = element.find('.drop-box').attr('data-type');
// full line div with blocks
elemWidth = element.outerWidth(true);
elemHeight = element.outerHeight(true);
if(elemHeight < 60) {
style = 'style="margin-top: 5px;" class="clb"';
} else {
style = 'style="margin-top: 15px;"';
}
buttons = '';
html = $(''+buttons+lineNames+'
');
lines.append(html);
html.css({
width: elemWidth - 2,
height: elemHeight - 2,
top: (ve.y1)+'px',
left: (ve.x1)+'px'
});
if(ci != element.parents().length && ci != 0 && $('.move-line[data-row='+ri+'][data-col='+ci+']').length == 0) {
moveLineWidth = $('');
lines.append(moveLineWidth);
moveLineWidth.css({
top: (vc.y1)+'px',
left: (vc.x1-10)+'px'
}).find('.move').css({
height: max_col_height+'px',
}).parent().find('.arrows').css({
'margin-top': (max_col_height/2-7)+'px',
'margin-left': '-7px'
});
}
// Set Height editor lines for some blocks
if(element.find('.box-img, .box-video, .box-blank').length == 1) {
moveLineHeight = $('');
lines.append(moveLineHeight);
moveLineHeight.css({
top: (ve.y2-10)+'px',
left: (ve.x1 + 10)+'px'
}).find('.move').css({
height: '2px',
width: (ve.x2 - ve.x1 - 20)+'px'
}).parent().find('.arrows').css({
'margin-left': ((ve.x2 - ve.x1)/2 - 7)+'px',
'margin-top': '-7px'
});
}
});
});
});
});
}
// dragHover
Editor.prototype.findHolderOnMove = function () {
var $this = this,
arrayElements = Settings.arrayElements;
mouseY = Settings.mouseY - Settings.setScroll;
mouseX = Settings.mouseX;
var access = true;
if(Settings.dragging == null) return false;
if($('.drop-row').length == 0) {
area = $('.drop-area');
offset = area.offset();
area_x_start = offset.left;
area_y_start = offset.top - Settings.setScroll;
area_x_end = area_x_start + area.outerWidth(true);
area_y_end = area_y_start + area.outerHeight(true);
if(mouseX > area_x_start && mouseX < area_x_end && mouseY > area_y_start && mouseY < area_y_end) {
$this.setHolder('area', {
'elem-index': 0,
'col-index': 0,
'row-index': 0,
'box-index': 0
});
}
} else {
$.each(arrayElements, function(ei, v) {
var v = arrayElements[ei];
elem = v['elem'];
elem_x_start = v['elem-offset'].left - 10;
elem_y_start = v['elem-offset'].top - Settings.setScroll - 10;
elem_x_end = elem_x_start + parseInt(v['elem-width']) + 10;
elem_y_end = elem_y_start + parseInt(v['elem-height']) + 10;
row = v['row'];
row_x_start = v['row-offset'].left;
row_y_start = v['row-offset'].top - Settings.setScroll;
if(mouseY > elem_y_start && mouseX > elem_x_start) {
access = true;
row_x_end = row_x_start + parseInt(v['row-width']);
row_y_end = row_y_start + parseInt(v['row-height']) - 2;
if(mouseY > (row_y_start-10) && mouseY < (row_y_start+10)) {
$this.setHolder('top-row', v);
access = false;
} else if(mouseY > (row_y_end-10) && mouseY < (row_y_end+10)) {
$this.setHolder('bot-row', v);
access = false;
} else if(access == true) {
if(mouseX > elem_x_start && mouseX < elem_x_end && mouseY > elem_y_start && mouseY < elem_y_end) {
width = elem_x_end - elem_x_start;
height = elem_y_end - elem_y_start;
// diagonal position for make 4 parts for mouse
centerX = elem_x_start + width/2;
diagDelta = height/width * (centerX);
diagLR = height/width * (mouseX - elem_x_start);
diagRL = height/width * (elem_x_end - mouseX);
y = mouseY - elem_y_start;
if(y < diagLR && y > diagRL) {
position = 'right-col';
} else if(y > diagLR && y < diagRL) {
position = 'left-col';
} else if(y < diagLR && y < diagRL) {
position = 'top-col';
} else if(y > diagLR && y > diagRL) {
position = 'bot-col';
}
$this.setHolder(position, v);
access = false;
}
} else {
access = false;
}
} else {
if(access == true) {
$('.net-line').attr('class', 'net-line hover');
} else {
return false;
}
}
});
}
}
Editor.prototype.setHolder = function (position, v) {
$('.net-line').attr('class', 'net-line hover');
Settings.insertCords = {
position: position,
ei: v['elem-index'],
ci: v['col-index'],
ri: v['row-index'],
bi: v['box-index']
}
type = position.split('-');
position = type[0];
type = type[1];
cords = Settings.insertCords;
if(type == 'row') {
e = '#line-'+cords.bi+''+cords.ri;
} else {
e = '#line-'+cords.bi+''+cords.ri+''+cords.ci+''+cords.ei;
}
if(type == 'row') {
$(e).attr('class', 'net-line '+position);
} else if(type == 'col') {
if(position == 'top' || position == 'bot') {
$(e).attr('class', 'net-line '+position+'-inside');
} else $(e).attr('class', 'net-line '+position);
}
}
Editor.prototype.getElementPosition = function (e) {
ei = $(e).attr('data-element');
ci = $(e).attr('data-col');
ri = $(e).attr('data-row');
bi = $(e).attr('data-box');
arr = {
element: $('.drop-area').eq(bi).find('.drop-row').eq(ri).find('.drop-col').eq(ci).find('.drop-element').eq(ei),
bi: bi,
ri: ri,
ci: ci,
ei: ei
}
return arr;
}
Editor.prototype.clickOnWrapperBtn = function (btn, e, event) {
e = $(e).parent().parent().parent()[0];
if(Settings.actionAllow == false) return false;
$('.net-line').attr('class', 'net-line');
type = this.chooseElement(e);
if(type == 'undefined') return false;
typeBlock = type;
switch (btn) {
case 'merge_up':
mergeBlock = $(e).prev();
id = $(e).attr('data-id');
mergeBlockID = mergeBlock.attr('data-id');
// delete Settings.stylesObject[mergeBlockID];
html = $('#spg_'+mergeBlockID+' .wrapper-inside').html();
$('#spg_'+id+' .wrapper-inside').prepend(html);
$('#spg_'+mergeBlockID).remove();
Editor.renderNet();
this.showSaveBlock();
// setStylesObj();
break;
case 'merge_down':
mergeBlock = $(e).next();
id = $(e).attr('data-id');
mergeBlockID = mergeBlock.attr('data-id');
// delete Settings.stylesObject[mergeBlockID];
html = $('#spg_'+mergeBlockID+' .wrapper-inside').html();
$('#spg_'+id+' .wrapper-inside').append(html);
$('#spg_'+mergeBlockID).remove();
Editor.renderNet();
this.showSaveBlock();
// setStylesObj();
break;
case 'up':
Settings.element.insertBefore( Settings.element.prev() );
Editor.renderNet();
this.showSaveBlock();
break;
case 'down':
Settings.element.insertAfter( Settings.element.next() );
Editor.renderNet();
this.showSaveBlock();
break;
case 'css':
blankSet('css', e);
break;
case 'delete':
this.deleteChoosenElement();
break;
}
Settings.dragging = null;
event.preventDefault();
}
Editor.prototype.clickOnElementBtn = function (btn, e, event) {
e = $(e).parent().parent()[0];
if(Settings.actionAllow == false) return false;
$('.net-line').attr('class', 'net-line');
type = this.chooseElement(e);
if(type == 'undefined') return false;
typeBlock = type;
if(type == 'text' || type == 'blank' || type == 'hr') type = 'right';
switch (btn) {
case 'content':
if(typeBlock != 'text') blankSet(type, e); else {
Settings.netElement.css('left', '-1000px');
$('.net-line[data-col="-"]').css('left', '-1000px');
e = Settings.element;
this.Wsywig.focusTextBlock(e.find('.box-text')[0]);
// xxx
}
break;
case 'css':
blankSet('css', e);
break;
case 'delete':
this.deleteChoosenElement();
break;
}
Settings.dragging = null;
event.preventDefault();
}
Editor.prototype.chooseElement = function (e) {
if($(e).hasClass('wrap-block')) {
id = $(e).attr('data-id');
type = 'css';
element = $('#spg_'+id);
net = $(e);
$(e).addClass('choosen').removeClass('hoverWrapper');
} else {
$('#lines').find('.net-line.choosen').removeClass('choosen');
arr = this.getElementPosition(e);
type = arr.element.find('.drop-box').attr('data-type');
if(typeof type == 'undefined') return 'undefined';
$(e).addClass('choosen');
net = $(e);
element = arr.element;
}
Settings.netElement = net;
Settings.netCords = {
bi: net.attr('data-box'),
ri: net.attr('data-row'),
ci: net.attr('data-col'),
ei: net.attr('data-element')
};
Settings.element = element;
return type;
}
Editor.prototype.deleteChoosenElement = function () {
this.clearCols(Settings.element, 'deleteElement')
modalhide();
this.showSaveBlock();
this.clearElements();
this.renderNet();
Editor.checkDropNoneBlock();
event.preventDefault();
}
Editor.prototype.showSizeLineC = function (e) {
if(Settings.lineDragging == false && Settings.dragging == null) {
$(e).addClass('choosen');
$(e).find('.arrows').show();
}
}
// Editor.hideCSizeLine
Editor.prototype.hideSizeLineC = function (e) {
if(!$(e).hasClass('draggable') && Settings.dragging == null) {
$(e).removeClass('choosen');
$(e).find('.arrows').hide();
}
}
Editor.prototype.hoverElement = function (e) {
elem = $(e);
if($('.drop-element.dragging').length == 0 && !elem.hasClass('choosen') && $('.dragging').length == 0 && $('.draggable').length == 0 && Settings.actionAllow) {
elem.addClass('hoverElement');
$(e).find('.move-allow').not('.drop-box').show();
elem.find('.move-box').show();
}
}
Editor.prototype.unHoverElement = function (e) {
if($('.drop-element.dragging').length == 0 && $('.dragging').length == 0) {
$(e).find('.move-allow').not('.drop-box').hide();
$(e).removeClass('hoverElement');
$(e).find('.move-box').hide();
}
}
// updateDom
Editor.prototype.setArrayElements = function() {
var elements = $('.drop-element');
arr = Array();
$.each(elements, function(ei) {
element = elements.eq(ei);
col = element.parent();
row = col.parent();
wrapper = row.parent().parent();
arr[ei] = {
'elem': element,
'elem-offset': element.offset(),
'elem-width': element.outerWidth() + parseInt(element.css('padding-left')) + parseInt(element.css('padding-right')),
'elem-height': element.outerHeight() + parseInt(element.css('padding-top')) + parseInt(element.css('padding-bottom')),
'elem-index': element.index(),
'col': col,
'col-offset': col.offset(),
'col-index': col.index(),
'row': row,
'row-offset': row.offset(),
'row-width': row.outerWidth(true),
'row-height': row.outerHeight(true),
'row-index': $('.drop-row').index(row),
'box-index': row.parent().index(),
}
});
Settings.arrayElements = arr;
this.setArrayBlocks();
}
// updateDom2
Editor.prototype.setArrayBlocks = function() {
arr = Array();
$('.drop-area').each(function(bi){
arr[bi] = {
'box': $(this),
'offset': $(this).offset(),
'inner': $(this).find('.drop-row')
}
$(this).find('.drop-row').each(function(ri) {
arr[bi][ri] = {
'box': $(this),
'offset': $(this).offset(),
'inner': $(this).find('.drop-col')
}
// alert(arr[bi][ri]['row'])
$(this).find('.drop-col').each(function(ci) {
arr[bi][ri][ci] = {
'box': $(this),
'offset': $(this).offset(),
'inner': $(this).find('.drop-element')
}
$(this).find('.drop-element').each(function(ei) {
arr[bi][ri][ci][ei] = {
'box': $(this),
'offset': $(this).offset(),
'inner': ''
}
});
});
});
});
Settings.arrayBlocks = arr;
}
Editor.prototype.prepareDragging = function (target, type) {
$this = this;
var mouseX = Settings.mouseX,
mouseY = Settings.mouseY;
if(Settings.dragging == null) return false;
$('.tipsy').remove();
if(type == 'object_move_start') {
$('#lines_overlay').fadeIn(100);
target = target.parent();
type = target.attr('data');
target.hide();
$(target).after('');
html = $('.drag-element[data='+type+']').html();
obj = $(''+html+'
');
obj.css({
'top': mouseY + 10 + Settings.setScroll,
'left': mouseX + 10
});
$('body').css('cursor', 'move');
$('#dragdrop').prepend(obj);
$('.net-line').addClass('hover');
$('.move-line').removeClass('choosen');
} else if(type == 'object_move_end') {
$('#lines_overlay').fadeOut(100);
target = target.parent();
target.show();
$('.drag-overlay').remove();
$('body').css('cursor', 'auto');
$('#element_move').remove();
var mouseX = Settings.mouseX,
mouseY = Settings.mouseY;
$('.net-line').attr('class', 'net-line');
area = ($('.drop-row').length == 0) ? $('.drop-area') : $('.drop-row');
offset = area.eq(0).offset();
x1 = offset.left;
y1 = $('.drop-area').eq(0).offset().top + Settings.setScroll;
x2 = x1 + parseInt(area.css('width'));
y2 = y1 + parseInt($('.drop-area').eq(0).outerHeight(true));
// 381 141 - 381 993 - 284 40 - 284 1081
if(mouseX > x1 && mouseX < x2 && mouseY > y1 && mouseY < y2) {
$this.insertBlock(target, 'block');
}
} else if(type == 'element_move_start') {
$('#lines_overlay').fadeIn(100);
bi = target.attr('data-box');
ri = target.attr('data-row');
ci = target.attr('data-col');
ei = target.attr('data-element');
$('.drop-area').eq(bi).find('.drop-row').eq(ri).find('.drop-col').eq(ci).find('.drop-element').eq(ei).each(function () {
type = $(this).find('.drop-box').attr('data-type');
html = $('.drag-element[data='+type+']').html();
obj = $(''+html+'
');
obj.css({
'top': mouseY + 10 - Settings.setScroll,
'left': mouseX + 10
});
$('body').css('cursor', 'move');
$('#dragdrop').prepend(obj);
$('.net-line').addClass('hover');
$('.move-line').removeClass('choosen');
});
} else if(type == 'element_move_end') {
$('#lines_overlay').fadeOut(100);
$('body').css('cursor', 'auto');
$('#element_move').remove();
$('.net-line').attr('class', 'net-line');
area = $('.drop-area');
offset = area.eq(0).offset();
x1 = offset.left;
y1 = offset.top + Settings.setScroll;
x2 = x1 + parseInt(area.css('width'));
y2 = y1 + parseInt(area.outerHeight(true));
if(mouseX > x1 && mouseX < x2 && mouseY > y1 && mouseY < y2) {
$this.insertBlock(Settings.dragging, 'mouse');
}
}
}
Editor.prototype.getBlockTemplate = function(type, elementID, elementHTML) {
var html = '';
if(elementHTML == null) {
$.ajax({
url: '/scr/getBlockTemplate',
type: 'post',
async: false,
cache: false,
data: 'type='+type+'&blank=true',
success: function (data) {
html += data;
}
});
} else {
html += elementHTML;
}
html += '
';
return html;
}
Editor.prototype.getMaxID = function(type) {
// if(type == 'element') e = '.drop-element'; else e = '';
max = 0;
$('.drop-element , .wrapper-outside').each(function(i){
id = parseInt($(this).attr('data-id'));
if(id > max) max = id;
});
return max;
}
Editor.prototype.clearCols = function (elem, type) {
col = elem.parent();
row = col.parent();
elem.remove();
if(type == 'deleteElement') deleteCssFrObj(elem);
if(col.find('.drop-element').length == 0) col.remove();
if(row.find('.drop-col').length == 0) {
wrap = row.parent().parent();
row.remove();
if(wrap.find('.drop-row').length == 0) {
wrap.remove();
deleteCssFrObj(wrap);
}
}
if(col.find('.drop-element').length == 0) {
// alert('1ss')
dropCount = row.find('.drop-col').length;
var addClass;
if(dropCount == 1) addClass = 'col60';
if(dropCount == 2) addClass = 'col30';
if(dropCount == 3) addClass = 'col20';
if(dropCount == 4) addClass = 'col15';
if(dropCount == 5) addClass = 'col12';
if(dropCount == 6) addClass = 'col10';
row.find('.drop-col').each(function(i){ $(this).removeClass(function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); }).addClass(addClass) });
}
}
Editor.prototype.insertBlock = function(target, type) {
info = Settings.insertCords; // position; ei; ci; ri; bi
targetInfo = {
bi: target.attr('data-box'),
ri: target.attr('data-row'),
ci: target.attr('data-col'),
ei: target.attr('data-element')
}
blockType = $(target).attr('data');
position = info.position;
// get position action
if(position == 'area') position ='0-col';
if(typeof position == 'undefined') return false;
posType = position.split('-');
pos = posType[0];
posType = posType[1];
wrapper = $('.drop-area').eq(info.bi).find('.drop-row').eq(info.ri).parent().parent();
row = $('.drop-area').eq(info.bi).find('.drop-row').eq(info.ri);
col = row.find('.drop-col').eq(info.ci);
elem = col.find('.drop-element').eq(info.ei);
colCount = row.find('.drop-col').length
if(type == 'block') {
elementID = this.getMaxID() + 1;
html = null;
} else {
targetElement = $('.drop-area').eq(targetInfo.bi).find('.drop-row').eq(targetInfo.ri).find('.drop-col').eq(targetInfo.ci).find('.drop-element').eq(targetInfo.ei);
blockType = targetElement.find('.drop-box').attr('data-type');
elementID = parseInt(targetElement.attr('data-id'));
oldCol = targetElement.parent();
html = targetElement.html();
}
html = this.getBlockTemplate(blockType, elementID, html);
newCol = '';
newCol += html;
newCol += '
';
wrapperID = (this.getMaxID() + 2);
newRow = ''
newRow += '
'
newRow += '
';
newRow += newCol;
newRow += '
';
newRow += '
';
newRow += '
';
newRow = $(newRow);
newCol = $(newCol);
newElem = $(html);
wrapperAdd = false;
if(position == 'left-col') {
if(colCount < 6) {
newCol.html(html);
newCol.insertBefore(col);
this.renderCols(row, col, newCol);
} else {
newRow.insertBefore(row);
// ADD BLOCK IN NEW ROW
}
} else if (position == 'right-col') {
if(colCount < 6) {
newCol.html(html);
newCol.insertAfter(col);
this.renderCols(row, col, newCol);
} else {
newRow.insertBefore(row);
// ADD BLOCK IN NEW ROW
}
} else if (position == 'top-col') {
newElem.insertBefore(elem);
} else if (position == 'bot-col') {
newElem.insertAfter(elem);
} else if (position == '0-col') { // ADD BLOCK IN NEW ROW
$('.drop-area').html(newRow);
wrapperAdd = true;
} else if (position == 'top-row') {
newRow.insertBefore(wrapper);
wrapperAdd = true;
} else if (position == 'bot-row') {
newRow.insertAfter(wrapper);
wrapperAdd = true;
}
if(type == 'mouse') {
this.clearCols(targetElement, oldCol);
} else {
setStylesObj(newElem);
}
if(wrapperAdd) {
setStylesObj(newRow);
}
Editor.checkDropNoneBlock();
Editor.clearElements();
this.showSaveBlock();
imagesLoaded( '#drop-to', function() {
Editor.renderNet();
});
Settings.insertCords = {
position: undefined,
ei: 0,
ci: 0,
ri: 0,
bi: 0
}
}
Editor.prototype.changeWidthCol = function (e, event) {
if(Settings.dragging != null) return false;
$this = this;
bi = parseInt($(e).attr('data-box'));
ri = parseInt($(e).attr('data-row'));
ci = parseInt($(e).attr('data-col'));
ei = parseInt($(e).attr('data-element'));
ci -= 1;
n1 = ci;
n2 = ci+1;
// alert(n1 + ' ' + n2)
e1 = $('.drop-area').eq(bi).find('.drop-row').eq(ri).find('.drop-col').eq(n1)
e2 = $('.drop-area').eq(bi).find('.drop-row').eq(ri).find('.drop-col').eq(n2)
net1 = $('.net-line[data-box='+bi+'][data-row='+ri+'][data-col='+n1+']');
net2 = $('.net-line[data-box='+bi+'][data-row='+ri+'][data-col='+n2+']');
Settings.lineDragging = true;
var col = 852/60,
xStart = event.pageX,
currientSteps = 0,
currientClass1 = Math.round(parseInt(e1.width())/col),
currientClass2 = Math.round(parseInt(e2.width())/col),
step = 0,
line = $(e),
offset = e1.parent().offset().left;
line.addClass('draggable');
$('#dragdrop').live("mousemove", ".drag-area", function(e) {
if(!Settings.lineDragging) return false;
mouseX = e.pageX;
delta = (mouseX-xStart) - currientSteps;
if(delta < 0) {
currientSteps = (delta/col)*-1;
if(Math.floor(currientSteps) != Math.floor(step) || step == 0) {
step = currientSteps;
currientSteps = Math.floor(currientSteps);
if(step >= currientSteps && (currientClass1 - 1) > 3) {
xStart = mouseX;
currientClass1 -= 1;
currientClass2 += 1;
e1.removeClass(function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); });
e1.addClass('col'+currientClass1);
e2.removeClass(function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); });
e2.addClass('col'+currientClass2);
offset = e2.offset();
line.css('left', offset.left - 10);
// $this.renderCol(e1.parent());
}
}
} else {
currientSteps = (delta/col);
if(Math.floor(currientSteps) != Math.floor(step) || step == 0) {
step = currientSteps;
currientSteps = Math.floor(currientSteps);
if(step >= currientSteps && (currientClass2 - 1) > 3) {
xStart = mouseX;
currientClass1 += 1;
currientClass2 -= 1;
e1.removeClass(function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); });
e1.addClass('col'+currientClass1);
e2.removeClass(function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); });
e2.addClass('col'+currientClass2);
offset = e2.offset();
line.css('left', offset.left - 10);
// $this.renderCol(e1.parent());
}
}
}
if(e1.find('.box-img').length > 0) {
e1.find('.box-img').each(function(i) {
Editor.resetImage($(this));
})
}
if(e2.find('.box-img').length > 0) {
e2.find('.box-img').each(function(i) {
Editor.resetImage($(this));
})
}
Editor.clearElements();
}).live("mouseup", ".drag-area", function(e) {
$this.onChangeLineEnd(line, event);
});
}
Editor.prototype.changeHeightElement = function (e, event) {
if(Settings.dragging != null) return false;
$this = this;
bi = parseInt($(e).attr('data-box'));
ri = parseInt($(e).attr('data-row'));
ci = parseInt($(e).attr('data-col'));
ei = parseInt($(e).attr('data-element'));
col = $('.drop-area').eq(bi).find('.drop-row').eq(ri).find('.drop-col').eq(ci);
var elem = col.find('.drop-element').eq(ei).find('.drop-box').children();
type = elem.parent().attr('data-type');
Settings.lineDragging = true;
var row = 852/60,
yStart = event.pageY,
currientSteps = 0,
currientClass = Math.round(parseInt(elem.height())/row),
step = 0,
line = $(e),
minClass = 1;
if(type =='video') minClass = 11;
if(type =='image') minClass = 5;
// alert(minClass1
line.addClass('draggable');
$('#dragdrop').live("mousemove", ".drag-area", function(e) {
if(!Settings.lineDragging) return false;
mouseY = e.pageY;
delta = (mouseY-yStart) - currientSteps;
if(delta < 0) {
currientSteps = (delta/row)*-1;
if(Math.floor(currientSteps) != Math.floor(step) || step == 0) {
step = currientSteps;
currientSteps = Math.floor(currientSteps);
if(step >= currientSteps && (currientClass - 1) > minClass) {
yStart = mouseY;
currientClass -= 1;
elem.removeClass(function (index, css) { return (css.match (/\brow\S+/g) || []).join(' '); });
elem.addClass('row'+currientClass);
dropElement = elem.parent().parent();
pad = parseInt(dropElement.css('padding-top')) + parseInt(dropElement.css('padding-bottom'));
line.css('top', dropElement.offset().top + (currientClass*row) + pad);
// $this.renderCol(col.parent());
}
}
} else {
currientSteps = (delta/row);
if(Math.floor(currientSteps) != Math.floor(step) || step == 0) {
step = currientSteps;
currientSteps = Math.floor(currientSteps);
if(step >= currientSteps && (currientClass + 1) < 45) {
yStart = mouseY;
currientClass += 1;
elem.removeClass(function (index, css) { return (css.match (/\brow\S+/g) || []).join(' '); });
elem.addClass('row'+currientClass);
dropElement = elem.parent().parent();
pad = parseInt(dropElement.css('padding-top')) + parseInt(dropElement.css('padding-bottom'));
line.css('top', dropElement.offset().top + (currientClass*row) + pad);
// $this.renderCol(col.parent());
}
}
}
if(elem.attr('class').substring(0, 7) == 'box-img') Editor.resetImage(elem);
Editor.clearElements();
}).live("mouseup", ".drag-area", function(e) {
$this.onChangeLineEnd(line, event);
});
}
Editor.prototype.onChangeLineEnd = function(line2, event) {
$('#dragdrop').die('mousedown').die('mouseup').die("mousemove");
bindMousemove();
Settings.lineDragging = false;
line2.removeClass('draggable').removeClass('choosen');
line2.find('.arrows').hide();
$this.showSaveBlock();
$this.setArrayElements();
Editor.renderNet();
}
Editor.prototype.renderCols = function (row, col, nowObj) {
cols = row.find('.drop-col');
var same = true,
colSize,
colRegexp = new RegExp('col', 'g');
// Check if cols are the same size
cols.each(function(i){
if(nowObj[0] != $(this)[0]) {
colSizeNow = parseInt($(this).attr('class').match (/\bcol\S+/g).join(' ').replace(colRegexp, ''));
if(i != 0 && !$(this).is(col)) {
if(colSize != colSizeNow) {
same = false;
}
colSize = colSizeNow;
} else {
colSize = parseInt(cols.eq(i).attr('class').match (/\bcol\S+/g).join(' ').replace(colRegexp, ''));
}
}
});
if(same) {
// if all the same - isert new block and update width to equal for every cols
countCols = cols.length;
if(countCols == 1) addClass = 'col60';
if(countCols == 2) addClass = 'col30';
if(countCols == 3) addClass = 'col20';
if(countCols == 4) addClass = 'col15';
if(countCols == 5) addClass = 'col12';
if(countCols == 6) addClass = 'col10';
cols.each(function(i){ $(this).removeClass (function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); }).addClass(addClass) });
} else {
// make new block and other one (left, right) the same equal, which separated by half an a half
size = col.attr('class').match(/\bcol\S+/g).join(' ').replace(colRegexp, '');
colOne = 0;
colTwo = 0;
if(size % 2 == 0) { colOne = size / 2; colTwo = colOne; }
if(size % 2 != 0) { colOne = Math.floor(size / 2); colTwo = 1+colOne; }
if(size == 1) {
countCols = cols.length;
if(countCols == 1) addClass = 'col60';
if(countCols == 2) addClass = 'col30';
if(countCols == 3) addClass = 'col20';
if(countCols == 4) addClass = 'col15';
if(countCols == 5) addClass = 'col12';
if(countCols == 6) addClass = 'col10';
cols.each(function(i){ $(this).removeClass (function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); }).addClass(addClass) });
} else {
// cols
n1 = col.index();
n2 = (n1 >= 1) ? (n1-1) : (n1+1);
cols.eq(n1).each(function(i){ $(this).removeClass (function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); }).addClass('col'+colOne) });
cols.eq(n2).each(function(i){ $(this).removeClass (function (index, css) { return (css.match (/\bcol\S+/g) || []).join(' '); }).addClass('col'+colTwo) });
}
}
}
Editor.prototype.clearElements = function () {
$('#drop-to').find('input').mousedown(function(event) { event.preventDefault(); });
$('img').mousedown(function(event) { event.preventDefault(); });
$('.box-img').each(function(i){ imageRender($(this)); });
}
Editor.prototype.resetImage = function (e) {
imageBlock = e.find('.image');
img = e.find('img');
img.css('margin-top', 0);
img.css('margin-left', 0);
input = e.parent().parent().find('input[name=content]');
json = $.parseJSON(decodeURIComponent(input.val()));
json.sizeMar = 0;
json = encodeURIComponent(JSON.stringify(json));
input.val(json);
}
Editor.prototype.hightLight = function (type) {
if(type == 'deny') {
$('body').attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
} else {
$('body').removeAttr('unselectable')
.css({'-moz-user-select':'text',
'-moz-user-select':'text',
'-o-user-select':'text',
'-khtml-user-select':'text',
'-webkit-user-select':'text',
'-ms-user-select':'text',
'user-select':'text'
}).unbind('selectstart');
}
}
Editor.prototype.hoverMergeBlock = function (e, evt, type) {
block = $(e).parent().parent().parent();
if(type == 'up') {
block.prev().addClass('hoverWrapMerge');
} else {
block.next().addClass('hoverWrapMerge');
}
}
Editor.prototype.unhoverMergeBlock = function (e, evt, type) {
block = $(e).parent().parent().parent();
if(type == 'up') {
block.prev().removeClass('hoverWrapMerge');
} else {
block.next().removeClass('hoverWrapMerge');
}
}
Editor.prototype.hoverWrapper = function (e, evt) {
if(!$(e).hasClass('choosen') && $('.dragging').length == 0 && Settings.actionAllow && !Settings.lineDragging) {
$(e).parent().addClass('hoverWrapper');
}
// evt.stopPropagation();
}
Editor.prototype.unhoverWrapper = function (e, evt) {
$(e).parent().removeClass('hoverWrapper');
}
Editor.prototype.checkDropNoneBlock = function (e, evt) {
if($('#drop-to .drop-area').find('.drop-element').length > 0) {
$('#drop-area-none').remove();
} else {
html = 'Перетащите сюда что-нибудь
'
$('#drop-to .drop-area').html(html);
}
}
// Editor.prototype.renderElemen = function (e, evt) {
// $('.box-img').each(function(i){ imageRender($(this)); });
// }
Editor.prototype.Wsywig = function () {
$this = Editor;
}
// focusText
Editor.prototype.Wsywig.focusTextBlock = function (e) {
$('#wrap_lines').html('');
$('#dragdrop').die('mousedown').die('mouseup');
Settings.actionAllow = false;
$this.hightLight('allow');
$(e).focus();
id = $(e).parent().parent().attr('data-id');
offset = $(e).offset();
x = offset.left;
y = offset.top;
$('#wsywig').remove();
htmlBlock = '';
htmlBlock += '
B ';
htmlBlock += '
I';
htmlBlock += '
U';
htmlBlock += '
h1 ';
htmlBlock += '
h2 ';
htmlBlock += '
h3 ';
htmlBlock += '
A ';
// htmlBlock += '
';
// htmlBlock += '
';
htmlBlock += '
';
htmlBlock += '
';
htmlBlock += '
';
htmlBlock += '
';
htmlBlock += '
С ';
htmlBlock += '
';
$('body').append(htmlBlock);
$('#wsywig').css({
'top': (y-35)+'px',
'left': (x)+'px',
})
if( $(e).html() == 'Нажмите «редактирование содержания», чтобы изменить текст') {
$(e).html(' ');
$(e).removeClass('onCreate');
}
}
// keyupText
Editor.prototype.Wsywig.onKeyup = function (e) {
if($(e).html() == ' ' || $(e).html() == '') {
val = 'Нажмите «редактирование содержания», чтобы изменить текст';
} else val = $(e).html();
input = $(e).parent().parent().find('input[name=content]');
input.val('{"text": "'+encodeURIComponent(cleanFix(val))+'"}');
// console.log(cleanFix(val))
// .replace(/"/g, "'")
Editor.showSaveBlock();
$(e).focus();
}
// blurText
Editor.prototype.Wsywig.blurTextBlock = function (e) {
if($(e).html() == ' ' || $(e).html() == '') {
$(e).html('Нажмите «редактирование содержания», чтобы изменить текст');
$(e).addClass('onCreate');
}
$('#wsywig').remove();
$this.hightLight('deny');
// Editor.renderNet();
}
// clearHeadline
Editor.prototype.Wsywig.clearTextBlock = function (e) {
e.find('strong strong, u u, i i, h1 h1, h2 h2, h3 h3').unwrap();
}
// wsywig
Editor.prototype.Wsywig.action = function (e, type, event) {
// Settings.actionAllow = false;
ei = $(e).parent().attr('data-element');
elem = $('.drop-element[data-id='+ei+'] .box-text');
Editor.cache = elem;
if(type == 'bold') { document.execCommand("bold", false, null); }
if(type == 'italic') { document.execCommand("italic", false, null); }
if(type == 'underline') { document.execCommand("underline", false, null); }
if(type == 'h1') { document.execCommand('formatBlock', false, ''); }
if(type == 'h2') { document.execCommand('formatBlock', false, ''); }
if(type == 'h3') { document.execCommand('formatBlock', false, ''); }
if(type == 'A') { document.execCommand('formatBlock', false, 'div'); }
if(type == 'unorderedlist') { document.execCommand('insertunorderedlist', false, null); }
if(type == 'orderedlist') { document.execCommand('insertunorderedlist', false, null); }
if(type == 'tl') { document.execCommand("JustifyLeft", false, null); }
if(type == 'tc') { document.execCommand("JustifyCenter", false, null); }
if(type == 'tr') { document.execCommand("JustifyRight", false, null); }
if(type == 'a') {
elem = elem.parent().parent();
Settings.cache = rangy.saveSelection();
blankSet('link');
event.preventDefault();
return false;
}
if(type == 'css') {
id = Settings.netElement.attr('id');
net = $('#'+id);
net.addClass('choosen');
Settings.netElement = net;
Settings.netCords = {
bi: net.attr('data-box'),
ri: net.attr('data-row'),
ci: net.attr('data-col'),
ei: net.attr('data-element')
};
Settings.element = Editor.getElementPosition(net).element;
Editor.renderCol(Settings.element.parent().parent());
$('#wsywig').remove();
$(elem).blur();
Settings.actionAllow = true;
blankSet('css');
event.preventDefault();
return false;
}
this.clearTextBlock(elem);
this.onKeyup(elem);
Editor.showSaveBlock();
// Editor.renderNet();
$this.Wsywig.focusTextBlock(elem[0]);
// console.log($(elem).attr('class'))
event.preventDefault();
return false;
}
function bindMousemove() {
var dragging = Settings.dragging,
scroll = Settings.setScroll,
dragPlotOfsset = $('#drag-from').offset(),
target,
type,
move = false,
scroll = Settings.setScroll;
$('#dragdrop').live('mousedown', ".drag-area", function(e) {
if(Settings.actionAllow == false) e.preventDefault();
$this.hightLight('deny');
target = $(e.target);
targetOffset = target.offset();
targetY = targetOffset.top;
targetX = targetOffset.left;
var yDelta = e.pageY - targetY,
xDelta = e.pageX - targetX - 10;
$('#dragdrop').live("mousemove", ".drag-area", function(e) {
if (Settings.dragging) {
move = true;
mouseY = e.pageY;
mouseX = e.pageX;
Settings.mouseY = mouseY;
Settings.mouseX = mouseX;
$('#element_move').css({
'top': mouseY + 10,
'left': mouseX + 10,
});
// set holders
Editor.findHolderOnMove();
}
});
if($(e.target).hasClass('drag-area')) {
Settings.dragging = $(e.target).parent();
type = 'object';
Settings.mouseY = e.pageY - Settings.setScroll;
Settings.mouseX = e.pageX;
move = true;
Editor.prepareDragging(target, type+'_move_start');
} else if(target.closest('.moveButton').length == 1 || target.hasClass('moveButton')) {
if(target.hasClass('moveButton')) Settings.dragging = $(target); else Settings.dragging = target.closest('.moveButton');
Settings.dragging = Settings.dragging.parent().parent();
type = 'element';
Settings.mouseY = e.pageY - scroll;
Settings.mouseX = e.pageX;
move = true;
Editor.prepareDragging(Settings.dragging, 'element_move_start');
} else Settings.dragging = null;
}).live("mouseup", ".draggable", function(e) {
$this.hightLight('allow');
Editor.prepareDragging(target, type+'_move_end');
Settings.dragging = null;
move = false;
$('#element_move').remove();
});
}
var Editor = new Editor();
$(document).ready(function() {
if($('#dragdrop').length > 0) {
Editor.checkDropNoneBlock();
Editor.hightLight('deny');
timersUpdate();
loadingOverlay('full');
imagesLoaded( '#drop-to', function() {
Editor.renderNet();
Editor.clearElements();
exitOverlay();
});
$('body').click(function(event){
$('.tipsy').remove();
var element = event.target;
boxText = $(element).closest('.drop-element').find('.box-text');
modalS = $(element).closest('#modal-content');
if($(element).attr('id') != '#wsywig' && $(element).closest('#wsywig').length == 0 && $(element).closest('.buttons').length == 0 && $(element).closest('.net-line').length == 0 && boxText.length == 0 && modalS.length == 0) {
$('#wsywig').remove();
$('.box-text').each(function(i) {
Editor.Wsywig.blurTextBlock($(this)[0]);
});
Settings.actionAllow = true;
$('#dragdrop').die('mousedown').die('mouseup');
bindMousemove();
Editor.renderNet();
}
});
$(window).scroll(function() {
Settings.setScroll = $(window).scrollTop();
scroll = Settings.setScroll;
});
Settings.actionAllow = true;
bindMousemove();
}
functionLoad();
});