webface_rails 0.1.6

data/app/views/webface_component_templates/_button.html.haml

@@ -0,0 +1,2 @@
+= component_block :button, :button, { type: 'button', class: "button", data: { component_template: "ButtonComponent", component_attribute_properties: "lockable:data-lockable" }} do
+  = property :caption, "span"

data/app/views/webface_component_templates/_dialog_window.html.haml

@@ -0,0 +1,6 @@
+.modalWindow{ data: { component_template: "DialogWindowComponent", component_attribute_properties: "close_on_escape,close_on_background_click,show_close_button" }}
+  .modal{ aria: { hidden: "true" } }
+    .modalDialog
+      = image_tag "close_modal_window.svg", class: "close", data: { component_part: "close" }
+      .content{ data: { component_part: "content"} }
+      .buttonContainer{ data: { component_part: "button_container"}}

data/app/views/webface_component_templates/_modal_window.html.haml

@@ -0,0 +1,5 @@
+.modalWindow{ data: { component_template: "ModalWindowComponent", component_attribute_properties: "close_on_escape,close_on_background_click,show_close_button" }}
+
+  .modal{ aria: { hidden: "true" } }
+    .modalDialog{ data: { component_part: "content"} }
+      = image_tag "close_modal_window.svg", class: "close", data: { component_part: "close" }

data/app/views/webface_component_templates/_simple_notification.html.haml

@@ -0,0 +1,4 @@
+.simpleNotification{ data: { component_template: "SimpleNotificationComponent", component_attribute_properties: "autohide_delay,permanent,container_selector", component_roles: "simple_notification" }}
+  .container
+    .message{ data: { component_property: "message", component_part: "message" }}
+    = image_tag "close_simple_notification.svg", class: "close", data: { component_part: "close" }

data/app/views/webface_components/_button.html.haml

@@ -0,0 +1,11 @@
+- attrs[:data] ||= {}
+- attrs[:data][:confirmation] = attrs[:confirmation]
+- attrs[:data][:disabled]     = options[:disabled]
+- attrs[:data][:prevent_native_click_event] = "false"
+
+= component_block (attrs[:confirmation] ? "confirmable_button" : "button"), :button, attrs.merge(type: (options[:type] || "submit"), name: options[:name], class: "button #{attrs[:class]}", property_attr: "lockable,disabled,confirmation,prevent_native_click_event") do
+  - if block
+    = capture(&block)
+  - else
+    = attrs[:caption] || attrs[:value]
+

data/app/views/webface_components/_checkbox.html.haml

@@ -0,0 +1,21 @@
+- val = get_value_for_field_name(options)
+
+%div.checkboxContainer
+  = hidden_field_tag options[:name], 0
+  = component_block :checkbox, "input",
+    name: options[:name],
+    id: options[:name],
+    type: "checkbox",
+    class: "#{attrs.delete(:class)} checkbox",
+    roles: attrs.delete(:roles),
+    tabindex: options[:tabindex] || 1,
+    property_attr: "name,disabled,checked",
+    data: { disabled: attrs[:disabled], checked: attrs[:checked], component_attribute_properties: "name:name,disabled:disabled,checked:checked" },
+    checked: (val.nil? ? attrs[:checked] : val),
+    disabled: attrs[:disabled]
+
+  %label{ for: options[:name] }
+    = options[:label]
+  - unless options[:popup_hint].blank?
+    = component :hint_trigger, i18n: options[:popup_hint]
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_editable_select.html.haml

@@ -0,0 +1,8 @@
+= component_block :editable_select, "div",
+  class: (attrs.delete(:class) || "") + " field editableSelectComponent#{" errors" if options[:model] && options[:name] && !get_error_for_field_name(options).blank?}",
+  tabindex: options[:tabindex] || 1,
+  property_attr: 'disabled,name,fetch_url,allow_custom_value,query_param_name',
+  roles: attrs.delete(:roles),
+  data: { disabled: (attrs.delete(:disabled) ? "disabled" : nil), fetch_url: options[:fetch_url], allow_custom_value: options[:allow_custom_value], query_param_name: options[:query_param_name] } do
+
+  = render partial: "components/shared/editable_select_base", locals: { options: options, attrs: attrs }

data/app/views/webface_components/_field_hints.html.haml

@@ -0,0 +1,7 @@
+.hintsContainer
+  .errorHint
+    = property :validation_errors_summary, "div", class: "validationErrors", style: ("display: block;" unless get_error_for_field_name(options).blank?) do
+      - if options[:model] && options[:attr_name] && errors = get_error_for_field_name(options)
+        = errors.join("; ")
+  .hint
+    = options[:hint]

