forma 0.0.0 → 0.1.0

data/lib/forma/version.rb

@@ -1,4 +1,4 @@
 # -*- encoding : utf-8 -*-
 module Forma
-  VERSION = "0.0.0"
+  VERSION = "0.1.0"
 end

data/lib/forma.rb

@@ -1,4 +1,12 @@
 # -*- encoding : utf-8 -*-
 require 'active_support/core_ext'
 require 'forma/version'
+require 'forma/utils'
 require 'forma/html'
+require 'forma/config'
+require 'forma/helpers'
+require 'forma/action'
+require 'forma/form'
+require 'forma/table'
+require 'forma/field'
+require 'forma/railtie' if defined?(Rails)

data/spec/config_spec.rb

@@ -0,0 +1,20 @@
+# -*- encoding : utf-8 -*-
+require 'spec_helper'
+
+describe 'Number configuration' do
+  specify { Forma.config.num.delimiter.should == ',' }
+  specify { Forma.config.num.separator.should == '.' }
+end
+
+describe 'Date configuration' do
+  specify { Forma.config.date.formatter.should == '%d-%b-%Y' }
+end
+
+describe 'Texts configuration' do
+  specify { Forma.config.texts.empty.should == '(empty)' }
+end
+
+describe 'Map configuration' do
+  specify { Forma.config.map.default_latitude == 41.711447 }
+  specify { Forma.config.map.default_longitude == 44.754514 }
+end

data/spec/field_spec.rb

@@ -0,0 +1,3 @@
+# -*- encoding : utf-8 -*-
+require 'spec_helper'
+include Forma

data/spec/form_spec.rb

@@ -0,0 +1,33 @@
+# -*- encoding : utf-8 -*-
+require 'spec_helper'
+
+include Forma
+
+# describe 'simple form' do
+#   before(:all) do
+#     @form = Form.new(
+#       id: 'user-login',
+#       title: 'User Login',
+#       collapsible: true,
+#       collapsed: false,
+#       icon: '/assets/user.png',
+#       edit: true,
+#       url: '/login',
+#       method: 'post',
+#       selected_tab: 0,
+#       tabs: [
+#         Tab.new(title: 'Login', icon: '/assets/user.png', col1: Col.new([
+#           TextField.new(name: 'username', label: 'Username', required: true),
+#           TextField.new(name: 'password', label: 'Password', required: true)
+#         ])),
+#         Tab.new(title: 'Reset password', icon: '/assets/password.png'),
+#       ]
+#     )
+#     @element = @form.to_html
+#     # puts Nokogiri::XML(@element.to_s, &:noblanks).to_xhtml(indent: 2)
+#   end
+#   specify { @element.tag.should == 'div' }
+#   specify { @element.id.should == 'user-login' }
+#   specify { @element.klass.should == [ 'ff-form' ] }
+#   # TODO: check other elements
+# end

data/spec/helpers_spec.rb

@@ -0,0 +1,18 @@
+# -*- encoding : utf-8 -*-
+require 'spec_helper'
+include Forma::Helpers
+
+# describe "forma helper" do
+#   before(:all) do
+#     @user_password = { username: 'dimitri', password: 'secret', age: 33, email: 'dimakura@gmail.com' }
+#     @forma = forma_for(@user_password) do |f|
+#       f.text_field :username
+#       f.password_field :password
+#       f.number_field :age
+#       f.email_field :email
+#     end
+#     # puts Nokogiri::XML(@forma, &:noblanks).to_xhtml(indent: 2)
+#   end
+#   specify { @forma.should_not be_nil }
+#   specify { @forma.should be_a String }
+# end

data/spec/html_spec.rb

