$ ->\r
confirm_confirm_confirm = () ->\r
confirm( )\r
- escapeHTML = (t) ->\r
- $("<div/>").text(t).html()\r
-\r
- set_tree_value = (keys, last_attr, value) ->\r
- key = keys.shift()\r
- if keys.length <= 0\r
- last_attr[key] = value\r
+ editor = window.PettanrEditor\r
+ configurations = window.configurations\r
+ WritingFormat = window.PettanrWritingFormat\r
+ WritingFormat.load($('#writing_formats'))\r
+ SpeechBalloonTemplate = window.PettanrSpeechBalloonTemplate\r
+ SpeechBalloonTemplate.load($('#speech_balloon_templates'))\r
+ for n, v of SpeechBalloonTemplate.scripts\r
+ v.onLoad()\r
+ v.add_helper( n, '' )\r
+ PictureSizeHelper = window.PettanrPictureSizeHelper\r
+ ColorHelper = window.PettanrColorHelper\r
+ \r
+ find_configurations = ( hash, key) ->\r
+ if typeof(hash[key]) == 'string'\r
+ find_configurations(hash, hash[key])\r
else\r
- last_attr[key] = last_attr[key] || {}\r
- set_tree_value(keys, last_attr[key], value)\r
-\r
- repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']\r
- \r
- is_editable = (p) ->\r
- if p.parent().attr('editable')\r
- return true\r
+ return hash[key]\r
+ \r
+ set_validates = (form) ->\r
+ rules = {}\r
+ $('input', form).map ->\r
+ model_name = $(@).attr('data-model')\r
+ column_name = $(@).attr('column')\r
+ name = $(@).attr('name')\r
+ if model_name and column_name\r
+ model = find_configurations(configurations['models'], model_name)\r
+ rule = model['attributes'][column_name]['rules']\r
+ trace = editor.element_tag_id($(@)) \r
+ if rule\r
+ rules[name] = rule\r
+ $(@).focusout ->\r
+ if editor.is_panel(form)\r
+ validate_panel(form)\r
+ else\r
+ validate_element(form)\r
+ if Object.keys(rules).length > 0\r
+ v = form.validate({ignore:[],rules: rules})\r
+ \r
+ validate_panel = (form) ->\r
+ valid = form.valid()\r
+ bc = if valid\r
+ ''\r
else\r
- return false\r
- is_tree = (o) ->\r
- if o.attr('tree') \r
- if o.attr('column') == '_destroy' and o.val().length < 1\r
- return false\r
- else\r
- return true\r
- return true\r
+ '#ef29ef'\r
+ $('a', $('#tabs-1-tab')).map ->\r
+ $(@).css('background-color', bc)\r
+ valid\r
+ \r
+ display_element = (element, vis) ->\r
+ v = if vis\r
+ ''\r
else\r
- return false\r
- \r
- panel_tag_id = (element) ->\r
- '#panel' + element.attr('panel_id')\r
- \r
- element_tag_id = (element) ->\r
- '#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')\r
- \r
- refresh_attribute = () ->\r
- attr = {}\r
- $('input').map ->\r
- if is_tree($(@)) \r
- keys = $(@).attr('tree').split('-')\r
- set_tree_value(keys, attr, $(this).val())\r
- $('textarea').map ->\r
- if is_tree($(@)) \r
- keys = $(@).attr('tree').split('-')\r
- set_tree_value(keys, attr, $(this).val())\r
- $('select').map ->\r
- if is_tree($(@)) \r
- keys = $(@).attr('tree').split('-')\r
- set_tree_value(keys, attr, $(this).val())\r
- $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
- \r
- $('#tabs').tabs()\r
- $('#elements-tabs').tabs()\r
- $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
- $("#elements-tabs li").removeClass("ui-corner-top")\r
- $("#elements-tabs li").addClass("ui-corner-left")\r
- $("#elements-tabs li").map ->\r
- $(@).mouseover -> \r
- switch $(@).attr('element_type')\r
- when 'speech_balloon'\r
- trace = element_tag_id($(@)) \r
- t = $('img', $(trace))\r
- when 'panel_picture'\r
- trace = element_tag_id($(@)) + 'img'\r
- t = $(trace)\r
+ 'none'\r
+ trace = editor.element_tag_id(element)\r
+ switch element.attr('element_type')\r
+ when 'panel_picture'\r
+ trace = trace + 'div'\r
+ $(trace).css('display', v)\r
+ \r
+ validate_element = (form) ->\r
+ valid = form.valid()\r
+ bc = if valid\r
+ ''\r
+ else\r
+ '#ef29ef'\r
+ display_element(form, valid)\r
+ trace = editor.element_tag_id(form) \r
+ $('.elements-tab', $(trace + 'element_tab')).map ->\r
+ $(@).css('background-color', bc)\r
+ valid\r
+ \r
+ validate_forms = () ->\r
+ valid = true\r
+ $('form', $('#tabs-1')).map ->\r
+ form_name = $(@).attr('data-form-name')\r
+ if form_name\r
+ if validate_panel($(@))\r
else\r
- t = null\r
- if t\r
- $('.ui-resizable-handle', t.parent()).map ->\r
- $(@).css('display', 'block')\r
- $(@).mouseout -> \r
- switch $(@).attr('element_type')\r
- when 'speech_balloon'\r
- trace = element_tag_id($(@)) \r
- t = $('img', $(trace))\r
- when 'panel_picture'\r
- trace = element_tag_id($(@)) + 'img'\r
- t = $(trace)\r
+ valid = false\r
+ invalid_elements = []\r
+ $('form', $('#tabs-2')).map ->\r
+ form_name = $(@).attr('data-form-name')\r
+ if form_name\r
+ if validate_element($(@))\r
else\r
- t = null\r
- if t\r
- $('.ui-resizable-handle', t.parent()).map ->\r
- $(@).css('display', 'none')\r
- \r
- #destroy button\r
- $('.ui-icon-destroy').map ->\r
- $(@).button {\r
- icons: {\r
- primary: 'ui-icon-close', \r
- secondary: null\r
- }, \r
- text: false\r
- }\r
- $(@).click -> \r
- if confirm('destroy ?')\r
- trace = element_tag_id($(@))\r
- $(trace + '_destroy').val('true')\r
- panel_trace = panel_tag_id($(@))\r
- update_t(panel_trace + 'tsort')\r
- update_z(panel_trace + 'zsort')\r
- # sync\r
- $(trace + 'element_tab').css('display', 'none')\r
- $(trace + 'tab_panel').css('display', 'none')\r
- $(trace + 'zsort').css('display', 'none')\r
- $(trace + 'tsort').css('display', 'none')\r
+ valid = false\r
+ invalid_elements.push form_name\r
+ if invalid_elements.length > 0\r
+ bc = '#ef29ef'\r
+ else\r
+ bc = ''\r
+ $('a', $('#tabs-2-tab')).map ->\r
+ $(@).css('background-color', bc)\r
+ return valid\r
+ $('form').map ->\r
+ form_name = $(@).attr('data-form-name')\r
+ if form_name\r
+ form = $(this)\r
+ set_validates(form)\r
+ $('.panel-editor').map ->\r
+ if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
+ editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
+ if editor.is_editting()\r
+ $('#tabs').tabs()\r
+ $('#elements-tabs').tabs()\r
+ $('#new-element-tabs').tabs()\r
+ $('#new-speech_balloon-tabs').tabs()\r
+ $('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )\r
+ $("#elements-tabs li").removeClass("ui-corner-top")\r
+ $("#elements-tabs li").addClass("ui-corner-left")\r
+ $("#elements-tabs li").map ->\r
+ $(@).mouseover -> \r
switch $(@).attr('element_type')\r
+ when 'speech_balloon'\r
+ trace = editor.element_tag_id($(@)) \r
+ t = $('img', $(trace))\r
when 'panel_picture'\r
- trace = trace + 'div'\r
- $(trace).css('display', 'none')\r
- \r
- \r
- $('#pettanr-panel-submit').focusin ->\r
- refresh_attribute()\r
- \r
- # panel\r
- $('.pettanr-comic-panel').map ->\r
- if is_editable($(@))\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
+ t = $(trace)\r
+ else\r
+ t = null\r
+ if t\r
+ $('.ui-resizable-handle', t.parent()).map ->\r
+ $(@).css('display', 'block')\r
+ $(@).mouseout -> \r
+ switch $(@).attr('element_type')\r
+ when 'speech_balloon'\r
+ trace = editor.element_tag_id($(@)) \r
+ t = $('img', $(trace))\r
+ when 'panel_picture'\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
+ t = $(trace)\r
+ else\r
+ t = null\r
+ if t\r
+ $('.ui-resizable-handle', t.parent()).map ->\r
+ $(@).css('display', 'none')\r
+ \r
+ #destroy button\r
+ $('.ui-icon-destroy').map ->\r
+ $(@).button {\r
+ icons: {\r
+ primary: 'ui-icon-close', \r
+ secondary: null\r
+ }, \r
+ text: false\r
+ }\r
+ $(@).click -> \r
+ if confirm('destroy ?')\r
+ trace = editor.element_tag_id($(@))\r
+ $(trace + '_destroy').val('true')\r
+ panel_trace = editor.panel_tag_id($(@))\r
+ update_t(panel_trace + 'tsort')\r
+ update_z(panel_trace + 'zsort')\r
+ # sync\r
+ $(trace + 'element_tab').css('display', 'none')\r
+ $(trace + 'tab_panel').css('display', 'none')\r
+ $(trace + 'zsort').css('display', 'none')\r
+ $(trace + 'tsort').css('display', 'none')\r
+ display_element($(@), false)\r
+ \r
+ $('#pettanr-panel-submit').focusin ->\r
+ editor.refresh_attribute($('#pettanr-panel-json'))\r
+ \r
+ # panel\r
+ $('.pettanr-comic-panel').map ->\r
+ if editor.is_editable($(@))\r
+ $(@).resizable {\r
+ stop: ( event, ui ) ->\r
+ trace = editor.panel_tag_id($(@))\r
+ w = parseInt($(@).width())\r
+ h = parseInt($(@).height())\r
+ $(trace + 'width').val(w)\r
+ $(trace + 'height').val(h)\r
+ $('.pettanr-comic-ground-picture').map ->\r
+ $(@).width(w)\r
+ $(@).height(h)\r
+ $('.pettanr-comic-ground-color').map ->\r
+ $(@).width(w)\r
+ $(@).height(h)\r
+ , autoHide: true\r
+ }\r
+ \r
+ # sync view \r
+ $('input').map ->\r
+ if $(@).attr('element_type')\r
+ else\r
+ if $(@).attr('panel_id')\r
+ $(@).focusout ->\r
+ switch $(@).attr('column')\r
+ when 'width'\r
+ trace = editor.panel_tag_id($(@))\r
+ $(trace).width(parseInt( $(@).val()))\r
+ when 'height'\r
+ trace = editor.panel_tag_id($(@))\r
+ $(trace).height(parseInt( $(@).val()))\r
+ when 'border'\r
+ trace = editor.panel_tag_id($(@))\r
+ $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
+ \r
+ # panel picture\r
+ PictureSizeHelper.add_helper()\r
+ \r
+ $('.pettanr-panel-picture-wrapper').map ->\r
+ $(@).draggable {\r
+ stop: ( event, ui ) ->\r
+ trace = editor.element_tag_id($(@))\r
+ img = $(trace + 'img')\r
+ left = img.parent().position().left + $(@).position().left\r
+ top = img.parent().position().top + $(@).position().top\r
+ $(trace + 'x').val(parseInt(left))\r
+ $(trace + 'y').val(parseInt(top))\r
+ }\r
+ \r
+ $('.panel-picture').map ->\r
$(@).resizable {\r
stop: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
- w = parseInt($(@).width())\r
- h = parseInt($(@).height())\r
+ resize_div = $(@)\r
+ panel_picture_div = resize_div.parent()\r
+ trace = editor.element_tag_id(panel_picture_div)\r
+ \r
+ resize_div.css('top', '0px')\r
+ resize_div.css('left', '0px')\r
+ if ui.originalPosition.top != ui.position.top\r
+ t = panel_picture_div.position().top + ui.position.top\r
+ $(trace + 'y').val(Math.floor(t))\r
+ panel_picture_div.css('top', t.toString() + 'px')\r
+ if ui.originalPosition.left != ui.position.left\r
+ l = panel_picture_div.position().left + ui.position.left\r
+ $(trace + 'x').val(Math.floor(l))\r
+ panel_picture_div.css('left', l.toString() + 'px')\r
+ w = if $(trace + 'width').val() < 0\r
+ -ui.size.width\r
+ else\r
+ ui.size.width\r
+ h = if $(trace + 'height').val() < 0\r
+ -ui.size.height\r
+ else\r
+ ui.size.height\r
$(trace + 'width').val(w)\r
$(trace + 'height').val(h)\r
- $('.pettanr-comic-ground-picture').map ->\r
- $(@).width(w)\r
- $(@).height(h)\r
- $('.pettanr-comic-ground-color').map ->\r
- $(@).width(w)\r
- $(@).height(h)\r
- , autoHide: true\r
+ resize: ( event, ui ) ->\r
+ resize_div = $(@)\r
+ panel_picture_div = resize_div.parent()\r
+ trace = editor.element_tag_id(panel_picture_div)\r
+ handles: 'all',\r
+ autoHide: true\r
}\r
- # sync view \r
- $('#panel' + pettanr_current_panel_id.toString() + 'width').focusout ->\r
- trace = '#panel' + $(@).attr('panel_id')\r
- $(trace).width(parseInt( $(@).val()))\r
- \r
- $('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->\r
- trace = '#panel' + $(@).attr('panel_id')\r
- $(trace).height(parseInt( $(@).val()))\r
- \r
- $('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->\r
- trace = '#panel' + $(@).attr('panel_id')\r
- $(trace).css('border-width', parseInt($(@).val()).toString() + 'px')\r
- \r
- \r
- # panel picture\r
- $('.pettanr-panel-picture-wrapper').map ->\r
- $(@).draggable {\r
- stop: ( event, ui ) ->\r
- trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')\r
- img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'\r
- left = $(img).parent().position().left + $(@).position().left\r
- top = $(img ).parent().position().top + $(@).position().top\r
- $(trace + 'x').val(parseInt(left))\r
- $(trace + 'y').val(parseInt(top))\r
- }\r
- \r
- $('.panel-picture').map ->\r
- $(@).resizable {\r
- stop: ( event, ui ) ->\r
- trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')\r
- $(trace + 'width').val($(@).width())\r
- $(trace + 'height').val($(@).height())\r
- handles: 'all',\r
- autoHide: true\r
- }\r
- \r
- refresh_picture = (e, w, h) ->\r
- if w and h\r
- sd = ''\r
- if h < 0\r
- sd += 'v'\r
- if w < 0\r
- sd += 'h'\r
- if sd.length > 0\r
- sd += '/'\r
- pid = parseInt(e.attr('picture_id')).toString()\r
- ext = e.attr('ext')\r
- src = '/pictures/' + sd + pid + '.' + ext\r
- e.attr('src', src)\r
- \r
- # sync view \r
- $('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'\r
- $(@).focusout ->\r
- switch $(@).attr('column')\r
- when 'x'\r
- trace = element_tag_id($(@)) + 'div'\r
- v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).css('left', v)\r
- when 'y'\r
- trace = element_tag_id($(@)) + 'div'\r
- v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).css('top', v)\r
- when 'width'\r
- trace = element_tag_id($(@)) + 'img'\r
- w = parseInt($(@).val())\r
- $(trace).width(Math.abs(w))\r
- $(trace).parent().width(Math.abs(w))\r
- h = parseInt($(element_tag_id($(@)) + 'height').val())\r
- when 'height'\r
- trace = element_tag_id($(@)) + 'img'\r
- h = parseInt($(@).val())\r
- $(trace).height(Math.abs(h))\r
- $(trace).parent().height(Math.abs(h))\r
- w = parseInt($(element_tag_id($(@)) + 'width').val())\r
- else\r
- refresh_picture($(trace), w, h)\r
- else\r
- \r
- # speech_balloons\r
- $('.pettanr-comic-balloon' ).map ->\r
- $(@).draggable {\r
- stop: ( event, ui ) ->\r
- trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
- left = $(@).position().left\r
- top = $(@).position().top\r
- $(trace + 'x').val(parseInt(left))\r
- $(trace + 'y').val(parseInt(top))\r
- }\r
-\r
- \r
- $('.pettanr-balloon' ).map ->\r
- $(@).resizable {\r
- stop: ( event, ui ) ->\r
- trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')\r
- $(trace + 'width').val($(@).width())\r
- $(trace + 'height').val($(@).height())\r
- resize: ( event, ui ) ->\r
- trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')\r
- $(trace).width($(@).width())\r
- $(trace).height($(@).height())\r
- handles: 'all',\r
- autoHide: true\r
- }\r
- $('.pettanr-comic-balloon span' ).map ->\r
- p = $(@).parent()\r
- sb = p.parent()\r
- sb.mouseover -> \r
- trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
- img = $(trace)\r
- $('.ui-resizable-handle', img.parent()).map ->\r
- $(@).css('display', 'block')\r
- sb.mouseout -> \r
- trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')\r
- img = $(trace)\r
- $('.ui-resizable-handle', img.parent()).map ->\r
- $(@).css('display', 'none')\r
- \r
- \r
- # sync view \r
- $('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
- $(@).focusout ->\r
- switch $(@).attr('column')\r
- when 'x'\r
- trace = element_tag_id($(@))\r
- v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).css('left', v)\r
- when 'y'\r
- trace = element_tag_id($(@))\r
- v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).css('top', v)\r
- when 'width'\r
- trace = element_tag_id($(@))\r
- v = parseInt($(@).val())\r
- $(trace).width(Math.abs(v))\r
- trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
- $(trace).parent().width(v)\r
- $(trace).width(v)\r
- when 'height'\r
- trace = element_tag_id($(@))\r
- v = parseInt($(@).val())\r
- $(trace).height(Math.abs(v))\r
- trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')\r
- $(trace).parent().height(v)\r
- $(trace).height(v)\r
- else\r
- else\r
- $('textarea').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
- $(@).focusout ->\r
+ \r
+ # sync view \r
+ $('input').map ->\r
+ if editor.element_is('panel_picture', $(@))\r
+ $(@).focusout ->\r
+ switch $(@).attr('column')\r
+ when 'x'\r
+ trace = editor.element_tag_id($(@)) + 'div'\r
+ v = parseInt($(@).val()).toString() + 'px'\r
+ $(trace).css('left', v)\r
+ when 'y'\r
+ trace = editor.element_tag_id($(@)) + 'div'\r
+ v = parseInt($(@).val()).toString() + 'px'\r
+ $(trace).css('top', v)\r
+ when 'width'\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
+ w = parseInt($(@).val())\r
+ $(trace).width(Math.abs(w))\r
+ $(trace).parent().width(Math.abs(w))\r
+ h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
+ when 'height'\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
+ h = parseInt($(@).val())\r
+ $(trace).height(Math.abs(h))\r
+ $(trace).parent().height(Math.abs(h))\r
+ w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
+ else\r
+ PictureSizeHelper.refresh_picture($(trace), w, h)\r
+ else\r
+ \r
+ # speech_balloons\r
+ ColorHelper.add_helper($('.speech-fore_color-wrap'), 'fore_color')\r
+ \r
+ $('.pettanr-comic-balloon' ).map ->\r
+ $(@).draggable {\r
+ stop: ( event, ui ) ->\r
+ balloon = $('.pettanr-balloon', $(@))\r
+ trace = editor.element_part_tag_id(balloon)\r
+ left = $(@).position().left\r
+ top = $(@).position().top\r
+ $(trace + 'x').val(parseInt(left))\r
+ $(trace + 'y').val(parseInt(top))\r
+ }\r
+ \r
+ $('.pettanr-balloon' ).map ->\r
+ $(@).resizable {\r
+ stop: ( event, ui ) ->\r
+ resize_div = $(@)\r
+ speech_balloon_div = resize_div.parent()\r
+ balloon = $('.pettanr-balloon', $(@))\r
+ trace = editor.element_tag_id(speech_balloon_div)\r
+ trace_balloon = editor.element_part_tag_id(balloon)\r
+ \r
+ resize_div.css('top', '0px')\r
+ resize_div.css('left', '0px')\r
+ w = ui.size.width\r
+ h = ui.size.height\r
+ if ui.originalPosition.top != ui.position.top\r
+ t = speech_balloon_div.position().top + ui.position.top\r
+ $(trace_balloon + 'y').val(Math.floor(t))\r
+ speech_balloon_div.css('top', t.toString() + 'px')\r
+ speech_balloon_div.css('height', h + 'px')\r
+ if ui.originalPosition.left != ui.position.left\r
+ l = speech_balloon_div.position().left + ui.position.left\r
+ $(trace_balloon + 'x').val(Math.floor(l))\r
+ speech_balloon_div.css('left', l.toString() + 'px')\r
+ speech_balloon_div.css('width', w + 'px')\r
+ $(trace_balloon + 'width').val(w)\r
+ $(trace_balloon + 'height').val(h)\r
+ speech_balloon_div.css('width', w.toString() + 'px')\r
+ speech_balloon_div.css('height', h.toString() + 'px')\r
+ resize: ( event, ui ) ->\r
+ resize_div = $(@)\r
+ speech_balloon_div = resize_div.parent()\r
+ balloon = $('.pettanr-balloon', $(@))\r
+ trace = editor.element_tag_id(speech_balloon_div)\r
+ trace_balloon = editor.element_part_tag_id(balloon)\r
+ handles: 'all',\r
+ autoHide: true\r
+ }\r
+ \r
+ $('.pettanr-comic-speech-inner' ).map ->\r
+ $(@).mouseover -> \r
+ outer = $(@).parent()\r
+ sb = outer.parent()\r
+ trace = editor.element_tag_id(sb)\r
+ img = $('.pettanr-balloon', $(trace))\r
+ $('.ui-resizable-handle', img.parent()).map ->\r
+ $(@).css('display', 'block')\r
+ $(@).mouseout -> \r
+ outer = $(@).parent()\r
+ sb = outer.parent()\r
+ trace = editor.element_tag_id(sb)\r
+ img = $('.pettanr-balloon', $(trace))\r
+ $('.ui-resizable-handle', img.parent()).map ->\r
+ $(@).css('display', 'none')\r
+ \r
+ \r
+ # sync view \r
+ $('input').map ->\r
+ if editor.element_is('speech_balloon', $(@))\r
+ $(@).focusout ->\r
+ switch $(@).attr('column')\r
+ when 'x'\r
+ trace = editor.element_tag_id($(@))\r
+ v = parseInt($(@).val()).toString() + 'px'\r
+ $(trace).css('left', v)\r
+ when 'y'\r
+ trace = editor.element_tag_id($(@))\r
+ v = parseInt($(@).val()).toString() + 'px'\r
+ $(trace).css('top', v)\r
+ when 'width'\r
+ trace = editor.element_tag_id($(@))\r
+ v = parseInt($(@).val())\r
+ $(trace).width(Math.abs(v))\r
+ img = $('.pettanr-balloon', $(trace))\r
+ img.parent().width(v)\r
+ img.width(v)\r
+ when 'height'\r
+ trace = editor.element_tag_id($(@))\r
+ v = parseInt($(@).val())\r
+ $(trace).height(Math.abs(v))\r
+ img = $('.pettanr-balloon', $(trace))\r
+ img.parent().height(v)\r
+ img.height(v)\r
+ else\r
+ else\r
+ $('textarea').map ->\r
+ if editor.element_is('speech_balloon', $(@))\r
+ $(@).focusout ->\r
+ switch $(@).attr('column')\r
+ when 'content'\r
+ trace = editor.element_part_tag_id($(@))\r
+ wf_sel = $(trace + 'writing_format_id')\r
+ wf_id = parseInt(wf_sel.val())\r
+ v = WritingFormat.render(wf_id, $(@).val())\r
+ $(trace).html(v)\r
+ $('textarea').map ->\r
+ if editor.element_is('speech_balloon', $(@))\r
switch $(@).attr('column')\r
when 'content'\r
- trace = element_tag_id($(@))\r
- speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
- v = escapeHTML($(@).val())\r
- $(speech_trace).html(v)\r
- $('textarea').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
- switch $(@).attr('column')\r
- when 'content'\r
- $(@).bind('textchange', (event, previousText) ->\r
- trace = element_tag_id($(@))\r
- wf_sel = $(trace + 'writing_format_id')\r
- wf_id = parseInt(wf_sel.val())\r
- speech_trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')\r
- confirm( writing_formats[wf_id].toString() + '_render')\r
- v = escapeHTML($(@).val())\r
- $(speech_trace).html(v)\r
- )\r
+ $(@).bind('textchange', (event, previousText) ->\r
+ trace = editor.element_part_tag_id($(@))\r
+ wf_sel = $(trace + 'writing_format_id')\r
+ wf_id = parseInt(wf_sel.val())\r
+ v = WritingFormat.render(wf_id, $(@).val())\r
+ $(trace).html(v)\r
+ )\r
+ $('select').map ->\r
+ if editor.element_is('speech_balloon', $(@))\r
+ $(@).change ->\r
+ switch $(@).attr('column')\r
+ when 'font_size'\r
+ trace = editor.element_part_tag_id($(@))\r
+ $(trace).css('font-size', $(@).val() + 'em')\r
+ when 'text_align'\r
+ trace = editor.element_part_tag_id($(@))\r
+ v = parseInt($(@).val())\r
+ $(trace).css('text-align', editor.text_align_texts[v])\r
+ else\r
+ $('input').map ->\r
+ if editor.element_is('speech_balloon', $(@))\r
+ if $(@).attr('column') == 'fore_color'\r
+ $(@).hide()\r
\r
- \r
- # ground-picture\r
- # sync view \r
- $('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
- $(@).focusout ->\r
+ \r
+ # ground-picture\r
+ refresh_ground_picture = (element_trace) ->\r
+ x = parseInt($(element_trace + 'x').val()).toString() + 'px'\r
+ y = parseInt($(element_trace + 'y').val()).toString() + 'px'\r
+ $(element_trace).css('background-position', x + ' ' + y)\r
+ \r
+ # sync view \r
+ $('input').map ->\r
+ if editor.element_is('ground_picture', $(@))\r
switch $(@).attr('column')\r
when 'x', 'y'\r
- trace = element_tag_id($(@))\r
- x = parseInt($(@).val()).toString() + 'px'\r
- ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'\r
- y = parseInt($(ytrace).val()).toString() + 'px'\r
- $(trace).css('background-position', y + ' ' + x)\r
- $('select').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'\r
- $(@).change ->\r
- switch $(@).attr('column')\r
- when 'repeat'\r
- trace = element_tag_id($(@))\r
- v = parseInt($(@).val())\r
- $(trace).css('background-repeat', repeat_texts[v])\r
- else\r
- \r
- \r
- # ground_color\r
- # sync view \r
- $('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
- $(@).hide()\r
-\r
- color_slider_change = (trace) -> \r
- red = $(trace + 'code_red').slider('value')\r
- green = $(trace + 'code_green').slider('value')\r
- blue = $(trace + 'code_blue').slider('value')\r
- code = (red << 16) + (green << 8) + (blue)\r
- phex = "000000" + code.toString(16)\r
- hex = code.toString(16)\r
- h = phex.substring(phex.length - 6)\r
- $(trace + 'code_swatch').css('background-color', '#' + h)\r
- $(trace + 'code_hex').html('HEX: #' + h)\r
- $(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
- $(trace + 'code').val(code)\r
- v = '#' + h\r
- $(trace).css('background-color', v)\r
- \r
- $('.colorpicker').map -> \r
- code_picker_trace = element_tag_id($(@))\r
- code = parseInt($(code_picker_trace + 'code').val())\r
- red = (code >> 16) & 0xFF\r
- green = (code >> 8) & 0xFF\r
- blue = code & 0xFF\r
- $(code_picker_trace + 'code_red').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: red,\r
- change: ( event, ui ) ->\r
- trace = element_tag_id($(@).parent())\r
- color_slider_change(trace)\r
- }\r
- $(code_picker_trace + 'code_green').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: green,\r
- change: ( event, ui ) ->\r
- trace = element_tag_id($(@).parent())\r
- color_slider_change(trace)\r
- }\r
- $(code_picker_trace + 'code_blue').slider {\r
- orientation: 'horizontal',\r
- range: 'min',\r
- max: 255,\r
- value: blue,\r
- change: ( event, ui ) ->\r
- trace = element_tag_id($(@).parent())\r
- color_slider_change(trace)\r
- }\r
- color_slider_change(code_picker_trace)\r
- $('.colorpicker-wrap').map -> \r
- $(@).css('display', 'block')\r
- \r
- update_t = (ultrace) -> \r
- t = 0\r
- $(ultrace + ' li').map ->\r
- trace = element_tag_id($(@))\r
- if $(trace + '_destroy').val().length < 1\r
- $(trace + 't').val(t)\r
- t++\r
+ $(@).focusout ->\r
+ trace = editor.element_tag_id($(@))\r
+ refresh_ground_picture(trace)\r
+ $(@).spinner {\r
+ stop: ( event, ui ) ->\r
+ trace = editor.element_tag_id($(@))\r
+ refresh_ground_picture(trace)\r
+ }\r
+ $('select').map ->\r
+ if editor.element_is('ground_picture', $(@))\r
+ $(@).change ->\r
+ switch $(@).attr('column')\r
+ when 'repeat'\r
+ trace = editor.element_tag_id($(@))\r
+ v = parseInt($(@).val())\r
+ $(trace).css('background-repeat', editor.repeat_texts[v])\r
else\r
- \r
- $('.tsort').map -> \r
- $(@).sortable {\r
- update: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
- update_t(trace + 'tsort')\r
- }\r
- $('.t-sort li').map -> \r
- $(@).disableSelection()\r
- \r
- update_z = (ultrace) -> \r
- z = 1\r
- $(ultrace + ' li').map ->\r
- trace = element_tag_id($(@))\r
- # update panel\r
- if $(trace + '_destroy').val().length < 1\r
- $(trace + 'z').val(z)\r
- switch $(@).attr('element_type')\r
- when 'panel_picture'\r
- trace = trace + 'div'\r
- $(trace).css('zIndex', z)\r
- z++\r
+ \r
+ \r
+ # ground_color\r
+ ColorHelper.add_helper($('.ground_color-code-wrap'), 'code')\r
+ \r
+ refresh_ground_color = (element_trace) ->\r
+ orientation = parseInt( $(element_trace + 'orientation').val() )\r
+ xy = $(element_trace + 'xy').val()\r
+ wh = $(element_trace + 'wh').val()\r
+ div_offset = if xy\r
+ xy\r
else\r
- \r
- $('.zsort').map -> \r
- $(@).sortable {\r
- update: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
- update_z(trace + 'zsort')\r
- }\r
- $('.z-sort li').map -> \r
- $(@).disableSelection()\r
- \r
- $('.panel_picture_width_tool').map ->\r
- $(@).html('<button class="wreverse">Rev</button><button class="wdouble">x2</button><button class="whalf">/2</button>')\r
- \r
- $('.wreverse').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'width')\r
- w = -f.val()\r
- f.val(w)\r
- f = $(trace + 'height')\r
- h = f.val()\r
- refresh_picture($(trace + 'img'), w, h)\r
- \r
- $('.wdouble').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'width')\r
- w = f.val() * 2\r
- f.val(w)\r
- $(trace + 'img').width(Math.abs(w))\r
- $(trace + 'img').parent().width(Math.abs(w))\r
- \r
- $('.whalf').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'width')\r
- w = Math.floor(f.val() / 2)\r
- f.val(w)\r
- $(trace + 'img').width(Math.abs(w))\r
- $(trace + 'img').parent().width(Math.abs(w))\r
- \r
- $('.panel_picture_height_tool').map ->\r
- $(@).html('<button class="hreverse">Rev</button><button class="hdouble">x2</button><button class="hhalf">/2</button>')\r
- \r
- $('.hreverse').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'height')\r
- h = -f.val()\r
- f.val(h)\r
- f = $(trace + 'width')\r
- w = f.val()\r
- refresh_picture($(trace + 'img'), w, h)\r
- \r
- $('.hdouble').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'height')\r
- h = f.val() * 2\r
- f.val(h)\r
- $(trace + 'img').height(Math.abs(h))\r
- $(trace + 'img').parent().height(Math.abs(h))\r
- \r
- $('.hhalf').click -> \r
- d = $(@).parent()\r
- trace = element_tag_id(d)\r
- f = $(trace + 'height')\r
- h = Math.floor(f.val() / 2)\r
- f.val(h)\r
- $(trace + 'img').height(Math.abs(h))\r
- $(trace + 'img').parent().height(Math.abs(h))\r
- \r
- # all\r
- # disable form actions\r
- # hide submit buttons\r
- $('.edit_panel_picture' ).map ->\r
- $(@).submit ->\r
- false\r
- $('.edit_speech_balloon' ).map ->\r
- $(@).submit ->\r
- false\r
- $('.edit_ground_picture' ).map ->\r
- $(@).submit ->\r
- false\r
- $('.edit_ground_color' ).map ->\r
- $(@).submit ->\r
- false\r
- \r
- $('.edit_panel' ).map ->\r
- if $(@).attr('jqform')\r
- else\r
+ 0\r
+ div_size = if wh\r
+ wh\r
+ else\r
+ 100 - div_offset\r
+ div_x = if orientation == 0\r
+ 0\r
+ else\r
+ div_offset\r
+ div_y = if orientation == 0\r
+ div_offset\r
+ else\r
+ 0\r
+ div_width = if orientation == 0\r
+ 100\r
+ else\r
+ div_size\r
+ div_height = if orientation == 0\r
+ div_size\r
+ else\r
+ 100\r
+ div = $(element_trace)\r
+ div.css('left', div_x.toString() + '%')\r
+ div.css('top', div_y.toString() + '%')\r
+ div.css('width', div_width.toString() + '%')\r
+ div.css('height', div_height.toString() + '%')\r
+ \r
+ # sync view \r
+ $('input').map ->\r
+ if editor.element_is('ground_color', $(@))\r
+ switch $(@).attr('column')\r
+ when 'code'\r
+ $(@).hide()\r
+ when 'xy', 'wh'\r
+ $(@).spinner {\r
+ stop: ( event, ui ) ->\r
+ trace = editor.element_tag_id($(@))\r
+ refresh_ground_color(trace)\r
+ , min: 0\r
+ , max: 100\r
+ }\r
+ $(@).focusout ->\r
+ trace = editor.element_tag_id($(@))\r
+ refresh_ground_color(trace)\r
+ \r
+ $('select').map ->\r
+ if editor.element_is('ground_color', $(@))\r
+ switch $(@).attr('column')\r
+ when 'orientation'\r
+ $(@).change ->\r
+ trace = editor.element_tag_id($(@))\r
+ refresh_ground_color(trace)\r
+\r
+ update_t = (ultrace) -> \r
+ t = 0\r
+ $(ultrace + ' li').map ->\r
+ trace = editor.element_tag_id($(@))\r
+ if $(trace + '_destroy').val().length < 1\r
+ $(trace + 't').val(t)\r
+ t++\r
+ else\r
+ \r
+ $('.tsort').map -> \r
+ $(@).sortable {\r
+ update: ( event, ui ) ->\r
+ trace = editor.panel_tag_id($(@))\r
+ update_t(trace + 'tsort')\r
+ }\r
+ $('.t-sort li').map -> \r
+ $(@).disableSelection()\r
+ \r
+ update_z = (ultrace) -> \r
+ z = 1\r
+ $(ultrace + ' li').map ->\r
+ trace = editor.element_tag_id($(@))\r
+ # update panel\r
+ if $(trace + '_destroy').val().length < 1\r
+ $(trace + 'z').val(z)\r
+ switch $(@).attr('element_type')\r
+ when 'panel_picture'\r
+ trace = trace + 'div'\r
+ $(trace).css('zIndex', z)\r
+ z++\r
+ else\r
+ \r
+ $('.zsort').map -> \r
+ $(@).sortable {\r
+ update: ( event, ui ) ->\r
+ trace = editor.panel_tag_id($(@))\r
+ update_z(trace + 'zsort')\r
+ }\r
+ $('.z-sort li').map -> \r
+ $(@).disableSelection()\r
+ \r
+ # all\r
+ # disable form actions\r
+ # hide submit buttons\r
+ $('.edit_panel_picture' ).map ->\r
$(@).submit ->\r
false\r
- \r
- $('.submit' ).map ->\r
- $(@).hide()\r
- \r
- # disable form z t\r
- $('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('column')\r
- switch $(@).attr('column')\r
- when 'z' , 't'\r
- $(@).hide()\r
- $(@).parent().hide() #label\r
- \r
+ $('.edit_speech_balloon' ).map ->\r
+ $(@).submit ->\r
+ false\r
+ $('.edit_ground_picture' ).map ->\r
+ $(@).submit ->\r
+ false\r
+ $('.edit_ground_color' ).map ->\r
+ $(@).submit ->\r
+ false\r
+ \r
+ $('.edit_panel' ).map ->\r
+ if $(@).attr('jqform')\r
+ $(@).submit ->\r
+ if validate_forms()\r
+ true\r
+ else\r
+ false\r
+ else\r
+ $(@).submit ->\r
+ false\r
+ \r
+ $('.submit' ).map ->\r
+ $(@).hide()\r
+ \r
+ # disable form z t\r
+ $('input').map ->\r
+ if editor.is_element($(@))\r
+ switch $(@).attr('column')\r
+ when 'z' , 't'\r
+ $(@).hide()\r
+ $(@).parent().hide() #label\r
+ \r
+ # add button on new form\r
+ $('.submit-new-form').map ->\r
+ $(@).html('<button class="new-element">add</button>')\r
+ \r
+ $('.new-element').map ->\r
+ $(@).click -> \r
+ false\r
+ j = JSON.stringify(window.configurations)\r
+ $('#pettanr-configurations').val(j)\r
+\r