dynamic_scaffold 0.1.0

data/app/assets/javascripts/dynamic_scaffold/common.js

@@ -0,0 +1,95 @@
+//closest
+if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+      i,
+      el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+(function(){
+  var fireEvent = function(){
+    var event = document.createEvent("HTMLEvents");
+    event.initEvent('dynamic_scaffold:load', false, false)
+    document.dispatchEvent(event)
+  }
+
+  document.addEventListener('DOMContentLoaded', fireEvent)
+  document.addEventListener('turbolinks:load', function(e){
+    // Not fire after the initial page load
+    if (e.data.timing.visitEnd) fireEvent()
+  })
+})()
+
+// promise polyfill
+// IE 11 has no Promise? Are you kidding?
+// https://github.com/taylorhakes/promise-polyfill
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(){}function n(e,n){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,f._immediateFn(function(){var i=1===e._state?n.onFulfilled:n.onRejected;if(null!==i){var r;try{r=i(e._value)}catch(e){return void o(n.promise,e)}t(n.promise,r)}else(1===e._state?t:o)(n.promise,e._value)})):e._deferreds.push(n)}function t(e,n){try{if(n===e)throw new TypeError("A promise cannot be resolved with itself.");if(n&&("object"==typeof n||"function"==typeof n)){var t=n.then;if(n instanceof f)return e._state=3,e._value=n,void i(e);if("function"==typeof t)return void r(function(e,n){return function(){e.apply(n,arguments)}}(t,n),e)}e._state=1,e._value=n,i(e)}catch(n){o(e,n)}}function o(e,n){e._state=2,e._value=n,i(e)}function i(e){2===e._state&&0===e._deferreds.length&&f._immediateFn(function(){e._handled||f._unhandledRejectionFn(e._value)});for(var t=0,o=e._deferreds.length;o>t;t++)n(e,e._deferreds[t]);e._deferreds=null}function r(e,n){var i=!1;try{e(function(e){i||(i=!0,t(n,e))},function(e){i||(i=!0,o(n,e))})}catch(e){if(i)return;i=!0,o(n,e)}}function f(e){if(!(this instanceof f))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],r(e,this)}var u=setTimeout,c=f.prototype;c.catch=function(e){return this.then(null,e)},c.then=function(t,o){var i=new this.constructor(e);return n(this,new function(e,n,t){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof n?n:null,this.promise=t}(t,o,i)),i},f.all=function(e){return new f(function(n,t){function o(e,f){try{if(f&&("object"==typeof f||"function"==typeof f)){var u=f.then;if("function"==typeof u)return void u.call(f,function(n){o(e,n)},t)}i[e]=f,0==--r&&n(i)}catch(e){t(e)}}if(!e||void 0===e.length)throw new TypeError("Promise.all accepts an array");var i=Array.prototype.slice.call(e);if(0===i.length)return n([]);for(var r=i.length,f=0;i.length>f;f++)o(f,i[f])})},f.resolve=function(e){return e&&"object"==typeof e&&e.constructor===f?e:new f(function(n){n(e)})},f.reject=function(e){return new f(function(n,t){t(e)})},f.race=function(e){return new f(function(n,t){for(var o=0,i=e.length;i>o;o++)e[o].then(n,t)})},f._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){u(e,0)},f._unhandledRejectionFn=function(e){void 0!==console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var a=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if(void 0!==a)return a;throw Error("unable to locate global object")}();a.Promise||(a.Promise=f)});
+
+//DynamicScaffold
+window.DynamicScaffold = window.DynamicScaffold || {}
+
+
+//createElement
+window.DynamicScaffold.createElement = function(tagName, attributes, style, innerText){
+  const elem = document.createElement(tagName)
+  
+  if(attributes){
+    for(var key in attributes){
+      elem.setAttribute(key, attributes[key])
+    }
+  }
+
+  if(style){
+    Object.assign(elem.style, style);
+  }
+
+  if(innerText){
+    elem.innerText = innerText
+  }
+
+  return elem
+}
+
+//confirm
+;(function(){  
+  window.DynamicScaffold.confirm = function(options){
+    const exists = document.querySelector('.dynamicScaffold-overlay')
+    if(exists){
+      return
+    }
+  
+    const overlay = DynamicScaffold.createElement('div', {class: 'dynamicScaffold-overlay'})
+    const confirm = DynamicScaffold.createElement('div', {class: 'dynamicScaffold-confirm'})
+    const inner = DynamicScaffold.createElement('div', {class: 'dynamicScaffold-confirm-inner'})
+    overlay.appendChild(confirm)
+    confirm.appendChild(inner)
+  
+    const message = DynamicScaffold.createElement('div', {class: 'dynamicScaffold-confirm-message'}, null, options.message)
+    inner.appendChild(message)
+    
+    const ok = DynamicScaffold.createElement('button', {class: options.ok.class}, {}, options.ok.text)
+    const cancel = DynamicScaffold.createElement('button', {class: options.cancel.class}, {}, options.cancel.text)
+    const buttons = DynamicScaffold.createElement('div', {class: 'dynamicScaffold-confirm-buttons'})
+    buttons.appendChild(cancel)
+    buttons.appendChild(ok)
+    inner.appendChild(buttons)
+    document.body.appendChild(overlay)
+  
+    ok.addEventListener('click', function(){
+      options.ok.action()
+      overlay.remove()
+    })
+  
+    cancel.addEventListener('click', function(){
+      options.cancel.action()
+      overlay.remove()
+    })
+  }
+})()

