framework7-rails 0.7.4.0 → 0.9.6.0

data/app/helpers/pages_helper.rb

@@ -0,0 +1,66 @@
+module PagesHelper
+  @pages = []
+
+  def f7_pages(options = {}, &block)
+    @pages = []
+    css_classes = ['pages']
+    css_classes << "navbar-#{options[:navbar]}" if options[:navbar]
+    css_classes << "toolbar-#{options[:toolbar]}" if options[:toolbar]
+    options[:class] = css_classes + ([options[:class]] || [])
+
+    options.reject! { |k, v| [:navbar, :toolbar].include? k } 
+
+    content_tag :div, options do
+      yield if block_given?
+    end
+  end
+  
+  
+  
+  def f7_page(name, options = {}, &block)
+    @pages << name
+    @no_bar = []
+    current_view = (@current_view).underscore
+    layout = options[:layout] || false
+    css_classes = ['page']
+
+    css_classes << bar_classes_for(options[:padding]) unless options[:padding].nil?
+    css_classes += [options[:class]] if options[:class]
+
+    options.reject! { |k, v| [:class, :layout, :padding].include? k }
+    options[:class] = css_classes.uniq
+    
+    content_tag :div, options, 'data-page' => name do
+      if block_given?
+        yield
+      else
+        render :partial => "#{controller.controller_path}/#{current_view}/#{name}", :layout => layout
+      end
+    end
+  end
+  
+  private
+  
+  def bar_classes_for(padding)
+    padding = [padding].flatten
+    classes = []
+    toolbar_pad = nil
+
+    if padding.include? :no_navbar
+      classes << 'no-navbar'
+    elsif padding.include? :navbar
+      classes << 'navbar'
+    end
+
+    if padding.include? :no_toolbar
+      classes << 'no-toolbar'
+    elsif padding.include? :tabbar_labels
+      classes << 'tabbar-labels-fixed'      
+    elsif padding.include? :toolbar
+      classes << 'toolbar-fixed'
+    end
+    
+    classes.join(' ')
+  end
+  
+end

data/app/helpers/panel_helper.rb

@@ -0,0 +1,27 @@
+module PanelHelper
+
+  def f7_panel(*args, &block)
+    options = args.first || {}
+
+    panel_div(options)
+  end
+
+  private
+
+  def panel_div(options = {}, &block)
+    output = []
+    css_classes = ['panel']
+    css_classes << "panel-#{options[:side]}" if options[:side]
+    css_classes << "panel-#{options[:show]}" if options[:show]
+    css_classes += options[:class] if options[:class]
+    css_classes.uniq!
+    
+    opts = { :class => css_classes }
+    opts[:id] = options[:id] if options[:id]
+
+    content_tag :div, opts do
+      output << capture(&block) if block_given?
+      output.join("\n").html_safe
+    end
+  end
+end

data/app/helpers/toolbar_helper.rb

@@ -0,0 +1,52 @@
+module ToolbarHelper
+
+  def f7_toolbar_item(title_or_options, options=nil, &block)
+    output = []
+    if title_or_options.class == Hash
+      options = title_or_options if options.nil?
+      title = options[:title]
+    else
+      title = title_or_options
+    end
+    title ||= capture(&block) if block_given?
+
+    href = options[:href] || '#'
+
+    css_classes = []
+    css_classes << (@is_tabbar ? 'tab-link' : 'link')
+    css_classes += [options[:class]] if options[:class]
+
+    if @is_tabbar
+      if options.has_key? :icon
+        content_tag :a, :href => href, :class => css_classes do
+          if options[:badge]
+            if options[:badge].kind_of? Hash
+              badge_data = options[:badge]
+              badge_classes = [:badge]
+              badge_classes << badge_data[:class]
+              badge = content_tag :span, badge_data[:text], :class => badge_classes
+            else
+              badge = content_tag :span, options[:badge], :class => [:badge, 'badge-red']
+            end
+            link = link_icon_i(options[:icon], badge)
+          else
+            link = link_icon_i(options[:icon])              
+          end
+          output << link
+          output << content_tag(:span, title, :class => 'tabbar-label') if @has_labels && !title.blank?
+          output.join("\n").html_safe
+        end
+      else
+        content_tag :a, title, :href => href, :class => css_classes
+      end
+    else
+      content_tag :a, title, :href => href, :class => css_classes
+    end
+  end
+
+  private
+
+  def link_icon_i(icon, badge = '')
+    content_tag :i, badge, :class => ['icon', icon]
+  end
+end

