greeting_card/app/views/admin/greeting_cards/layout_design.html.erb

69 lines
3.1 KiB
Plaintext

<%= stylesheet_link_tag "greeting_card/konva_helper", media: "all" %>
<%= stylesheet_link_tag "select2-v4/select2", media: "all" %>
<%= javascript_include_tag "greeting_card/konva.min" %>
<%= javascript_include_tag "greeting_card/konva_helper" %>
<%= javascript_include_tag "select2-v4/select2.min" %>
<div id="search-bar">
<div>
<form>
<h4><%= t(:category) %></h4>
<select name="category" id="submit_when_change">
<% @cats_relations.each do |id, title| %>
<option value="<%=id%>" <%= @category_id == id ? 'selected' : '' %>><%= title %></option>
<% end %>
</select>
</form>
</div>
<%= form_for @set, as: :greeting_card_layout_design ,method: 'post',url: @url,html: { class: 'form-horizontal main-forms previewable' } do |f| %>
<%= hidden_field_tag "#{f.object_name}[category_id]", @category_id %>
<fieldset>
<div class="form-horizontal">
<div class="control-group">
<div class="control-label">
<%= label_tag t('greeting_card.save_name') %>
</div>
<div class="controls">
<%= f.text_field :save_name %>
</div>
</div>
<div class="control-group">
<div class="control-label">
<%= label_tag t('greeting_card.layout_design') %>
</div>
<div class="controls">
<%# https://konvajs.org/docs/sandbox/Canvas_Editor.html %>
<div id="container-wrapper">
</div>
<div id="container-hidden-field" data-name="<%= f.object_name %>[img_objs]">
<%= f.hidden_field_tag "#{f.object_name}[img_objs_changed]", "0", :id => "img_objs_changed" %>
</div>
<script>
var layer = create_konva($('#container-wrapper'), $('#container-hidden-field'), 'container', "<%= @images.first %>", <%= GreetingCardRecord.get_fonts.to_s.html_safe %>, {"lineheight": "<%= t('greeting_card.lineheight') %>", "stroke": ["<%= t('greeting_card.borderline') %>", "<%= t('greeting_card.word_art') %>"], "fill": ["<%= t('greeting_card.fill') %>", "<%= t('greeting_card.fill') %>"]});
<% f.object.img_objs.each do |i, obj| %>
create_text_box(layer, {x: <%= obj[:x].to_f %>, y: <%= obj[:y].to_f %>, w: <%= obj[:w].to_f %>, h: <%= obj[:h].to_f %>, l_h: <%= (obj[:l_h] ? obj[:l_h].to_f : 1.0) %>}, "<%= j(obj[:text]) %>", <%= obj[:fontSize] %>, "<%= obj[:fontFamily] %>", "<%= obj[:fontColor] %>", <%= obj[:is_stroke].nil? ? false : obj[:is_stroke] %>, "<%= obj[:stroke] %>", "<%= obj[:strokeWidth] %>", <%= obj[:is_fill].nil? ? true : obj[:is_fill] %>);
<% end %>
$('#container-hidden-field').one('change', function()
{
$('#img_objs_changed').val('1');
});
</script>
</div>
</div>
<div class="control-group" style="text-align: center;">
<input class="btn btn-primary" type="submit" value="<%= t('submit')%>">
</div>
</div>
</fieldset>
<% end %>
<%= render partial: 'print_format_explain' %>
<script>
$(document).ready(function(){
$("#submit_when_change").on("change",function(){
$(this)[0].form.submit();
})
})
</script>