Add instructions field.

Add instructions field.

app/assets/javascripts/seminar-field-forms-submission.js

@@ -110,6 +110,7 @@ function setData(l, type, ol) {
 			_markup:				fields+"["+l+"][markup]",
 			_option_list:			["option_list_"+l+"_"+ol, fields+"["+l+"]["+type+"][option_list]["+ol+"]", "option_list_"+ol],
 			_placeholder:			["placeholder_"			+l, fields+"["+l+"]["+type+"][placeholder]"],
+			_instructions:			["instructions_"			+l, fields+"["+l+"]["+type+"][instructions]"],
 			_title_translations:	["title_translations_"	+l, fields+"["+l+"][title_translations]"],
 			_destroy:				["destroy_"			+l, fields+"["+l+"][_destroy]"],
 			_to_require:			["to_require_"		    +l, fields+"["+l+"][to_require]"],
@@ -117,6 +118,34 @@ function setData(l, type, ol) {
 	return data;
 }
 
+// Deinit Template HTML (ex: ckeditor)
+function deinit_template_html(_this) {
+	var ckeditor_areas = _this.find('.ckeditor');
+	if (typeof(CKEDITOR) == 'object') {
+		ckeditor_areas.each(function(i,v) {
+			var name = $(v).attr('name');
+			if (CKEDITOR.instances[name]) {
+				CKEDITOR.instances[name].destroy();
+			}
+		})
+	}
+	return _this;
+}
+
+// Init Template HTML (ex: ckeditor)
+function init_template_html(_this) {
+	var ckeditor_areas = _this.find('.ckeditor');
+	if (typeof(CKEDITOR) == 'object') {
+		ckeditor_areas.each(function(i,v) {
+			var name = $(v).attr('name');
+			if (!CKEDITOR.instances[name]) {
+				CKEDITOR.replace(name);
+			}
+		})
+	}
+	return _this;
+}
+
 // Get Default Address Form
 function getAddressForm(trigger, element, decide) {
 	if(decide) {
@@ -256,11 +285,11 @@ $(function() {
 				nameNumber = nameNumber.match(/[^[\D\]]+(?=])/g)[0];
 				seminar_mainType = $(this).data('seminar_mains')
 				if($(this).hasClass('textInput')) {
-					$("#template-text").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-text").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} else if ($(this).hasClass('textLengInput')) {
-					$("#template-text-language").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-text-language").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} else if ($(this).hasClass('address')) {
-					$("#template-address").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-address").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} 
 				inputAppendLength();
 			};
@@ -288,7 +317,7 @@ $(function() {
 			};
 		    attributesHeaderLength = $('.attributes:not(:hidden)').length+1;
 		    attributesLength = $('#attributes-area .attributes').length;
-		    $("#template-attributes").tmpl(setData(attributesLength, default_templateType, appendIndex)).appendTo( "#attributes-area" );
+		    init_template_html($("#template-attributes").tmpl(setData(attributesLength, default_templateType, appendIndex)).appendTo( "#attributes-area" ));
 		    $('.toggle-check').togglebox();
 		});
 
@@ -439,7 +468,7 @@ $(function() {
 				console.log(appendIndex)
 				attributeIndex = $(this).closest('.attributes').index();
 				templateType = $(this).closest('.attributes').find('.dataType').children("option:selected").attr('ref');
-				$("#template-input-append").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo($(this).closest('.controls').find('.add-target'));
+				init_template_html($("#template-input-append").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo($(this).closest('.controls').find('.add-target')));
 				inputAppendLength();
 			};
 			if($(this).hasClass('remove-input')) {
@@ -454,6 +483,7 @@ $(function() {
 		$('#attributes-area').delegate('.dataType', 'change', function() {
 	        $(this).children("option:selected").each(function () {
 	        	var target = $(this).closest('.attributes').find('.field-type').not('.default');
+	        	deinit_template_html(target);
 	    		attributeIndex = $(this).closest('.attributes').index();
 	        	appendIndex = 0
 	        	// $(this).closest('.attributes').find('.add-target').find('.input-append').length;
@@ -467,7 +497,7 @@ $(function() {
 			        	if($(this).attr('ref')) {
 			        		templateType = $(this).attr('ref');
 				        	target.removeAttr('class').addClass('field-type fade in ' + templateType).empty();
-				        	$("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target);
+				        	init_template_html($("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target));
 				        	if(templateType == 'typeB' || templateType == 'typeE' || templateType == 'typeF') {
 				        		inputAppendLength();
 				        	}
@@ -481,7 +511,7 @@ $(function() {
 		        	if($(this).attr('ref')) {
 		        		templateType = $(this).attr('ref');
 			        	target.removeAttr('class').addClass('field-type fade in ' + templateType).empty();
-			        	$("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target);
+			        	init_template_html($("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target));
 			        	if(templateType == 'typeB' || templateType == 'typeE' || templateType == 'typeF') {
 			        		inputAppendLength();
 			        	}

app/assets/javascripts/seminar-field-forms.js

@@ -110,6 +110,7 @@ function setData(l, type, ol) {
 			_markup:				fields+"["+l+"][markup]",
 			_option_list:			["option_list_"+l+"_"+ol, fields+"["+l+"]["+type+"][option_list]["+ol+"]", "option_list_"+ol],
 			_placeholder:			["placeholder_"			+l, fields+"["+l+"]["+type+"][placeholder]"],
+			_instructions:			["instructions_"			+l, fields+"["+l+"]["+type+"][instructions]"],
 			_title_translations:	["title_translations_"	+l, fields+"["+l+"][title_translations]"],
 			_destroy:				["destroy_"			+l, fields+"["+l+"][_destroy]"],
 			_to_require:			["to_require_"		    +l, fields+"["+l+"][to_require]"],
@@ -117,6 +118,34 @@ function setData(l, type, ol) {
 	return data;
 }
 
+// Deinit Template HTML (ex: ckeditor)
+function deinit_template_html(_this) {
+	var ckeditor_areas = _this.find('.ckeditor');
+	if (typeof(CKEDITOR) == 'object') {
+		ckeditor_areas.each(function(i,v) {
+			var name = $(v).attr('name');
+			if (CKEDITOR.instances[name]) {
+				CKEDITOR.instances[name].destroy();
+			}
+		})
+	}
+	return _this;
+}
+
+// Init Template HTML (ex: ckeditor)
+function init_template_html(_this) {
+	var ckeditor_areas = _this.find('.ckeditor');
+	if (typeof(CKEDITOR) == 'object') {
+		ckeditor_areas.each(function(i,v) {
+			var name = $(v).attr('name');
+			if (!CKEDITOR.instances[name]) {
+				CKEDITOR.replace(name);
+			}
+		})
+	}
+	return _this;
+}
+
 // Get Default Address Form
 function getAddressForm(trigger, element, decide) {
 	if(decide) {
@@ -256,11 +285,11 @@ $(function() {
 				nameNumber = nameNumber.match(/[^[\D\]]+(?=])/g)[0];
 				seminar_mainType = $(this).data('seminar_mains')
 				if($(this).hasClass('textInput')) {
-					$("#template-text").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-text").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} else if ($(this).hasClass('textLengInput')) {
-					$("#template-text-language").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-text-language").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} else if ($(this).hasClass('address')) {
-					$("#template-address").tmpl().appendTo($(this).closest('.controls').find('.add-target'));
+					init_template_html($("#template-address").tmpl().appendTo($(this).closest('.controls').find('.add-target')));
 				} 
 				inputAppendLength();
 			};
@@ -288,7 +317,7 @@ $(function() {
 			};
 		    attributesHeaderLength = $('.attributes:not(:hidden)').length+1;
 		    attributesLength = $('#attributes-area .attributes').length;
-		    $("#template-attributes").tmpl(setData(attributesLength, default_templateType, appendIndex)).appendTo( "#attributes-area" );
+		    init_template_html($("#template-attributes").tmpl(setData(attributesLength, default_templateType, appendIndex)).appendTo( "#attributes-area" ));
 		    $('.toggle-check').togglebox();
 		});
 
@@ -438,7 +467,7 @@ $(function() {
 				appendIndex = parseInt(appendIndex.match(/[^[\D\]]+(?=])/g)[1])+1;
 				attributeIndex = $(this).closest('.attributes').index();
 				templateType = $(this).closest('.attributes').find('.dataType').children("option:selected").attr('ref');
-				$("#template-input-append").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo($(this).closest('.controls').find('.add-target'));
+				init_template_html($("#template-input-append").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo($(this).closest('.controls').find('.add-target')));
 				inputAppendLength();
 			};
 			if($(this).hasClass('remove-input')) {
@@ -453,6 +482,7 @@ $(function() {
 		$('#attributes-area').delegate('.dataType', 'change', function() {
 	        $(this).children("option:selected").each(function () {
 	        	var target = $(this).closest('.attributes').find('.field-type').not('.default');
+	        	deinit_template_html(target);
 	    		attributeIndex = $(this).closest('.attributes').index();
 	        	appendIndex = 0
 	        	// $(this).closest('.attributes').find('.add-target').find('.input-append').length;
@@ -466,7 +496,7 @@ $(function() {
 			        	if($(this).attr('ref')) {
 			        		templateType = $(this).attr('ref');
 				        	target.removeAttr('class').addClass('field-type fade in ' + templateType).empty();
-				        	$("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target);
+				        	init_template_html($("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target));
 				        	if(templateType == 'typeB' || templateType == 'typeE' || templateType == 'typeF') {
 				        		inputAppendLength();
 				        	}
@@ -480,7 +510,7 @@ $(function() {
 		        	if($(this).attr('ref')) {
 		        		templateType = $(this).attr('ref');
 			        	target.removeAttr('class').addClass('field-type fade in ' + templateType).empty();
-			        	$("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target);
+			        	init_template_html($("#template-type").tmpl(setData(attributeIndex, templateType, appendIndex)).appendTo(target));
 			        	if(templateType == 'typeB' || templateType == 'typeE' || templateType == 'typeF') {
 			        		inputAppendLength();
 			        	}

app/helpers/admin/seminars_field_helper.rb

@@ -30,6 +30,20 @@ module Admin::SeminarsFieldHelper
     content_tag(:div,str,:class=>"tab-pane fade",:id=>(get_field_name_base+"tab_#{lang}"))
   end
 
+  def render_instructions
+    control_group_wrapper_for_sm do |key,value|
+      if !@prefiled_value.nil?
+        value = can_muti_lang_input_for_sm? ?  @prefiled_value[key] : @prefiled_value
+      else
+        value = nil
+      end
+      key = can_muti_lang_input_for_sm? ? "#{key}" : I18n.locale
+      instructions = (typeG["instructions"].blank? ? "" : typeG["instructions"][key])
+      name1 = can_muti_lang_input_for_sm? ? (get_field_name_base + "[#{key}]") : get_field_name_base
+      instructions.html_safe
+    end
+  end
+
   def render_address
     control_group_wrapper_for_sm do |key,value|
       value = (can_muti_lang_input_for_sm? ?  @prefiled_value[key] : @prefiled_value) rescue nil

app/models/seminar_signup_field.rb

@@ -24,6 +24,7 @@ class SeminarSignupField
   field :typeD, type: Hash, default: {cross_lang: false}
   field :typeE, type: Hash, default: {}
   field :typeF, type: Hash, default: {}
+  field :typeG, type: Hash, default: {}
   belongs_to :seminar_main
   has_many :seminar_signup_values, autosave: true, dependent: :destroy
   accepts_nested_attributes_for :seminar_signup_values, :allow_destroy => true

app/models/seminar_submission_field.rb

@@ -24,6 +24,7 @@ class SeminarSubmissionField
   field :typeD, type: Hash, default: {cross_lang: false}
   field :typeE, type: Hash, default: {}
   field :typeF, type: Hash, default: {cross_lang: "true"}
+  field :typeG, type: Hash, default: {}
   belongs_to :seminar_main
   has_many :seminar_submission_values, autosave: true, dependent: :destroy
   accepts_nested_attributes_for :seminar_submission_values, :allow_destroy => true

app/views/admin/seminars/_attribute_field.html.erb

@@ -129,6 +129,34 @@
       <%= render :partial=>"shared/attribute_field/list_block",:locals=>{:field_name=>"#{@field_name}[seminar_signup_fields_attributes][#{@af_counter}][typeE][option_list]",:values=>attribute_field["typeE"]["option_list"]}%>
     <% end if show_seminar_type_panel(attribute_field,"typeE") != 'typeE hide' %>
 
+    <%= content_tag :div,:class=>"field-type default fade in #{show_seminar_type_panel(attribute_field,"typeG")}" do%>
+      <% typeG_field_name = "#{@field_name}[seminar_signup_fields_attributes][#{@af_counter}][typeG][instructions]" %>
+      <%= content_tag :div, class: "control-group" do %>
+        <label class="control-label muted" for=""><%= t('lists.markups.instructions') %></label>
+        <div class="controls">
+          <div class="input-append">
+            <div class="btn-group-clearfix">
+              <div class="btn-group" data-toggle="buttons-radio">
+                <% @site_in_use_locales.each do |locale| %>
+                  <% active = (locale == @site_in_use_locales.first ? "active" : "") %>
+                  <%= link_to t(locale).to_s,"##{name_to_id(typeG_field_name)}_#{locale}",:class=>"btn #{active}",:data=>{:toggle=>"tab"}%>
+                <% end %>
+              </div>
+            </div>
+            <div class="tab-content">
+              <% @site_in_use_locales.each do |locale| %>
+                <% active = (locale == @site_in_use_locales.first ? "active in" : "'") %>
+                <%= content_tag :div, {class: "tab-pane fade #{active}", id: "#{name_to_id(typeG_field_name)}_#{locale}"} do %>
+                  <% locale_value = attribute_field["typeG"]["instructions"][locale.to_s] %>
+                  <%= text_area(typeG_field_name, locale, value: locale_value, placeholder: "#{t(locale).to_s}", data: {:type=>"lang_#{locale}"}, class: 'ckeditor') %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end if show_seminar_type_panel(attribute_field,"typeG") != 'typeG hide' %>
+
     <%= hidden_field "#{@field_name}[seminar_signup_fields_attributes][#{@af_counter}]","id",:value=>attribute_field.id%>
 
 </div>

app/views/admin/seminars/_attribute_submission_field.html.erb

@@ -141,6 +141,35 @@
         </div>
       </div>
     <% end if show_seminar_type_panel(attribute_submission_field,"typeF") != 'typeF hide' %>
+
+    <%= content_tag :div,:class=>"field-type default fade in #{show_seminar_type_panel(attribute_submission_field,"typeG")}" do%>
+      <% typeG_field_name = "#{@field_name}[seminar_signup_fields_attributes][#{@af_counter}][typeG][instructions]" %>
+      <%= content_tag :div, class: "control-group" do %>
+        <label class="control-label muted" for=""><%= t('lists.markups.instructions') %></label>
+        <div class="controls">
+          <div class="input-append">
+            <div class="btn-group-clearfix">
+              <div class="btn-group" data-toggle="buttons-radio">
+                <% @site_in_use_locales.each do |locale| %>
+                  <% active = (locale == @site_in_use_locales.first ? "active" : "") %>
+                  <%= link_to t(locale).to_s,"##{name_to_id(typeG_field_name)}_#{locale}",:class=>"btn #{active}",:data=>{:toggle=>"tab"}%>
+                <% end %>
+              </div>
+            </div>
+            <div class="tab-content">
+              <% @site_in_use_locales.each do |locale| %>
+                <% active = (locale == @site_in_use_locales.first ? "active in" : "'") %>
+                <%= content_tag :div, {class: "tab-pane fade #{active}", id: "#{name_to_id(typeG_field_name)}_#{locale}"} do %>
+                  <% locale_value = attribute_submission_field["typeG"]["instructions"][locale.to_s] %>
+                  <%= text_area(typeG_field_name, locale, value: locale_value, placeholder: "#{t(locale).to_s}", data: {:type=>"lang_#{locale}"}, class: 'ckeditor') %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end if show_seminar_type_panel(attribute_submission_field,"typeG") != 'typeG hide' %>
+
     <%= hidden_field "#{@field_name}[seminar_submission_fields_attributes][#{@af_counter}]","id",:value=>attribute_submission_field.id%>
 
 </div>

app/views/admin/seminars/_support_member_form_js.erb

@@ -112,7 +112,7 @@
 
 
 <script id="template-type" type="text/x-tmpl">
-  {{if templateType == 'typeA' || templateType == 'typeD' || templateType == 'typeG'}}
+  {{if templateType == 'typeA' || templateType == 'typeD'}}
     <div class="control-group">
       <label class="control-label muted"><%= t(:enabled_for)%></label>
       <div class="controls">
@@ -122,7 +122,7 @@
             <%=  t(:cross_lang) %>
           </label>
         {{/if}}
-        {{if templateType == 'typeA' || templateType == 'typeG'}}
+        {{if templateType == 'typeA'}}
           <label class="checkbox inline">
             <input type="checkbox" data-type="extendable_field" id="${_add_more[0]}" name="${_add_more[1]}" value="true">
             <%= t(:add_more)%>
@@ -257,6 +257,35 @@
       </div>
     </div>
   {{/if}}
+  {{if templateType == 'typeG'}}
+    <div class="control-group">
+      <label class="control-label muted">
+        <%= t('lists.markups.instructions') %>
+      </label>
+      <div class="controls">
+        <div class="input-append">
+          <div class="btn-group-clearfix">
+            <div class="btn-group" data-toggle="buttons-radio">
+              <% @site_in_use_locales.each do |locale| %>
+                <% active = (locale == @site_in_use_locales.first ? "active" : "") %>
+                <a class="btn <%= active %>" href="${'#'+_instructions[0]+'_<%= locale %>'}" data-toggle="tab">
+                  <%= t(locale).to_s %>
+                </a>
+              <% end %>
+            </div>
+          </div>
+          <div class="tab-content">
+            <% @site_in_use_locales.each do |locale| %>
+              <% active = (locale == @site_in_use_locales.first ? "active" : "") %>
+              <div class="tab-pane <%= active %> fade in" id="${_instructions[0]+'_<%= locale %>'}">
+                <textarea class="ckeditor" data-type="lang_<%= locale %>" placeholder="<%= t(locale).to_s %>" name="${_instructions[1]+'[<%= locale %>]'}"></textarea>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  {{/if}}
 </script>
 
 

config/list.yml

@@ -48,4 +48,8 @@ markups:
   email:
     panel: typeA
   phone:
-    panel: typeA
+    panel: typeA
+  instructions:
+    muti_lang_input_supprt: false
+    ext_support: false
+    panel: typeG

config/locales/en.yml

@@ -8,6 +8,8 @@ en:
       seminar_preferred_session: Preferred Session
       email: Email
       phone: Phone
+      instructions: Instructions
+
   restful_actions:
     edit_seminar_review: Review
     copy: Copy

config/locales/zh_tw.yml

@@ -8,6 +8,8 @@ zh_tw:
       seminar_preferred_session: Preferred Session
       email: 電子信箱
       phone: 電話
+      instructions: "說明文字 Instructions"
+
   restful_actions:
     edit_seminar_review: 審查
     copy: 複製