data/app/assets/javascripts/dynamic_scaffold/delete.js

@@ -0,0 +1,57 @@
+document.addEventListener('dynamic_scaffold:load', function (){
+  const csrfParam = document.querySelector('.authenticity_param_name')
+  if(!csrfParam) return
+  const csrfParamName = csrfParam.value
+  function submit(button){
+    const form = DynamicScaffold.createElement('form', {
+      method: 'post',
+      action: button.getAttribute('data-action'),
+      style: 'display: none;'
+    })
+
+    form.appendChild(DynamicScaffold.createElement('input', {
+      type: 'hidden',
+      name: csrfParamName,
+      value: document.querySelector('input[name=' + csrfParamName + ']').value
+    }))
+
+    form.appendChild(DynamicScaffold.createElement('input', {
+      type: 'hidden',
+      name: '_method',
+      value: 'delete'
+    }))
+
+    document.body.appendChild(form)
+
+    form.submit()
+  }
+
+  const buttons = document.querySelectorAll('.dynamicScaffoldJs-destory')
+  if(buttons.length === 0) return
+  
+  const wrapper = buttons[0].closest('.dynamicScaffoldJs-item-wrapper')
+  Array.prototype.forEach.call(buttons, function(button){
+    const row = button.closest('.dynamicScaffoldJs-item-row')
+    button.addEventListener('click', function(e){
+      e.preventDefault()
+      row.classList.add('dynamicScaffold-destorying')
+      DynamicScaffold.confirm({
+        message: button.getAttribute('data-confirm-message'),
+        ok: {
+          text: wrapper.getAttribute('data-confirm-ok'),
+          class: wrapper.getAttribute('data-confirm-ok-class'),
+          action: function(){
+            submit(button)
+          }
+        },
+        cancel: {
+          text: wrapper.getAttribute('data-confirm-cancel'),
+          class: wrapper.getAttribute('data-confirm-cancel-class'),
+          action: function(){
+            row.classList.remove("dynamicScaffold-destorying")
+          }
+        }
+      })
+    })
+  })
+})

data/app/assets/javascripts/dynamic_scaffold/pagination.js

@@ -0,0 +1,26 @@
+document.addEventListener('dynamic_scaffold:load', function(){
+  function handlePagination(pagination){
+    const itemCount = pagination.children.lenth
+    const items = Array.prototype.filter.call(pagination.children, function(li){
+      return li.classList.contains('dynamicScaffoldJs-page-item')
+    })
+    
+    const currentIndex = items.findIndex(function(li){
+      return li.classList.contains('current')
+    })
+
+    let distance = currentIndex - items.length + 1
+    items.forEach(function(li, index){
+      if(
+        distance != 0
+      ){
+        li.classList.add('away-' + Math.abs(distance))
+      }
+      ++distance
+    })
+  }
+
+  Array.prototype.forEach.call(document.querySelectorAll('.dynamicScaffoldJs-pagination'), function(pagination){
+    handlePagination(pagination)
+  })
+})

data/app/assets/javascripts/dynamic_scaffold/sorter.js

