$ ->\r
+ confirm_confirm_confirm = () ->\r
+ confirm( )\r
+ new_element_index = {}\r
+ new_element_index[pettanr_current_panel_id] = 0\r
+ \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
+ 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 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
+ 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
refresh_attribute = () ->\r
attr = {}\r
$('input').map ->\r
- if $(@).attr('tree') \r
- keys = $(@).attr('tree').split('-')\r
- set_tree_value(keys, attr, $(this).val())\r
+ make_tree(attr, $(@))\r
+ $('textarea').map ->\r
+ make_tree(attr, $(@))\r
$('select').map ->\r
- if $(@).attr('tree') \r
- keys = $(@).attr('tree').split('-')\r
- set_tree_value(keys, attr, $(this).val())\r
+ make_tree(attr, $(@))\r
$('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))\r
\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 = element_tag_id($(@)) \r
+ t = $('img', $(trace))\r
+ when 'panel_picture'\r
+ trace = 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 = element_tag_id($(@)) \r
+ t = $('img', $(trace))\r
+ when 'panel_picture'\r
+ trace = 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 = 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
+ switch $(@).attr('element_type')\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
- $(@).resizable {\r
- stop: ( event, ui ) ->\r
- trace = '#panel' + $(@).attr('panel_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
- \r
- }\r
+ if is_editable($(@))\r
+ $(@).resizable {\r
+ stop: ( event, ui ) ->\r
+ trace = 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
# sync view \r
$('#panel' + pettanr_current_panel_id.toString() + 'width').focusout ->\r
trace = '#panel' + $(@).attr('panel_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(left)\r
- $(trace + 'y').val(top)\r
+ $(trace + 'x').val(parseInt(left))\r
+ $(trace + 'y').val(parseInt(top))\r
}\r
\r
$('.panel-picture').map ->\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
+ 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($(@)) + 'img'\r
+ trace = element_tag_id($(@)) + 'div'\r
v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).parent().css('left', v)\r
$(trace).css('left', v)\r
when 'y'\r
- trace = element_tag_id($(@)) + 'img'\r
+ trace = element_tag_id($(@)) + 'div'\r
v = parseInt($(@).val()).toString() + 'px'\r
- $(trace).parent().css('top', v)\r
$(trace).css('top', v)\r
when 'width'\r
trace = element_tag_id($(@)) + 'img'\r
- v = parseInt($(@).val())\r
- $(trace).width(Math.abs(v))\r
- sd = if v < 0\r
- 'v/'\r
- else\r
- ''\r
- pid = parseInt($(trace).attr('picture_id')).toString()\r
- ext = $(trace).attr('ext')\r
- src = '/pictures/' + sd + pid + '.' + ext\r
- $(trace).attr('src', src)\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
- v = parseInt($(@).val())\r
- $(trace).height(Math.abs(v))\r
- sd = if v < 0\r
- 'h/'\r
- else\r
- ''\r
- pid = parseInt($(trace).attr('picture_id')).toString()\r
- ext = $(trace).attr('ext')\r
- src = '/pictures/' + sd + pid + '.' + ext\r
- $(trace).attr('src', src)\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
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(left)\r
- $(trace + 'y').val(top)\r
+ $(trace + 'x').val(parseInt(left))\r
+ $(trace + 'y').val(parseInt(top))\r
}\r
\r
\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
+ 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
$(trace).height(v)\r
else\r
else\r
+ $('textarea').map ->\r
+ if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'\r
+ $(@).focusout ->\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
\r
# ground-picture\r
# sync view \r
# ground_color\r
# sync view \r
$('input').map ->\r
- if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color'\r
+ if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'\r
$(@).hide()\r
\r
- $('#colorpicker-red, #colorpicker-green, #colorpicker-blue').map -> \r
- trace = element_tag_id($(@).parent())\r
- $(@).slider {\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: 127,\r
+ value: red,\r
change: ( event, ui ) ->\r
- red = $('#colorpicker-red').slider('value')\r
- green = $('#colorpicker-green').slider('value')\r
- blue = $('#colorpicker-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
- $('#colorpicker-swatch').css('background-color', '#' + h)\r
- $('#colorpicker-hex').html('HEX: #' + h)\r
- $('#colorpicker-rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')\r
- $(trace + 'code').val(code)\r
- v = '#' + h\r
- $(trace).css('background-color', v)\r
+ trace = element_tag_id($(@).parent())\r
+ color_slider_change(trace)\r
}\r
-\r
- $('.colorpicker').map -> \r
- trace = element_tag_id($(@))\r
- code = parseInt($(trace + 'code').val())\r
- $('.colorpicker-red').map -> \r
- v = (code >> 16) & 0xFF\r
- $(@).slider('value', v)\r
- $('.colorpicker-green').map -> \r
- v = (code >> 8) & 0xFF\r
- $(@).slider('value', v)\r
- $('.colorpicker-blue').map -> \r
- v = code & 0xFF\r
- $(@).slider('value', v)\r
- \r
- $('#t-sortable tbody').sortable {\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
+ else\r
+ \r
+ $('.tsort').map -> \r
+ $(@).sortable {\r
update: ( event, ui ) ->\r
- t = 0;\r
- $('#t-sortable tr').map ->\r
- pid = $(@).attr('panel_id')\r
- eid = $(@).attr('element_id')\r
- etp = $(@).attr('element_type')\r
- tid = '#panel' + pid + etp + eid\r
- # update input\r
- trace = tid + 't'\r
- $(trace).val(t)\r
- t++\r
- }\r
- $('#t-sortable tbody').disableSelection()\r
- \r
- $('#z-sortable tbody').sortable {\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
+ else\r
+ \r
+ $('.zsort').map -> \r
+ $(@).sortable {\r
update: ( event, ui ) ->\r
- z = 1;\r
- $('#z-sortable tr').map ->\r
- pid = $(@).attr('panel_id')\r
- eid = $(@).attr('element_id')\r
- etp = $(@).attr('element_type')\r
- tid = '#panel' + pid + etp + eid\r
- # update input\r
- trace = tid + 'z'\r
- $(trace).val(z)\r
- # update panel\r
- switch etp\r
- when 'panel_picture'\r
- trace = tid + 'div'\r
- when 'speech_balloon'\r
- trace = tid\r
- when 'ground_picture'\r
- trace = tid\r
- when 'ground_color'\r
- trace = tid\r
- $(trace).css('zIndex', z)\r
- z++\r
- }\r
- $('#t-sortable tbody').disableSelection()\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
$('.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
$(@).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
+ \r
OSDN Git Service
