glimmer-cw-cdatetime-nebula 1.5.0.2.0 → 1.5.0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2b27a5ece4803fbb7129f299f334db84f2e04a3493771b4450422960444feeb
-  data.tar.gz: aeb73d132ab04b909950c530699aa4ab32737c674318742e0331951f4ddb06c6
+  metadata.gz: 3eed11d34e046c49e1784c672e4b8a857e42415c6edfa51525367a43f36cd95b
+  data.tar.gz: f0f22840c3b0629c4da6e895325bbcddc8604b11efb5b914f2c67b84831ec6b2
 SHA512:
-  metadata.gz: d4e3c7f7caa2e359da5ec4c799c573e18f3e35ca66d63b7b4aee3d5d4b72e73f8b0f39943a6d680f078b59a66f9272057e87fca41e8c6a3c2df2d295bbf3d036
-  data.tar.gz: 90080b9ed297c65bf21007debb9e6fe58a81513371bde8f25239e3e04e8b608b988341dcd17785f841f493e70a832f272cf41772762e55b015ebc6eb86805105
+  metadata.gz: b4288432cfd5ce4fb201a4d104716eaaffb8c3cbb92a1f82e5ddd12f0ead0386c0b47a793a80ad1e9cdee5bb30e234258cf86a0e4762213d32acf122ab5ae534
+  data.tar.gz: 13245e207fd752175fee1ea8af52d8471d6b55f94c5a9c1e7282c5ba003e83a61acbe1841eb3bb7f863720f085987b44da8577a37a01115580e32056b0b9cd19

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 1.5.0.3.0
+
+- Support Glimmer DSL for Opal with the `c_date_time` and `c_date_time_drop_down` keywords
+
 ## 1.5.0.2.0
 
 - Support Glimmer DSL for Opal with `c_time`, `c_time_drop_down`, `c_time_compact`, `c_date`, and `c_date_drop_down`

data/README.md

