matestack-ui-core 0.7.2

data/app/concepts/matestack/ui/core/address/address.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Address
+  class Address < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/app/app.haml

@@ -0,0 +1,4 @@
+%component{"is": "matestack-ui-core-app", "inline-template": true}
+  %div{"class": "matestack_app"}
+    - @cells.each do |key, cell|
+      = cell.call(:show)

data/app/concepts/matestack/ui/core/app/app.js

@@ -0,0 +1,27 @@
+import Vue from 'vue/dist/vue.esm'
+import axios from 'axios'
+import VRuntimeTemplate from "v-runtime-template"
+import Vuex from 'vuex'
+
+const componentDef = {
+  props: ['appConfig', 'params'],
+  data: function(){
+    return {}
+  },
+  computed: Vuex.mapState({
+    asyncTemplate: state => state.pageTemplate,
+  }),
+  mounted: function(){
+    const self = this;
+    window.onpopstate = function(event) {
+      self.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+    }
+  },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
+}
+
+let component = Vue.component('matestack-ui-core-app', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/app/app.rb

@@ -0,0 +1,98 @@
+module Matestack::Ui::Core::App
+  class App < Trailblazer::Cell
+    include ActionView::Helpers::ActiveModelHelper
+    include ActionView::Helpers::ActiveModelInstanceTag
+    include ActionView::Helpers::AssetTagHelper
+    include ActionView::Helpers::AssetUrlHelper
+    include ActionView::Helpers::AtomFeedHelper
+    include ActionView::Helpers::CacheHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::CspHelper
+    include ActionView::Helpers::CsrfHelper
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::DebugHelper
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::FormOptionsHelper
+    include ActionView::Helpers::FormTagHelper
+    include ActionView::Helpers::JavaScriptHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::RecordTagHelper
+    # include ActionView::Helpers::RenderingHelper
+    include ActionView::Helpers::SanitizeHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::TranslationHelper
+    include ActionView::Helpers::UrlHelper
+    include ::Cell::Haml
+    include Matestack::Ui::Core::ApplicationHelper
+    include Matestack::Ui::Core::ToCell
+    # include ::Rails.application.routes.url_helpers
+
+    view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
+
+    extend ViewName::Flat
+
+    def self.prefixes
+      _prefixes = super
+      modified_prefixes = _prefixes.map do |prefix|
+        prefix_parts = prefix.split("/")
+
+        if prefix_parts.last.include?(self.name.split("::")[-1].downcase)
+          prefix_parts[0..-2].join("/")
+        else
+          prefix
+        end
+
+      end
+
+      return modified_prefixes
+    end
+
+    def self.views_dir
+      return ""
+    end
+
+    def initialize(model=nil, options={})
+      super
+      @nodes = {}
+      @cells = {}
+      @page_block = nil
+      @page_id = ""
+      setup
+    end
+
+    def setup
+      true
+    end
+
+    def prepare
+      true
+    end
+
+    def show(page_id, page_nodes, &block)
+      @page_id = page_id
+      @page_nodes = page_nodes
+      prepare
+      response
+      render(view: :app, &block)
+    end
+
+    def page_nodes
+      @page_nodes
+    end
+
+    def components(&block)
+      @nodes = Matestack::Ui::Core::AppNode.build(self, &block)
+
+      @nodes.each do |key, node|
+        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"], nil, node["cached_params"])
+      end
+    end
+
+    def partial(&block)
+      Matestack::Ui::Core::AppNode.build(self, &block)
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/app/store.js

@@ -0,0 +1,70 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+import matestackEventHub from 'js/event-hub'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    pageTemplate: null,
+    currentPath: document.location.pathname
+  },
+  mutations: {
+    setPageTemplate (state, serverResponse){
+      state.pageTemplate = serverResponse
+    },
+    setCurrentPath (state, path){
+      state.currentPath = path
+    }
+  },
+  actions: {
+    navigateTo ({ commit, state }, { url, backwards }) {
+      matestackEventHub.$emit("page_loading", url);
+      if (typeof matestackUiCoreTransitionStart !== 'undefined') {
+        matestackUiCoreTransitionStart(url);
+      }
+      if (!window.history.pushState) {
+        document.location.href = url;
+        return;
+      }
+      return new Promise((resolve, reject) => {
+        axios({
+          method: "get",
+          url: url,
+          headers: {
+            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+          },
+          params: {"only_page": true}
+        })
+        .then(function(response){
+          if (backwards){
+            window.history.replaceState({matestackApp: true, url: url}, null, url);
+          } else {
+            window.history.pushState({matestackApp: true, url: url}, null, url);
+          }
+          setTimeout(function () {
+            resolve(response["data"])
+            commit('setPageTemplate', response["data"])
+            commit('setCurrentPath', url)
+            matestackEventHub.$emit("page_loaded", url);
+            if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
+              matestackUiCoreTransitionSuccess(url);
+            }
+          }, 5);
+        })
+        .catch(function(error){
+          setTimeout(function () {
+            resolve(error)
+            matestackEventHub.$emit("page_loading_error", error);
+            if (typeof matestackUiCoreTransitionError !== 'undefined') {
+              matestackUiCoreTransitionError(url);
+            }
+          }, 5);
+        })
+      })
+    }
+  }
+})
+
+export default store

