motion-wizard 0.1

data/lib/motion-wizard/views/index_item_view.rb

@@ -0,0 +1,53 @@
+module MotionWizard
+  class IndexItem < UIView
+    attr_reader :label, :label_wrapper
+
+    def init
+      super
+      create_label
+      create_label_wrapper
+      @label_wrapper.addSubview(@label)
+      addSubview(@label_wrapper)
+
+      initialize_callbacks
+      self
+    end
+
+    def create_label
+      @label               = UILabel.alloc.init
+      @label.textAlignment = NSTextAlignmentCenter
+      @label.origin        = [0, 0]
+    end
+
+    def create_label_wrapper
+      @label_wrapper                 = UIView.alloc.init
+      @label_wrapper.origin          = [0, 0]
+      @label_wrapper.backgroundColor = UIColor.clearColor
+    end
+
+    def initialize_callbacks
+      when_selected do
+        @original_text = @label.text
+        @label.text = "[#{@label.text}]"
+      end
+
+      when_unselected { @label.text = @original_text}
+    end
+
+    def when_selected(&block)
+      @when_selected = block
+    end
+
+    def when_unselected(&block)
+      @when_unselected = block
+    end
+
+    def select
+      @when_selected.call
+    end
+
+    def unselect
+      @when_unselected.call
+    end
+  end
+end

data/lib/motion-wizard/views/wizard_navigation_bar.rb

@@ -0,0 +1,55 @@
+module MotionWizard
+  class WizardNavigationBar < UIView
+    def init_with_number_of_steps(number_of_steps, wizard_controller)
+      self.init
+      @number_of_steps = number_of_steps
+      @index_items = []
+      @wizard_controller = WeakRef.new(wizard_controller)
+      create_index_items
+      self
+    end
+
+    def create_index_items
+      @number_of_steps.times do |i|
+        index_item = @wizard_controller.create_index_item_at(i)
+        @index_items << index_item
+        addSubview(index_item)
+      end
+    end
+
+    def select(index)
+      @index_items[@selected_step].unselect if @selected_step && @index_items[@selected_step].respond_to?(:unselect)
+      @selected_step = index
+      @index_items[@selected_step].select if @selected_step && @index_items[@selected_step].respond_to?(:select)
+    end
+
+    def setFrame(frame)
+      super
+      resize_indexes
+    end
+
+    def reset!
+      remove_all_index_items
+      create_index_items
+      resize_indexes
+    end
+
+    def remove_all_index_items
+      @index_items.each{|i| i.removeFromSuperview}
+      @index_items.clear
+    end
+
+    def resize_indexes
+      return unless @number_of_steps
+      index_width = (self.frame.size.width).to_f / @number_of_steps
+      @index_items.each_with_index do |index_item, i|
+        index_item.frame = [[index_width*i, 0], [index_width, self.size.height]]
+        setup_index_item_at(index_item, i)
+      end
+    end
+
+    def setup_index_item_at(index_item, i)
+      @wizard_controller.setup_index_item_at(index_item, i)
+    end
+  end
+end

data/motion-wizard.gemspec

@@ -0,0 +1,22 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+
+Gem::Specification.new do |spec|
+  spec.name          = "motion-wizard"
+  spec.version       = "0.1"
+  spec.authors       = ["Ignacio Piantanida"]
+  spec.email         = ["ijpiantanida@gmail.com"]
+  spec.description   = "An small library to create wizard like views controllers"
+  spec.summary       = "An small library to create wizard like views"
+  spec.homepage      = "https://github.com/ijpiantanida/motion-wizard"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+end

data/samples/wizard-1/.gitignore

