Add select_albums.
This commit is contained in:
parent
739c7e4f41
commit
c577ccfe3b
|
|
@ -660,6 +660,11 @@ class Admin::GalleriesController < OrbitAdminController
|
|||
end
|
||||
end
|
||||
|
||||
def select_albums
|
||||
filter_album()
|
||||
@category_id_albums_maps = @fiter_albums.group_by{|album| album.category_id}
|
||||
end
|
||||
|
||||
private
|
||||
def crop_but_no_backup(image)
|
||||
fname = image.file.path
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
<% unless @include_js_css_flag %>
|
||||
<%= javascript_include_tag "lib/checkbox.card.js" %>
|
||||
<%= stylesheet_link_tag 'basic/global' %>
|
||||
<%= stylesheet_link_tag 'member_select' %>
|
||||
<style>
|
||||
.modal-backdrop, .modal-backdrop.fade.in {
|
||||
opacity: 0.8;
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
.modal-header {
|
||||
padding: 9px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
.modal-body input, .modal-body label {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 20px;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
z-index: 1050;
|
||||
width: 560px;
|
||||
margin-left: -280px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
*border: 1px solid #999;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
|
||||
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.modal-body input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-card li {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
.selected_album {
|
||||
display: inline-block;
|
||||
}
|
||||
#albums-filter .tabs-left > .nano {
|
||||
width: 160px;
|
||||
min-height: 425px;
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.albums-filter-result {
|
||||
min-height: 360px;
|
||||
width: auto;
|
||||
}
|
||||
.checkbox-card li.active {
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.selected_album img {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<% @include_js_css_flag = true %>
|
||||
<% end %>
|
||||
<% index = '' unless defined?(index) %>
|
||||
<div class="control-group">
|
||||
<label class="control-label muted"><%= t('gallery.album') %></label>
|
||||
<div class="controls">
|
||||
<div id="selected_albums<%= index %>" class="selected_albums">
|
||||
<% albums.each do |album| %>
|
||||
<span class="alert alert-info selected_album" id="<%= album.id %>">
|
||||
<span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>
|
||||
<% if album.cover == "default" %>
|
||||
<%= image_tag "gallery/default.jpg" %>
|
||||
<% else %>
|
||||
<img src="<%= album.cover_path %>">
|
||||
<% end %>
|
||||
<p class="album_name"><%= album.name %></p>
|
||||
<%= hidden_field_tag field, album.id %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<a class="btn btn-primary btn-small select_album_modal<%=index%>"><%= t(:add) %></a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
selected_albums<%=index%> = Array();
|
||||
|
||||
$(function(){
|
||||
$.each($("#selected_albums<%= index %> .selected_album"),function(i){
|
||||
selected_albums<%=index%>.push($(this).attr("id"));
|
||||
});
|
||||
|
||||
$(".select_album_modal<%=index%>").click(function(){
|
||||
if($("#select_album<%=index%>").length==0) {
|
||||
$("body").append("<span id='select_album<%=index%>'></span>");
|
||||
$('.checkbox-card').cardCheck();
|
||||
}
|
||||
$.post("<%= select_albums_admin_galleries_path %>?index=<%=index%>",function(modal){
|
||||
$("#select_album<%=index%>").html(modal);
|
||||
$('#albums-filter').on('shown.bs.modal', function() {
|
||||
$("#albums-filter .nano").nanoScroller();
|
||||
});
|
||||
$('#albums-filter').on('hidden.bs.modal', function () {
|
||||
$("#select_album<%=index%>").remove();
|
||||
});
|
||||
updateModal<%=index%>();
|
||||
$("#albums-filter").modal('show');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
var addByCategory<%=index%> = function(category_id){
|
||||
var flag = true;
|
||||
var BreakException = {};
|
||||
try {
|
||||
selected_albums<%=index%>.forEach(function(album_id){
|
||||
if($("#album_ids_"+category_id+"_"+album_id).prop('checked')){
|
||||
flag = false;
|
||||
}
|
||||
if(!flag){
|
||||
throw BreakException;
|
||||
}
|
||||
})
|
||||
} catch (e) {
|
||||
if (e !== BreakException) throw e;
|
||||
}
|
||||
if(flag){
|
||||
$.each($("#category_"+category_id+" .check-item"), function(){
|
||||
selected_albums<%=index%>.push($(this).find("input[type='checkbox']").val());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var removeAlbum<%=index%> = function(album){
|
||||
var id = $(album).parent().attr('id');
|
||||
$("#select_album<%=index%> input[type='checkbox'][value=\""+id+"\"]").prop('checked', false).parent('.check-item').removeClass('active').css('display','');
|
||||
selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != id;});
|
||||
$(album).parent().remove();
|
||||
}
|
||||
Array.prototype.unique = function(){
|
||||
const distinct = (value, index, self) =>{
|
||||
return self.indexOf(value) === index;
|
||||
}
|
||||
return this.filter(distinct);
|
||||
}
|
||||
var updateUsers<%=index%> = function(){
|
||||
$.each($(".category_field input:checked"), function(){
|
||||
addByCategory<%=index%>($(this).val());
|
||||
});
|
||||
|
||||
$("#selected_albums<%= index %>").html("");
|
||||
selected_albums<%=index%> = selected_albums<%=index%>.unique();
|
||||
$.each(selected_albums<%=index%>, function(i, album_id){
|
||||
var wrapper = $("input[value='"+album_id+"']").parent();
|
||||
var album_name = wrapper.find(".album_name").html();
|
||||
$("#selected_albums<%= index %>").append(
|
||||
" <span class='alert alert-info selected_album' id='"+album_id+"'>"+
|
||||
"<span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>"+
|
||||
"<img src=\"" + wrapper.find('img').attr('src') + "\">" +
|
||||
"<p class=\"album_name\">" + album_name + "</p>" +
|
||||
"<input type='hidden' name='<%= field %>' value='"+album_id+"' >"+
|
||||
"</span>"
|
||||
);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var updateModal<%=index%> = function(){
|
||||
$.each($("#selected_albums<%= index %> .selected_album"),function(){
|
||||
var album_id = $(this).attr('id');
|
||||
$("input[value='"+album_id+"']").parent("li").hide().addClass('active').find("input[type='checkbox']").prop('checked', true);
|
||||
});
|
||||
|
||||
$('.check-item').click(function(){
|
||||
var check_box = $(this).find("input[type='checkbox']");
|
||||
var album_id = check_box.val();
|
||||
if(check_box.prop('checked')){
|
||||
selected_albums<%=index%>.push(album_id);
|
||||
}else{
|
||||
selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != album_id;});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<div id="albums-filter" class="modal fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3><%= t('list.user') %></h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="tabbable tabs-left">
|
||||
<div class="nano">
|
||||
<div class="content">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="active"><a href="#all" data-toggle="tab"><%= t('category') %></a></li>
|
||||
<% @categories.each do |category| %>
|
||||
<li class=""><a href="#category_<%= category.id %>" data-toggle="tab"><%= category.title %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade in active" id="all">
|
||||
<fieldset class="category_field">
|
||||
<% @categories.each do |category| %>
|
||||
<label class="checkbox inline">
|
||||
<%= check_box_tag 'category_ids[]', category.id, false, :id => "category_ids_#{category.id}" %> <%= category.title %>
|
||||
</label>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<% @categories.each do |category| %>
|
||||
<div class="tab-pane fade" id="category_<%= category.id %>">
|
||||
<fieldset class="clearfix">
|
||||
<div class="albums-filter-result nano">
|
||||
<div class="content">
|
||||
<i class="icon-search"></i>
|
||||
<input class="search_names" placeholder="<%=t('users.name')%>" style="margin: 1em;">
|
||||
<div style="margin-bottom: 1em;"></div>
|
||||
<ul class="checkbox-card clearfix">
|
||||
<% @category_id_albums_maps[category.id].to_a.each do |album| %>
|
||||
<li class="check-item">
|
||||
<label>
|
||||
<% if album.cover == "default" %>
|
||||
<%= image_tag "gallery/default.jpg" %>
|
||||
<% else %>
|
||||
<img src="<%= album.cover_path %>">
|
||||
<% end %>
|
||||
<p class="album_name"><%= album.name %></p>
|
||||
</label>
|
||||
<%= check_box_tag 'album_ids[]', album.id , false , :id => "album_ids_#{category.id}_#{(album.id rescue '')}" %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="form-actions condition">
|
||||
<button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateUsers<%=@index rescue ''%>()"><%= t(:submit) %></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('#albums-filter a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
try{
|
||||
var target = $($(e.target).attr("href"));
|
||||
target.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
|
||||
}catch(e){};
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$('.search_names').off('input').on('input',function(){
|
||||
var name = $(this).val();
|
||||
var $check_items = $(this).parent().find('.check-item');
|
||||
$check_items.each(function(i,item){
|
||||
if( $(item).find('.user-name').text().search(name) == -1){
|
||||
$(item).css('display','none');
|
||||
}else{
|
||||
$(item).css('display','');
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -76,6 +76,9 @@ Rails.application.routes.draw do
|
|||
get "excel_format"
|
||||
post "importimages"
|
||||
end
|
||||
collection do
|
||||
post 'select_albums'
|
||||
end
|
||||
end
|
||||
resources :images
|
||||
post "galleries/upload_image" => "galleries#upload_image"
|
||||
|
|
|
|||
Loading…
Reference in New Issue