@@ -0,0 +1,120 @@
+document.addEventListener('dynamic_scaffold:load', function(){
+  const promises = []
+  const allButtons = []
+
+  function swapAnimation(promises, source, target){
+    promises.push(new Promise(function(resolve){
+      source.dynamicScaffoldSortingResolver = resolve
+      sourceRect = source.getBoundingClientRect()
+      targetRect = target.getBoundingClientRect()
+
+      //Calculate the duration according to the moving distance.
+      const distance = targetRect.top - sourceRect.top
+      const durationBase = 200
+      const durationFactor = Math.abs(distance) * 0.03
+      const duration = Math.min(durationBase + durationFactor, 600)
+
+      source.style.transition = 'all ' + duration + 'ms cubic-bezier(1.0, 0, 0.25, 1.0)'
+      source.style.transform = 'translateY(' + distance + 'px)'
+    }))
+  }
+
+  /**
+   *
+   * @param NodeList button elements.
+   * @param Function Function that returns the element to move to.
+   * @param Function Function to register animation other than the source element.
+   * @param Function Function for swapping elements.
+   */
+  function addClickEvent(buttons, getTarget, otherSideAnimation, swapElement){
+    Array.prototype.forEach.call(buttons, function(button){
+      allButtons.push(button)
+      button.addEventListener('click', function(e){
+        e.preventDefault()
+        
+        // Ignore while animating
+        if(promises.length) return
+
+        const source = button.closest('.dynamicScaffoldJs-item-row')
+        source.style.position = 'relative'
+        source.style.zIndex = 1000
+
+        // Top or bottom.
+        const target = getTarget(source)
+        if(!target) return
+
+        // Start animation source to target
+        if(source != target){
+          swapAnimation(promises, source, target)
+        }
+        
+        otherSideAnimation(promises, source, target)
+
+        if(promises.length){
+          allButtons.forEach(function(btn){ btn.disabled = true })
+        }
+
+        // When both animations are finished
+        Promise.all(promises).then(function(values){
+          source.style.zIndex = ''
+          source.style.position = ''
+          values.forEach(function(row){
+            row.style.transition = 'none'
+            row.style.transform = 'translateY(0px)'
+          })
+          swapElement(source, target)
+          promises.length = 0
+          allButtons.forEach(function(btn){ btn.disabled = false })
+        })
+      })
+    })
+  }
+
+  function otherSideAnimationForUp(promises, source, target){
+    while(true){
+      if(target == source) break
+      swapAnimation(promises, target, target.nextElementSibling)
+      target = target.nextElementSibling
+    }
+  }
+
+  function otherSideAnimationForDown(promises, source, target){
+    while(true){
+      if(target == source) break
+      swapAnimation(promises, target, target.previousElementSibling)
+      target = target.previousElementSibling
+    }
+  }
+
+  // Register `transitionend` event in all the rows.
+  Array.prototype.forEach.call(document.querySelectorAll('.dynamicScaffoldJs-item-row'), function(row){
+    row.addEventListener('transitionend', function(e){
+      if(e.target == row) row.dynamicScaffoldSortingResolver(row)
+    })
+  })
+
+  // Register events on each button.
+  addClickEvent(document.querySelectorAll('.dynamicScaffoldJs-sorter-top'), function(source){
+    return document.querySelector('.dynamicScaffoldJs-item-row:first-child')
+  }, otherSideAnimationForUp, function(source, target){
+    source.parentNode.insertBefore(source, target)
+  })
+
+  addClickEvent(document.querySelectorAll('.dynamicScaffoldJs-sorter-up'), function(source){
+    return source.previousElementSibling
+  }, otherSideAnimationForUp, function(source, target){
+    source.parentNode.insertBefore(source, target)
+  })
+
+  addClickEvent(document.querySelectorAll('.dynamicScaffoldJs-sorter-down'), function(source){
+    return source.nextElementSibling
+  }, otherSideAnimationForDown, function(source, target){
+    source.parentNode.insertBefore(target, source)
+  })
+
+  addClickEvent(document.querySelectorAll('.dynamicScaffoldJs-sorter-bottom'), function(source){
+    return document.querySelector('.dynamicScaffoldJs-item-row:last-child')
+  }, otherSideAnimationForDown, function(source, target){
+    source.parentNode.insertBefore(source, null)
+  })
+})

data/app/assets/javascripts/dynamic_scaffold.js

