saurabh
/
gallery
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add some modules

This commit is contained in:
邱博亞 2021-04-04 13:03:24 +08:00
parent 692036531c
commit cf864a7625
26 changed files with 837 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/assets/javascripts/gallery.js
View File

@ -188,7 +188,22 @@ function translate(ele,pretext,text,return_flag){
return return_value
}
}
$(function() {
var config = {}
config.autoGrow_minHeight = 50;
config.allowedContent = false;
config.disallowedContent = 'img';
config.toolbar = [
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
'/',
{ name: 'insert', items: [ 'SpecialChar'] },
{ name: 'styles', items: [ 'Font' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] }
];
var $container = $('.gallery'),
$containerData = $container.data();
@ -261,17 +276,34 @@ $(function() {
})[0];
switch($e.attr("for")){
case "description":
if(obj.description){
instance.find("textarea").each(function(){
if(obj.description[$(this).attr("for")])
$(this).val(obj.description[$(this).attr("for")]);
instance.find(".description-editor").each(function(){
var locale = $(this).attr("for")
$(this).html(obj.description ? obj.description[locale] : '');
CKEDITOR.replace(this,config);
})
instance.find(".title-editor").each(function(){
var locale = $(this).attr("for")
$(this).html(obj.title ? obj.title[locale] : '');
CKEDITOR.replace(this,config);
})
instance.find("a[data-toggle=\"tab\"],div[role=\"tabpanel\"]").each(function(){
$(this).attr('id',$(this).attr('id').replace('-fake',''))
})
}
instance.find("input[type=hidden]").val(image_id);
instance.find("form").bind("ajax:success",function(evt, data, status){
$.pageslide.close();
photosData = data;
})
instance.find('.btn-group a[data-toggle="tab"]').click(function(){
$(this).tab('show');
$(this).parents('.btn-group').eq(0).children('a[data-toggle="tab"]').removeClass('active in');
$(this).addClass('active in')
var inst = $($(this).attr('href')).find('textarea')
window.setTimeout(function(){
CKEDITOR.instances[inst.attr('name')].execCommand('autogrow')
},300)
})
break;
case "tags":
instance.find('.tags-groups').cardCheck({
@ -323,6 +355,7 @@ $(function() {
if($("#imgholder").length){
$('.open').pageslide({
W: '40vw',
loadComplete: function(instance,elem) {
bindEvent(instance,elem);
}
@ -464,6 +497,7 @@ $(function() {
$("#imgholder").prepend($e);
$os = $e.find("a.open");
$os.pageslide({
W: '40vw',
loadComplete: function(instance,elem) {
bindEvent(instance,elem);
}

1
app/assets/javascripts/galleryAPI_frontend.js.erb
View File

@ -4,6 +4,7 @@ $.extend($.expr[':'], {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
var galleryAPI = function(){
g = this;
this.urlVars = rcom.getUrlVars();

8
app/assets/javascripts/theater.js
View File

@ -1,3 +1,8 @@
$('.show-gallery .show-content.col-sm-2').ready(function(){
if ($('.show-gallery .show-content.col-sm-2').eq(0).css('float')=='left'){
$('.show-gallery .show-content.col-sm-2').eq(0).parent().css('float','left')
}
})
window.GalleryTheater = function(){
var parent_divs = $('.gallery').parents('div'),
parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
@ -477,6 +482,9 @@ window.GalleryTheater = function(){
img.width("65%");
}
}
if (typeof set_gallery_height != 'undefined'){
set_gallery_height()
}
}
var changeUrl = function(){

4
app/assets/stylesheets/gallery.css
View File

@ -536,7 +536,9 @@ div.rgbody{
#fileupload #file-list .action-bnt {
text-align: right;
}
.cke_contents.cke_reset{
position: relative;
}
.order-edit-notification{
background-color: #ffffd5;
z-index: 10;

91
app/assets/stylesheets/gallery_card.css Normal file
View File

@ -0,0 +1,91 @@
.gallery.card-group .row {
position: relative;
display: flex;
flex-wrap: wrap;
}
.gallery.card-group .card-back {
transform: rotateY(180deg) translateX(-100%);
position: absolute;
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
display: block;
width: 100%;
height: 100%;
top: 0;
background: white;
color: black;
}
.gallery.card-group .card.card-flip.h-100:nth-child(4n) {
margin-right: 0em;
}
.gallery.card-group .card.card-flip.h-100 {
position: relative;
overflow: hidden;
width: 25%;
width: calc( 25% - 0.75em);
background: white;
margin-right: 1em;
margin-bottom: 1em;
}
@media (max-width: 768px){
.gallery.card-group .card.card-flip.h-100 {
width: 50%;
width: calc( 50% - 0.5em);
}
.gallery.card-group .card.card-flip.h-100:nth-child(2n) {
margin-right: 0em;
}
}
@media (max-width: 575px){
.gallery.card-group .card.card-flip.h-100 {
width: 100%;
margin-right: 0em;
}
}
.gallery.card-group h3.card-title {
padding: 0.5em;
margin: 0;
font-size: 1.2em;
}
.gallery.card-group .card-front{
backface-visibility: hidden;
width: 100%;
height: 100%;
}
.gallery.card-group .card.card-flip.h-100:hover .card-back {
transform: rotateY(0deg);
}
.gallery.card-group .card-button-group{
bottom: 0;
right: 0;
position: absolute;
display: flex;
}
.gallery.card-group .card-body{
width: 100%;
position: inherit;
display: flex;
flex-direction: column;
height: 100%;
}
.gallery.card-group .card-button-group a {
color: #fff;
display: block;
background: #6c757d;
padding: 0.5em;
width: 2.3em;
height: 2.3em;
margin-right: 0.1em;
border-radius: 0;
}
.gallery.card-group .card-button-group a:hover {
color: #fff;
background-color: #5a6268;
border-color: #545b62;
}
.gallery.card-group .card-button-group a:focus {
color: #fff;
outline: 0.1em dotted !important;
}

36
app/assets/stylesheets/theater.css
View File

@ -498,3 +498,39 @@ right:0;
#theaterPreviousButton{
left:0;
}
.show-gallery-2 .gallery-thumb-container{
overflow: hidden;
}
.show-gallery-2 img.gallery-image{
position: absolute;
}
.show-gallery-2 .image-container{
position: relative;
height: 100%;
width: 100%;
}
#gallery-theater-stage > .show-gallery-2.gallery{
position: relative;
height: 0;
width: 100%;
z-index: unset;
overflow: hidden;
}
.show-gallery-2 .gallery-thumb-container{
position: absolute;
}
.show-gallery-2 .gallery-image {
top: 42%;
}
.show-gallery-2 .gallery-actions{
display: none;
}
.show-gallery-2 .gallery-img-desc{
position: absolute;
}
@media screen and (max-width: 768px){
.show-gallery-2 .gallery-thumb-container {
bottom: 0px;
}
}

15
app/controllers/admin/galleries_controller.rb
View File

@ -281,10 +281,12 @@ class Admin::GalleriesController < OrbitAdminController
@fiter_albums = albums1.concat(albums2)
end
def update_album_setting
AlbumSetting.first.update_attributes(limit: params['album_setting_limit'])
params_album_setting = params['album_setting'].permit!
AlbumSetting.first.update_attributes(params_album_setting)
redirect_to '/admin/galleries'
end
def setting
@album_setting = AlbumSetting.first
end
def index
album_length = Album.all.count
@ -297,13 +299,6 @@ class Admin::GalleriesController < OrbitAdminController
end
end
@url = request.original_fullpath
if AlbumSetting.first.nil?
AlbumSetting.create()
elsif AlbumSetting.count > 1
AlbumSetting.all.to_a[1..-1].each do |album_setting|
album_setting.destroy
end
end
@limit_count = AlbumSetting.first.limit.to_i
@limit_count = album_length if @limit_count == 0
if params['page_no'].nil?
@ -336,7 +331,7 @@ class Admin::GalleriesController < OrbitAdminController
@images = @images.concat(images)
image_content = []
@images.each do |image|
image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
end
@tags = @module_app.tags
@photos_data = {"galleries" => image_content}.to_json
@ -419,7 +414,7 @@ class Admin::GalleriesController < OrbitAdminController
@images = @images.concat(images)
image_content = []
@images.each do |image|
image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
end
render :json=>{"galleries" => image_content}.to_json
end

47
app/controllers/galleries_controller.rb
View File

@ -1,4 +1,5 @@
class GalleriesController < ApplicationController
find_tag = Tag.all.select{|value| value.name==I18n.t('gallery.not_show_desc')}
if find_tag.length==0
module_app_id = ModuleApp.where(:key=>"gallery").first[:_id]
@ -35,6 +36,7 @@ class GalleriesController < ApplicationController
end
def index
@album_setting = AlbumSetting.first
params = OrbitHelper.params
album_tp = Album.filter_by_categories.filter_by_tags
all_count = album_tp.count
@ -57,15 +59,19 @@ class GalleriesController < ApplicationController
albums_no_order = album_tp.desc(:created_at).where(:order.in=>[-1,nil]).page(nil).per(all_count)[start_index...(start_index+page_data_count)].to_a
end
albums = albums_with_order.concat(albums_no_order)
album_color_map = AlbumColor.where(:album_id.in=> albums.map{|v| v.id}).pluck(:album_id,:color,:album_card_background_color,:album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
galleries = albums.collect do |a|
doc = Nokogiri::HTML(a.description.to_s)
alt_text = doc.text.empty? ? 'gallery image' : doc.text
colors = album_color_map[a.id]
{
"album-name" => a.name,
"album-description" => a.description,
"alt_title" => alt_text,
"link_to_show" => OrbitHelper.url_to_show(a.to_param),
"thumb-src" => a.cover_path || "/assets/gallery/default.jpg"
"thumb-src" => a.cover_path || "/assets/gallery/default.jpg",
"album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'),
"album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color)
}
end
{
@ -75,16 +81,25 @@ class GalleriesController < ApplicationController
}
end
def show
@album_setting = AlbumSetting.first
params = OrbitHelper.params
album = Album.find_by_param(params[:uid])
flag = show_desc?
colors = AlbumColor.where(:album_id=> album.id).pluck(:color,:album_card_background_color,:album_card_text_color)[0] rescue []
images = album.album_images.asc(:order).collect do |a|
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
alt_text = (a.description.blank? ? "gallery image" : Nokogiri::HTML(a.description.to_s).text())
{
"image-description" => (flag ? a.description : ''),
"image_short_description" => a.title,
"alt_title" => alt_text,
"link_to_show" => "#" + a.id.to_s,
"thumb-src" => a.file.thumb.url
"thumb-src" => a.file.thumb.url,
"thumb-large-src" => a.file.thumb_large.url,
"mobile-src" => a.file.mobile.url,
"theater-src" => a.file.theater.url,
"album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'),
"album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color)
}
end
{
@ -93,14 +108,27 @@ class GalleriesController < ApplicationController
"album-description" => (flag ? "<p><span>#{album.description}</span></p>" : "")}
}
end
def iterate_data(*args)
tmp = nil
args.each do |arg|
if !arg.blank? && arg != 'transparent'
tmp = arg
break
end
end
tmp
end
def widget
@album_setting = AlbumSetting.first
tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
album_ids = Album.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags).pluck(:id)
album_color_map = AlbumColor.where(:album_id.in=> album_ids).pluck(:album_id,:color,:album_card_background_color,:album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
params = OrbitHelper.params
counts = OrbitHelper.widget_data_count
images = AlbumImage.where({album_id:{"$in"=>album_ids}}).desc(:id).limit(counts *5).sample(counts)
images = images.collect do |a|
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : a.description)
colors = album_color_map[a.album_id]
alt_text = (a.description.nil? || a.description == "" ? "gallery image" : Nokogiri::HTML(a.description).text())
{
"link_to_show" => OrbitHelper.widget_more_url + "/" + a.album.to_param + "#" + a.id.to_s,
"alt_title" => alt_text,
@ -108,9 +136,12 @@ class GalleriesController < ApplicationController
"thumb-src" => a.file.thumb.url,
"thumb-large-src" => a.file.thumb_large.url,
"image_description" => a.description,
"image_short_description" => a.title,
"mobile-src" => a.file.mobile.url,
"theater-src" => a.file.theater.url,
"album-name" => a.album.name_translations[I18n.locale]
"album-name" => a.album.name_translations[I18n.locale],
"album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'),
"album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color)
}
end
{
@ -137,9 +168,15 @@ class GalleriesController < ApplicationController
return output
end
def theater
if params[:id].include?('page=')
album = Album.where(uid: params[:id].sub('page=','')).first
albumid = album.id
image = album.album_images.first
else
image = AlbumImage.find(params[:id])
albumid = image.album_id
album = Album.find(albumid)
end
images = album.album_images.asc(:order)
data = {
"album" => album,

27
app/models/album.rb
View File

@ -5,7 +5,6 @@ class Album
include OrbitCategory::Categorizable
include OrbitTag::Taggable
include Slug
field :name, as: :slug_title, localize: true
field :description, localize: true
field :cover, default: "default"
@ -14,7 +13,7 @@ class Album
field :uid, type: String
field :rss2_id, type: String
field :order, type: Integer, default: -1
field :resize_gravity
# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
has_many :album_images, :autosave => true, :dependent => :destroy
has_many :album_colors, :autosave => true, :dependent => :destroy
@ -30,6 +29,30 @@ class Album
end
end
end
def resize_gravity
"""
NorthWestGravity
Position object at top-left of region
NorthGravity
Position object at top-center of region
NorthEastGravity
Position object at top-right of region
WestGravity
Position object at left-center of region
CenterGravity
Position object at center of region
EastGravity
Position object at right-center of region
SouthWestGravity
Position object at left-bottom of region
SouthGravity
Position object at bottom-center of region
SouthEastGravity
Position object at bottom-right of region
"""
tmp = self[:resize_gravity]
(tmp.blank? ? AlbumSetting.first.resize_gravity : tmp) rescue 'Center'
end
def self.find_by_param(input)
self.find_by(uid: input)
end

3
app/models/album_color.rb
View File

@ -2,5 +2,8 @@ class AlbumColor
include Mongoid::Document
include Mongoid::Timestamps
field :color, type: String
field :album_card_background_color, type: String
field :album_card_text_color, type: String
belongs_to :album
end

12
app/models/album_image.rb
View File

@ -5,12 +5,22 @@ class AlbumImage
include OrbitTag::Taggable
mount_uploader :file, GalleryUploader
field :title
field :title_translations, type: Hash, default: {}
field :description, localize: true
field :rss2_id, type: String
field :order, type: Integer, default: -1
# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
def title_translations
tmp = super || {}
if tmp == {}
tmp = I18n.available_locales.collect{|locale| [locale,self[:title]]}.to_h
end
tmp
end
def title
self.title_translations[I18n.locale]
end
belongs_to :album
has_many :album_crops, :autosave => true, :dependent => :destroy
accepts_nested_attributes_for :album_crops, :allow_destroy => true

4
app/models/album_setting.rb
View File

@ -2,4 +2,8 @@ class AlbumSetting
include Mongoid::Document
include Mongoid::Timestamps
field :limit
field :resize_gravity, type: String, default: 'center'
ResizeGravities = %w[Center NorthWest North NorthEast West East SouthWest South SouthEast]
field :album_card_background_color, default: ''
field :album_card_text_color, default: '#000000'
end

8
app/uploaders/gallery_uploader.rb
View File

@ -172,14 +172,12 @@ class GalleryUploader < CarrierWave::Uploader::Base
img.write(model.file.crop_from_org.path)
end
def transparent?(*arg)
now_id = model.album_id.to_s
now_album = Album.all.select { |value| (now_id==value.id.to_s)}[0]
now_album = model.album
now_album.album_colors.first['color']=='transparent' rescue true
end
def pad_process (w,h)
now_id = model.album_id.to_s
now_album = Album.all.select { |value| (now_id==value.id.to_s)}[0]
resize_and_pad(w, h, ((now_album.album_colors.first['color']=='transparent' rescue true) ? :transparent : now_album.album_colors.first['color']), 'Center')
now_album = model.album
resize_and_pad(w, h, (transparent? ? :transparent : now_album.album_colors.first['color']), (now_album.resize_gravity rescue 'Center'))
end
end

41
app/views/admin/galleries/_form.html.erb
View File

@ -24,19 +24,20 @@ input.minicolors-input{
</style>
<script type="text/javascript">
function set_transparent(trigger) {
var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
if (trigger.checked){
$('.minicolors-input').attr('data-color',$('.minicolors-input').val())
$('.minicolors-input').minicolors('value','transparent')
$('.minicolors-input').prop('disabled',true)
color_input_box.attr('data-color',color_input_box.val())
color_input_box.minicolors('value','transparent')
color_input_box.prop('disabled',true)
}
else{
$('.minicolors-input').minicolors('value',$('.minicolors-input').attr('data-color'))
$('.minicolors-input').prop('disabled',false)
color_input_box.minicolors('value',color_input_box.attr('data-color'))
color_input_box.prop('disabled',false)
}
}
$(document).ready( function() {
$('.minicolors-input').minicolors({
defaultValue: $(this).data('defaultValue') || '',
defaultValue: '',
format: 'hex',
letterCase: 'lowercase',
position: 'bottom left',
@ -50,11 +51,13 @@ input.minicolors-input{
$('.minicolors').css('margin','0 10px')
$('.minicolors').css('height','34px')
$('*').submit(function () {
var value = $(this).find('input.minicolors-input').val();
$.each($(this).find('input.minicolors-input'),function(){
var value = $(this).val();
if (value == ''){
$(this).find('input.minicolors-input').val('transparent');
$(this).find('input.minicolors-input').prop('disabled',false);
}
})
return true
})
});
@ -116,6 +119,30 @@ input.minicolors-input{
<%= t('gallery.transparent') %>
</span>
</div>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.album_card_background_color') %></label>
<%= album_color_form.text_field :album_card_background_color, :class => 'input-block-level minicolors-input' %>
<span style='font-size: 20px;display: flex;align-items: center;'>
<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'>
<%= t('gallery.transparent') %>
</span>
</div>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.album_card_text_color') %></label>
<%= album_color_form.text_field :album_card_text_color, :class => 'input-block-level minicolors-input' %>
<span style='font-size: 20px;display: flex;align-items: center;'>
<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'>
<%= t('gallery.transparent') %>
</span>
</div>
<div class="control-group">
<label class="control-label muted">
<%= t('gallery.thumb_resize_reference') %>
</label>
<div class="controls">
<%= f.select :resize_gravity, [["---#{t("default")}: #{t("gallery.gravity.#{AlbumSetting::ResizeGravities[0]}")}---",nil]]+AlbumSetting::ResizeGravities.collect{|v| [t("gallery.gravity.#{v}"),v]} %>
</div>
</div>
</div>
<% end %>
</div>

79
app/views/admin/galleries/setting.html.erb
View File

@ -1,12 +1,79 @@
<%= javascript_include_tag "jquery.minicolors" %>
<%= stylesheet_link_tag "jquery.minicolors" %>
<style type="text/css">
.control-group {
align-items: center;
}
.control-group {
align-items: center;
}
</style>
<script type="text/javascript">
function set_transparent(trigger) {
var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
if (trigger.checked){
color_input_box.attr('data-color',color_input_box.val())
color_input_box.minicolors('value','transparent')
color_input_box.prop('disabled',true)
}
else{
color_input_box.minicolors('value',color_input_box.attr('data-color'))
color_input_box.prop('disabled',false)
}
}
$(document).ready( function() {
$('form.update_album_setting_form').submit(function(){
window.setTimeout(function(){alert('success')},500)
$('.minicolors-input').minicolors({
defaultValue: '',
format: 'hex',
letterCase: 'lowercase',
position: 'bottom left',
change: function(value, opacity) {
if( !value ) return;
if( opacity ) value += ', ' + opacity;
},
theme: 'bootstrap'
});
$('.minicolors-input').attr('autocomplete','off')
$('.minicolors').css('margin','0 10px')
$('.minicolors').css('height','34px')
$('*').submit(function () {
$.each($(this).find('input.minicolors-input'),function(){
var value = $(this).val();
if (value == ''){
$(this).find('input.minicolors-input').val('transparent');
$(this).find('input.minicolors-input').prop('disabled',false);
}
})
return true
})
});
</script>
<%= form_tag '/admin/galleries/update_album_setting',remote: true,:class=>'update_album_setting_form' do %>
<%= t('gallery.album_limit_for_one_page') %>:
<%= text_field_tag :album_setting_limit, AlbumSetting.first.limit,:placeholder => t('gallery.blank_for_nil') %>
<input type="submit" value="<%= t('submit') %>">
<%= form_for @album_setting, url: '/admin/galleries/update_album_setting',:class=>'update_album_setting_form',method: 'post' do |f| %>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.album_limit_for_one_page') %></label>
<%= f.text_field :limit,:placeholder => t('gallery.blank_for_nil') %>
</div>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.thumb_resize_reference') %></label>
<%= f.select :resize_gravity, [["---#{t("default")}: #{t("gallery.gravity.#{AlbumSetting::ResizeGravities[0]}")}---",nil]]+AlbumSetting::ResizeGravities.collect{|v| [t("gallery.gravity.#{v}"),v]} %>
</div>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.album_card_background_color') %></label>
<%= f.text_field :album_card_background_color, :class => 'input-block-level minicolors-input' %>
<span style='font-size: 20px;display: flex;align-items: center;'>
<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'>
<%= t('gallery.transparent') %>
</span>
</div>
<div class="control-group" style='display: flex;'>
<label class="control-label muted"><%= t('gallery.album_card_text_color') %></label>
<%= f.text_field :album_card_text_color, :class => 'input-block-level minicolors-input' %>
<span style='font-size: 20px;display: flex;align-items: center;'>
<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'>
<%= t('gallery.transparent') %>
</span>
</div>
<%= f.hidden_field :id %>
<%= f.submit t('submit'),:class=>'btn btn-primary' %>
<% end %>

18
app/views/admin/galleries/show.html.erb
View File

@ -164,11 +164,22 @@
<div class="content">
<form for="description" method="post" data-remote="true" action="/admin/galleries/update_image">
<fieldset>
<legend>Description</legend>
<div class="btn-group">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<label><%= t(locale.to_s) %></label>
<textarea rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
<a class="btn<%= ' active in' if i == 0 %>" id="btn-<%= locale %>-fake" data-toggle="tab" href="#form-<%= locale %>"><%= t(locale) %></a>
<% end %>
</div>
<div class="tab-content">
<% @site_in_use_locales.each_with_index do |locale, i| %>
<div id="form-<%= locale %>-fake" role="tabpanel" aria-labelledby="btn-<%= locale %>" class="tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
<legend><%= I18n.t('description') %></legend>
<textarea class="ckeditor_reduce description-editor" rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
<legend><%= I18n.t('gallery.short-description') %></legend>
<textarea class="ckeditor_reduce title-editor" rows="10" name="album_image[title_translations][<%= locale %>]" for="<%= locale %>"></textarea>
</div>
<% end %>
</div>
<div class="form-actions">
<a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t('gallery.cancel') %></a>
<input type="submit" value="Save" class="btn btn-primary" />
@ -184,7 +195,6 @@
</script>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
<%= javascript_include_tag "jquery.masonry.min.js" %>
<%= javascript_include_tag "jquery.lite.image.resize.js" %>
<%= javascript_include_tag "lib/checkbox.card" %>

2
app/views/admin/images/show.html.erb
View File

@ -24,7 +24,7 @@
<a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
<a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
<div class="slideinfo">
<span class="info"><%= @image.description %></span>
<span class="info"><%= @image.description.html_safe %></span>
</div>
</div>
</div>

186
app/views/galleries/show.html.erb
View File

@ -1,10 +1,194 @@
<%
params = OrbitHelper.params
page = Page.where(url:params['url']).first
@layout_type = 0
if page.methods.include?(:select_option_items)
@show_option_items = ModuleApp.where(key: 'gallery').last.show_option_items rescue nil
page.select_option_items.each do |select_option_item|
if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
value = YAML.load(select_option_item.value)
tmp = value[:en]
I18n.with_locale(:en) do
if tmp == t('gallery.grid_style')
@layout_type = 0
elsif tmp == t('gallery.card_style')
@layout_type = 1
elsif tmp == t('gallery.slideshow_style')
@layout_type = 2
end
end
end
end
end
data = action_data
%>
<% if @layout_type==0 %>
<%= render_view %>
<% elsif @layout_type==1 %>
<div class="show-gallery gallery card-group">
<h1 class="show-title">
<span><%= data['data']['album-title'] %></span>
</h1>
<%= data['data']['album-description'].html_safe %>
<link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
<div class="row show-content" data-level="0" data-list="images">
<% data['images'].each do |image| %>
<div class="card card-flip h-100">
<div class="card-front">
<div class="card-body" style="padding:0;">
<img
srcset="
<%= image['thumb-large-src'] %> 1024w,
<%= image['thumb-src'] %> 768w"
src="<%= image['thumb-src'] %>"
alt="<%= image['alt_title'] %>"
>
<div class="card-footer">
<h3 class="card-title"><%= image['image_short_description'] %></h3>
</div>
</div>
</div>
<div class="card-back">
<div class="card-body" style="background-color: <%= image['album_color'] %>;color: <%= image['album_card_text_color'] %>;">
<h3 class="card-title"><%= image['image_short_description'] %></h3>
<%= image['image_description'] %></h3>
<div class="card-button-group">
<a href="<%= image['link_to_show'] %>" class="btn btn-secondary view" onclick="window.location.hash = '<%= image['link_to_show'] %>';GalleryTheater();return false;">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="<%= image['src'] %>" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="<%= image['alt_title'] %>" data-type="image">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<% elsif @layout_type==2 %>
<script type="text/javascript">
if (window.location.hash==''){
window.location.hash = '#page='+window.location.href.split(/\/|-/).slice(-1)[0].split('#')[0]
}
function set_gallery_height(){
var h = $('.gallery-thumb-container').height()+$('.gallery-image.gal-active').height()+$('.gallery-actions').height()+$('.theaterButton').height()+20
$('.show-gallery-2.gallery').css('height',h)
}
$(window).resize(function(){
set_gallery_height()
})
</script>
<% elsif @layout_type==nil %>
<div class="show-gallery-2 gallery" style="margin-top: 2.4em;">
<div class="gallery-loader" style="display: none;">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div class="gallery-actions">
<div class="gallery-show-original gallery-actions-btn">
<a title="在新視窗開啟 顯示原始圖片" href="/uploads/album_image/file/606574f19bb8189e640000ac/49b36_245.jpg"><i class="fa fa-image"></i></a>
</div>
<div class="gallery-toggle-desc gallery-actions-btn">
<i class="fa fa-comment"></i>
</div>
<div class="gallery-theme-switch gallery-actions-btn">
<i class="fa fa-circle"></i>
</div>
<div class="gallery-close gallery-actions-btn">
<i class="fa fa-times"></i>
</div>
</div>
<div class="image-container" id="image-container">
<img class="gallery-image gal-prev gal-inactive" src="/uploads/album_image/file/606574ea9bb8189e640000ab/theater_cbea4_249.jpg" style="display: inline;">
<img class="gallery-image gal-active" src="/uploads/album_image/file/606574f19bb8189e640000ac/theater_49b36_245.jpg" style="display: inline;">
<div class="theaterButtonGroup">
<button id="theaterPreviousButton" class="theaterButton">&lt; </button>
<button id="theaterPlayButton" class="theaterButton">▶ </button>
<button id="theaterNextButton" class="theaterButton">&gt; </button>
</div>
<img class="gallery-image gal-next gal-inactive" src="/uploads/album_image/file/606574f79bb8189e640000ad/theater_ab1d2_244.jpg" style="display: inline;">
</div>
<div class="gallery-thumb-toggle gallery-thumb-line">
<i class="fa fa-angle-double-up"></i>
</div>
<div class="gallery-thumb-container">
<div class="gallery-thumb-navs show">
<div class="gallery-thumb-prev gallery-thumb-nav">
<i class="fa fa-arrow-circle-o-left"></i>
</div>
<div class="gallery-thumb-next gallery-thumb-nav">
<i class="fa fa-arrow-circle-o-right"></i>
</div>
</div>
<ul class="gallery-thumb-wrap" style="left: -908.5px;">
<li class="gallery-item" data-index="0"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065746d9bb8189e64000096/thumb_d987b_258.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="1"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574769bb8189e64000097/thumb_2a046_257.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="2"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065747c9bb8189e64000098/thumb_5076d_256.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="3"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574849bb8189e64000099/thumb_d834a_255.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="4"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574889bb8189e6400009a/thumb_ea2df_254.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="5"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065748c9bb8189e6400009b/thumb_40bf9_253.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="6"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574909bb8189e6400009c/thumb_3a8bb_252.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="7"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574969bb8189e6400009d/thumb_4551b_251.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="8"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065749d9bb8189e6400009e/thumb_4f713_250.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="9"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a39bb8189e6400009f/thumb_cbea4_249.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="10"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a99bb8189e640000a0/thumb_49b36_245.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="11"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574af9bb8189e640000a1/thumb_ab1d2_244.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="12"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574b69bb8189e640000a2/thumb_d987b_258.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="13"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574be9bb8189e640000a3/thumb_2a046_257.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="14"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574c49bb8189e640000a4/thumb_5076d_256.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="15"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574cc9bb8189e640000a5/thumb_d834a_255.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="16"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d09bb8189e640000a6/thumb_ea2df_254.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="17"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d49bb8189e640000a7/thumb_40bf9_253.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="18"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d89bb8189e640000a8/thumb_3a8bb_252.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="19"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574de9bb8189e640000a9/thumb_4551b_251.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="20"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574e59bb8189e640000aa/thumb_4f713_250.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="21"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574ea9bb8189e640000ab/thumb_cbea4_249.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item active" data-index="22"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f19bb8189e640000ac/thumb_49b36_245.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li><li class="gallery-item" data-index="23"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f79bb8189e640000ad/thumb_ab1d2_244.jpg" alt="<div class=&quot;mt-1&quot;>
</div>"></a></li></ul>
</div>
<div class="gallery-img-desc"><p></p><div class="mt-1">
</div><p></p></div>
</div>
<% end %>
<% OrbitHelper.render_css_in_head(["theater.css"]) %>
<%= javascript_include_tag "jquery.touchSwipe.min" %>
<%= javascript_include_tag "theater" %>
<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
<div id="gallery-theater-stage">
<div class="gallery" style="margin-top: 2.4em;">
<div class="<%= @layout_type==2 ? 'show-gallery-2 ' : '' %>gallery" style="margin-top: 2.4em;">
<div class="gallery-loader">
<div class="spinner">
<div class="rect1"></div>

18
config/locales/en.yml
View File

@ -1,6 +1,24 @@
en:
gallery:
inner_page_layout: Inner Page Layout
card_style: Card Style
grid_style: Grid Style
slideshow_style: Slideshow style
album_card_background_color: Background Color for album card
album_card_text_color: Text Color for album card
thumb_resize_reference: Resize reference for thumb
gravity:
Center: center
NorthWest: top-left
North: top-center
NorthEast: top-right
West: left-center
East: right-center
SouthWest: left-bottom
South: bottom-center
SouthEast: bottom-right
short-description: Short Description
album_limit_for_one_page: Amount of limit for album in one page
blank_for_nil: blank present no limit
load_html: Load next batch

18
config/locales/zh_tw.yml
View File

@ -1,6 +1,24 @@
zh_tw:
gallery:
inner_page_layout: 內頁頁面樣式
card_style: 卡片樣式
grid_style: 格子排版樣式
slideshow_style: 輪播樣式
album_card_background_color: 相簿卡片背景顏色
album_card_text_color: 相簿卡片文字顏色
thumb_resize_reference: 縮圖縮放參考
gravity:
Center: 中心
NorthWest: 左上
North: 中心上方
NorthEast: 右上
West: 左側中心
East: 右側中心
SouthWest: 左下
South: 中心下方
SouthEast: 右下
short-description: 簡短描述
album_limit_for_one_page: 一頁呈現的相簿數量
blank_for_nil: 留白表示無限制
load_html: 存取下一批資料

37
lib/gallery/engine.rb
View File

@ -1,6 +1,37 @@
module Gallery
class Engine < ::Rails::Engine
initializer "gallery" do
begin
translate_data = Dir["#{Gallery::Engine.root}/config/locales/*.yml"] .map{|yaml_file| YAML.load(File.read(yaml_file))}
data = {}
key1 = {}
value1 = {}
value2 = {}
value3 = {}
translate_data.each do |t_data|
v = t_data.values
k = t_data.keys[0]
key1[k] = v[0]['gallery']['inner_page_layout']
value1[k] = v[0]['gallery']['grid_style']
value2[k] = v[0]['gallery']['card_style']
value3[k] = v[0]['gallery']['slideshow_style']
end
data[key1] = [value1,value2,value3]
rescue => e
puts ['error in gallery',e]
end
require File.expand_path('../../../app/models/album_setting', __FILE__)
if defined?(AlbumSetting)
if AlbumSetting.first.nil?
AlbumSetting.create()
elsif AlbumSetting.count > 1
AlbumSetting.all.to_a[1..-1].each do |album_setting|
album_setting.destroy
end
end
end
OrbitApp.registration "Gallery", :type => "ModuleApp" do
module_label "gallery.gallery"
base_url File.expand_path File.dirname(__FILE__)
@ -13,6 +44,12 @@ module Gallery
authorizable
frontend_enabled
data_count 1..30
begin
show_option_items data
rescue => e
puts ['there_was_no_show_option_method',e]
end
side_bar do
head_label_i18n 'gallery.gallery', icon_class: "icons-pictures"
available_for "users"

33
modules/gallery/_gallery_widget3.html.erb Normal file
View File

@ -0,0 +1,33 @@
<div class="widget-gallery widget3 no-print">
<!-- <h3 class="w-annc__widget-title">
<span class="album_icon"></span><span>{{widget-title}}</span>
</h3> -->
<div class="cycle-slideshow widget-content"
data-level="0" data-list="images" data-cycle-slides="> a"
data-cycle-fx="carousel" data-cycle-timeout="3000" data-cycle-carousel-visible="1" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
<a class="widget-pic" href="{{link_to_show}}" target="_blank" title="{{album-name}}">
<div class="mask_box">
<div class="mask_word">
<div class="mask_word_box">
<div class="mask_title">{{image_description}}</div>
</div>
</div>
<div class="mask">
<div class="circle_box"><img src="/assets/circle_icon.png" alt="">
</div>
</div>
<img
srcset="
{{thumb-large-src}} 1024w,
{{thumb-src}} 768w"
src="{{thumb-src}}"
alt="{{alt_title}}"
>
</div>
</a>
</div>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= locale == :en ? 'more' : '更多照片' %></a>
</div>
</div>

38
modules/gallery/_gallery_widget4.html.erb Normal file
View File

@ -0,0 +1,38 @@
<div class="widget-gallery gallery card-group widget4 no-print">
<h3 class="widget-title">
<span>{{widget-title}}</span>
</h3>
<link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
<div class="row widget-content" data-level="0" data-list="images">
<div class="card card-flip h-100">
<div class="card-front">
<div class="card-body" style="padding:0;">
<img
srcset="
{{thumb-large-src}} 1024w,
{{thumb-src}} 768w"
src="{{thumb-src}}"
alt="{{alt_title}}"
>
<div class="card-footer">
<h3 class="card-title">{{image_short_description}}</h3>
</div>
</div>
</div>
<div class="card-back">
<div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
<h3 class="card-title">{{image_short_description}}</h3>
{{image_description}}
<div class="card-button-group">
<a href="{{link_to_show}}" class="btn btn-secondary view ">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="{{src}}" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="{{alt_title}}" data-type="image">
<i class="fa fa-eye" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

32
modules/gallery/gallery_index5.html.erb Normal file
View File

@ -0,0 +1,32 @@
<div class="index-gallery gallery card-group index5">
<h1 class="index-title">
<span>{{page-title}}</span>
</h1>
<link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
<div class="row" data-level="0" data-list="albums">
<div class="card card-flip h-100">
<div class="card-front">
<div class="card-body" style="padding:0;">
<img
src="{{thumb-src}}"
alt="{{alt_title}}"
>
<div class="card-footer">
<h3 class="card-title">{{album-name}}</h3>
</div>
</div>
</div>
<div class="card-back">
<div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
<h3 class="card-title">{{album-name}}</h3>
<div class="card-button-group">
<a href="{{link_to_show}}" class="btn btn-secondary view ">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{{pagination_goes_here}}

28
modules/gallery/info.json
View File

@ -31,6 +31,14 @@
"en" : "4. Thumbnail ( gallery thumbnail, page navigation )"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "gallery_index5",
"name" : {
"zh_tw" : "5. 卡片",
"en" : "5. Card"
},
"thumbnail" : "thumb.png"
}
],
"widgets" : [
@ -45,8 +53,24 @@
{
"filename" : "gallery_widget2",
"name" : {
"zh_tw" : "2. 相本排版",
"en" : "2. Thumbnail"
"zh_tw" : "2. 相本排版 ( 模組標題, 圖片 )",
"en" : "2. Thumbnail (widget-title, image)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "gallery_widget3",
"name" : {
"zh_tw" : "3. 單本相簿跑馬燈 ( 圖片 )",
"en" : "3. Single Picture With Carousel Effect (image)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "gallery_widget4",
"name" : {
"zh_tw" : "4. 卡片",
"en" : "4. Card"
},
"thumbnail" : "thumb.png"
}

2
modules/gallery/show.html.erb
View File

@ -7,7 +7,7 @@
<div class="show-content col-xs-6 col-sm-2">
<div class="show-content-inner">
<div class="show-pic">
<a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';GalleryTheater();">
<a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';GalleryTheater();return false;">
<img class="img" src="{{thumb-src}}" alt="{{alt_title}}">
</a>
<p class="show-description">{{image-description}}</p>