@@ -126,9 +126,11 @@ Edit `app/views/layouts/application.html.erb` and add the following below other
 <%= stylesheet_link_tag    'glimmer_cw_cdatetime_nebula/glimmer_cw_cdatetime_nebula', media: 'all', 'data-turbolinks-track': 'reload' %>
 ```
 
-That's it! Now, you can use the following keywords:
+That's it! Now, you can use the following keywords (with other keywords mentioned under [instructions](#instructions) having partial support):
+- `c_date_time`
 - `c_date`
 - `c_time`
+- `c_date_time_drop_down`
 - `c_date_drop_down`
 - `c_time_drop_down`
 - `c_time_compact`

data/VERSION

@@ -1 +1 @@
-1.5.0.2.0
+1.5.0.3.0

data/opal/glimmer-cw-cdatetime-nebula/ext/glimmer/swt/c_date_time_proxy.rb

@@ -41,28 +41,31 @@ module Glimmer
       end
       
       def post_add_content
-        if time?
-          clocklet
-          if drop_down?
-            time_button_dom_element.on('click') do |event|
-              `clocklet.open(document.getElementById(#{input_id}))`
-            end
-          end
-        else
+        if date?
           options = {
             changeMonth: true,
             changeYear: true,
           }
           if drop_down?
-            options = {
+            options = options.merge(
               showOn: 'both',
               buttonImage: 'assets/glimmer/images/calendar.gif',
               buttonImageOnly: true,
               buttonText: 'Select date',
-            }
+            )
+          end
+          date_input_dom_element.datepicker(options)
+        end
+        
+        if time?
+          clocklet
+          if drop_down?
+            time_button_dom_element.on('click') do |event|
+              `clocklet.open(document.getElementById(#{time_input_id}))`
+            end
           end
-          input_dom_element.datepicker(options)
         end
+        
         selection_value = self.selection
         @added_content = true
         self.selection = selection_value
@@ -75,20 +78,20 @@ module Glimmer
           @@clocklet_default_options_set = true
         end
         if simple?
-          @clocklet ||= Native(`clocklet.inline(document.getElementById(#{clock_id}), {input: document.getElementById(#{input_id})})`)
+          @clocklet ||= Native(`clocklet.inline(document.getElementById(#{clock_id}), {input: document.getElementById(#{time_input_id})})`)
         end
       end
       
-      def date?
-        args.to_a.include_any?(:date_short, :date_medium, :date_long)
+      def date_time?
+        !args.to_a.include_any?(:date_short, :date_medium, :date_long) && !args.to_a.include_any?(:time_short, :time_medium)
       end
       
-      def time?
-        args.to_a.include_any?(:time_short, :time_medium)
+      def date?
+        args.to_a.include_any?(:date_short, :date_medium, :date_long) || date_time?
       end
       
-      def date_time?
-        !date? && !time?
+      def time?
+        args.to_a.include_any?(:time_short, :time_medium) || date_time?
       end
       
       def drop_down?
@@ -110,14 +113,16 @@ module Glimmer
       def selection
         if @added_content
           default_date = DateTime.new if @selection.nil?
-          default_year = @selection&.year || default_date.year
-          default_month = @selection&.month || default_date.month
-          default_day = @selection&.day || default_date.day
-          default_hour = @selection&.hour || default_date.hour
-          default_min = @selection&.min || default_date.min
-          default_sec = @selection&.sec || default_date.sec
+          
+          current_year = @selection&.year || default_date.year
+          current_month = @selection&.month || default_date.month
+          current_day = @selection&.day || default_date.day
+          current_hour = @selection&.hour || default_date.hour
+          current_min = @selection&.min || default_date.min
+          current_sec = @selection&.sec || default_date.sec
+          
           if time?
-            time_string = input_dom_element.val
+            time_string = time_input_dom_element.val
              _, current_hour, current_min, am_pm = time_string.match(/(\d{1,2})\:(\d{1,2})[ ]?([APap]?\.?[Mm]?\.?)/).to_a
             current_hour ||= default_hour
             current_min ||= default_min
@@ -125,10 +130,15 @@ module Glimmer
             am_pm = am_pm.to_s.gsub('.', '').upcase
             current_hour += 12 if am_pm == 'PM'
             current_min = current_min.to_i
-            @selection = DateTime.new(default_year, default_month, default_day, current_hour, current_min, default_sec)
-          else
-            @selection = DateTime.new(input_dom_element.datepicker('getDate')&.year.to_i, input_dom_element.datepicker('getDate')&.month.to_i, input_dom_element.datepicker('getDate')&.day.to_i, default_hour, default_min, default_sec)
           end
+          
+          if date?
+            current_year = date_input_dom_element.datepicker('getDate')&.year.to_i
+            current_month = date_input_dom_element.datepicker('getDate')&.month.to_i
+            current_day = date_input_dom_element.datepicker('getDate')&.day.to_i
+          end
+          
+          @selection = DateTime.new(current_year, current_month, current_day, current_hour, current_min, current_sec)
           @selection = @selection&.to_datetime
         else
           @initial_selection
@@ -138,15 +148,18 @@ module Glimmer
       def selection=(value)
         if @added_content
           @selection = value&.to_datetime || DateTime.new
+          
           if time?
             formatted_time = @selection.strftime('%I:%M %p')
             if drop_down? || spinner? || compact?
-              input_dom_element.val(formatted_time)
+              time_input_dom_element.val(formatted_time)
             else
               clocklet.value(formatted_time)
             end
-          else
-            input_dom_element.datepicker('setDate', @selection.to_time)
+          end
+          
+          if date?
+            date_input_dom_element.datepicker('setDate', @selection.to_time)
           end
         else
           @initial_selection = value
@@ -167,7 +180,13 @@ module Glimmer
       end
       
       def listener_path
-        input_path
+        if date_time?
+          "#{date_input_path}, #{time_input_path}"
+        elsif date?
+          date_input_path
+        else # time
+          time_input_path
+        end
       end
       
       def time_button_id
@@ -190,20 +209,36 @@ module Glimmer
         'span'
       end
       
-      def input_id
-        "#{id}-input"
+      def date_input_id
+        "#{id}-date-input"
       end
       
-      def input_class
-        "#{name}-input"
+      def date_input_class
+        "#{name}-date-input"
       end
       
-      def input_path
-        "#{path} ##{input_id}"
+      def date_input_path
+        "#{path} ##{date_input_id}"
       end
       
-      def input_dom_element
-        Document.find(input_path)
+      def date_input_dom_element
+        Document.find(date_input_path)
+      end
+      
+      def time_input_id
+        "#{id}-time-input"
+      end
+      
+      def time_input_class
+        "#{name}-time-input"
+      end
+      
+      def time_input_path
+        "#{path} ##{time_input_id}"
+      end
+      
+      def time_input_dom_element
+        Document.find(time_input_path)
       end
       
       def clock_id
@@ -223,26 +258,36 @@ module Glimmer
       end
       
       def dom
-        input_element = date? && simple? ? 'div' : 'input'
-        input_class_value = "#{input_class} hide" if time? && simple?
-        input_attributes = {type: 'text', id: input_id, class: input_class_value}
-        input_attributes['data-clocklet'] = 'format: hh:mm A; appendTo: parent;' if time?
+        date_input_element = simple? ? 'div' : 'input'
+        date_input_attributes = {type: 'text', style: 'display: inline-block; vertical-align: top;', id: date_input_id, class: date_input_class}
+        time_input_class_value = "#{time_input_class} hide" if time? && simple?
+        time_input_attributes = {type: 'text', id: time_input_id, class: time_input_class_value}
+        time_input_attributes['data-clocklet'] = 'format: hh:mm A; appendTo: parent;' if time?
+        clock_attributes = {id: clock_id, class: clock_class, style: 'display: inline-block; vertical-align: top;'}
+        clock_attributes[:style] = 'display: inline-block; vertical-align: top; font-size: 13px; '
         the_class = name
         the_class += ' simple' if simple?
         the_class += ' drop-down' if drop_down?
-        the_class += ' compact' if compact?
         the_class += ' spinner' if spinner?
+        the_class += ' compact' if compact?
         @dom ||= html {
           span(id: id, class: the_class) {
+            # TODO move style somewhere to embed one time for all elements instead of repeating per element
             style {
               css {
+                s('.c-date-time.simple .clocklet, .c-date-time.drop-down .clocklet') {
+                  pv 'font-size', '13px'
+                  pv 'width', '207px'
+                  pv 'height', '207px'
+                }
                 s('.c-date-time.compact .clocklet, .c-date-time.spinner .clocklet') {
                   pv 'display', 'none'
                 }
               }
             }
-            send(input_element, input_attributes)
-            div(id: clock_id, class: clock_class) if time? && simple?
+            send(date_input_element, date_input_attributes) {} if date?
+            input(time_input_attributes) {} if time?
+            div(clock_attributes) {} if time? && simple?
             button(id: time_button_id, class: time_button_class, style: "border: none; background: url(assets/glimmer/images/ui-icons_222222_256x240.png) -80px, -96px; width: 16px; height: 16px;") if time? && drop_down?
           }
         }.to_s

data/samples/nebula/c_date_time_gallery.rb

@@ -57,13 +57,17 @@ class CDateTimeGallery
             text 'c_date_time'
             font name: 'Consolas', height: 14
           }
-          c_date_time
+          c_date_time {
+            selection bind(person, :date_of_birth)
+          }
           
           label {
             text 'c_date'
             font name: 'Consolas', height: 14
           }
-          c_date
+          c_date {
+            selection bind(person, :date_of_birth)
+          }
           
           label {
             text 'c_time'
@@ -84,6 +88,7 @@ class CDateTimeGallery
           }
           c_date_time_drop_down {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {
@@ -92,6 +97,7 @@ class CDateTimeGallery
           }
           c_date_drop_down {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {
@@ -114,6 +120,7 @@ class CDateTimeGallery
           }
           c_date_time_spinner {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {
@@ -122,6 +129,7 @@ class CDateTimeGallery
           }
           c_date_spinner {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {
@@ -144,6 +152,7 @@ class CDateTimeGallery
           }
           c_date_time_compact {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {
@@ -152,6 +161,7 @@ class CDateTimeGallery
           }
           c_date_compact {
             layout_data(:fill, :center, true, true)
+            selection bind(person, :date_of_birth)
           }
            
           label {

metadata

@@ -1,21 +1,21 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-cw-cdatetime-nebula
 version: !ruby/object:Gem::Version
-  version: 1.5.0.2.0
+  version: 1.5.0.3.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-18 00:00:00.000000000 Z
+date: 2020-11-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 4.17.10.0
+        version: 4.17.10.2
     - - "<"
       - !ruby/object:Gem::Version
         version: 5.0.0.0
@@ -26,7 +26,7 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 4.17.10.0
+        version: 4.17.10.2
     - - "<"
       - !ruby/object:Gem::Version
         version: 5.0.0.0