@@ -0,0 +1,16 @@
+.repl_history
+build
+tags
+app/pixate_code.rb
+resources/*.nib
+resources/*.momd
+resources/*.storyboardc
+.DS_Store
+nbproject
+.redcar
+#*#
+*~
+*.sw[po]
+.eprj
+.sass-cache
+.idea

data/samples/wizard-1/Gemfile

@@ -0,0 +1,8 @@
+source 'https://rubygems.org'
+
+gem 'rake'
+# Add your dependencies here:
+gem 'motion-wizard', :path => "../.."
+gem 'teacup'
+gem 'sugarcube'
+gem 'bubble-wrap'

data/samples/wizard-1/Rakefile

@@ -0,0 +1,18 @@
+# -*- coding: utf-8 -*-
+$:.unshift("/Library/RubyMotion/lib")
+require 'motion/project/template/ios'
+
+begin
+  require 'bundler'
+  Bundler.require
+  require 'sugarcube-repl'
+  require 'sugarcube-color'
+  require 'sugarcube-events'
+  require 'sugarcube-constants'
+rescue LoadError
+end
+
+Motion::Project::App.setup do |app|
+  # Use `rake config' to see complete project settings.
+  app.name = 'wizard-1'
+end

data/samples/wizard-1/app/app_delegate.rb

@@ -0,0 +1,8 @@
+class AppDelegate
+  def application(application, didFinishLaunchingWithOptions: launchOptions)
+    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
+    @window.rootViewController = Wizard1ViewController.alloc.init
+    @window.makeKeyAndVisible
+    true
+  end
+end

data/samples/wizard-1/app/controllers/steps_view_controller.rb

@@ -0,0 +1,92 @@
+class Step1ViewController < UIViewController
+  stylesheet :step_1
+
+  layout :step do
+    @text_field = subview(UITextField, :text_field)
+    @button = subview(UIButton, :button)
+  end
+
+  def viewWillAppear(animated)
+    super
+    @button.on(:touch){ self.next(step_1_text: @text_field.text) }
+  end
+
+  def viewWillDisappear(animated)
+    super
+    @button.off(:touch)
+  end
+end
+
+class Step2ViewController < UIViewController
+  stylesheet :step_2
+
+  layout :step do
+    @text_field = subview(UITextField, :text_field)
+    @next_button = subview(UIButton, :next_button)
+    @back_button = subview(UIButton, :back_button)
+  end
+
+  def viewWillAppear(animated)
+    super
+    @next_button.on(:touch) {self.next(step_2_text: @text_field.text)}
+    @back_button.on(:touch) {self.previous}
+  end
+
+  def viewWillDisappear(animated)
+    super
+    @next_button.off(:touch)
+    @back_button.off(:touch)
+  end
+end
+
+class Step3ViewController < UIViewController
+  stylesheet :step_3
+
+  layout :step do
+    subview(UILabel, :label)
+    @next_button = subview(UIButton, :next_button)
+    @back_button = subview(UIButton, :back_button)
+  end
+
+  def viewWillAppear(animated)
+    super
+    @next_button.on(:touch) {self.next}
+    @back_button.on(:touch) {self.previous}
+  end
+
+  def viewWillDisappear(animated)
+    super
+    @next_button.off(:touch)
+    @back_button.off(:touch)
+  end
+end
+
+class Step4ViewController < UIViewController
+  stylesheet :step_4
+
+  layout :step do
+    subview(UILabel, :label)
+    @step_1_data = subview(UILabel, :step_1_data)
+    @step_2_data = subview(UILabel, :step_2_data)
+    @reset_button = subview(UIButton, :reset_button)
+    @finish_button = subview(UIButton, :finish_button)
+    @start_over_button = subview(UIButton, :start_over_button)
+  end
+
+  def viewWillAppear(animated)
+    super
+    @step_1_data.text = "Step 1: #{self.wizard_data[:step_1_text]}"
+    @step_2_data.text = "Step 2: #{self.wizard_data[:step_2_text]}"
+
+    @start_over_button.on(:touch) {self.go_to_step(0)}
+    @reset_button.on(:touch) {self.reset!}
+    @finish_button.on(:touch) {self.next}
+  end
+
+  def viewWillDisappear(animated)
+    super
+    @start_over_button.off(:touch)
+    @reset_button.off(:touch)
+    @finish_button.off(:touch)
+  end
+end

data/samples/wizard-1/app/controllers/wizard_1_view_controller.rb

@@ -0,0 +1,28 @@
+class Wizard1ViewController < MotionWizard::WizardViewController
+  steps Step1ViewController,
+        Step2ViewController,
+        Step3ViewController,
+        Step4ViewController
+
+  stylesheet :wizard_view_controller
+
+  layout :wizard_view_controller
+
+  def setup_index_item_at(index_item, index)
+    layout(index_item, :index_item)
+    index_item.when_selected{ index_item.animate_to_stylename(:index_item_selected) }
+    index_item.when_unselected do
+      UIView.animateWithDuration(0.5,
+                                 animations: -> {
+                                   layout(index_item, :index_item)
+                                 }, completion: ->(_){
+                                    layout(index_item, :index_item_unselected)
+          })
+
+    end
+  end
+
+  def when_finished
+    App.alert("Now you can do whatever you like with this #{wizard_data}")
+  end
+end

data/samples/wizard-1/app/views/styles/steps.rb

@@ -0,0 +1,128 @@
+Teacup::Stylesheet.new :steps do
+  style :step,
+        backgroundColor: :white.uicolor
+
+  style :big_button,
+        size: ["100% - 40", 35],
+        center_x: "50%",
+        backgroundColor: [103,189,71].uicolor
+
+end
+
+Teacup::Stylesheet.new :step_1 do
+  import :steps
+
+  style :text_field,
+    placeholder: "Put some text here",
+    size: ["100% - 40", 35],
+    top: 130,
+    center_x: "50%",
+    textAlignment: NSTextAlignmentCenter,
+    contentVerticalAlignment: UIControlContentVerticalAlignmentCenter,
+    layer: {
+        borderWidth: 1,
+        cornerRadius: 5
+    }
+
+  style :button,
+    extends: :big_button,
+    title: "And tap here...",
+    top: 180
+end
+
+Teacup::Stylesheet.new :step_2 do
+  import :steps
+
+  style :text_field,
+        placeholder: "Also add some text here",
+        size: ["100% - 40", 35],
+        top: 130,
+        center_x: "50%",
+        textAlignment: NSTextAlignmentCenter,
+        contentVerticalAlignment: UIControlContentVerticalAlignmentCenter,
+        layer: {
+            borderWidth: 1,
+            cornerRadius: 5
+        }
+
+  style :base_button,
+        size: ["50% - 40", 35],
+        backgroundColor: [103,189,71].uicolor
+
+  style :next_button,
+        extends: :base_button,
+        title: ">",
+        origin: ["50% + 10", 180]
+
+  style :back_button,
+        extends: :base_button,
+        title: "<",
+        origin: [20, 180]
+end
+
+Teacup::Stylesheet.new :step_3 do
+  import :steps
+
+  style :label,
+        text: "Not much to do around here",
+        size: ["100% - 40", 35],
+        top: 130,
+        center_x: "50%",
+        textAlignment: NSTextAlignmentCenter,
+        textColor: [103,189,71].uicolor
+
+  style :base_button,
+        size: ["50% - 40", 35],
+        backgroundColor: [103,189,71].uicolor
+
+  style :next_button,
+        extends: :base_button,
+        title: ">",
+        origin: ["50% + 10", 180]
+
+  style :back_button,
+        extends: :base_button,
+        title: "<",
+        origin: [20, 180]
+end
+
+Teacup::Stylesheet.new :step_4 do
+  import :steps
+
+  style :label,
+        text: "End of the journey",
+        size: ["100% - 40", 35],
+        top: 130,
+        center_x: "50%",
+        textAlignment: NSTextAlignmentCenter,
+        textColor: [103,189,71].uicolor
+
+  style :data,
+        size: ["100% - 40", 35],
+        center_x: "50%",
+        textAlignment: NSTextAlignmentCenter,
+        textColor: [103,189,71].uicolor
+
+  style :step_1_data,
+        extends: :data,
+        top: 180
+
+  style :step_2_data,
+        extends: :data,
+        top: 220
+
+  style :reset_button,
+        extends: :big_button,
+        title: "Reset!",
+        top: 320
+
+  style :start_over_button,
+        extends: :big_button,
+        title: "Start over!",
+        top: 360
+
+  style :finish_button,
+        extends: :big_button,
+        title: "Finish",
+        top: 400
+end

data/samples/wizard-1/app/views/styles/wizard_1_view_controller.rb

@@ -0,0 +1,42 @@
+Teacup::Stylesheet.new :wizard_view_controller do
+  style :wizard_view_controller,
+        backgroundColor: :white.uicolor
+
+  style :index_item,
+        height: 10,
+        center_y: "100%",
+        backgroundColor: [103,189,71].uicolor,
+        label_wrapper:{
+            backgroundColor: [103,189,71].uicolor,
+            size: [50, 50],
+            center: ["50%", "50%"],
+            layer: {
+                cornerRadius: 25
+            }
+        },
+        label: {
+            backgroundColor: :clear.uicolor,
+            textColor: :white.uicolor,
+            size: ["100%", 20],
+            center: ["50%", "50%"]
+        }
+
+  style :index_item_unseleted,
+        extends: :index_item,
+        layer: {
+            borderWidth: 0
+        }
+
+  style :index_item_selected,
+        label_wrapper:{
+            backgroundColor: :white.uicolor,
+            layer: {
+                borderWidth: 2,
+                borderColor: [103,189,71].uicolor.CGColor
+            }
+        },
+        label: {
+            textColor: [103,189,71].uicolor
+        }
+
+end