twitter_bootstrap_markup 0.0.1

data/lib/twitter_bootstrap_markup/side_position.rb

@@ -0,0 +1,15 @@
+module TwitterBootstrapMarkup
+  module SidePosition
+
+    def pull_right
+      attributes.append!(:class, 'pull-right')
+      self
+    end
+
+    def pull_left
+      attributes.append!(:class, 'pull-left')
+      self
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/submit.rb

@@ -0,0 +1,10 @@
+module TwitterBootstrapMarkup
+  class Submit < Button
+
+    def initialize(*args, &block)
+      super(*args, &block)
+      attributes[:type] = 'submit'
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/tab.rb

@@ -0,0 +1,14 @@
+module TwitterBootstrapMarkup
+  class Tab < Tag
+    attr_reader :nav
+    attr_reader :content
+
+    def initialize(attributes={}, &block)
+      super(:div, attributes.prepend!(:class, 'tab')) {}
+      @nav = append NavTabContainer.new
+      @content = append TabContent.new
+      instance_eval &block if block_given?
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/tab_content.rb

@@ -0,0 +1,29 @@
+module TwitterBootstrapMarkup
+  class TabContent < Tag
+    alias :internal_append :append
+
+    def initialize(attributes={}, &block)
+      if block_given?
+        super(:div, attributes.prepend!(:class, 'tab-content'), &block)
+      else
+        super(:div, attributes.prepend!(:class, 'tab-content')) {}
+      end
+    end
+
+    def append(*args, &block)
+      id = args.shift
+      element = block_given? ? instance_eval(&block) : args.shift
+      mode = args.shift || :inactive
+
+      if element.is_a?(Tag) && element.name == :div && element.attributes[:class].include?('tab-pane')
+        element.attributes[:id] = id
+        element.attributes.append!(:class, 'active') if mode == :active
+        internal_append element
+      else
+        attributes = {:class => 'tab-pane', :id => id}
+        attributes.append!(:class, :active) if mode == :active
+        internal_append Tag.block(:div, attributes) { append element }
+      end
+    end
+  end
+end

data/lib/twitter_bootstrap_markup/table.rb

@@ -0,0 +1,28 @@
+module TwitterBootstrapMarkup
+  class Table < Tag
+    TYPES = [:bordered, :striped, :condensed]
+
+    def initialize(attributes={}, &block)
+      attributes.prepend!(:class, 'table')
+      if block_given?
+        super(:table, attributes, &block)
+      else
+        super(:table, attributes) {}
+      end
+    end
+
+    TYPES.each do |type|
+      define_method type do
+        attributes.append!(:class, "table-#{type}")
+        self
+      end
+    end
+
+    TYPES.each do |type|
+      define_singleton_method type do |*args, &block|
+        self.new(*args, &block).send(type)
+      end
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/tag.rb

@@ -0,0 +1,51 @@
+module TwitterBootstrapMarkup
+  class Tag
+    include Tooltip
+    include Popover
+    include SidePosition
+
+    attr_reader :name
+    attr_reader :attributes
+    attr_reader :children
+
+    def self.inline(name, attributes={})
+      Tag.new(name, attributes)
+    end
+
+    def self.block(name, attributes={}, &block)
+      if block_given?
+        Tag.new(name, attributes, &block)
+      else
+        Tag.new(name, attributes) {}
+      end
+    end
+
+    def initialize(name, attributes={}, &block)
+      @name = name
+      @attributes = attributes
+      @children = []
+      @is_block = block_given?
+      instance_eval &block if block_given?
+    end
+
+    def append(element=nil, &block)
+      element = instance_eval(&block) if block_given?
+      @children << element
+      element
+    end
+
+    def prepend(element)
+      @children.insert 0, element
+    end
+
+    def to_s
+      attributes_markup = attributes.empty? ? '' : " #{attributes.map{|key, value| "#{key}#{value ? "=\"#{value}\"" : ''}"}.join(' ')}"
+      if @is_block
+        "<#{name}#{attributes_markup}>#{children.map(&:to_s).join}</#{name}>"
+      else
+        "<#{name}#{attributes_markup}>"
+      end
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/tooltip.rb