@@ -0,0 +1,4 @@
+//= require dynamic_scaffold/common
+//= require dynamic_scaffold/delete
+//= require dynamic_scaffold/pagination
+//= require dynamic_scaffold/sorter

data/app/assets/stylesheets/dynamic_scaffold/bootstrap3.scss

@@ -0,0 +1,22 @@
+@import 'common';
+@import 'resplist';
+
+.btn-default path{
+  fill: #333;
+}
+
+.btn-primary path{
+  fill: #fff;
+}
+
+.btn-warning path{
+  fill: #fff;
+}
+
+.page-item .page-link path{
+  fill: #337ab7;
+}
+
+.page-item.disabled .page-link path{
+  fill: #777;
+}

data/app/assets/stylesheets/dynamic_scaffold/bootstrap4.scss

@@ -0,0 +1,34 @@
+@import 'common';
+@import 'resplist';
+
+.btn-outline-primary path{
+  fill: #007bff;
+}
+
+.btn-outline-primary:hover path {
+  fill: #fff;
+}
+
+.btn-outline-secondary path{
+  fill: #868e96;
+}
+
+.btn-outline-secondary:hover path{
+  fill: #fff;
+}
+
+.btn-outline-warning path{
+  fill: #ffc107;
+}
+
+.btn-outline-warning:hover path{
+  fill: #fff;
+}
+
+.page-item .page-link path{
+  fill: #007bff;
+}
+
+.page-item.disabled .page-link path{
+  fill: #868e96;
+}

data/app/assets/stylesheets/dynamic_scaffold/common.scss

@@ -0,0 +1,130 @@
+.dynamicScaffold-row{
+  margin-bottom: 10px
+}
+
+.dynamicScaffold-error-message{
+  color: #dc3545;
+  
+}
+
+.dynamicScaffold-error-message path{
+  fill: #dc3545;
+}
+
+.dynamicScaffold-destorying{
+  background-color: #fdd8df !important;
+  opacity: 0.6;
+}
+
+.dynamicScaffold-svg-icon{
+  width: 15px;
+  height: 15px;
+  vertical-align: baseline;
+  transform: translate(0, 3px);
+}
+
+@media (max-width: 1920px) {
+  .pagination .page-item.away-15 { display:none; }
+}
+
+@media (max-width: 1810px) {
+  .pagination .page-item.away-14 { display:none; }
+}
+
+@media (max-width: 1700px) {
+  .pagination .page-item.away-13 { display:none; }
+}
+
+@media (max-width: 1590px) {
+  .pagination .page-item.away-12 { display:none; }
+}
+
+@media (max-width: 1480px) {
+  .pagination .page-item.away-11 { display:none; }
+}
+
+@media (max-width: 1370px) {
+  .pagination .page-item.away-10 { display:none; }
+}
+
+@media (max-width: 1260px) {
+  .pagination .page-item.away-9 { display:none; }
+}
+
+@media (max-width: 1150px) {
+  .pagination .page-item.away-8 { display:none; }
+}
+
+@media (max-width: 1040px) {
+  .pagination .page-item.away-7 { display:none; }
+}
+
+@media (max-width: 930px) {
+  .pagination .page-item.away-6 { display:none; }
+}
+
+
+@media (max-width: 820px) {
+  .pagination .page-item.away-5 { display:none; }
+}
+
+@media (max-width: 710px) {
+  .pagination .page-item.away-4 { display:none; }
+}
+
+@media (max-width: 600px) {
+  .pagination .page-item.away-3 { display:none; }
+}
+
+@media (max-width: 490px) {
+  .pagination .page-item.away-2 { display:none; }
+}
+
+@media (max-width: 380px) {
+  .pagination .page-item.away-1 { display:none; }
+}
+
+.btn-danger path{
+  fill: #fff;
+}
+
+.dynamicScaffold-overlay{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0,0,0,0.2);
+}
+
+.dynamicScaffold-confirm{
+  position: fixed;
+  top: 40px;
+  width: 100%;
+}
+
+.dynamicScaffold-confirm-inner{
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
+  border: 1px solid #ddd;
+  padding: 20px;
+  max-width: 380px;
+  width: 92%;
+  height: 140px;
+  margin: 0 auto;
+}
+
+.dynamicScaffold-confirm-message{
+  height: 68px;
+  font-size: 16px;
+}
+
+.dynamicScaffold-confirm-buttons{
+  text-align: right;
+}
+
+.dynamicScaffold-confirm-buttons .btn{
+  margin-left: 10px;
+}

