add youtube

app/assets/javascripts/cycle2/jquery.cycle2.video.min.js

@@ -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);

app/controllers/ad_banners_controller.rb

@@ -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

app/controllers/admin/ad_images_controller.rb

@@ -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

app/models/ad_image.rb

@@ -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

app/views/admin/ad_banners/_index.html.erb

@@ -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.exchange_item == '1' %>
-                <% if image.expired? %>
+                <div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;">
-                  <div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
+                  <% if image.expired? %>
-                <% end %>
+                    <div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
-                <% if (image.postdate > Time.now rescue false) %>
+                  <% end %>
-                  <div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
+                  <% if (image.postdate > Time.now rescue false) %>
-                <% end %>
+                    <div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
-                <a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
+                  <% end %>
-                <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>
+                  <span class="ad-banner-subtitle"><i class="icons-pictures"><%= t('image') %></i></span>
-              </div>
+                  <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>

app/views/admin/ad_banners/_index_table.html.erb

@@ -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>

app/views/admin/ad_banners/show.html.erb

@@ -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 %>

app/views/admin/ad_images/_form.html.erb

@@ -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 id="exchange_item_1" style="display:none">
-      <div class="control-group">
+        <!-- Images Upload -->
-        <label class="control-label muted"><%= t(:image) %></label>
+        <div class="control-group">
-        <div class="controls">
+          <label class="control-label muted"><%= t(:image) %></label>
-          <div><%= t("ad_banner.best_size") %>: <%= @ad_banner.width %>px X <%= @ad_banner.height %>px</div>
+          <div class="controls">
-          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @ad_image.file.file %>" data-provides="fileupload">
+            <div><%= t("ad_banner.best_size") %>: <%= @ad_banner.width %>px X <%= @ad_banner.height %>px</div>
-            <div class="fileupload-new thumbnail pull-left">
+            <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @ad_image.file.file %>" data-provides="fileupload">
-              <% if @ad_image.file.file %>
+              <div class="fileupload-new thumbnail pull-left">
-                <%= image_tag @ad_image.file.url %>
+                <% if @ad_image.file.file %>
-              <% else %>
+                  <%= image_tag @ad_image.file.url %>
-                <img src="http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
+                <% else %>
-              <% end %>
+                  <img src="http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
-            </div>
+                <% end %>
-            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+              </div>
-            <span class="btn btn-file">
+              <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
-              <span class="fileupload-new"><%= t(:select_image) %></span>
+              <span class="btn btn-file">
-              <span class="fileupload-exists"><%= t(:change) %></span>
+                <span class="fileupload-new"><%= t(:select_image) %></span>
-              <%= f.file_field :file, :data => {"fv-validation" => "required;", "fv-messages" => "Cannot be empty.;"}%>
+                <span class="fileupload-exists"><%= t(:change) %></span>
-            </span>
+                <%= f.file_field :file %>
-            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+              </span>
-            <div class="controls" data-toggle="buttons-checkbox">
+              <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
-              <label class="checkbox inline btn btn-danger fileupload-remove">
+              <div class="controls" data-toggle="buttons-checkbox">
-                <%= f.check_box :remove_file %><%= t(:remove) %>
+                <label class="checkbox inline btn btn-danger fileupload-remove">
-              </label>
+                  <%= 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>
 
 

app/views/admin/ad_images/edit.html.erb

@@ -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>

app/views/admin/ad_images/new.html.erb

@@ -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>

config/locales/en.yml

@@ -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

config/locales/zh_tw.yml

@@ -30,3 +30,9 @@ zh_tw:
     order_images: 圖片順序
     save_changes: 儲存變更
     close: 取消
+  video: 影片
+  new_image:  新增圖片 或 影片
+  youtube: youtube網址嵌入
+  type: 圖片 或 影片
+  choose_type: 請先選擇類型
+  select: 請選擇