data/app/helpers/views_helper.rb

@@ -0,0 +1,36 @@
+module ViewsHelper
+  @current_view = nil
+  @views_defined = false
+  
+  def f7_views(*args, &block)
+    return if @views_defined
+    @views_defined = true
+    @current_view = nil
+    
+    content_tag :div, :class => ['views'] do
+      yield if block_given?
+    end
+  end
+  
+  
+  
+  def f7_view(name, html_options = {}, &block)
+    name = name.to_s.gsub(/view-/,'')
+    @current_view = name
+    
+    view_name = "view-#{name}"
+    
+    css_classes = ['view']
+    css_classes << view_name
+    html_options[:class] = css_classes + ([html_options[:class]] || [])
+    
+    content_tag :div, html_options do
+      if block_given?
+        yield
+      else
+        render :partial => "#{controller.controller_path}/#{name}/#{name}", :layout => false
+      end
+    end
+  end
+  
+end

data/app/presenters/framework7/base_presenter.rb

@@ -0,0 +1,24 @@
+class Framework7::BasePresenter
+  def initialize(object, template)
+    @object = object
+    @template = template
+  end
+
+  def self.presents(name)
+    define_method(name) do
+      @object
+    end
+  end
+
+  def h
+    @template
+  end
+
+  def method_missing(*args, &block)
+    if @template.respond_to? args.first
+      @template.send(*args, &block)
+    else
+      @object.send(*args, &block)
+    end
+  end
+end

data/framework7-rails.gemspec

