From 92cd6b809e192337b435ad6f93eb534f6d722728 Mon Sep 17 00:00:00 2001 From: Bohung Date: Sun, 11 Apr 2021 00:28:00 +0800 Subject: [PATCH] Add carousel images feature. --- app/controllers/announcements_controller.rb | 18 +- app/models/bulletin.rb | 2 + app/models/bulletin_carousel_image.rb | 15 ++ app/views/admin/announcements/_form.html.erb | 39 +++- .../admin/announcements/_form_image.html.erb | 49 +++++ config/locales/en.yml | 2 + config/locales/zh_tw.yml | 2 + modules/announcement/show.html.erb | 178 +++++++++++++++++- 8 files changed, 300 insertions(+), 5 deletions(-) create mode 100644 app/models/bulletin_carousel_image.rb create mode 100644 app/views/admin/announcements/_form_image.html.erb diff --git a/app/controllers/announcements_controller.rb b/app/controllers/announcements_controller.rb index a95a659..d81fdfb 100644 --- a/app/controllers/announcements_controller.rb +++ b/app/controllers/announcements_controller.rb @@ -590,10 +590,16 @@ class AnnouncementsController < ApplicationController img_src = (announcement.image.thumb.url || "/assets/announcement-default.jpg") if announcement.display_img? img_description = announcement.image_description if (announcement.image_description.present?) && (announcement.display_img?) show_comment_flag = announcement.open_comment_for_user(OrbitHelper.current_user) + bulletin_carousel_images = announcement.bulletin_carousel_images.map{|image| {"src"=>image.file.url,"description"=>image.description.to_s,"description_text"=>image.description_text }} + resume_btn_title = (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" + pause_btn_title = (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause" + prev_btn_title = (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" + next_btn_title = (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" { "tags" => tags, "bulletin_files" => files, "bulletin_links" => links, + "bulletin_carousel_images" => bulletin_carousel_images, "data" => { "title" => announcement.title, "subtitle_ann" => subtitle_ann, @@ -604,7 +610,13 @@ class AnnouncementsController < ApplicationController "img_src" => img_src, "img_description" => img_description, "hide_class" => announcement.display_img? ? '' : ' hide', - "alt_title" => desc + "alt_title" => desc, + "resume_btn_title" => resume_btn_title, + "pause_btn_title" => pause_btn_title, + "prev_btn_title" => prev_btn_title, + "next_btn_title" => next_btn_title, + "carousel_display_style" => (bulletin_carousel_images.count == 0 ? 'display: none' : ''), + "carousel_count" => bulletin_carousel_images.count }, "comments" => announcement.comments, "show_comment_flag" => show_comment_flag, @@ -665,6 +677,7 @@ class AnnouncementsController < ApplicationController "tags" => tags, "bulletin_files" => files, "bulletin_links" => links, + "bulletin_carousel_images" => [], "data" => { "title" => announcement["title_translations"][locale], "subtitle_ann" => subtitle_ann, @@ -675,7 +688,8 @@ class AnnouncementsController < ApplicationController "img_src" => img_src, "img_description" => img_description, "hide_class" => announcement["display_img"] ? '' : ' hide', - "alt_title" => desc + "alt_title" => desc, + "carousel_display_style" => 'display: none' }, "comments" => [], "show_comment_flag" => false, diff --git a/app/models/bulletin.rb b/app/models/bulletin.rb index 9456b8a..42993a3 100644 --- a/app/models/bulletin.rb +++ b/app/models/bulletin.rb @@ -69,8 +69,10 @@ class Bulletin has_many :bulletin_links, :autosave => true, :dependent => :destroy has_many :bulletin_files, :autosave => true, :dependent => :destroy has_many :bulletin_comments, :autosave => true, :dependent => :destroy + has_many :bulletin_carousel_images, :autosave => true, :dependent => :destroy accepts_nested_attributes_for :bulletin_files, :allow_destroy => true accepts_nested_attributes_for :bulletin_links, :allow_destroy => true + accepts_nested_attributes_for :bulletin_carousel_images, :allow_destroy => true before_destroy :destroy_email diff --git a/app/models/bulletin_carousel_image.rb b/app/models/bulletin_carousel_image.rb new file mode 100644 index 0000000..47e6c93 --- /dev/null +++ b/app/models/bulletin_carousel_image.rb @@ -0,0 +1,15 @@ +# encoding: utf-8 +class BulletinCarouselImage + + include Mongoid::Document + include Mongoid::Timestamps + + mount_uploader :file, AssetUploader + + field :description, localize: true + + belongs_to :bulletin + def description_text + Nokogiri::HTML(self.description.to_s).css("body").text() rescue "" + end +end diff --git a/app/views/admin/announcements/_form.html.erb b/app/views/admin/announcements/_form.html.erb index 91f9af2..5c4c563 100644 --- a/app/views/admin/announcements/_form.html.erb +++ b/app/views/admin/announcements/_form.html.erb @@ -52,6 +52,7 @@ <% end %>
  • <%= t(:tags) %>
  • <%= t('announcement.image') %>
    • +
  • <%= t('announcement.carousel_image') %>
  • <%= t('announcement.email_reminder')%>
    • @@ -286,7 +287,27 @@ <% end %> - + + +
    @@ -560,6 +581,22 @@ formTip(); add_click_for_privacy(); }); + $(document).on('click', '#add_carousel_image', function(){ + var new_id = $(this).prev().attr('value'); + var old_id = new RegExp("new_bulletin_carousel_images", "g"); + var on = $('.language-nav li.active').index(); + var le = $(this).parent('.add-btn').prev('.add-target').children('.start-line').length; + $(this).prev().attr('value', parseInt(new_id) + 1); + $(this).parent().siblings('.add-target').append(("<%= escape_javascript(add_attribute 'form_image', f, :bulletin_carousel_images) %>").replace(old_id, new_id)); + $(this).parent('.add-btn').prev('.add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() { + $(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active'); + }); + }); + $(document).on('click', '.fileupload-remove', function(){ + if($(this).find(".delete_image").length != 0){ + $(this).parents('.image_group').remove(); + } + }); $(document).on('click', '.delete_link', function(){ $(this).parents('.input-prepend').remove(); }); diff --git a/app/views/admin/announcements/_form_image.html.erb b/app/views/admin/announcements/_form_image.html.erb new file mode 100644 index 0000000..0520a41 --- /dev/null +++ b/app/views/admin/announcements/_form_image.html.erb @@ -0,0 +1,49 @@ + +
    +
    + +
    +
    +
    + <% if form_image.file.file %> + <%= image_tag form_image.file %> + <% else %> + + <% end %> +
    +
    + + <%= t(:select_image) %> + <%= t(:change) %> + <%= f.file_field :file %> + + <%= t(:cancel) %> +
    + +
    +
    +
    +
    + <% @site_in_use_locales.each do |locale| %> + <%= f.fields_for :description_translations do |f| %> +
    + +
    + <%= f.text_field locale, value: (form_image.description_translations[locale.to_s] rescue nil) %> +
    +
    + <% end %> + <% end %> +
    \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index 953619a..9886d19 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -37,6 +37,8 @@ en: 'yes': 'Yes' 'no': 'No' image: Cover Image + carousel_image: Carousel Image + carousel_image_title: Carousel Image(display at the bottom of show page) picture_showing_size: Picture Showing Size orignal_size: Original Size small_size: Small Size diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml index 9c463b5..d73cb6a 100644 --- a/config/locales/zh_tw.yml +++ b/config/locales/zh_tw.yml @@ -37,6 +37,8 @@ zh_tw: 'yes': 是 'no': 否 image: 封面圖片 + carousel_image: 輪播圖片 + carousel_image_title: 輪播圖片(在show頁面底部顯示) picture_showing_size: 圖片顯示大小 orignal_size: 原圖大小 small_size: 小張縮圖 diff --git a/modules/announcement/show.html.erb b/modules/announcement/show.html.erb index 1caf227..303fba6 100644 --- a/modules/announcement/show.html.erb +++ b/modules/announcement/show.html.erb @@ -44,9 +44,100 @@ +
    +
    +
    +
    + +
    +

    {{description}}

    +
    +
    +
    +
    +
    +
      + + +
    +
    +
    +

    1/{{carousel_count}}

    +
      +
    • +
      + {{description_text}} +
      +
      • +
    +
      + + +
    +
    +
    {{link_to_edit}} - + \ No newline at end of file