Add swipe delete global doodads

app/assets/config/manifest.js

@@ -1,5 +1,6 @@
 //= link gems.js
 //= link jquery.js
+//= link libraries/swiped.min.js
 //= link_tree ../images
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js

app/assets/javascripts/libraries/swiped.min.js

@@ -0,0 +1 @@
+!function(){function t(t,e){document.addEventListener(t,function(t){a._elems.forEach(function(i){for(var n=t.target;n;){if(n===i.elem)return i[e](t),!1;n=n.parentNode}return!1})})}function e(){var t=[].shift.call(arguments),e=arguments[0];for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}var i=window.navigator.msPointerEnabled,n={start:i?"MSPointerDown":"touchstart",move:i?"MSPointerMove":"touchmove",end:i?"MSPointerUp":"touchend"},o=function(){var t=window.getComputedStyle(document.documentElement,""),e=(Array.prototype.slice.call(t).join("").match(/-(moz|webkit|ms)-/)||""===t.OLink&&["","o"])[1];return"-"+e+"-"}(),s=function(){var t,e=document.createElement("fakeelement"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(t in i)if(void 0!==e.style[t])return i[t]}(),r={transition:o+"transition",transform:o+"transform"},h=function(){},a=function(t){var i={duration:200,tolerance:50,time:200,dir:1,right:0,left:0};t=e(i,t||{}),this.duration=t.duration,this.tolerance=t.tolerance,this.time=t.time,this.width=t.left||t.right,this.elem=t.elem,this.list=t.list,this.dir=t.dir,this.group=t.group,this.id=a.elemId++,this.onOpen="function"==typeof t.onOpen?t.onOpen:h,this.onClose="function"==typeof t.onClose?t.onClose:h,this.right=t.right,this.left=t.left,(t.right>0&&t.tolerance>t.right||t.left>0&&t.tolerance>t.left)&&console.warn("tolerance must be less then left and right")};a._elems=[],a.groupCounter=0,a.elemId=0,a.init=function(t){a.groupCounter++;var i=document.querySelectorAll(t.query),n=[];return delete t.query,[].forEach.call(i,function(i){var o=e({elem:i,group:a.groupCounter},t);n.push(new a(o))}),a._bindEvents(),a._elems=a._elems.concat(n),1===n.length?n[0]:n},a._closeAll=function(t){a._elems.forEach(function(e){e.group===t&&e.close(!0)})},a.prototype.transitionEnd=function(t,e){function i(){e.call(n),t.removeEventListener(s,i)}var n=this;t.addEventListener(s,i)},a.prototype.touchStart=function(t){var e=t.changedTouches[0];1===t.touches.length&&(this.touchId=e.identifier,this.x=e.pageX,this.y=e.pageY,this.startTime=new Date,this.resetValue(),this.list?a._closeAll(this.group):this.close(!0))},a.prototype.touchMove=function(t){var e=t.changedTouches[0];this.isValidTouch(t)&&(this.delta=e.pageX-this.x,this.dir=this.delta<0?-1:1,this.width=this.delta<0?this.right:this.left,this.defineUserAction(e),this.startSwipe&&(this.move(),t.preventDefault()))},a.prototype.touchEnd=function(t){this.isValidTouch(t,!0)&&this.startSwipe&&(this.dir*this.delta>this.tolerance||new Date-this.startTime<this.time?this.open():this.close(),t.stopPropagation(),t.preventDefault())},a.prototype.open=function(t){this.animation(this.dir*this.width),this.swiped=!0,t||this.transitionEnd(this.elem,this.onOpen),this.resetValue()},a.prototype.close=function(t){this.animation(0),this.swiped=!1,t||this.transitionEnd(this.elem,this.onClose),this.resetValue()},a.prototype.toggle=function(){this.swiped?this.close():this.open()},a.prototype.resetValue=function(){this.startSwipe=!1,this.startScroll=!1,this.delta=0},a._bindEvents=function(){return a.eventBinded?!1:(t(n.move,"touchMove"),t(n.end,"touchEnd"),t(n.start,"touchStart"),void(a.eventBinded=!0))},a.prototype.defineUserAction=function(t){var e=10,i=10;Math.abs(this.y-t.pageY)>i&&!this.startSwipe?this.startScroll=!0:Math.abs(this.delta)>e&&!this.startScroll&&(this.startSwipe=!0)},a.prototype.isValidTouch=function(t,e){var i=e?"changedTouches":"targetTouches";return t[i][0].identifier===this.touchId},a.prototype.move=function(){if(this.dir>0&&(this.delta<0||0===this.left)||this.dir<0&&(this.delta>0||0===this.right))return!1;var t=Math.abs(this.delta);t>this.width&&(this.delta=this.dir*(this.width+(t-this.width)/8)),this.animation(this.delta,0)},a.prototype.animation=function(t,e){e=void 0===e?this.duration:e,this.elem.style.cssText=r.transition+":"+r.transform+" "+e+"ms; "+r.transform+":translate3d("+t+"px, 0px, 0px)"},a.prototype.destroy=function(t){var e=this.id;a._elems.forEach(function(t,i){t.id===e&&a._elems.splice(i,1)}),t&&this.elem.parentNode.removeChild(this.elem)},window.Swiped=a}();

app/javascript/application.js

@@ -1,2 +1 @@
-import 'controllers'
-import "@hotwired/turbo-rails"
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails

app/views/doodads/_doodad.html.haml

@@ -1,5 +1,5 @@
 - if policy(doodad).show?
-  .doodad
+  .doodad{class: "doodad-#{doodad.id}"}
     = doodad.body.html_safe
     - if policy(doodad).edit?
       = link_to 'Edit', edit_doodad_path(doodad)

app/views/layouts/_footer.html.haml

@@ -7,3 +7,27 @@
 .global-doodads
   %h1 Global Doodads
   = render collection: @global_doodads, partial: "doodads/doodad"
+
+:javascript
+  function destroyDoodad(doodad_id) {
+    return fetch("/doodads/" + doodad_id, {
+              method: 'DELETE',
+              headers: {
+              "Content-Type": "application/json",
+              "Accept": "application/json"
+              }
+              })
+      .then(response => response)
+  };
+  // var s2 = Swiped.init({     query: '.bar li',     list: true,     left: 200,     right: 200 });
+  var global_doodad_swiped = Swiped.init({ query: '.global-doodads .doodad',
+                list: true,
+                left: 200,
+                right: 200,
+                onOpen: function() {
+                        var doodad_id = this.elem.className.split("-")[1];
+                        destroyDoodad(doodad_id)
+                          .then(results => console.log(results));
+                        this.destroy(true)
+                    }
+                });

app/views/layouts/application.html.erb

@@ -10,6 +10,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'gems', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'libraries/swiped.min.js', 'data-turbolinks-track' => true %>
   <%= javascript_importmap_tags %>
   <%= csrf_meta_tags %>
   <%= yield :head %>

bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

config/importmap.rb

@@ -1,9 +1,3 @@
-pin 'application', preload: true
-pin 'jquery'
-pin '@hotwired/turbo-rails', to: "turbo.js"
-pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
-pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
-pin_all_from 'app/javascript/models', under: 'models'
-pin_all_from 'app/javascript/controllers', under: 'controllers'
-pin_all_from 'app/javascript/subscriptions', under: 'subscriptions'
-pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+# Pin npm packages by running ./bin/importmap
+
+pin "application", preload: true