Release

app/compilers/js_compiler.rb

@@ -1,17 +1,20 @@
 class JsCompiler
   class << self
 
-    def compile(name, controller: nil, assigns: {}, view_path: nil)
+    def compile(name, compress: true, controller: nil, assigns: {}, view_path: nil)
       assigns = default_assigns(name).merge(assigns)
       controller ||= default_controller(name)
       view_path ||= default_view_path(name)
       view = ActionView::Base.new(controller.view_paths, assigns)
-      Uglifier.compile(view.render(file: view_path))
+      code = view.render(file: view_path)
+      compress ? Uglifier.compile(code) : code
     end
 
-    def to_file(name, dist = nil, compile_params: {})
-      dist ||= Rails.root.join('public', 'dist', "#{name.to_s.downcase}.js")
+    def to_file(name, compile_params: {})
+      dist = Rails.root.join('public', 'dist', "#{name.to_s.downcase}.min.js")
       IO.write(dist, compile(name, compile_params.symbolize_keys))
+      dist = Rails.root.join('public', 'dist', "#{name.to_s.downcase}.js")
+      IO.write(dist, compile(name, compile_params.symbolize_keys.merge(compress: false)))
     end
 
     private

app/controllers/templates_controller.rb

@@ -4,4 +4,6 @@ def taiwan
     @data = TaiwanImporter.new.read
     render :selects
   end
+
+  def selects_v2; end
 end

app/models/admin/user.rb

@@ -18,8 +18,8 @@
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  created_at             :datetime
-#  updated_at             :datetime
+#  created_at             :datetime         not null
+#  updated_at             :datetime         not null
 #  admin                  :boolean          default(FALSE)
 #  avatar                 :string
 #

app/models/user.rb

@@ -18,8 +18,8 @@
 #  confirmed_at           :datetime
 #  confirmation_sent_at   :datetime
 #  unconfirmed_email      :string
-#  created_at             :datetime
-#  updated_at             :datetime
+#  created_at             :datetime         not null
+#  updated_at             :datetime         not null
 #  admin                  :boolean          default(FALSE)
 #  avatar                 :string
 #

app/views/base/_js_test.html.erb

@@ -1,12 +1,21 @@
-<%= link_to 'selects', selects_path %>
 <div>
-  <script src="https://5fpro.github.io/gaia/dist/taiwan.js"
+  <%= link_to 'Demo', demo_path %>
+</div>
+<div>
+  <%= link_to 'Demo2', demo2_path %>
+</div>
+<div>
+  <script src="/gaia/src/taiwan.js"
   city-input="user[city]"
+  city-placeholder="自訂placeholder"
   dist-input="user[dist]"
   zipcode-input="user[zipcode]"
   city-value="臺南市"
   dist-value="東區"
   zipcode-prefix="true"
   disable-zipcode="false"
+  zipcode-front="true"
+  excluded-data="澎湖縣,金門縣,連江縣,琉球鄉,綠島鄉,蘭嶼鄉"
   ></script>
+  <input placeholder="address" />
 </div>

app/views/base/demo2.html.slim

@@ -0,0 +1,20 @@
+- content_for :footer do
+  = javascript_include_tag '/gaia/src/selects_v2.js', 'data-turbolinks-track': true
+  /= javascript_include_tag 'https://demeter.5fpro.com/tw/zipcode-selector.js', 'data-turbolinks-track': true
+form
+  input.js-demeter-tw-zipcode-selector data-city="#city" data-dist="#dist" value="22048" data-exclude="澎湖縣,琉球鄉,綠島鄉" /
+  select#city placeholder="選擇縣市"
+  select#dist placeholder="選擇鄉鎮區"
+
+  = link_to '首頁', root_path
+
+  div
+    input.js-demeter-tw-zipcode-selector data-city="#city2" data-dist="#dist2"/
+    select#city2 placeholder="選擇縣市"
+    select#dist2 placeholder="選擇鄉鎮區"
+
+  div
+    input.js-demeter-tw-zipcode-selector data-city="#city3" data-dist="#dist3" value="哈哈哈" /
+    select#city3 placeholder="選擇縣市"
+    select#dist3 placeholder="選擇鄉鎮區"
+  input type="submit"

app/views/layouts/application.html.slim

@@ -9,3 +9,4 @@ html
   body
     = render partial: 'ga'
     = yield