data/app/views/webface_components/_hidden_form_field.html.haml

@@ -0,0 +1 @@
+= component_block (attrs[:as_property] ? nil : :form_field), "input", { type: "hidden", name: options[:name], value: get_value_for_field_name(options) }.merge(attrs)

data/app/views/webface_components/_hint.html.haml

@@ -0,0 +1,9 @@
+= component_block :hint, "div",
+{ class: 'helpHint', property_attr: "anchor,show_events,force_show_events,autoshow_delay,autohide_delay,display_limit,keep_open_when_hover,hint_id", roles: attrs.delete(:roles),
+data: data_attrs_and_values!(:attrs, binding, [:anchor,:show_events,:force_show_events,:autoshow_delay,:autohide_delay,:display_limit,:keep_open_when_hover,:hint_id]) } do
+
+  .arrowUp
+  .content
+    = image_tag "close_hint.svg", class: "close", data: { component_part: "close" }
+    = capture(&block)
+  .arrowDown

data/app/views/webface_components/_hint_trigger.html.haml

@@ -0,0 +1,15 @@
+= image_tag "hint_trigger.svg", class: "hintTrigger", id: (id = "hint_#{attrs.delete(:id)}_#{attrs[:i18n].to_s.sha512_hash(Rails.application.class.parent_name.to_s, 15)}")
+
+- attrs.merge!({anchor: id, show_events: "mouseover", force_show_events: "click,touchend", autohide_delay: 10, roles: "hint", display_limit: 1, hint_id: id})
+
+= component :hint, attrs do
+  - if attrs.has_key?(:ma_term)
+    = MultiAsset.t("hints.#{attrs[:ma_term]}")
+  - elsif attrs.has_key?(:title)
+    = attrs[:title]
+  - else
+    = I18n.t("hints.#{attrs[:i18n]}")
+
+- attrs.delete(:ma_term)
+- attrs.delete(:title)
+- attrs.delete(:i18n)

data/app/views/webface_components/_numeric_form_field.html.haml

@@ -0,0 +1,13 @@
+= component_block :numeric_form_field, "div",
+  { class: (attrs.delete(:class) || "") + " field numeric#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}", property_attr: "max_length", data: { max_length: attrs.delete(:max_length) }}.merge(attrs) do
+  
+  - if options[:label]
+    %label
+      = options[:label]
+      - unless options[:popup_hint].blank?
+        = component :hint_trigger, i18n: options[:popup_hint]
+
+  .fieldAndHint
+    %input{ type: "text", tabindex: options[:tabindex], name: options[:name], value: get_value_for_field_name(options), maxlength: attrs.delete(:maxlength), data: { component_part: 'value_holder', component_attribute_properties: "name:name,disabled:disabled"}}
+    = options[:suffix]
+    = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_password_form_field.html.haml

@@ -0,0 +1,12 @@
+= component_block :form_field, "div",
+  { class: (attrs.delete(:class) || "") + " field text#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}", property_attr: "disabled,max_length", data: { max_length: attrs.delete(:max_length) }}.merge(attrs) do
+  
+  - if options[:label]
+    %label
+      = options[:label]
+      - unless options[:popup_hint].blank?
+        = component :hint_trigger, i18n: options[:popup_hint]
+
+  %input{ type: (attrs.delete(:type) || "password"), tabindex: options[:tabindex], name: options[:name], value: get_value_for_field_name(options), autocomplete: attrs.delete(:autocomplete), data: { component_part: 'value_holder', component_attribute_properties: "name:name" }}
+  = options[:suffix]
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_post_button_link.html.haml

@@ -0,0 +1,4 @@
+%form{ action: path, method: "POST" }
+  %input{ name: "_method", type: "hidden", value: verb }
+  %input{ name: "authenticity_token", type: "hidden", value: form_authenticity_token }
+  = component :button, { value: caption }.merge(options)

data/app/views/webface_components/_radio.html.haml

