From 3525a35c36f8643469355440c2125972a54b8982 Mon Sep 17 00:00:00 2001 From: "Jesse C. Fisher" Date: Tue, 26 Mar 2024 15:09:03 +0000 Subject: [PATCH] Add swipe delete global doodads --- app/assets/config/manifest.js | 1 + .../javascripts/libraries/swiped.min.js | 1 + app/javascript/application.js | 3 +-- app/views/doodads/_doodad.html.haml | 2 +- app/views/layouts/_footer.html.haml | 24 +++++++++++++++++++ app/views/layouts/application.html.erb | 1 + bin/importmap | 4 ++++ config/importmap.rb | 12 +++------- 8 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 app/assets/javascripts/libraries/swiped.min.js create mode 100755 bin/importmap diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 5832d412..31cdc5ab 100644 --- a/app/assets/config/manifest.js +++ b/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 diff --git a/app/assets/javascripts/libraries/swiped.min.js b/app/assets/javascripts/libraries/swiped.min.js new file mode 100644 index 00000000..235e3583 --- /dev/null +++ b/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.startTimei&&!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}(); \ No newline at end of file diff --git a/app/javascript/application.js b/app/javascript/application.js index d91508c8..beff742e 100644 --- a/app/javascript/application.js +++ b/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 diff --git a/app/views/doodads/_doodad.html.haml b/app/views/doodads/_doodad.html.haml index 64d6e352..fd1853fb 100644 --- a/app/views/doodads/_doodad.html.haml +++ b/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) diff --git a/app/views/layouts/_footer.html.haml b/app/views/layouts/_footer.html.haml index 7df36606..b011b46a 100644 --- a/app/views/layouts/_footer.html.haml +++ b/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) + } + }); diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 55c63a4e..c2484793 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,6 +10,7 @@ <%= 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 %> diff --git a/bin/importmap b/bin/importmap new file mode 100755 index 00000000..36502ab1 --- /dev/null +++ b/bin/importmap @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby + +require_relative "../config/application" +require "importmap/commands" diff --git a/config/importmap.rb b/config/importmap.rb index da7d9e3d..9d849852 100644 --- a/config/importmap.rb +++ b/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