+    = yield :footer

app/views/templates/_load_jquery.js.erb

@@ -18,8 +18,23 @@ var loadjQuery = function(random_id, callback){
   script.src = url;
   document.getElementsByTagName("head")[0].appendChild(script);
 }
-if(typeof(jQuery) == 'undefined') {
-  loadjQuery(random_id, Gaia5FPRO.generate_selects);
+
+var run = function(random_id) {
+  document.addEventListener('DOMContentLoaded', function() {
+    if(typeof(jQuery) == 'undefined') {
+      loadjQuery(random_id, Gaia5FPRO.generate_selects);
+    } else {
+      Gaia5FPRO.generate_selects(random_id);
+    }
+  })
+}
+
+if(typeof(Turbolinks) != 'undefined' && document.readyState == 'complete') {
+  if(typeof(jQuery) == 'undefined') {
+    loadjQuery(randomId, Gaia5FPRO.generate_selects);
+  } else {
+    Gaia5FPRO.generate_selects(randomId);
+  }
 } else {
-  Gaia5FPRO.generate_selects(random_id);
+  run(randomId);
 }

app/views/templates/selects.js.erb

@@ -3,16 +3,25 @@ Gaia5FPRO = {
   random_id: function() { return (Date.now() + Math.random()).toString().replace('.', '-') },
   html: function(random_id) { return '<div class="gaia-selects" id="gaia-selects-' + random_id + '" data-gaia-id="' + random_id + '"></div>' }
 }
-var random_id = Gaia5FPRO.random_id()
+var randomId = Gaia5FPRO.random_id()
+var parentNode = document.currentScript.parentNode
 if(document.readyState != 'loading') {
-  document.currentScript.parentNode.innerHTML = document.currentScript.parentNode.innerHTML + Gaia5FPRO.html(random_id)
-} else {
-  document.write(Gaia5FPRO.html(random_id))
+  var els = parentNode.getElementsByClassName('gaia-selects')
+  if(els.length > 0) {
+    parentNode.removeChild(els[0]);
+  }
 }
+var tmp = document.createElement('div');
+var lastTmp = document.createElement('div');
+tmp.innerHTML = Gaia5FPRO.html(randomId)
+parentNode.appendChild(lastTmp)
+parentNode.insertBefore(tmp.childNodes[0], document.currentScript.nextSibling)
+parentNode.removeChild(lastTmp)
+
 Gaia5FPRO.load_selects = function(script) {
-  var random_id = Gaia5FPRO.random_id();
-  script.after(Gaia5FPRO.html(random_id))
-  Gaia5FPRO.generate_selects(random_id)
+  var randomId = Gaia5FPRO.random_id();
+  script.after(Gaia5FPRO.html(randomId))
+  Gaia5FPRO.generate_selects(randomId)
 }
 Gaia5FPRO.generate_selects = function(random_id) {
   var selects = $('#gaia-selects-' + random_id);
@@ -22,6 +31,7 @@ Gaia5FPRO.generate_selects = function(random_id) {
 
   var script = document.currentScript || selects.parent().find('script')[0];
   var params = {
+    excluded_data: (script.getAttribute('excluded-data') || '').split(','),
     city_input: script.getAttribute('city-input') || 'city',
     dist_input: script.getAttribute('dist-input') || 'dist',
     zipcode_input: script.getAttribute('zipcode-input' || 'zipcode'),
@@ -31,24 +41,31 @@ Gaia5FPRO.generate_selects = function(random_id) {
     zipcode_prefix: script.getAttribute('zipcode-prefix'),
     disable_zipcode: script.getAttribute('disable-zipcode'),
     wrapper_tag: script.getAttribute('wrapper-tag') || 'div',
+    wrapper_class: script.getAttribute('wrapper-class') || '',
     select_class: script.getAttribute('select-class') || '',
-    input_class: script.getAttribute('input-class') || ''
+    input_class: script.getAttribute('input-class') || '',
+    city_placeholder: script.getAttribute('city-placeholder') || '請選擇城市',
+    dist_placeholder: script.getAttribute('dist-placeholder') || '請選擇鄉鎮區',
+    zipcode_placeholder: script.getAttribute('zipcode-placeholder') || '郵遞區號',
+    zipcode_front: script.getAttribute('zipcode-front') == 'true' || false
 
   }
   city.attr('name', params['city_input']);
   dist.attr('name', params['dist_input']);
 
   zipcode.attr('name', params['zipcode_input']);
-  zipcode.attr('placeholder', '郵遞區號')
+  zipcode.attr('placeholder', params['zipcode_placeholder'])
 
   var selected_city = params['city_value'];
   var selected_dist = params['dist_value'];
   var zipcode_value = params['zipcode_value']
   var dist_name_with_zipcode = !(params['zipcode_prefix'] == 'false');
   var disable_zipcode_input = params['disable_zipcode'] == 'true'
   var wrapper_tag = params['wrapper_tag']
+  var wrapper_class = params['wrapper_class']
   var input_class = params['input_class']
   var select_class = params['select_class']
+  var city_zipcodes = {}
 
   city.addClass(select_class)
   dist.addClass(select_class)
@@ -60,16 +77,22 @@ Gaia5FPRO.generate_selects = function(random_id) {
     if(city.val() == '') return;
     var cell = data.filter(function(cell) { return cell.city.name == city.val(); })[0];
     cell.dists.forEach(function(dist_obj) {
+      if(params.excluded_data.includes(dist_obj.zipcode) || params.excluded_data.includes(dist_obj.name)) return;
       var text = dist_name_with_zipcode ? dist_obj.zipcode + ' ' + dist_obj.name : dist_obj.name;
       dist.append($('<option>', {
         'value': dist_obj.name,
         'text':  text
       }).attr('data-zipcode', dist_obj.zipcode));
     })
+    if(city.attr('data-dist-value')) {
+      dist.val(city.attr('data-dist-value'))
+      dist.trigger('change')
+      city.removeAttr('data-dist-value')
+    }
   });
 
   dist.on('reset', function() {
-    dist.html('<option>請選擇鄉鎮區</option>')
+    dist.html('<option value>' + params['dist_placeholder'] + '</option>')
   });
 
   dist.on('change', function() {
@@ -79,16 +102,21 @@ Gaia5FPRO.generate_selects = function(random_id) {
   });
 
   // insert city select
-  city.append('<option>請選擇城市</option>')
+  city.append('<option value>' + params['city_placeholder'] + '</option>')
   dist.trigger('reset');
   data.forEach(function(cell) {
     var city_name = cell.city.name;
+    if(params.excluded_data.includes(city_name)) return;
     var selected = city_name == selected_city;
     city.append($('<option>', {
       'value': city_name,
       'text':  city_name,
       'selected': selected
     }));
+    cell.dists.forEach(function(data_dist) {
+      if(params.excluded_data.includes(data_dist.zipcode) || params.excluded_data.includes(data_dist.name)) return;
+      city_zipcodes[data_dist.zipcode] = { city: city_name, dist: data_dist.name }
+    })
     // assign default value
     if(selected) {
       city.trigger('change');
@@ -101,11 +129,26 @@ Gaia5FPRO.generate_selects = function(random_id) {
       }
     }
   });
+  zipcode.on('change', function() {
+    tmp = city_zipcodes[zipcode.val()]
+    if(tmp && tmp.city) {
+      city.val(tmp.city)
+      dist_value = tmp.dist
+      if(dist_value) {
+        city.attr('data-dist-value', dist_value)
+      }
+      city.trigger('change')
+    }
+  })
 
-  selects.append($('<' + wrapper_tag + '>').addClass('gaia-cities').append(city));
-  selects.append($('<' + wrapper_tag + '>').addClass('gaia-dists').append(dist));
-  if(!disable_zipcode_input) {
-    selects.append($('<' + wrapper_tag + '>').addClass('gaia-zipcode').append(zipcode));
+  zipcode_html = $('<' + wrapper_tag + '>').addClass(wrapper_class).addClass('gaia-zipcode').append(zipcode)
+  if(!disable_zipcode_input && params['zipcode_front']) {
+    selects.append(zipcode_html);
+  }
+  selects.append($('<' + wrapper_tag + '>').addClass(wrapper_class).addClass('gaia-cities').append(city));
+  selects.append($('<' + wrapper_tag + '>').addClass(wrapper_class).addClass('gaia-dists').append(dist));
+  if(!disable_zipcode_input && !params['zipcode_front']) {
+    selects.append(zipcode_html);
   }
   $('#gaia-selects-' + random_id).parent().trigger('gaia-loaded')
 }