@@ -0,0 +1,26 @@
+# -*- encoding : utf-8 -*-
+require 'spec_helper'
+
+include Forma::Html
+
+describe 'attribute helper method' do
+  specify { attr('id', 'forma4').to_s.should == 'id="forma4"' }
+  specify { attr('btn').to_s.should == 'class="btn"' }
+  specify { attr(['btn', 'btn-primary']).to_s.should == 'class="btn btn-primary"' }
+  specify { attr({'font-size' => '10px', 'font-weight' => 'bold'}).to_s.should == 'style="font-size:10px;font-weight:bold"' }
+end
+
+describe 'element creation' do
+  specify { el('div').to_s.should == '<div></div>' }
+  specify { el('div', attrs: { id: 'forma4' }).to_s.should == '<div id="forma4"></div>' }
+  specify { el('div', attrs: { id: 'forma4', class: 'main' }).to_s.should == '<div id="forma4" class="main"></div>' }
+  specify { el('div', attrs: { id: 'forma4', class: ['main', 'very-important'], style: {'font-size' => '10px'} }).to_s.should == '<div id="forma4" class="main very-important" style="font-size:10px"></div>' }
+  specify { el('div', children: [el('div')]).to_s.should == '<div><div></div></div>' }
+end
+
+describe 'element id' do
+  specify { el('div').id.should be_nil }
+  specify { el('div', attrs: { id: 'forma4' }).id.should == 'forma4' }
+  specify { el('div', attrs: { class: 'myform1' }).klass.should == [ 'myform1' ] }
+  specify { el('div', attrs: { class: ['myform1', 'myform2'] }).klass.should == [ 'myform1', 'myform2' ] }
+end

data/spec/spec_helper.rb

@@ -5,9 +5,3 @@ require 'forma'
 RSpec.configure do |config|
   config.include(RSpec::Matchers)
 end
-
-def compare_object(obj, properties)
-  properties.each do |k, v|
-    specify { obj.send(k).should == v }
-  end
-end

data/test/field_test.rb

@@ -0,0 +1,63 @@
+# -*- encoding : utf-8 -*-
+require 'test_helper'
+
+class FieldTest < Test::Unit::TestCase
+  include Forma
+
+  def test_general_field
+    fld = Field.new(model_name: 'user', name: 'first_name', value: 'fake value', label: 'First Name')
+    assert_equal 'user', fld.model_name
+    assert_equal 'first_name', fld.name
+    assert_equal 'models.user.first_name', fld.localization_key
+    assert_equal 'First Name', fld.label
+    assert_equal 'First Name', fld.localized_label
+    assert_equal nil, fld.hint
+    assert_equal '', fld.localized_hint
+    assert_equal 'fake value', fld.value
+    assert_equal 'user_first_name', fld.id
+  end
+
+  def test_text_field
+    model = { first_name: 'Dimitri', last_name: 'Kurashvili' }
+    fld_first_name = TextField.new(model_name: 'user', name: 'first_name', model: model, hint: "user's first name")
+    fld_last_name = TextField.new(model_name: 'user', name: 'last_name', model: model)
+    assert_equal 'first_name', fld_first_name.name
+    assert_equal "user's first name", fld_first_name.hint
+    assert_equal "user's first name", fld_first_name.localized_hint
+    assert_equal 'Dimitri', fld_first_name.value
+    assert_equal 'last_name', fld_last_name.name
+    assert_equal 'user_first_name', fld_first_name.id
+    assert_equal 'user[first_name]', fld_first_name.parameter_name
+    assert_equal 'user_last_name', fld_last_name.id
+    assert_equal 'user[last_name]', fld_last_name.parameter_name
+    fld_first_name_ka = TextField.new(name: 'ka', parent: fld_first_name)
+    assert_equal 'user_first_name_ka', fld_first_name_ka.id
+    assert_equal 'user[first_name_attributes[ka]]', fld_first_name_ka.parameter_name
+  end
+
+  def test_text_field_value_override
+    model = { first_name: 'Dimitri', last_name: 'Kurashvili' }
+    fld_first_name = TextField.new(model_name: 'user', name: 'first_name', model: model, value: 'other_name')
+    assert_equal 'other_name', fld_first_name.value
+    fld_first_name.value = nil
+    assert_equal 'Dimitri', fld_first_name.value
+  end
+
+  def test_generated_text_field
+    model = { first_name: 'Dimitri', last_name: 'Kurashvili' }
+    fld_first_name = TextField.new(model_name: 'user', name: 'first_name', model: model)
+    el = fld_first_name.edit_element('Dimitri')
+    assert_equal 'input', el.tag
+    assert_equal 'user_first_name', el.attrs_by_name('id').first.value
+    assert_equal 'user[first_name]', el.attrs_by_name('name').first.value
+    assert_equal 'text', el.attrs_by_name('type').first.value
+    assert_equal 'Dimitri', el.attrs_by_name('value').first.value
+  end
+
+  def test_compex_field
+    model = { first_name: 'Dimitri', last_name: 'Kurashvili' }
+    fld = ComplexField.new(fields: [ TextField.new(name: 'first_name'), TextField.new(name: 'last_name') ])
+    fld.model = model
+    assert_equal ['Dimitri', 'Kurashvili'], fld.value
+  end
+end