@@ -0,0 +1,19 @@
+module TwitterBootstrapMarkup
+  module Tooltip
+    POSITIONS = [:top, :bottom, :left, :right]
+
+    def tooltip(title)
+      tooltip_top(title)
+    end
+
+    POSITIONS.each do |position|
+      define_method "tooltip_#{position}" do |title|
+        attributes[:rel] = 'tooltip'
+        attributes['data-original-title'] = title
+        attributes['data-placement'] = position
+        self
+      end
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/ul_container.rb

@@ -0,0 +1,21 @@
+module TwitterBootstrapMarkup
+  class UlContainer < Tag
+    alias :internal_append :append
+
+    def initialize(attributes={}, &block)
+      super(:ul, attributes, &block)
+    end
+
+    def append(element=nil, mode=:inactive, &block)
+      element = instance_eval(&block) if block_given?
+      if element.is_a?(Tag) && element.name == :li
+        element.attributes.append!(:class, 'active') if mode == :active
+        internal_append element
+      else
+        attributes = mode == :active ? {:class => 'active'} : {}
+        internal_append Tag.block(:li, attributes) { append element }
+      end
+    end
+
+  end
+end

data/lib/twitter_bootstrap_markup/version.rb

@@ -0,0 +1,3 @@
+module TwitterBootstrapMarkup
+  VERSION = "0.0.1"
+end

data/lib/twitter_bootstrap_markup/well.rb

@@ -0,0 +1,27 @@
+module TwitterBootstrapMarkup
+  class Well < Tag
+
+    def initialize(attributes={}, &block)
+      super(:div, attributes.prepend!(:class, 'well'), &block)
+    end
+
+    def small
+      attributes.append!(:class, 'well-small')
+      self
+    end
+
+    def large
+      attributes.append!(:class, 'well-large')
+      self
+    end
+
+    def self.small(*args, &block)
+      self.new(*args, &block).small
+    end
+
+    def self.large(*args, &block)
+      self.new(*args, &block).large
+    end
+
+  end
+end

data/markup/alerts.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Twitter Bootstrap Markup</title>
+    <!--[if lt IE 9]>
+    <script src='http://html5shim.googlecode/svn/trunk/html5.js' type='text/javascript'></script>
+    <![endif]-->
+    <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+</head>
+<body>
+<div class="container">
+    <h2>Alerts</h2>
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th class="span2">Name</th>
+            <th>Component</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>Warning</td>
+            <td id="warning">
+                <div class="alert">
+                    <strong>Alert!</strong>
+                    Message
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td>Info</td>
+            <td id="info">
+                <div class="alert alert-info">
+                    <strong>Alert!</strong>
+                    Message
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td>Success</td>
+            <td id="success">
+                <div class="alert alert-success">
+                    <strong>Alert!</strong>
+                    Message
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td>Danger</td>
+            <td id="danger">
+                <div class="alert alert-danger">
+                    <strong>Alert!</strong>
+                    Message
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td>Closable</td>
+            <td id="closable">
+                <div class="alert">
+                    <button class="close" data-dismiss="alert">&times</button>
+                    <strong>Alert!</strong>
+                    Message
+                </div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <a href="index.html">back to index</a>
+</div>
+<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
+<script src="js/bootstrap.js" type="text/javascript"></script>
+</body>
+</html>