@@ -0,0 +1,18 @@
+= component_block :radio_button, "div",
+  class: (attrs.delete(:class) || "") + " radio #{"errors" if options[:model] && !get_error_for_field_name(options).blank? }",
+  property_attr: "disabled,value",
+  roles: attrs.delete(:roles),
+  data: { max_length: attrs.delete(:max_length), disabled: options[:disabled], value: get_value_for_field_name(options) }.merge(attrs) do
+
+  .container
+    - prepare_select_collection(options[:collection] || get_value_for_field_name(options)).each do |k,v|
+      .item
+        - if options[:selected] == k
+          %input{ type: "radio", name: options[:name], id: "radio_#{options[:radio_options_id]}_#{k}", disabled: options[:disabled], value: k, checked: "checked", data: { component_part: 'option', component_attribute_properties: "name:name" }}
+        - else
+          %input{ type: "radio", name: options[:name], id: "radio_#{options[:radio_options_id]}_#{k}", disabled: options[:disabled], value: k, data: { component_part: 'option', component_attribute_properties: "name:name" }}
+        %label{ for: "radio_#{options[:radio_options_id]}_#{k}" }
+          = v
+        - unless options[:popup_hint].blank?
+          = component :hint_trigger, i18n: options[:popup_hint].delete_at(0)
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_select.html.haml

@@ -0,0 +1,34 @@
+= component_block (attrs[:roles] == "timezone_selector" ? "timezone_select" : "select"), :div,
+  class: (attrs.delete(:class) || "") + " field selectComponent#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}",
+  tabindex: options[:tabindex] || 1,
+  property_attr: 'disabled,name,fetch_url,separators_below,top_values',
+  roles: attrs.delete(:roles),
+  data: { disabled: attrs.delete(:disabled) ? 'disabled' : nil, fetch_url: options[:fetch_url], name: options[:name], separators_below: options[:separators_below], top_values: options[:top_values] } do
+
+  - if options[:label]
+    %label
+      = options[:label]
+      - unless options[:popup_hint].blank?
+        = component :hint_trigger, i18n: options[:popup_hint]
+
+  = property "input_value", "input",
+    type: 'hidden',
+    data: { component_attribute_properties: 'input_value:value' },
+    name: options[:name], value: get_value_for_field_name(options) || select_component_get_selected_value(options, type=:input)
+
+  .selectBoxAndOptions
+
+    = component_part :selectbox, "div", class: "selectBox" do
+      = property "display_value", "div", class: "value" do
+        = (select_component_get_selected_value(options, :display) if select_component_get_selected_value(options).blank?)
+      = image_tag "arrow_down.svg", class: "arrow"
+      = image_tag "ajax_indicators/rolling_dark.svg", class: 'ajaxIndicator'
+
+    = component_part :options_container, "div", class: "optionsContainer" do
+      - options[:has_blank] = true if options[:has_blank].nil?
+      - prepare_select_collection(options[:collection], selected: options[:selected] || params[options[:name]], blank_option: options[:has_blank]).each do |k,v|
+        = component_part :option, "div", class: "option", data: { option_value: k } do
+          = v
+
+  = component_part :option_template, "div", class: "option"
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_text_form_field.html.haml

@@ -0,0 +1,12 @@
+= component_block :form_field, "div",
+  { class: (attrs.delete(:class) || "") + " field text#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}", property_attr: "disabled", data: { disabled: options[:disabled] }}.merge(attrs) do
+  
+  - if options[:label]
+    %label
+      = options[:label]
+      - unless options[:popup_hint].blank?
+        = component :hint_trigger, i18n: options[:popup_hint]
+
+  %input{ type: (attrs.delete(:type) || "text"), tabindex: options[:tabindex], name: options[:name], value: attrs[:value] || get_value_for_field_name(options), autofocus: attrs[:autofocus], disabled: options[:disabled], maxlength: attrs.delete(:maxlength), autocomplete: attrs.delete(:autocomplete), data: { component_part: 'value_holder', component_attribute_properties: "name:name" }}
+  = options[:suffix]
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_text_form_field_with_validation.html.haml

@@ -0,0 +1,6 @@
+= component_block :form_field_with_validation, "div",
+  { class: (attrs.delete(:class) || "") + " field text#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}", property_attr: "disabled,label", data: { disabled: options[:disabled], label: options[:label] } }.merge(attrs) do
+
+  %input{ type: (attrs.delete(:type) || "text"), tabindex: options[:tabindex], name: options[:name], value: attrs[:value] || get_value_for_field_name(options), autofocus: options[:autofocus], disabled: options[:disabled], maxlength: attrs.delete(:maxlength), autocomplete: attrs.delete(:autocomplete), data: { component_part: 'value_holder', component_attribute_properties: "name:name" } }
+  = options[:suffix]
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/_textarea_form_field.html.haml