data/test/form_test.rb

@@ -0,0 +1,16 @@
+# -*- encoding : utf-8 -*-
+require 'test_helper'
+
+class FormTest < Test::Unit::TestCase
+  include Forma
+
+  def test_general_field
+    model = { first_name: 'Dimitri', last_name: 'Kurashvili' }
+    fld_first_name = TextField.new(model_name: 'user', name: 'first_name', model: model)
+    fld_last_name = TextField.new(model_name: 'user', name: 'last_name', model: model)
+    frm = Form.new
+    frm.add_field(fld_first_name)
+    frm.add_field(fld_last_name)
+    # puts frm.to_html
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,3 @@
+# -*- encoding : utf-8 -*-
+require 'test/unit'
+require 'forma'

data/vendor/assets/javascripts/forma.js

@@ -0,0 +1,147 @@
+(function() {
+
+  var initilizeCollapsibleElement = function() {
+    $('.ff-collapsible').click(function(evt) {
+      var activeTitle = $(this);
+      var formBody = $(activeTitle.parent().siblings('.ff-collapsible-body')[0]);
+      var collapseElement = $(activeTitle.children('.ff-collapse')[0]);
+      var isCollapsed = collapseElement.hasClass('ff-collapsed');
+      if (isCollapsed) {
+        formBody.show();
+        collapseElement.removeClass('ff-collapsed');
+      } else {
+        formBody.hide();
+        collapseElement.addClass('ff-collapsed');
+      }
+    });
+  };
+
+  var initializeTabs = function() {
+    $('.ff-tabs-header li').click(function(evnt) {
+      var newTab = $(this);
+      var oldTab = newTab.siblings('.ff-selected');
+      if (oldTab) {
+        var newIndex = newTab.parent().children().index(newTab);
+        var oldIndex = oldTab.parent().children().index(oldTab);
+        var newBody = $($(newTab.parent().parent().children()[1]).children()[newIndex]);
+        var oldBody = $($(newTab.parent().parent().children()[1]).children()[oldIndex]);
+        oldTab.removeClass("ff-selected");
+        oldBody.hide();
+        newTab.addClass("ff-selected");
+        newBody.show();
+        // we need to initialize a map
+        // if it was not visible and became
+        // visible when the tab was open
+        initGoogleMaps();
+      }
+    });
+  };
+
+  var initializeFormSubmit = function() {
+    $('form.ff-wait-on-submit').submit(function(evnt) {
+      var btn = $($(this).find('button[type=submit]')[0]);
+      btn.html(btn.html() + '...');
+      btn.attr('disabled', true);
+      return true;
+    });
+  };
+
+  var initializeTooltips = function() {
+    $('.ff-field-hint').tooltip({ placement: 'right', trigger: 'click' });
+    $('.ff-action').tooltip({ placement: 'top' });
+    // TODO: any other tooltips?
+  };
+
+  var initializeSelectFields = function() {
+    $('.ff-select-link').click(function() {
+      var link = $(this);
+      var url = link.attr('data-url');
+      var height = link.attr('data-height');
+      var width = link.attr('data-width');
+      var screenLeft = window.screenLeft;
+      var screenTop = window.screenTop;
+      var browserHeight = window.outerHeight;
+      var browserWidth = window.outerWidth;
+      var left = parseInt((screenLeft + browserWidth - width) / 2);
+      var top = parseInt((screenTop + browserHeight - height) / 2);
+      var properties = ['height=', height, ',width=', width, ',left=', left, ',top=', top];
+      window.open(url, link.attr('data-id'), properties.join(''));
+    });
+  };
+
+  // google map initialization
+
+  var mapsData = {};
+
+  var registerGoogleMap = function(id, zoom, center, coordinates, draggable) {
+    mapsData[id] = { id: id, zoom: zoom, center: center, coordinates: coordinates, draggable: draggable }
+  };
+
+  var getGoogleMap = function(id) {
+    return mapsData[id];
+  };
+
+  var googleMapInitialization = function(data) {
+    var id = data['id'];
+    if ($('#' + id).is(':visible')) {
+      var mapOptions = {
+        center: new google.maps.LatLng(data.center.latitude, data.center.longitude),
+        zoom: data.zoom,
+        mapTypeId: google.maps.MapTypeId.HYBRID //ROADMAP
+      };
+      var map = new google.maps.Map(document.getElementById(id), mapOptions);
+      var markers = [ ];
+      for (var i = 0, l = data.coordinates.length; i < l; i++) {
+        var markerData = data.coordinates[i];
+        var markerPosition = new google.maps.LatLng(markerData.latitude, markerData.longitude);
+        var marker = new google.maps.Marker({
+          position: markerPosition,
+          animation: google.maps.Animation.DROP,
+          map: map,
+          draggable: data.draggable,
+        });
+        markers.push(marker);
+        google.maps.event.addListener(marker, 'dragend', function() {
+          var pos = marker.getPosition();
+          $('#' + id + '_latitude').val(pos.lat() + '');
+          $('#' + id + '_longitude').val(pos.lng());
+        });
+      }
+      data.map = map;
+      data.markers = markers;
+    }
+  };
+
+  var initGoogleMaps = function() {
+    for (var id in mapsData) {
+      var data = mapsData[id];
+      if (data && !data.map) {
+        googleMapInitialization(data);
+      }
+    }
+  };
+
+  // prepare function
+
+  var ready = function() {
+    initilizeCollapsibleElement();
+    initializeTabs();
+    initializeFormSubmit();
+    initializeTooltips();
+    initGoogleMaps();
+    initializeSelectFields();
+  };
+
+  // turbolink initilization!
+  // http://railscasts.com/episodes/390-turbolinks?view=asciicast
+  $(document).ready(ready);
+  $(document).on('page:load', ready);
+
+  // external API
+
+  window.forma = {
+    registerGoogleMap: registerGoogleMap,
+    getGoogleMap: getGoogleMap,
+  };
+
+})();

