$ ->
confirm_confirm_confirm = () ->
confirm( )
new_element_index = {}
new_element_index[pettanr_current_panel_id] = 0
set_tree_value = (keys, last_attr, value) ->
key = keys.shift()
if keys.length <= 0
last_attr[key] = value
else
last_attr[key] = last_attr[key] || {}
set_tree_value(keys, last_attr[key], value)
repeat_texts = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat']
is_editable = (p) ->
if p.parent().attr('editable')
return true
else
return false
is_var = (o) ->
if parseInt(o.attr('no_attr')) > 0
return false
else
if o.attr('column')
if o.attr('column') == '_destroy' and o.val().length < 1
return false
else
return true
else
return false
is_element = (o) ->
if o.attr('element_type')
return true
else
return false
is_element_part = (o) ->
if o.attr('element_part_type')
return true
else
return false
element_types = {'panel_picture': 'panel_pictures', 'speech_balloon': 'speech_balloons', 'ground_picture': 'ground_pictures', 'ground_color': 'ground_colors'}
element_type_to_table = (element_type) ->
element_types[element_type]
make_tree = (attr, o) ->
if is_var(o)
tree = 'panels-' + o.attr('panel_id') + '-'
if is_element(o)
tree = tree + element_type_to_table(o.attr('element_type')) + '_attributes-' + o.attr('element_id') + '-'
if is_element_part(o)
tree = tree + o.attr('element_part_type') + '_attributes-'
tree = tree + o.attr('column')
keys = tree.split('-')
set_tree_value(keys, attr, o.val())
panel_tag_id = (element) ->
'#panel' + element.attr('panel_id')
element_tag_id = (element) ->
'#panel' + element.attr('panel_id') + element.attr('element_type') + element.attr('element_id')
refresh_attribute = () ->
attr = {}
$('input').map ->
make_tree(attr, $(@))
$('textarea').map ->
make_tree(attr, $(@))
$('select').map ->
make_tree(attr, $(@))
$('#pettanr-panel-json').val(JSON.stringify(attr['panels'][pettanr_current_panel_id.toString() ]))
$('#tabs').tabs()
$('#elements-tabs').tabs()
$('#new-element-tabs').tabs()
$('#new-speech_balloon-tabs').tabs()
$('#elements-tabs').addClass( "ui-tabs-vertical ui-helper-clearfix" )
$("#elements-tabs li").removeClass("ui-corner-top")
$("#elements-tabs li").addClass("ui-corner-left")
$("#elements-tabs li").map ->
$(@).mouseover ->
switch $(@).attr('element_type')
when 'speech_balloon'
trace = element_tag_id($(@))
t = $('img', $(trace))
when 'panel_picture'
trace = element_tag_id($(@)) + 'img'
t = $(trace)
else
t = null
if t
$('.ui-resizable-handle', t.parent()).map ->
$(@).css('display', 'block')
$(@).mouseout ->
switch $(@).attr('element_type')
when 'speech_balloon'
trace = element_tag_id($(@))
t = $('img', $(trace))
when 'panel_picture'
trace = element_tag_id($(@)) + 'img'
t = $(trace)
else
t = null
if t
$('.ui-resizable-handle', t.parent()).map ->
$(@).css('display', 'none')
#destroy button
$('.ui-icon-destroy').map ->
$(@).button {
icons: {
primary: 'ui-icon-close',
secondary: null
},
text: false
}
$(@).click ->
if confirm('destroy ?')
trace = element_tag_id($(@))
$(trace + '_destroy').val('true')
panel_trace = panel_tag_id($(@))
update_t(panel_trace + 'tsort')
update_z(panel_trace + 'zsort')
# sync
$(trace + 'element_tab').css('display', 'none')
$(trace + 'tab_panel').css('display', 'none')
$(trace + 'zsort').css('display', 'none')
$(trace + 'tsort').css('display', 'none')
switch $(@).attr('element_type')
when 'panel_picture'
trace = trace + 'div'
$(trace).css('display', 'none')
$('#pettanr-panel-submit').focusin ->
refresh_attribute()
# panel
$('.pettanr-comic-panel').map ->
if is_editable($(@))
$(@).resizable {
stop: ( event, ui ) ->
trace = panel_tag_id($(@))
w = parseInt($(@).width())
h = parseInt($(@).height())
$(trace + 'width').val(w)
$(trace + 'height').val(h)
$('.pettanr-comic-ground-picture').map ->
$(@).width(w)
$(@).height(h)
$('.pettanr-comic-ground-color').map ->
$(@).width(w)
$(@).height(h)
, autoHide: true
}
# sync view
$('#panel' + pettanr_current_panel_id.toString() + 'width').focusout ->
trace = '#panel' + $(@).attr('panel_id')
$(trace).width(parseInt( $(@).val()))
$('#panel' + pettanr_current_panel_id.toString() + 'height').focusout ->
trace = '#panel' + $(@).attr('panel_id')
$(trace).height(parseInt( $(@).val()))
$('#panel' + pettanr_current_panel_id.toString() + 'border').focusout ->
trace = '#panel' + $(@).attr('panel_id')
$(trace).css('border-width', parseInt($(@).val()).toString() + 'px')
# panel picture
$('.pettanr-panel-picture-wrapper').map ->
$(@).draggable {
stop: ( event, ui ) ->
trace = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id')
img = '#panel' + $(@).attr('panel_id') + 'panel_picture' + $(@).attr('element_id') + 'img'
left = $(img).parent().position().left + $(@).position().left
top = $(img ).parent().position().top + $(@).position().top
$(trace + 'x').val(parseInt(left))
$(trace + 'y').val(parseInt(top))
}
$('.panel-picture').map ->
$(@).resizable {
stop: ( event, ui ) ->
trace = '#panel' + $(@).parent().attr('panel_id') + 'panel_picture' + $(@).parent().attr('element_id')
$(trace + 'width').val($(@).width())
$(trace + 'height').val($(@).height())
handles: 'all',
autoHide: true
}
refresh_picture = (e, w, h) ->
if w and h
sd = ''
if h < 0
sd += 'v'
if w < 0
sd += 'h'
if sd.length > 0
sd += '/'
pid = parseInt(e.attr('picture_id')).toString()
ext = e.attr('ext')
src = '/pictures/' + sd + pid + '.' + ext
e.attr('src', src)
# sync view
$('input').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'panel_picture'
$(@).focusout ->
switch $(@).attr('column')
when 'x'
trace = element_tag_id($(@)) + 'div'
v = parseInt($(@).val()).toString() + 'px'
$(trace).css('left', v)
when 'y'
trace = element_tag_id($(@)) + 'div'
v = parseInt($(@).val()).toString() + 'px'
$(trace).css('top', v)
when 'width'
trace = element_tag_id($(@)) + 'img'
w = parseInt($(@).val())
$(trace).width(Math.abs(w))
$(trace).parent().width(Math.abs(w))
h = parseInt($(element_tag_id($(@)) + 'height').val())
when 'height'
trace = element_tag_id($(@)) + 'img'
h = parseInt($(@).val())
$(trace).height(Math.abs(h))
$(trace).parent().height(Math.abs(h))
w = parseInt($(element_tag_id($(@)) + 'width').val())
else
refresh_picture($(trace), w, h)
else
# speech_balloons
$('.pettanr-comic-balloon' ).map ->
$(@).draggable {
stop: ( event, ui ) ->
trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
left = $(@).position().left
top = $(@).position().top
$(trace + 'x').val(parseInt(left))
$(trace + 'y').val(parseInt(top))
}
$('.pettanr-balloon' ).map ->
$(@).resizable {
stop: ( event, ui ) ->
trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id') + 'balloon' + $(@).parent().attr('balloon_id')
$(trace + 'width').val($(@).width())
$(trace + 'height').val($(@).height())
resize: ( event, ui ) ->
trace = '#panel' + $(@).parent().attr('panel_id') + 'speech_balloon' + $(@).parent().attr('element_id')
$(trace).width($(@).width())
$(trace).height($(@).height())
handles: 'all',
autoHide: true
}
$('.pettanr-comic-balloon span' ).map ->
p = $(@).parent()
sb = p.parent()
sb.mouseover ->
trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
img = $(trace)
$('.ui-resizable-handle', img.parent()).map ->
$(@).css('display', 'block')
sb.mouseout ->
trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'balloon' + $(@).attr('balloon_id')
img = $(trace)
$('.ui-resizable-handle', img.parent()).map ->
$(@).css('display', 'none')
# sync view
$('input').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
$(@).focusout ->
switch $(@).attr('column')
when 'x'
trace = element_tag_id($(@))
v = parseInt($(@).val()).toString() + 'px'
$(trace).css('left', v)
when 'y'
trace = element_tag_id($(@))
v = parseInt($(@).val()).toString() + 'px'
$(trace).css('top', v)
when 'width'
trace = element_tag_id($(@))
v = parseInt($(@).val())
$(trace).width(Math.abs(v))
trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
$(trace).parent().width(v)
$(trace).width(v)
when 'height'
trace = element_tag_id($(@))
v = parseInt($(@).val())
$(trace).height(Math.abs(v))
trace = '#panel' + $(trace).attr('panel_id') + 'speech_balloon' + $(trace).attr('element_id') + 'balloon' + $(trace).attr('balloon_id')
$(trace).parent().height(v)
$(trace).height(v)
else
else
$('textarea').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
$(@).focusout ->
switch $(@).attr('column')
when 'content'
trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')
wf_sel = $(trace + 'writing_format_id')
wf_id = parseInt(wf_sel.val())
v = writing_format_functions[writing_formats[wf_id]]($(@).val())
$(trace).html(v)
$('textarea').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'speech_balloon'
switch $(@).attr('column')
when 'content'
$(@).bind('textchange', (event, previousText) ->
trace = '#panel' + $(@).attr('panel_id') + 'speech_balloon' + $(@).attr('element_id') + 'speech' + $(@).attr('element_part_id')
wf_sel = $(trace + 'writing_format_id')
wf_id = parseInt(wf_sel.val())
v = writing_format_functions[writing_formats[wf_id]]($(@).val())
$(trace).html(v)
)
# ground-picture
# sync view
$('input').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
$(@).focusout ->
switch $(@).attr('column')
when 'x', 'y'
trace = element_tag_id($(@))
x = parseInt($(@).val()).toString() + 'px'
ytrace = '#panel' + $(@).attr('panel_id') + 'ground_picture' + $(@).attr('element_id') + 'y'
y = parseInt($(ytrace).val()).toString() + 'px'
$(trace).css('background-position', y + ' ' + x)
$('select').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_picture'
$(@).change ->
switch $(@).attr('column')
when 'repeat'
trace = element_tag_id($(@))
v = parseInt($(@).val())
$(trace).css('background-repeat', repeat_texts[v])
else
# ground_color
# sync view
$('input').map ->
if $(@).attr('element_type') and $(@).attr('element_type') == 'ground_color' and $(@).attr('column') == 'code'
$(@).hide()
color_slider_change = (trace) ->
red = $(trace + 'code_red').slider('value')
green = $(trace + 'code_green').slider('value')
blue = $(trace + 'code_blue').slider('value')
code = (red << 16) + (green << 8) + (blue)
phex = "000000" + code.toString(16)
hex = code.toString(16)
h = phex.substring(phex.length - 6)
$(trace + 'code_swatch').css('background-color', '#' + h)
$(trace + 'code_hex').html('HEX: #' + h)
$(trace + 'code_rgb').html('RGB: (' + red + ',' + green + ',' +blue + ')')
$(trace + 'code').val(code)
v = '#' + h
$(trace).css('background-color', v)
$('.colorpicker').map ->
code_picker_trace = element_tag_id($(@))
code = parseInt($(code_picker_trace + 'code').val())
red = (code >> 16) & 0xFF
green = (code >> 8) & 0xFF
blue = code & 0xFF
$(code_picker_trace + 'code_red').slider {
orientation: 'horizontal',
range: 'min',
max: 255,
value: red,
change: ( event, ui ) ->
trace = element_tag_id($(@).parent())
color_slider_change(trace)
}
$(code_picker_trace + 'code_green').slider {
orientation: 'horizontal',
range: 'min',
max: 255,
value: green,
change: ( event, ui ) ->
trace = element_tag_id($(@).parent())
color_slider_change(trace)
}
$(code_picker_trace + 'code_blue').slider {
orientation: 'horizontal',
range: 'min',
max: 255,
value: blue,
change: ( event, ui ) ->
trace = element_tag_id($(@).parent())
color_slider_change(trace)
}
color_slider_change(code_picker_trace)
$('.colorpicker-wrap').map ->
$(@).css('display', 'block')
update_t = (ultrace) ->
t = 0
$(ultrace + ' li').map ->
trace = element_tag_id($(@))
if $(trace + '_destroy').val().length < 1
$(trace + 't').val(t)
t++
else
$('.tsort').map ->
$(@).sortable {
update: ( event, ui ) ->
trace = panel_tag_id($(@))
update_t(trace + 'tsort')
}
$('.t-sort li').map ->
$(@).disableSelection()
update_z = (ultrace) ->
z = 1
$(ultrace + ' li').map ->
trace = element_tag_id($(@))
# update panel
if $(trace + '_destroy').val().length < 1
$(trace + 'z').val(z)
switch $(@).attr('element_type')
when 'panel_picture'
trace = trace + 'div'
$(trace).css('zIndex', z)
z++
else
$('.zsort').map ->
$(@).sortable {
update: ( event, ui ) ->
trace = panel_tag_id($(@))
update_z(trace + 'zsort')
}
$('.z-sort li').map ->
$(@).disableSelection()
$('.panel_picture_width_tool').map ->
$(@).html('')
$('.wreverse').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'width')
w = -f.val()
f.val(w)
f = $(trace + 'height')
h = f.val()
refresh_picture($(trace + 'img'), w, h)
$('.wdouble').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'width')
w = f.val() * 2
f.val(w)
$(trace + 'img').width(Math.abs(w))
$(trace + 'img').parent().width(Math.abs(w))
$('.whalf').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'width')
w = Math.floor(f.val() / 2)
f.val(w)
$(trace + 'img').width(Math.abs(w))
$(trace + 'img').parent().width(Math.abs(w))
$('.panel_picture_height_tool').map ->
$(@).html('')
$('.hreverse').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'height')
h = -f.val()
f.val(h)
f = $(trace + 'width')
w = f.val()
refresh_picture($(trace + 'img'), w, h)
$('.hdouble').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'height')
h = f.val() * 2
f.val(h)
$(trace + 'img').height(Math.abs(h))
$(trace + 'img').parent().height(Math.abs(h))
$('.hhalf').click ->
d = $(@).parent()
trace = element_tag_id(d)
f = $(trace + 'height')
h = Math.floor(f.val() / 2)
f.val(h)
$(trace + 'img').height(Math.abs(h))
$(trace + 'img').parent().height(Math.abs(h))
# all
# disable form actions
# hide submit buttons
$('.edit_panel_picture' ).map ->
$(@).submit ->
false
$('.edit_speech_balloon' ).map ->
$(@).submit ->
false
$('.edit_ground_picture' ).map ->
$(@).submit ->
false
$('.edit_ground_color' ).map ->
$(@).submit ->
false
$('.edit_panel' ).map ->
if $(@).attr('jqform')
else
$(@).submit ->
false
$('.submit' ).map ->
$(@).hide()
# disable form z t
$('input').map ->
if $(@).attr('element_type') and $(@).attr('column')
switch $(@).attr('column')
when 'z' , 't'
$(@).hide()
$(@).parent().hide() #label
# add button on new form
$('.submit-new-form').map ->
$(@).html('')
$('.new-element').map ->
$(@).click ->
false