$ ->\r
confirm_confirm_confirm = () ->\r
confirm( )\r
- new_element_index = {}\r
- new_element_index[pettanr_current_panel_id] = 0\r
- \r
- set_tree_value = (keys, last_attr, value) ->\r
- key = keys.shift()\r
- if keys.length <= 0\r
- last_attr[key] = value\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
- else\r
- return false\r
- is_var = (o) ->\r
- if parseInt(o.attr('no_attr')) > 0\r
- return false\r
- else\r
- if o.attr('column') \r
- if o.attr('column') == '_destroy' and o.val().length < 1\r
- return false\r
- else\r
- return true\r
- else\r
- return false\r
- is_element = (o) ->\r
- if o.attr('element_type')\r
- return true\r
- else\r
- return false\r
- is_element_part = (o) ->\r
- if o.attr('element_part_type')\r
- return true\r
- else\r
- return false\r
- element_types = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}\r
- element_type_to_table = (element_type) ->\r
- element_types[element_type]\r
- text_align_texts = ['left', 'left', 'right', 'center']\r
-\r
- make_tree = (attr, o) ->\r
- if is_var(o)\r
- tree = 'panels-' + o.attr('panel_id') + '-'\r
- if is_element(o)\r
- tree = tree + element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
- if is_element_part(o)\r
- tree = tree + o.attr('element_part_type') + '_attributes-'\r
- tree = tree + o.attr('column')\r
- keys = tree.split('-')\r
- set_tree_value(keys, attr, o.val())\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
- element_part_tag_id = (element_part) ->\r
- '#panel' + element_part.attr('panel_id') + element_part.attr('element_type') + element_part.attr('element_id') + element_part.attr('element_part_type') + element_part.attr('element_part_id')\r
- \r
- refresh_attribute = () ->\r
- attr = {}\r
- $('input').map ->\r
- make_tree(attr, $(@))\r
- $('textarea').map ->\r
- make_tree(attr, $(@))\r
- $('select').map ->\r
- make_tree(attr, $(@))\r
- $('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
+ editor = window.PettanrEditor\r
\r
+ $('.panel-editor').map ->\r
+ if $(@).attr('current') and parseInt($(@).attr('current')) > 0\r
+ editor.pettanr_current_panel_id = parseInt($(@).attr('panel_id'))\r
$('#tabs').tabs()\r
$('#elements-tabs').tabs()\r
$('#new-element-tabs').tabs()\r
$(@).mouseover -> \r
switch $(@).attr('element_type')\r
when 'speech_balloon'\r
- trace = element_tag_id($(@)) \r
+ trace = editor.element_tag_id($(@)) \r
t = $('img', $(trace))\r
when 'panel_picture'\r
- trace = element_tag_id($(@)) + 'img'\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
t = $(trace)\r
else\r
t = null\r
$(@).mouseout -> \r
switch $(@).attr('element_type')\r
when 'speech_balloon'\r
- trace = element_tag_id($(@)) \r
+ trace = editor.element_tag_id($(@)) \r
t = $('img', $(trace))\r
when 'panel_picture'\r
- trace = element_tag_id($(@)) + 'img'\r
+ trace = editor.element_tag_id($(@)) + 'img'\r
t = $(trace)\r
else\r
t = null\r
}\r
$(@).click -> \r
if confirm('destroy ?')\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
$(trace + '_destroy').val('true')\r
- panel_trace = panel_tag_id($(@))\r
+ panel_trace = editor.panel_tag_id($(@))\r
update_t(panel_trace + 'tsort')\r
update_z(panel_trace + 'zsort')\r
# sync\r
\r
\r
$('#pettanr-panel-submit').focusin ->\r
- refresh_attribute()\r
+ editor.refresh_attribute($('#pettanr-panel-json'))\r
\r
# panel\r
$('.pettanr-comic-panel').map ->\r
- if is_editable($(@))\r
+ if editor.is_editable($(@))\r
$(@).resizable {\r
stop: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
+ trace = editor.panel_tag_id($(@))\r
w = parseInt($(@).width())\r
h = parseInt($(@).height())\r
$(trace + 'width').val(w)\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
+ $('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
\r
# panel picture\r
$(@).focusout ->\r
switch $(@).attr('column')\r
when 'x'\r
- trace = element_tag_id($(@)) + 'div'\r
+ trace = editor.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
+ trace = editor.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
+ 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($(element_tag_id($(@)) + 'height').val())\r
+ h = parseInt($(editor.element_tag_id($(@)) + 'height').val())\r
when 'height'\r
- trace = element_tag_id($(@)) + 'img'\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($(element_tag_id($(@)) + 'width').val())\r
+ w = parseInt($(editor.element_tag_id($(@)) + 'width').val())\r
else\r
refresh_picture($(trace), w, h)\r
else\r
$(@).focusout ->\r
switch $(@).attr('column')\r
when 'x'\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
v = parseInt($(@).val()).toString() + 'px'\r
$(trace).css('left', v)\r
when 'y'\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
v = parseInt($(@).val()).toString() + 'px'\r
$(trace).css('top', v)\r
when 'width'\r
- trace = element_tag_id($(@))\r
+ trace = editor.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
+ trace = editor.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
$(@).change ->\r
switch $(@).attr('column')\r
when 'font_size'\r
- trace = element_part_tag_id($(@))\r
+ trace = editor.element_part_tag_id($(@))\r
$(trace).css('font-size', $(@).val() + 'em')\r
when 'text_align'\r
- trace = element_part_tag_id($(@))\r
+ trace = editor.element_part_tag_id($(@))\r
v = parseInt($(@).val())\r
$(trace).css('text-align', text_align_texts[v])\r
else\r
$(@).focusout ->\r
switch $(@).attr('column')\r
when 'x', 'y'\r
- trace = element_tag_id($(@))\r
+ trace = editor.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
$(@).change ->\r
switch $(@).attr('column')\r
when 'repeat'\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
v = parseInt($(@).val())\r
$(trace).css('background-repeat', repeat_texts[v])\r
else\r
$(trace + 'code_hex').html('HEX: #' + h)\r
$(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
v = '#' + h\r
- if is_element_part($(trace))\r
+ if editor.is_element_part($(trace))\r
$(trace + 'fore_color').val(code)\r
$(trace).css('color', v)\r
else\r
$(trace).css('background-color', v)\r
\r
$('.colorpicker').map -> \r
- if is_element_part($(@))\r
- code_picker_trace = element_part_tag_id($(@))\r
+ if editor.is_element_part($(@))\r
+ code_picker_trace = editor.element_part_tag_id($(@))\r
code = parseInt($(code_picker_trace + 'fore_color').val())\r
else\r
- code_picker_trace = element_tag_id($(@))\r
+ code_picker_trace = editor.element_tag_id($(@))\r
code = parseInt($(code_picker_trace + 'code').val())\r
red = (code >> 16) & 0xFF\r
green = (code >> 8) & 0xFF\r
max: 255,\r
value: red,\r
change: ( event, ui ) ->\r
- if is_element_part($(@).parent())\r
- trace = element_part_tag_id($(@).parent())\r
+ if editor.is_element_part($(@).parent())\r
+ trace = editor.element_part_tag_id($(@).parent())\r
else\r
- trace = element_tag_id($(@).parent())\r
+ trace = editor.element_tag_id($(@).parent())\r
color_slider_change(trace)\r
}\r
$(code_picker_trace + 'code_green').slider {\r
max: 255,\r
value: green,\r
change: ( event, ui ) ->\r
- if is_element_part($(@).parent())\r
- trace = element_part_tag_id($(@).parent())\r
+ if editor.is_element_part($(@).parent())\r
+ trace = editor.element_part_tag_id($(@).parent())\r
else\r
- trace = element_tag_id($(@).parent())\r
+ trace = editor.element_tag_id($(@).parent())\r
color_slider_change(trace)\r
}\r
$(code_picker_trace + 'code_blue').slider {\r
max: 255,\r
value: blue,\r
change: ( event, ui ) ->\r
- if is_element_part($(@).parent())\r
- trace = element_part_tag_id($(@).parent())\r
+ if editor.is_element_part($(@).parent())\r
+ trace = editor.element_part_tag_id($(@).parent())\r
else\r
- trace = element_tag_id($(@).parent())\r
+ trace = editor.element_tag_id($(@).parent())\r
color_slider_change(trace)\r
}\r
color_slider_change(code_picker_trace)\r
update_t = (ultrace) -> \r
t = 0\r
$(ultrace + ' li').map ->\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
if $(trace + '_destroy').val().length < 1\r
$(trace + 't').val(t)\r
t++\r
$('.tsort').map -> \r
$(@).sortable {\r
update: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
+ trace = editor.panel_tag_id($(@))\r
update_t(trace + 'tsort')\r
}\r
$('.t-sort li').map -> \r
update_z = (ultrace) -> \r
z = 1\r
$(ultrace + ' li').map ->\r
- trace = element_tag_id($(@))\r
+ trace = editor.element_tag_id($(@))\r
# update panel\r
if $(trace + '_destroy').val().length < 1\r
$(trace + 'z').val(z)\r
$('.zsort').map -> \r
$(@).sortable {\r
update: ( event, ui ) ->\r
- trace = panel_tag_id($(@))\r
+ trace = editor.panel_tag_id($(@))\r
update_z(trace + 'zsort')\r
}\r
$('.z-sort li').map -> \r
\r
$('.wreverse').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'width')\r
w = -f.val()\r
f.val(w)\r
\r
$('.wdouble').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'width')\r
w = f.val() * 2\r
f.val(w)\r
\r
$('.whalf').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'width')\r
w = Math.floor(f.val() / 2)\r
f.val(w)\r
\r
$('.hreverse').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'height')\r
h = -f.val()\r
f.val(h)\r
\r
$('.hdouble').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'height')\r
h = f.val() * 2\r
f.val(h)\r
\r
$('.hhalf').click -> \r
d = $(@).parent()\r
- trace = element_tag_id(d)\r
+ trace = editor.element_tag_id(d)\r
f = $(trace + 'height')\r
h = Math.floor(f.val() / 2)\r
f.val(h)\r
--- /dev/null
+class PettanrEditor\r
+ @pettanr_current_panel_id = 0\r
+ \r
+ @new_element_index = {}\r
+ @new_element_index[PettanrEditor.pettanr_current_panel_id] = 0\r
+ \r
+ @set_tree_value = (keys, last_attr, value) ->\r
+ key = keys.shift()\r
+ if keys.length <= 0\r
+ last_attr[key] = value\r
+ else\r
+ last_attr[key] = last_attr[key] || {}\r
+ PettanrEditor.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
+ else\r
+ return false\r
+ @is_var = (o) ->\r
+ if parseInt(o.attr('no_attr')) > 0\r
+ return false\r
+ else\r
+ if o.attr('column') \r
+ if o.attr('column') == '_destroy' and o.val().length < 1\r
+ return false\r
+ else\r
+ return true\r
+ else\r
+ return false\r
+ @is_element = (o) ->\r
+ if o.attr('element_type')\r
+ return true\r
+ else\r
+ return false\r
+ @is_element_part = (o) ->\r
+ if o.attr('element_part_type')\r
+ return true\r
+ else\r
+ return false\r
+ @element_types = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}\r
+ @element_type_to_table = (element_type) ->\r
+ PettanrEditor.element_types[element_type]\r
+ @text_align_texts = ['left', 'left', 'right', 'center']\r
+\r
+ @make_tree = (attr, o) ->\r
+ if PettanrEditor.is_var(o)\r
+ tree = 'panels-' + o.attr('panel_id') + '-'\r
+ if PettanrEditor.is_element(o)\r
+ tree = tree + PettanrEditor.element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'\r
+ if PettanrEditor.is_element_part(o)\r
+ tree = tree + o.attr('element_part_type') + '_attributes-'\r
+ tree = tree + o.attr('column')\r
+ keys = tree.split('-')\r
+ PettanrEditor.set_tree_value(keys, attr, o.val())\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
+ @element_part_tag_id = (element_part) ->\r
+ '#panel' + element_part.attr('panel_id') + element_part.attr('element_type') + element_part.attr('element_id') + element_part.attr('element_part_type') + element_part.attr('element_part_id')\r
+ \r
+ @refresh_attribute = (field) ->\r
+ attr = {}\r
+ $('input').map ->\r
+ PettanrEditor.make_tree(attr, $(@))\r
+ $('textarea').map ->\r
+ PettanrEditor.make_tree(attr, $(@))\r
+ $('select').map ->\r
+ PettanrEditor.make_tree(attr, $(@))\r
+ field.val(JSON.stringify(attr['panels'][PettanrEditor.pettanr_current_panel_id.toString() ]))\r
+ \r
+@PettanrEditor = PettanrEditor\r