data/vendor/assets/stylesheets/forma-min.css

@@ -1 +1,41 @@
-.ff{font-size:14px;}
+.user-select-none{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}
+.ff-form,.ff-table{margin-bottom:16px;}.ff-form .ff-action,.ff-table .ff-action{margin-left:4px;}.ff-form .ff-action:first-child,.ff-table .ff-action:first-child{margin-left:0;}
+.ff-form .ff-action img,.ff-table .ff-action img{padding-right:4px;height:16px;width:16px;}
+.ff-form .ff-title,.ff-table .ff-title{position:relative;}.ff-form .ff-title .ff-active-title,.ff-table .ff-title .ff-active-title{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;font-weight:bold;font-size:14px;}.ff-form .ff-title .ff-active-title .ff-collapse,.ff-table .ff-title .ff-active-title .ff-collapse{display:inline-block;height:14px;width:14px;margin-right:4px;margin-top:2px;}
+.ff-form .ff-title .ff-active-title img,.ff-table .ff-title .ff-active-title img{height:16px;width:16px;overflow:hidden;margin-right:4px;}
+.ff-form .ff-title .ff-title-actions,.ff-table .ff-title .ff-title-actions{position:absolute;right:0;top:4px;padding:0 8px;}
+.ff-form .ff-collapse,.ff-table .ff-collapse{background:url(/assets/glyphicons-halflings.png) -313px -119px;}
+.ff-form .ff-collapsed.ff-collapse,.ff-table .ff-collapsed.ff-collapse{background:url(/assets/glyphicons-halflings.png) -456px -72px;}
+.ff-form .ff-field-hint,.ff-table .ff-field-hint{background:url(/assets/glyphicons-halflings.png) -456px -72px;}
+.ff-form .ff-tabs,.ff-table .ff-tabs{padding:4px 0;}.ff-form .ff-tabs ul.ff-tabs-header,.ff-table .ff-tabs ul.ff-tabs-header{list-style-type:none;margin:0;position:relative;border-bottom:1px solid #b1b1b1;}.ff-form .ff-tabs ul.ff-tabs-header li,.ff-table .ff-tabs ul.ff-tabs-header li{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer;display:inline-block;padding:4px 8px;margin-left:8px;margin-bottom:-1px;border:1px solid transparent;}.ff-form .ff-tabs ul.ff-tabs-header li img,.ff-table .ff-tabs ul.ff-tabs-header li img{margin:0 4px;height:16px;width:16px;}
+.ff-form .ff-tabs ul.ff-tabs-header li.ff-selected,.ff-table .ff-tabs ul.ff-tabs-header li.ff-selected{background:#ffffcc;border:1px solid #b1b1b1;border-bottom:1px solid #ffffcc;}
+.ff-form .ff-tabs .ff-tab-actions,.ff-table .ff-tabs .ff-tab-actions{padding:4px 8px;background:#ffffcc;border:1px solid #b1b1b1;margin-top:-1px;}
+.ff-form .ff-tabs .ff-cols,.ff-table .ff-tabs .ff-cols{margin:4px 0 0 0;position:relative;font-size:13px;}.ff-form .ff-tabs .ff-cols .ff-col-100,.ff-table .ff-tabs .ff-cols .ff-col-100{width:100%;}
+.ff-form .ff-tabs .ff-cols .ff-col-50,.ff-table .ff-tabs .ff-cols .ff-col-50{width:50%;float:left;}
+.ff-form .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:first-child .ff-col-inner{padding-right:4px;}
+.ff-form .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col:last-child .ff-col-inner{padding-left:4px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner,.ff-table .ff-tabs .ff-cols .ff-col-inner{padding:0;position:relative;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field{position:relative;border-bottom:1px solid #b1b1b1;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field:first-child{border-top:1px solid #b1b1b1;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label{display:table-cell;vertical-align:top;position:relative;width:150px;padding:4px 4px 4px 8px;background-color:#c8ffb0;border-right:3px solid transparent;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label.ff-required{border-right:3px solid #cf0000;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-label .ff-field-hint{display:block;height:16px;width:16px;position:absolute;right:0;top:8px;background-position:-96px -96px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value{display:table-cell;padding:4px;vertical-align:top;}.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-value .ff-field-actions{display:inline-block;border-left:1px solid #b1b1b1;padding-left:8px;margin-left:8px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-before{padding-right:8px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-field-after{padding-left:8px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-complex-part{display:inline-block;padding-right:8px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-complex-field .ff-field{display:inline-block;border:none;padding-right:8px;}
+.ff-form .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link,.ff-table .ff-tabs .ff-cols .ff-col-inner .ff-field .ff-select-field .ff-select-link{margin-left:8px;}
+.ff-form .ff-tabs .ff-cols:after,.ff-table .ff-tabs .ff-cols:after{content:".";display:block;clear:both;width:0;height:0;overflow:hidden;}
+.ff-form .ff-tabs input,.ff-table .ff-tabs input{padding:4px;margin:0;font-size:13px;}
+.ff-form .ff-tabs select,.ff-table .ff-tabs select{padding:4px;margin:0;font-size:13px;width:auto;}
+.ff-form .ff-tabs .ff-error input,.ff-table .ff-tabs .ff-error input{border:1px solid red;color:red;background:#fff8f8;}
+.ff-form .ff-form-errors,.ff-table .ff-form-errors{margin:8px;padding:8px;border:1px solid red;background:#fee;color:red;}
+.ff-form ul.ff-form-errors li,.ff-table ul.ff-form-errors li{margin-left:16px;}
+.ff-form .ff-field-errors,.ff-table .ff-field-errors{color:red;padding:4px 0;}
+.ff-form .ff-bottom-actions,.ff-table .ff-bottom-actions{padding:8px;border-top:1px solid #b1b1b1;background:#e0e0e0;}
+.ff-form table.ff-common-table,.ff-table table.ff-common-table{margin-top:8px;width:100%;border-collapse:collapse;}.ff-form table.ff-common-table thead,.ff-table table.ff-common-table thead{text-align:left;border-top:1px solid #3316ff;border-bottom:1px solid #3316ff;background:#c8ffb0;}.ff-form table.ff-common-table thead th,.ff-table table.ff-common-table thead th{font-weight:normal;padding:4px 8px;}
+.ff-form table.ff-common-table thead .ff-field-hint,.ff-table table.ff-common-table thead .ff-field-hint{display:inline-block;height:16px;width:16px;background-position:-96px -96px;}
+.ff-form table.ff-common-table tbody td,.ff-table table.ff-common-table tbody td{padding:4px 8px;border-bottom:1px solid #3316ff;}
+.ff-empty{color:#a0a0a0;}
+.ff-table-empty{padding:32px;text-align:center;background-color:#f6f6f6;border:1px solid #a0a0a0;border-top:none;}
+.ff-map{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;right:0;bottom:0;}.ff-map img{max-width:none;}
+.ff-form .ff-title,.ff-table .ff-title{background-color:#cfc8ff;border-bottom:2px solid #3316ff;border-top:2px solid #3316ff;}
+.tooltip-inner{white-space:pre;max-width:none;}