@@ -0,0 +1,11 @@
+= component_block :form_field, "div",
+  { class: (attrs.delete(:class) || "") + " field textarea#{" errors" if options[:model] && !get_error_for_field_name(options).blank?}", property_attr: "disabled"}.merge(attrs) do
+  
+  - if options[:label]
+    %label
+      = options[:label]
+      - unless options[:popup_hint].blank?
+        = component :hint_trigger, i18n: options[:popup_hint]
+
+  %textarea{ name: options[:name], maxlength: attrs.delete(:maxlength), tabindex: options[:tabindex], data: { component_part: 'value_holder', component_attribute_properties: "name:name" }}= get_value_for_field_name(options)
+  = render partial: "components/field_hints", locals: { options: options }

data/app/views/webface_components/shared/_editable_select_base.html.haml

@@ -0,0 +1,34 @@
+- if options[:label]
+  %label
+    = options[:label]
+    - unless options[:popup_hint].blank?
+      = component :hint_trigger, i18n: options[:popup_hint]
+
+.selectBoxAndOptions
+
+  = component_part :selectbox, "div", class: "selectBox" do
+    = property "display_value", "input",
+      type: 'text',
+      class: 'editableSelect',
+      placeholder: t("views.start_typing"),
+      autocomplete: "off",
+      maxlength: attrs.delete(:maxlength),
+      value: (select_component_get_selected_value(options, :display) if select_component_get_selected_value(options).blank?),
+      data: { component_attribute_properties: 'display_value:value', component_part: "display_input" }
+    = image_tag "ajax_indicators/rolling_dark.svg", class: 'ajaxIndicator'
+    = component_part :arrow, "span" do
+      = image_tag "arrow_down.svg", class: "arrow"
+    = property "input_value", "input", type: 'hidden', name: options[:name], value: get_value_for_field_name(options), data: { component_part: "input", component_attribute_properties: 'input_value:value' }
+
+  = component_part :options_container, "div", class: "optionsContainer" do
+    - prepare_select_collection(options[:collection] || [], selected: options[:selected] || params[options[:name]], blank_option: false).each do |k,v|
+      = component_part :option, "div", class: "option", data: { option_value: k } do
+        = v
+
+    .noOptionsFoundMessage
+      %p.main= t("views.components.editable_select.no_matching_items")
+      - if options[:allow_custom_value]
+        %p.customValue= t("views.components.editable_select.you_can_leave_typed")
+
+= component_part :option_template, "div", class: "option"
+= render partial: "components/field_hints", locals: { options: options }

data/lib/generators/templates/application.js

@@ -0,0 +1,53 @@
+// Loading Webface components one by one. We could load webface.js instead (in that case, we wouldn't need to define Webface variable below
+// but we wanted to give more flexibility here. Remove components you don't actually intend to use. Less to load!
+import { Logmaster                   } from './path_to_webface/logmaster.js'
+import { Animator                    } from './path_to_webface/animator.js'
+import { AjaxRequest                 } from './path_to_webface/ajax_request.js'
+import { Component                   } from './path_to_webface/component.js'
+import { RootComponent               } from './path_to_webface/components/root_component.js'
+import { ButtonComponent             } from './path_to_webface/components/button_component.js'
+import { CheckboxComponent           } from './path_to_webface/components/checkbox_component.js'
+import { FormFieldComponent          } from './path_to_webface/components/form_field_component.js'
+import { NumericFormFieldComponent   } from './path_to_webface/components/numeric_form_field_component.js'
+import { ModalWindowComponent        } from './path_to_webface/components/modal_window_component.js'
+import { DialogWindowComponent       } from './path_to_webface/components/dialog_window_component.js'
+import { RadioButtonComponent        } from './path_to_webface/components/radio_button_component.js'
+import { HintComponent               } from './path_to_webface/components/hint_component.js'
+import { SimpleNotificationComponent } from './path_to_webface/components/simple_notification_component.js'
+import { SelectComponent             } from './path_to_webface/components/select_component.js'
+import { ConfirmableButtonComponent  } from './path_to_webface/components/confirmable_button_component.js'
+import { ContextMenuComponent        } from './path_to_webface/components/context_menu_component.js'
+
+// Import your own components like this:
+// import { MyComponent } from "./components/my_component.js";
+
+window.webface.substitute_classes = { "Animator": Animator }
+
+// Change these settings to your liking
+AjaxRequest.display_40x  = true;
+AjaxRequest.log_request  = true;
+AjaxRequest.log_response = true;
+AjaxRequest.user_notification = (message) => {
+  // Put code that informs user of a bad ajax-request here
+  // By default if does nothing.
+};
+
+export var Webface = {
+
+  "init": (root_el=document.querySelector("body")) => {
+
+    window.webface["logger"] = new Logmaster({test_env: false, reporters: { "console" : "DEBUG", "http" : "ERROR" }, throw_errors: true, http_report_url: "/report_webface_error"})
+
+    try {
+      var root = new RootComponent();
+      root.dom_element = root_el;
+      root.initChildComponents();
+    } catch(e) {
+      window.webface.logger.capture(e, { log_level: "ERROR" });
+    }
+
+  },
+
+}
+
+Webface.init();

