Added SKUI::ImageButton

src/SKUI/core.rb

@@ -28,6 +28,7 @@ module SKUI
   require File.join( PATH, 'container.rb' )
   require File.join( PATH, 'groupbox.rb' )
   require File.join( PATH, 'image.rb' )
+  require File.join( PATH, 'imagebutton.rb' )
   require File.join( PATH, 'label.rb' )
   require File.join( PATH, 'listbox.rb' )
   require File.join( PATH, 'radiobutton.rb' )

src/SKUI/debug.rb

@@ -34,6 +34,7 @@ def self.list_objects
         Container,
         Groupbox,
         Image,
+        ImageButton,
         Label,
         Listbox,
         RadioButton,

src/SKUI/imagebutton.rb

@@ -0,0 +1,34 @@
+module SKUI
+
+  require File.join( PATH, 'control.rb' )
+
+
+  # @since 1.0.0
+  class ImageButton < Control
+
+    # @return [String]
+    # @since 1.0.0
+    prop( :caption, &TypeCheck::STRING )
+    prop( :file, &TypeCheck::STRING )
+    prop( :activestatefile, &TypeCheck::STRING )
+
+    # @since 1.0.0
+    define_event( :click )
+
+    # @param [String] caption
+    # @param [Proc] on_click
+    #
+    # @since 1.0.0
+    def initialize( filename, activestatefile, &on_click)
+      super()
+
+      @properties[ :file ] = filename
+      @properties[ :activestatefile ] = activestatefile
+
+      if block_given?
+        add_event_handler( :click, &on_click )
+      end
+    end
+
+  end # class
+end # module

src/SKUI/js/core.js

@@ -31,6 +31,7 @@ $LAB
 .script( path + 'ui.container.js' )
 .script( path + 'ui.groupbox.js' )
 .script( path + 'ui.image.js' )
+.script( path + 'ui.imagebutton.js' )
 .script( path + 'ui.label.js' )
 .script( path + 'ui.listbox.js' )
 .script( path + 'ui.radiobutton.js' )

src/SKUI/js/ui.imagebutton.js

@@ -0,0 +1,79 @@
+/*******************************************************************************
+ *
+ * class UI.ImageButton
+ *
+ ******************************************************************************/
+
+
+ImageButton.prototype = new Control();
+ImageButton.prototype.constructor = ImageButton;
+
+function ImageButton( jquery_element ) {
+    Control.call( this, jquery_element );
+}
+
+UI.ImageButton = ImageButton;
+
+ImageButton.add = function( properties ) {
+    // Build DOM objects.
+    var $control = $('<img/>');
+    $control.addClass('control control-imagebutton');
+    // Initialize wrapper.
+    var control = new ImageButton( $control );
+    control.update( properties );
+    // Set up events.
+    UI.add_event( 'click', $control );
+    // Attach to document.
+    control.attach();
+    return control;
+};
+ImageButton.prototype.set_file = function( value ) {
+    this.control.attr( 'src', value );
+    return value;
+};
+
+ImageButton.prototype.set_activestatefile = function( value ) {
+
+    if ( value != ''){
+        var original_src = this.control.attr( 'src');
+
+        this.control.off('mousedown');
+        this.control.off('mouseup');
+        this.control.off('mouseleave');
+        this.control.off('mouseover');
+
+        this.control.on('mousedown', function() {
+            original_src = $(this).attr( 'src');
+            $(this).attr( 'src', value );
+            $(this).addClass("activestate");
+            return false;
+        });
+
+        this.control.on('mouseup', function() {
+            $(this).attr( 'src', original_src );
+            $(this).removeClass("activestate");
+            return false;
+        });
+
+        this.control.on('mouseleave', function() {
+            if ($(this).attr( 'src') == value){
+                $(this).attr( 'src', original_src );
+            }
+            return false;
+        });
+
+        this.control.on('mouseover', function() {
+            if ($(this).hasClass("activestate")){
+                $(this).attr( 'src', value );
+            }
+            return false;
+        });
+
+        $(document).on('mouseup', function() {
+           $(".activestate").removeClass("activestate");
+            return false;
+        });
+    }
+    return value;
+};
+