gallery/app/views/admin/galleries/_recreate_thumb.html.erb

<%= javascript_include_tag "jquery.minicolors.js" %>
<%= stylesheet_link_tag "jquery.minicolors.css" %>
<nobr style='display: block;display: flex;flex-wrap: wrap;width: 100%;'>
<form method="get" action="/admin/galleries/recreate_image?" name="thumb_recreate_form" 
    style='display: block;display: inline-flex;flex-wrap: wrap;align-items: center;width: 100%;'>
<span style="display:inline-flex;align-items:center;padding:0 1%;height:34px;font-size: 1.5em;">
<%= t('gallery.frame_color')+':' %>
</span>
<input style='height:26px;max-width: 80%;' class='minicolors-input' type="text" name="color_choice" value="<%= @color_save.to_s %>" autocomplete="off">
<span style='font-size: 20px;'>
<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
<%= t('gallery.transparent') %>
</span>
<button type="button" onclick='submit_msg()' style='margin: 0 10px;height: 34px;'>
<%= t('gallery.recreate') %>
</button>
<input type="hidden" name="album_id" value="">
<span style='display: inline-flex;align-items: center;'>
<input type='checkbox' name='use_default' value='true' onchange='hide_input(this)' style='width: 18px;height: 18px;margin: 0;'> 
<label style='font-size: 20px;margin: 0;'><%= t('gallery.use_set') %></label>
</span>
</form>
<span style='display: inline-flex;align-items: center;padding-bottom: 20px;padding-left: 10px;'>
<input type='radio' name='checkbox' onchange='set_checked(this)'> 
<label style='font-size: 20px;margin: 0;'><%= t('gallery.checked') %></label>
<input type='radio' name='checkbox' onchange='set_unchecked(this)'> 
<label style='font-size: 20px;margin: 0;'><%= t('gallery.unchecked') %></label>
</span>
</nobr>
<script type="text/javascript"> 
function hide_input(trigger) {
    if (trigger.checked){
        $('.minicolors').css('display','none')
    }
    else{
        $('.minicolors').css('display','block')
    }
}
function set_transparent(trigger) {
    if (trigger.checked){
        $('.minicolors-input').attr('data-color',$('.minicolors-input').val())
        $('.minicolors-input').minicolors('value','')
        $('.minicolors-input').prop('disabled',true)
    }
    else{
        $('.minicolors-input').minicolors('value',$('.minicolors-input').attr('data-color'))
        $('.minicolors-input').prop('disabled',false)
    }
}
function set_checked(trigger) {
    if (trigger.checked){
        $(".rgbody input[name='album_id']").prop('checked',true)
    }
}
function set_unchecked(trigger) {
    if (trigger.checked){
        $(".rgbody input[name='album_id']").prop('checked',false)
    }
}
function submit_msg() { 
    var msg = "<%= t('gallery.sure?') %>"; 
    if (confirm(msg)==true){ 
        $("form[name='thumb_recreate_form']").submit();
        return true; 
    }else{ 
        return false; 
    } 
} 
$("form[name='thumb_recreate_form']").submit(function () {
    var formdata = new Array;
    var data = $(".rgbody input[name='album_id']")
    var count=data.length; 
    var permit = true
    for (i=0;i<count;i++){
		if (data[i].checked){
			formdata.push($(data[i]).val())
		}
    }
    if (formdata.length===0){
        permit = false
    }
	$("form[name='thumb_recreate_form']").find("input[name='album_id']").val(formdata.join(','))
	if (permit){
        return true;
    }
    else{
        alert('<%= t('gallery.no_choose') %>')
        return false;
    }
})
$(document).ready( function() {
    $('.minicolors-input').minicolors({
      defaultValue: $(this).data('defaultValue') || '',
      format: 'hex',
      letterCase: 'lowercase',
      position: 'bottom left',
      change: function(value, opacity) {
        if( !value ) return;
        if( opacity ) value += ', ' + opacity;
      },
      theme: 'bootstrap'
    });
    $('.minicolors').css('margin','0 10px')
    $('.minicolors').css('height','34px')
});
</script>