data/lib/generators/templates/mocha.css

@@ -0,0 +1,10 @@
+body {
+  font-family: "Ubuntu Mono", Arial; font-size: 70%;
+}
+
+li h2 { font-weight: normal; cursor: pointer; }
+li span.duration { padding-left: 2em; font-weight: normal; }
+li pre { font-size: 150%; margin-left: 2em; background-color: #ddd; border-left: solid 4px #aaa; padding: 1em; }
+
+li.fail h2 { color: #D11111; padding: 0.2em; font-weight: bold; }
+li.fail pre { background-color: #FFCFCF; color: #AD0000; border-left: solid 4px #FF6161; }

data/lib/generators/templates/mocha.pug

@@ -0,0 +1,15 @@
+doctype html
+html
+  head
+    meta(charset="utf-8")
+    link(rel="stylesheet" href="mocha.css")
+  body
+    #mocha
+    script(src="node_modules/chai/chai.js")
+    script(src="node_modules/chai-spies/chai-spies.js")
+    script(src="node_modules/mocha/mocha.js")
+    script.
+      mocha.setup('bdd')
+    script(src=file, type="module")
+    script(type="module").
+      mocha.checkLeaks(); mocha.run();

data/lib/generators/templates/my_component.test.js

@@ -0,0 +1,15 @@
+import '../webface_init.js'
+
+// Uncomment and replace with the component you're testing
+// 
+import { MyComponent } from '../source/components/my_component.js'
+
+describe("MyComponent", async function() {
+
+  it("test", function() {
+    // Uncomment to see if a new component instance can be created and component class has been loaded sucessfully.
+    //
+    new MyComponent();
+  });
+
+});

data/lib/generators/templates/run_webface_test

@@ -0,0 +1,11 @@
+#!/bin/bash
+DIRECTORY=$(cd `dirname $0` && pwd)
+cd $DIRECTORY
+ls
+echo $DIRECTORY
+node test_server.js &
+server_pid=$!
+echo Server id is $server_pid
+npm test -- -f http://localhost:8080?file=$1
+kill $server_pid
+cd -

data/lib/generators/templates/test_animator.js

@@ -0,0 +1,66 @@
+// This class exists to not apply animations when in unit tests, since we can't really
+// wait for animation Promises to resovle. Instead, we use this custom TestAnimator
+// to show/hide elements and resolve Promises immediately.
+export var TestAnimator = {
+
+  // IMPORTANT: we have to use a manual Promise creation inside animation methods here
+  // because browsers don't yet support Animation.finished. See https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished 
+
+  "show": function(elements, ms, { display_value="block" }={}) {
+    return this._applyToCollection(elements, (el) => {
+      el.style.display = "block";
+      el.style.opacity = "1";
+      return new Promise((resolve, reject) => {
+        resolve("show behavior resolved");
+      });
+    });
+  },
+
+  "hide": function(elements, ms) {
+    return this._applyToCollection(elements, (el) => {
+      el.style.display = "none";
+      el.style.opacity = "0";
+      return new Promise((resolve, reject) => {
+        resolve("hide behavior resolved");
+      });
+    });
+  },
+
+  "scrollDown": function(elements, ms, { display_value="block" }={}) {
+    return this._applyToCollection(elements, (el) => {
+      el.style.display = "block";
+      el.style.opacity = "1";
+      return new Promise((resolve, reject) => {
+        resolve("scrollDown behavior resolved");
+      });
+    });
+  },
+
+  "scrollUp": function(elements, ms) {
+    return this._applyToCollection(elements, (el) => {
+      el.style.display = "none";
+      el.style.opacity = "0";
+      return new Promise((resolve, reject) => {
+        resolve("scrollUp behavior resolved");
+      });
+    });
+  },
+
+  "_applyToCollection": function(elements, func) {
+    if(!(elements instanceof Array))
+      elements = [elements];
+
+    elements = elements.map((el) => {
+      if(/Component$/.test(el.constructor.name))
+        return el.dom_element;
+      else
+        return el;
+    });
+
+    return Promise.all(elements.map((el) => {
+      return func(el);
+    }));
+
+  }
+
+}