@@ -2,6 +2,7 @@
 lib = File.expand_path('../lib', __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require 'framework7/rails/version'
+require 'framework7'
 
 Gem::Specification.new do |spec|
   spec.name          = "framework7-rails"
@@ -14,11 +15,14 @@ Gem::Specification.new do |spec|
   spec.license       = "MIT"
 
   spec.files         = `git ls-files -z`.split("\x0")
+  # spec.files         = `git ls-files --stage`.gsub(/^([0-9]{6}\s[0-9a-f]*\s[0-9]\s)/, '').split("\n")   # For development
   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_dependency "railties", "~> 4.0"
+  spec.add_dependency "railties", "> 3.1"
+  spec.add_dependency "coffee-script", "> 2.1"
+  spec.add_dependency "coffee-rails", "> 3.2.1"
 
   spec.add_development_dependency "bundler", "~> 1.5"
   spec.add_development_dependency "rake", "~> 0"

data/lib/framework7.rb

@@ -0,0 +1,6 @@
+module Framework7
+end
+
+if defined?(Rails)
+  ActionController::Base.send(:helper, Framework7Helper)
+end

data/lib/framework7/rails/version.rb

@@ -1,5 +1,5 @@
 module Framework7
   module Rails
-    VERSION = "0.7.4.0"
+    VERSION = "0.9.6.0"
   end
 end

data/lib/generators/f7/install/examples/examples_generator.rb

@@ -0,0 +1,17 @@
+require 'rails/generators'
+
+module F7
+  module Generators
+    class LayoutGenerator < ::Rails::Generators::Base
+      source_root File.expand_path('../templates', __FILE__)
+      desc 'This generator creates an example application.'
+
+      empty_directory "app/assets/javascripts/views"
+      create_file "app/assets/javascripts/views/.gitkeep"
+      
+      directory "app"
+      
+      route "get 'examples(/:action)' => 'examples#index', :as => 'examples'"
+    end
+  end
+end

data/lib/generators/f7/install/examples/templates/app/controllers/examples_controller.rb

@@ -0,0 +1,16 @@
+class ExamplesController < ApplicationController
+  def index
+  end
+
+  def about
+  	render :layout => false
+  end
+
+  def form
+  	render :layout => false
+  end
+
+  def services
+  	render :layout => false
+  end
+end

data/lib/generators/f7/install/examples/templates/app/views/examples/about.html.erb

@@ -0,0 +1,27 @@
+<!-- We don't need full layout here, because this page will be parsed with Ajax-->
+<!-- Top Navbar-->
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left"><a href="#" class="back link"><i class="icon icon-back-blue"></i><span>Back</span></a></div>
+    <div class="center sliding">About</div>
+    <div class="right">
+      <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
+    </div>
+  </div>
+</div>
+<div class="pages">
+  <!-- Page, data-page contains page name-->
+  <div data-page="about" class="page">
+    <!-- Scrollable page content-->
+    <div class="page-content">
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Here is About page!</p>
+          <p>Go <a href="#" class="back">back</a> or click  <a href="#" class="create-page">here </a>to create dynamic page.</p>
+          <p>Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.</p>
+          <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/f7/install/examples/templates/app/views/examples/form.html.erb

@@ -0,0 +1,227 @@
+<!-- We don't need full layout here, because this page will be parsed with Ajax-->
+<!-- Top Navbar-->
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left"><a href="#" class="back link"><i class="icon icon-back-blue"></i><span>Back</span></a></div>
+    <div class="center sliding">Form</div>
+    <div class="right">
+      <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
+    </div>
+  </div>
+</div>
+<div class="pages">
+  <!-- Page, data-page contains page name-->
+  <div data-page="form" class="page">
+    <!-- Scrollable page content-->
+    <div class="page-content">
+      <div class="content-block-title">Form Example</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-name"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Name</div>
+                <div class="item-input">
+                  <input type="text" placeholder="Your name"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-email"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">E-mail</div>
+                <div class="item-input">
+                  <input type="email" placeholder="E-mail"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-url"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">URL</div>
+                <div class="item-input">
+                  <input type="url" placeholder="URL"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-password"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Password</div>
+                <div class="item-input">
+                  <input type="password" placeholder="Password"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-tel"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Phone</div>
+                <div class="item-input">
+                  <input type="tel" placeholder="Phone"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-gender"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Gender</div>
+                <div class="item-input">
+                  <select>
+                    <option>Male</option>
+                    <option>Female</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-calendar"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Birth date</div>
+                <div class="item-input">
+                  <input type="date" placeholder="Birth day" value="2014-04-30"/>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-toggle"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Switch</div>
+                <div class="item-input">
+                  <label class="label-switch">
+                    <input type="checkbox"/>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-settings"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Slider</div>
+                <div class="item-input">
+                  <div class="range-slider">
+                    <input type="range" min="0" max="100" value="50" step="0.1"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li class="align-top">
+            <div class="item-content">
+              <div class="item-media"><i class="icon icon-form-comment"></i></div>
+              <div class="item-inner">
+                <div class="item-title label">Textarea</div>
+                <div class="item-input">
+                  <textarea></textarea>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button button-big button-cancel">Cancel</a></div>
+          <div class="col-50">
+            <input type="submit" value="Submit" class="button button-big button-submit"/>
+          </div>
+        </div>
+      </div>
+      <div class="content-block-title">Checkbox group</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Books" checked="checked"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Books</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Movies"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Movies</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Food"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Food</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-checkbox item-content">
+              <input type="checkbox" name="ks-checkbox" value="Drinks"/>
+              <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
+              <div class="item-inner">
+                <div class="item-title">Drinks</div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+      <div class="content-block-title">Radio buttons group</div>
+      <div class="list-block">
+        <ul>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Books" checked="checked"/>
+              <div class="item-inner">
+                <div class="item-title">Books</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Movies"/>
+              <div class="item-inner">
+                <div class="item-title">Movies</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Food"/>
+              <div class="item-inner">
+                <div class="item-title">Food</div>
+              </div>
+            </label>
+          </li>
+          <li>
+            <label class="label-radio item-content">
+              <input type="radio" name="ks-radio" value="Drinks"/>
+              <div class="item-inner">
+                <div class="item-title">Drinks</div>
+              </div>
+            </label>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>