add youtube
This commit is contained in:
parent
cc31ee8978
commit
70d52cb924
|
|
@ -0,0 +1,2 @@
|
|||
/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20141007 */
|
||||
!function(a){"use strict";function b(){try{this.playVideo()}catch(a){}}function c(){try{this.pauseVideo()}catch(a){}}var d='<div class=cycle-youtube><iframe width="640" height="360" frameborder="0" allowfullscreen="" data-yt-api-binded="0" src="{{url}}"></iframe></div>';a.extend(a.fn.cycle.defaults,{youtubeAllowFullScreen:!0,youtubeAutostart:!1,youtubeAutostop:!0}),a(document).on("cycle-bootstrap",function(e,f){f.youtube&&(f.hideNonActive=!1,f.container.find(f.slides).each(function(b){if(void 0!==a(this).attr("href")){var c,e=a(this),g=e.attr("href"),h=f.youtubeAllowFullScreen?"true":"false";g+=(/\?/.test(g)?"&":"?")+"enablejsapi=1",f.youtubeAutostart&&f.startingSlide===b&&(g+="&autoplay=1"),c=f.API.tmpl(d,{url:g,allowFullScreen:h}),e.replaceWith(c)}}),f.slides=f.slides.replace(/(\b>?a\b)/,"div.cycle-youtube"),f.youtubeAutostart&&f.container.on("cycle-initialized cycle-after",function(c,d){var e="cycle-initialized"==c.type?d.currSlide:d.nextSlide;a(d.slides[e]).find("object,embed").each(b)}),f.youtubeAutostop&&f.container.on("cycle-before",function(b,d){a(d.slides[d.currSlide]).find("object,embed").each(c)}))})}(jQuery);
|
||||
|
|
@ -1,6 +1,17 @@
|
|||
class AdBannersController < ApplicationController
|
||||
def widget
|
||||
adbanner = Banner.find(OrbitHelper.widget_custom_value)
|
||||
widget = OrbitHelper.get_current_widget
|
||||
if widget.widget_type == "ad_banner_widget2_video"
|
||||
return video_widget(adbanner)
|
||||
else
|
||||
return image_widget(adbanner)
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def image_widget(adbanner)
|
||||
images = []
|
||||
adbanner.ad_images.can_display.asc(:sort_number,:created_at).each.with_index do |b,i|
|
||||
if b.language_enabled.include?(I18n.locale.to_s)
|
||||
|
|
@ -47,4 +58,47 @@ class AdBannersController < ApplicationController
|
|||
"images" => images
|
||||
}
|
||||
end
|
||||
|
||||
def video_widget(adbanner)
|
||||
images = []
|
||||
adbanner.ad_images.can_display.asc(:sort_number).each_with_index do |ad_b,i|
|
||||
if ad_b.language_enabled.include?(I18n.locale.to_s)
|
||||
image_link = OrbitHelper.is_mobile_view ? ad_b.file.mobile.url : ad_b.file.url
|
||||
alt_text = (ad_b.title.nil? || ad_b.title == "" ? "ad-banner image" : ad_b.title)
|
||||
caption = i == 0 ? '<div class="cycle-overlay"></div><div class="cycle-pager"></div>' : ""
|
||||
klass = i == 0 ? "active" : ""
|
||||
if ad_b.exchange_item == "1"
|
||||
image_html = "<div class='w-ad-banner__slide #{klass}' data-link='#{ad_b.out_link || "#"}''><img class='w-ad-banner__image' src='#{image_link}'><div class='w-ad-banner__caption_text'>#{ad_b.title}</div></div>"
|
||||
else ad_b.exchange_item == "2"
|
||||
youtube_url = format_url(ad_b.youtube,i)
|
||||
image_html = "<div class='w-ad-banner__slide youtube #{klass}' data-yt-binded='0' data-youtube-id='ytplayer#{i}'><div style=\"padding-bottom: 56.25%;position: relative;height: 0;\"><iframe height=\"100%\" width=\"100%\" src=\"#{youtube_url}\" title=\"youtube\" style=\"position: absolute;\"></iframe></div><a class='w-ad-banner__slide' href='#{youtube_url}'>#{ad_b.title}</a><div class='w-ad-banner__caption_text'>#{ad_b.title}</div></div>"
|
||||
end
|
||||
images << {
|
||||
"html" => image_html
|
||||
}
|
||||
end
|
||||
end
|
||||
{
|
||||
"extras" => {
|
||||
"ad_fx" => adbanner.ad_fx,
|
||||
"speed" => adbanner.speed,
|
||||
"title" => adbanner.title,
|
||||
"timeout" => adbanner.timeout,
|
||||
"more" => "More"
|
||||
},
|
||||
"images" => images
|
||||
}
|
||||
end
|
||||
|
||||
def format_url(url,index)
|
||||
uri = URI.parse(url)
|
||||
ps = uri.query.to_s.split("&")
|
||||
url_params = {}
|
||||
ps.each do |p|
|
||||
x = p.split("=")
|
||||
url_params[x.first] = x.last
|
||||
end
|
||||
# url = "http://www.youtube.com/v/#{url_params["v"]}/?version=3&playerapiid=ytplayer#{index}"
|
||||
url = "https://www.youtube.com/embed/#{url_params["v"]}"
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ class Admin::AdImagesController < Admin::AdBannersController
|
|||
|
||||
def edit
|
||||
@ad_image = AdImage.find(params[:id])
|
||||
@item = [[t('image'),"1"],[t('video'),"2"]]
|
||||
@item_choose = @ad_image.exchange_item
|
||||
if can_edit_or_delete?(@ad_image.banner)
|
||||
@ad_banner = @ad_image.banner
|
||||
else
|
||||
|
|
@ -27,6 +29,7 @@ class Admin::AdImagesController < Admin::AdBannersController
|
|||
def new
|
||||
@ad_image = AdImage.new
|
||||
@ad_banner = Banner.find(params[:banner_id])
|
||||
@item = [[t('image'),"1"],[t('video'),"2"]]
|
||||
if can_edit_or_delete?(@ad_banner)
|
||||
@tags = @module_app.tags || []
|
||||
@ad_image.postdate = Date.today
|
||||
|
|
|
|||
|
|
@ -13,15 +13,16 @@ class AdImage
|
|||
field :link_open, type: String
|
||||
field :postdate , :type => DateTime, :default => Time.now
|
||||
field :deadline , :type => DateTime
|
||||
field :youtube , :type => String
|
||||
field :sort_number, :type => Integer
|
||||
field :language_enabled, :type => Array, :default => ["en","zh_tw"]
|
||||
|
||||
field :exchange_item, :default => "1"
|
||||
LINK_OPEN_TYPES = ["local", "new_window"]
|
||||
|
||||
belongs_to :banner
|
||||
|
||||
before_validation :add_http
|
||||
validates :file, presence: true
|
||||
# validates :file, presence: true
|
||||
validates :out_link, format: { with: URI::regexp(%w(http https)) }, allow_blank: true
|
||||
# validates :title, presence: true
|
||||
|
||||
|
|
@ -33,6 +34,28 @@ class AdImage
|
|||
self.deadline<Time.now rescue false
|
||||
end
|
||||
|
||||
def embed_url
|
||||
uri = URI.parse(self.youtube) rescue nil
|
||||
if !uri.nil? && uri.host == "www.youtube.com"
|
||||
params = CGI.parse(uri.query)
|
||||
v = params['v'].first
|
||||
return "http://www.youtube.com/embed/#{v}"
|
||||
else
|
||||
return ""
|
||||
end
|
||||
end
|
||||
|
||||
def youtube_thumb
|
||||
uri = URI.parse(self.youtube) rescue nil
|
||||
if !uri.nil? && uri.host == "www.youtube.com"
|
||||
params = CGI.parse(uri.query)
|
||||
v = params['v'].first
|
||||
return "http://img.youtube.com/vi/#{v}/0.jpg"
|
||||
else
|
||||
return ""
|
||||
end
|
||||
end
|
||||
|
||||
protected
|
||||
|
||||
def add_http
|
||||
|
|
|
|||
|
|
@ -223,7 +223,11 @@
|
|||
>
|
||||
<% if !banner.ad_images.can_display.blank? %>
|
||||
<% banner.ad_images.can_display.desc(:created_at).each do |image| %>
|
||||
<div class="slide-img" style=" background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;"></div>
|
||||
<% if image.exchange_item == '1' %>
|
||||
<div class="slide-img" style=" background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;"></div>
|
||||
<% elsif image.exchange_item == '2' %>
|
||||
<div class="slide-img" style=" background: url('http://img.youtube.com/vi/<%= image.youtube.to_s[-11,11] %>/hqdefault.jpg'); background-size: cover; background-position: center;"></div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="slide-img" style="background: url('http://placehold.it/<%= banner.width %>x<%= banner.height %>/888&text=A'); background-size: cover; background-position: center;"></div>
|
||||
|
|
@ -250,6 +254,8 @@
|
|||
<div class="ad-banner-edit-btn">
|
||||
<i class="icons-pictures"></i>
|
||||
<%= t(:images) %>
|
||||
<i class="icons-video"></i>
|
||||
<%= t(:video) %>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="delete text-error" rel="/admin/ad_banners/<%= banner.id.to_s %>">
|
||||
|
|
@ -285,16 +291,31 @@
|
|||
</a>
|
||||
<% banner.ad_images.desc(:created_at).each_with_index do |image,idx| %>
|
||||
<div class="ad-banner-image-wrap">
|
||||
<div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;">
|
||||
<% if image.expired? %>
|
||||
<div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
|
||||
<% end %>
|
||||
<% if (image.postdate > Time.now rescue false) %>
|
||||
<div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
|
||||
<% end %>
|
||||
<a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
|
||||
<a class="ad-image-btn pull-right delete text-error" href="#" class="delete text-error" rel="/admin/ad_images/<%= image.id.to_s %>"><i class="icons-trash"></i><%= t(:delete_) %></a>
|
||||
</div>
|
||||
<% if image.exchange_item == '1' %>
|
||||
<div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;">
|
||||
<% if image.expired? %>
|
||||
<div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
|
||||
<% end %>
|
||||
<% if (image.postdate > Time.now rescue false) %>
|
||||
<div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
|
||||
<% end %>
|
||||
<span class="ad-banner-subtitle"><i class="icons-pictures"><%= t('image') %></i></span>
|
||||
<a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
|
||||
<a class="ad-image-btn pull-right delete text-error" href="#" class="delete text-error" rel="/admin/ad_images/<%= image.id.to_s %>"><i class="icons-trash"></i><%= t(:delete_) %></a>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('http://img.youtube.com/vi/<%= image.youtube.to_s[-11,11] %>/hqdefault.jpg'); background-size: cover; background-position: center;">
|
||||
<% if image.expired? %>
|
||||
<div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
|
||||
<% end %>
|
||||
<% if (image.postdate > Time.now rescue false) %>
|
||||
<div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
|
||||
<% end %>
|
||||
<span class="ad-banner-subtitle"><i class="icons-video"><%= t('video') %></i></span>
|
||||
<a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
|
||||
<a class="ad-image-btn pull-right delete text-error" href="#" class="delete text-error" rel="/admin/ad_images/<%= image.id.to_s %>"><i class="icons-trash"></i><%= t(:delete_) %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="ad-image-info-wrap">
|
||||
<table class="ad-image-info table table-striped">
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
>
|
||||
<% if !banner.ad_images.can_display.blank? %>
|
||||
<% banner.ad_images.can_display.desc(:created_at).each do |image| %>
|
||||
<div class="slide-img" style=" background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;"></div>
|
||||
<div class="slide-img" style=" background: url('<%= image.exchange_item == "1" ? image.file.thumb.url : image.youtube_thumb %>'); background-size: cover; background-position: center;"></div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="slide-img" style="background: url('http://placehold.it/<%= banner.width %>x<%= banner.height %>/888&text=A'); background-size: cover; background-position: center;"></div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
<% content_for :page_specific_javascript do %>
|
||||
<%= javascript_include_tag "lib/jquery-ui-sortable.min" %>
|
||||
<% end %>
|
||||
<% content_for :page_specific_css do %>
|
||||
<style type="text/css">
|
||||
.banner-image{
|
||||
|
|
@ -48,7 +51,11 @@
|
|||
<% @images.each do |image| %>
|
||||
<tr>
|
||||
<td>
|
||||
<%= image_tag image.file.thumb.url, :class => "banner-image" %>
|
||||
<% if image.exchange_item == "1" %>
|
||||
<%= image_tag image.file.thumb, :class => "banner-image" %>
|
||||
<% else %>
|
||||
<iframe height="140" src="<%= image.embed_url %>"></iframe>
|
||||
<% end %>
|
||||
</td>
|
||||
<td>
|
||||
<%= image.title rescue "" %>
|
||||
|
|
@ -103,7 +110,7 @@
|
|||
<% @banner.ad_images.not_expired.asc(:sort_number).each do |image| %>
|
||||
<li class="order-list-image" data-image-id="<%= image.id.to_s %>">
|
||||
<i class="icons-list-2"></i>
|
||||
<img src="<%= image.file.thumb.url %>"/>
|
||||
<img src="<%= image.exchange_item == "1" ? image.file.thumb.url : image.youtube_thumb %>"/>
|
||||
<h4><%= image.title %>
|
||||
</li>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -20,37 +20,59 @@
|
|||
|
||||
<!-- Basic Module -->
|
||||
<div class="tab-pane fade in active" id="basic">
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label muted"><%= t(:type) %></label>
|
||||
<div class="controls">
|
||||
<div><%= t("choose_type") %></div>
|
||||
<%=
|
||||
select_tag "ad_image[exchange_item]", options_for_select(@item,@item_choose), prompt: t('select')
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="ad_image[banner_id]" value="<%= @ad_banner.id.to_s %>">
|
||||
|
||||
<!-- Images Upload -->
|
||||
<div class="control-group">
|
||||
<label class="control-label muted"><%= t(:image) %></label>
|
||||
<div class="controls">
|
||||
<div><%= t("ad_banner.best_size") %>: <%= @ad_banner.width %>px X <%= @ad_banner.height %>px</div>
|
||||
<div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @ad_image.file.file %>" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail pull-left">
|
||||
<% if @ad_image.file.file %>
|
||||
<%= image_tag @ad_image.file.url %>
|
||||
<% else %>
|
||||
<img src="http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
|
||||
<span class="btn btn-file">
|
||||
<span class="fileupload-new"><%= t(:select_image) %></span>
|
||||
<span class="fileupload-exists"><%= t(:change) %></span>
|
||||
<%= f.file_field :file, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty.;"}%>
|
||||
</span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
|
||||
<div class="controls" data-toggle="buttons-checkbox">
|
||||
<label class="checkbox inline btn btn-danger fileupload-remove">
|
||||
<%= f.check_box :remove_file %><%= t(:remove) %>
|
||||
</label>
|
||||
<div id="exchange_item_1" style="display:none">
|
||||
<!-- Images Upload -->
|
||||
<div class="control-group">
|
||||
<label class="control-label muted"><%= t(:image) %></label>
|
||||
<div class="controls">
|
||||
<div><%= t("ad_banner.best_size") %>: <%= @ad_banner.width %>px X <%= @ad_banner.height %>px</div>
|
||||
<div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @ad_image.file.file %>" data-provides="fileupload">
|
||||
<div class="fileupload-new thumbnail pull-left">
|
||||
<% if @ad_image.file.file %>
|
||||
<%= image_tag @ad_image.file.url %>
|
||||
<% else %>
|
||||
<img src="http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
|
||||
<span class="btn btn-file">
|
||||
<span class="fileupload-new"><%= t(:select_image) %></span>
|
||||
<span class="fileupload-exists"><%= t(:change) %></span>
|
||||
<%= f.file_field :file %>
|
||||
</span>
|
||||
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
|
||||
<div class="controls" data-toggle="buttons-checkbox">
|
||||
<label class="checkbox inline btn btn-danger fileupload-remove">
|
||||
<%= f.check_box :remove_file %><%= t(:remove) %>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="exchange_item_2" style="display:none">
|
||||
<div class="control-group input-title">
|
||||
<label class="control-label muted"><%= t(:youtube) %></label>
|
||||
<div class="controls">
|
||||
<div><%= 'ex. https://www.youtube.com/watch?v=UHF2e3lyPVU' %></div>
|
||||
<%= f.text_field :youtube, placeholder: t(:youtube), class: 'input-block-level' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Title-->
|
||||
<div class="control-group">
|
||||
<label for="first_name" class="control-label muted" function="field_label"><%= t("title")%></label>
|
||||
|
|
@ -165,6 +187,20 @@
|
|||
</div>
|
||||
<script type="text/javascript">
|
||||
var form = new FormValidator($("#new_ad_image"));
|
||||
$("div#exchange_item_" + $("#ad_image_exchange_item").val()).show();
|
||||
$("#ad_image_exchange_item").on("change",function(){
|
||||
$("div[id*=exchange_item]").hide();
|
||||
$("div#exchange_item_" + $(this).val()).show();
|
||||
})
|
||||
function checkSelect()
|
||||
{
|
||||
if(document.getElementById("ad_image_exchange_item").value == "")
|
||||
{
|
||||
alert("½Ð¥ý¿ï¾ÜÃþ«¬");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<%= form_for @ad_image, url: admin_ad_image_path(@ad_image), html: {class: "form-horizontal main-forms"} do |f| %>
|
||||
<%= form_for @ad_image, url: admin_ad_image_path(@ad_image), html: {class: "form-horizontal main-forms", onSubmit: "return checkSelect();"} do |f| %>
|
||||
<fieldset>
|
||||
<%= render partial: 'form', locals: {f: f} %>
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<%= form_for @ad_image, url: admin_ad_images_path, html: {class: "form-horizontal main-forms"} do |f| %>
|
||||
<%= form_for @ad_image, url: admin_ad_images_path, html: {class: "form-horizontal main-forms", onSubmit: "return checkSelect();"} do |f| %>
|
||||
<fieldset>
|
||||
<%= render partial: 'form', locals: {f: f} %>
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -33,3 +33,9 @@ en:
|
|||
order_images: Order Images
|
||||
save_changes: Save Changes
|
||||
close: Close
|
||||
video: Video
|
||||
new_image: New Image or Video
|
||||
youtube: youtube embed URL
|
||||
type: Image or Video
|
||||
choose_type: Please Select One Type First
|
||||
select: Please Select One
|
||||
|
|
@ -30,3 +30,9 @@ zh_tw:
|
|||
order_images: 圖片順序
|
||||
save_changes: 儲存變更
|
||||
close: 取消
|
||||
video: 影片
|
||||
new_image: 新增圖片 或 影片
|
||||
youtube: youtube網址嵌入
|
||||
type: 圖片 或 影片
|
||||
choose_type: 請先選擇類型
|
||||
select: 請選擇
|
||||
Loading…
Reference in New Issue