data/markup/badges.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Twitter Bootstrap Markup</title>
+    <!--[if lt IE 9]>
+    <script src='http://html5shim.googlecode/svn/trunk/html5.js' type='text/javascript'></script>
+    <![endif]-->
+    <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+</head>
+<body>
+<div class="container">
+    <h2>Badges</h2>
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th class="span2">Name</th>
+            <th>Component</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>Default</td>
+            <td id="default">
+                <span class="badge">1</span>
+            </td>
+        </tr>
+        <tr>
+            <td>Success</td>
+            <td id="success">
+                <span class="badge badge-success">1</span>
+            </td>
+        </tr>
+        <tr>
+            <td>Warning</td>
+            <td id="warning">
+                <span class="badge badge-warning">1</span>
+            </td>
+        </tr>
+        <tr>
+            <td>Important</td>
+            <td id="important">
+                <span class="badge badge-important">1</span>
+            </td>
+        </tr>
+        <tr>
+            <td>Info</td>
+            <td id="info">
+                <span class="badge badge-info">1</span>
+            </td>
+        </tr>
+        <tr>
+            <td>Inverse</td>
+            <td id="inverse">
+                <span class="badge badge-inverse">1</span>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <a href="index.html">back to index</a>
+</div>
+<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
+<script src="js/bootstrap.js" type="text/javascript"></script>
+</body>
+</html>

data/markup/breadcrumbs.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Twitter Bootstrap Markup</title>
+    <!--[if lt IE 9]>
+    <script src='http://html5shim.googlecode/svn/trunk/html5.js' type='text/javascript'></script>
+    <![endif]-->
+    <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+</head>
+<body>
+<div class="container">
+    <h2>Breadcrumbs</h2>
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th class="span2">Name</th>
+            <th>Component</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>One level</td>
+            <td id="one">
+                <ul class="breadcrumb">
+                    <li>Home</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>Two levels</td>
+            <td id="two">
+                <ul class="breadcrumb">
+                    <li><a href="#">Home</a></li>
+                    <li><span class="divider">/</span></li>
+                    <li>Page</li>
+                </ul>
+            </td>
+        </tr>
+        <tr>
+            <td>Three levels</td>
+            <td id="three">
+                <ul class="breadcrumb">
+                    <li><a href="#">Home</a></li>
+                    <li><span class="divider">/</span></li>
+                    <li><a href="#">Page</a></li>
+                    <li><span class="divider">/</span></li>
+                    <li>Data</li>
+                </ul>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <a href="index.html">back to index</a>
+</div>
+<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
+<script src="js/bootstrap.js" type="text/javascript"></script>
+</body>
+</html>

data/markup/buttons.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Twitter Bootstrap Markup</title>
+    <!--[if lt IE 9]>
+    <script src='http://html5shim.googlecode/svn/trunk/html5.js' type='text/javascript'></script>
+    <![endif]-->
+    <link href="css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/>
+    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
+</head>
+<body>
+<div class="container">
+    <h2>Buttons</h2>
+    <table class="table table-bordered table-striped">
+        <thead>
+        <tr>
+            <th class="span2">Name</th>
+            <th>Component</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>Default</td>
+            <td id="default">
+                <button class="btn">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Primary</td>
+            <td id="primary">
+                <button class="btn btn-primary">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Info</td>
+            <td id="info">
+                <button class="btn btn-info">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Success</td>
+            <td id="success">
+                <button class="btn btn-success">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Warning</td>
+            <td id="warning">
+                <button class="btn btn-warning">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Danger</td>
+            <td id="danger">
+                <button class="btn btn-danger">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Inverse</td>
+            <td id="inverse">
+                <button class="btn btn-inverse">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Large</td>
+            <td id="large">
+                <button class="btn btn-large">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Small</td>
+            <td id="small">
+                <button class="btn btn-small">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Mini</td>
+            <td id="mini">
+                <button class="btn btn-mini">Click me</button>
+            </td>
+        </tr>
+        <tr>
+            <td>Mixed</td>
+            <td id="mixed">
+                <button class="btn btn-primary btn-large">Click me</button>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+    <a href="index.html">back to index</a>
+</div>
+<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
+<script src="js/bootstrap.js" type="text/javascript"></script>
+</body>
+</html>