data/app/concepts/matestack/ui/core/article/article.haml

@@ -0,0 +1,5 @@
+%article{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/article/article.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Article
+  class Article < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/async/async.haml

@@ -0,0 +1,2 @@
+%div{@tag_attributes}
+  = yield

data/app/concepts/matestack/ui/core/async/async.js

@@ -0,0 +1,76 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from 'js/event-hub'
+import componentMixin from 'component/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {
+      showing: true,
+      hide_after_timeout: null,
+      event: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    show: function(event_data){
+      const self = this
+      if (this.showing === true){
+        return
+      }
+      this.showing = true
+      this.event.data = event_data
+      if(this.componentConfig["defer"] != undefined){
+        if(!isNaN(this.componentConfig["defer"])){
+          this.startDefer()
+        }
+      }
+      if(this.componentConfig["hide_after"] != undefined){
+        self.hide_after_timeout = setTimeout(function () {
+          self.hide()
+        }, parseInt(this.componentConfig["hide_after"]));
+      }
+    },
+    hide: function(){
+      this.showing = false
+      this.event.data = {}
+    },
+    startDefer: function(){
+      const self = this
+      setTimeout(function () {
+        self.rerender()
+      }, parseInt(this.componentConfig["defer"]));
+    }
+  },
+  created: function () {
+    const self = this
+    matestackEventHub.$on(this.componentConfig["rerender_on"], self.rerender)
+    matestackEventHub.$on(this.componentConfig["show_on"], self.show)
+    matestackEventHub.$on(this.componentConfig["hide_on"], self.hide)
+    if(this.componentConfig["show_on"] != undefined){
+      this.showing = false
+    }
+    if(this.componentConfig["defer"] != undefined){
+      if(!isNaN(this.componentConfig["defer"])){
+        if (this.componentConfig["show_on"] == undefined){
+          this.startDefer()
+        }
+      }
+    }
+    if(this.componentConfig["init_show"] == true){
+      this.showing = true
+    }
+  },
+  beforeDestroy: function() {
+    const self = this
+    clearTimeout(self.hide_after_timeout)
+    matestackEventHub.$off(this.componentConfig["rerender_on"], self.rerender);
+    matestackEventHub.$off(this.componentConfig["show_on"], self.show);
+    matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
+  },
+}
+
+let component = Vue.component('matestack-ui-core-async', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/async/async.rb

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Async
+  class Async < Matestack::Ui::Core::Component::Dynamic
+
+    def setup
+      @rerender = true
+      @tag_attributes.merge!({
+        "v-if": "showing"
+      })
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/blockquote/blockquote.haml

@@ -0,0 +1,5 @@
+%blockquote{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/blockquote/blockquote.rb

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Blockquote
+  class Blockquote < Matestack::Ui::Core::Component::Static
+
+    def setup
+      @tag_attributes.merge!({
+        "cite": options[:cite]
+        })
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/br/br.haml

@@ -0,0 +1,5 @@
+- unless options[:times].nil?
+  - options[:times].times do
+    %br{@tag_attributes}
+- else
+  %br{@tag_attributes}

data/app/concepts/matestack/ui/core/br/br.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Br
+  class Br < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/button/button.haml

@@ -0,0 +1,5 @@
+%button{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/button/button.rb

@@ -0,0 +1,11 @@
+module Matestack::Ui::Core::Button
+  class Button < Matestack::Ui::Core::Component::Static
+
+    def setup
+      @tag_attributes.merge!({
+        "disabled": options[:disabled] ||= nil
+      })
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/caption/caption.haml

@@ -0,0 +1,5 @@
+%caption{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/caption/caption.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Caption
+  class Caption < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/content/content.js

@@ -0,0 +1,98 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from 'js/event-hub'
+import queryParamsHelper from 'js/helpers/query-params-helper'
+import componentMixin from 'component/component'
+import asyncMixin from 'async/async'
+
+const componentDef = {
+  mixins: [componentMixin, asyncMixin],
+  data: function(){
+    return {
+      currentLimit: null,
+      currentOffset: null,
+      currentFilteredCount: null,
+      currentBaseCount: null
+    }
+  },
+  methods: {
+    next: function(){
+      if (this.currentTo() < this.currentCount()){
+        this.currentOffset += this.currentLimit
+        var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+        window.history.pushState({matestackApp: true, url: url}, null, url);
+        matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+      }
+    },
+    previous: function(){
+      if ((this.currentOffset - this.currentLimit)*-1 != this.currentLimit){
+        if((this.currentOffset - this.currentLimit) < 0){
+          this.currentOffset = 0
+        } else {
+          this.currentOffset -= this.currentLimit
+        }
+        var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+        window.history.pushState({matestackApp: true, url: url}, null, url);
+        matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+      }
+    },
+    currentTo: function(){
+      var to = parseInt(this.currentOffset) + parseInt(this.currentLimit)
+      if (to > parseInt(this.currentCount())){
+        return this.currentCount();
+      } else {
+        return to;
+      }
+    },
+    currentCount: function(){
+      if (this.currentFilteredCount != null || this.currentFilteredCount != undefined){
+        return this.currentFilteredCount;
+      } else {
+        return this.currentBaseCount;
+      }
+    },
+    goToPage: function(page){
+      this.currentOffset = parseInt(this.currentLimit) * (parseInt(page)-1)
+      var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+    }
+  },
+  mounted: function(){
+    if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset") != null){
+        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset"))
+    } else {
+      if(this.componentConfig["init_offset"] != undefined){
+        this.currentOffset = this.componentConfig["init_offset"]
+      } else {
+        this.currentOffset = 0
+      }
+    }
+
+    if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit") != null){
+        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit"))
+    } else {
+      if(this.componentConfig["init_limit"] != undefined){
+        this.currentLimit = this.componentConfig["init_limit"]
+      } else {
+        this.currentLimit = 10
+      }
+    }
+
+    if(this.componentConfig["filtered_count"] != undefined){
+      this.currentFilteredCount = this.componentConfig["filtered_count"]
+      if(this.currentOffset >= this.currentFilteredCount){
+        this.previous()
+      }
+    }
+    if(this.componentConfig["base_count"] != undefined){
+      this.currentBaseCount = this.componentConfig["base_count"]
+      if(this.currentOffset >= this.currentBaseCount){
+        this.previous()
+      }
+    }
+  }
+}
+
+let component = Vue.component('matestack-ui-core-collection-content', componentDef)
+
+export default componentDef