data/app/assets/stylesheets/dynamic_scaffold/resplist.scss

@@ -0,0 +1,155 @@
+@charset "UTF-8";
+/*<ul id="access-list" class="resplist resplist-striped">
+  <li class="resplist-row">
+    <div class="resplist-heading">Some Title</div>
+    <div class="resplist-items">
+      <div class="resplist-item resplist-item-xs">
+        <div class="resplist-label">ID</div>
+        <div class="resplist-value">1</div>
+      </div>
+      <div class="resplist-item resplist-item-md">
+        <div class="resplist-label">Name</div>
+        <div class="resplist-value">Micheal Jackson</div>
+      </div>
+      <div class="resplist-item resplist-item-md">
+        <div class="resplist-label">Born</div>
+        <div class="resplist-value">1958/8/29</div>
+      </div>
+      <div class="resplist-item resplist-item-md">
+        <div class="resplist-label">Died</div>
+        <div class="resplist-value">2009/6/25</div>
+      </div>
+      <div class="resplist-item resplist-item-md">
+        <div class="resplist-label">Occupations</div>
+        <div class="resplist-value">Musician, singer-songwriter, arranger, dancer, entertainer, choreographer, actor, businessman, philanthropist</div>
+      </div>
+      <div class="resplist-item pull-right">
+        <div class="resplist-value">
+          <div class="btn-group">
+            <a href="#" class="btn btn-primary">編集</a>
+          </div>
+          <div class="btn-group">
+            <button class="btn btn-default up-button"><i class="icon-chevron-up"></i></button>
+            <button class="btn btn-default down-button"><i class="icon-chevron-down"></i></button>
+          </div>
+          <div class="btn-group">
+            <button type="submit" class="btn btn-danger delete-button"><i class="icon-remove"></i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="resplist-footer">Some Footer</div>
+  </li>
+</ul>*/
+.resplist-items:before, .resplist-item:before, .resplist-row:before, .resplist-items:after, .resplist-item:after, .resplist-row:after {
+  content: " ";
+  display: table;
+}
+.resplist-items:after, .resplist-item:after, .resplist-row:after {
+  clear: both;
+}
+
+ul.resplist {
+  list-style: none;
+  padding: 0;
+  border-collapse: separate;
+}
+
+.resplist-striped .resplist-row:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+
+.resplist-heading {
+  font-weight: bold;
+  padding: 8px 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-bottom: 1px dotted #dfdfdf;
+  max-width: 100%;
+}
+
+.resplist-footer {
+  padding: 8px 20px;
+}
+
+.resplist-label {
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 11px;
+  color: #888;
+  display: table;
+  padding: 0 20px;
+  height: 15px;
+  line-height: 15px;
+}
+
+.resplist-label-hidden {
+  background-color: transparent;
+}
+
+.resplist-value {
+  overflow: hidden;
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 0 20px;
+  height: 38px;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.resplist-label + .resplist-value {
+  height: 22px;
+  line-height: 22px;
+}
+
+.resplist-item {
+  float: left;
+  max-width: 100%;
+  margin: 8px 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.resplist-row {
+  background-color: #fff;
+  border-top: 1px solid #dddddd;
+  padding: 0;
+}
+
+.resplist-item-xs {
+  width: 60px;
+}
+
+.resplist-item-sm {
+  width: 120px;
+}
+
+.resplist-item-md {
+  width: 180px;
+}
+
+.resplist-item-lg {
+  width: 240px;
+}
+
+@media (max-width: 768px) {
+  .resplist-heading {
+    padding: 8px 12px;
+  }
+
+  .resplist-footer {
+    padding: 8px 12px;
+  }
+
+  .resplist-item {
+    margin: 4px 0;
+  }
+
+  .resplist-label {
+    padding: 0 12px;
+  }
+
+  .resplist-value {
+    padding: 0 12px;
+  }
+}

data/app/views/dynamic_scaffold/bootstrap/_edit.html.erb

@@ -0,0 +1 @@
+<%= render 'dynamic_scaffold/bootstrap/form', method: :patch, url: dynamic_scaffold_path(:update) %>