fixes import of JS dependencies

Gemfile

@@ -10,8 +10,6 @@ gem 'bootsnap'
 gem 'puma', '3.12.6'
 gem 'webpacker', '~> 5.x'
 
-# Use jquery as the JavaScript library
-gem 'jquery-rails'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.5'
 gem 'jbuilder_cache_multi'

Gemfile.lock

@@ -170,10 +170,6 @@ GEM
       activesupport (>= 5.0.0)
     jbuilder_cache_multi (0.1.0)
       jbuilder (>= 1.5.0, < 3)
-    jquery-rails (4.3.5)
-      rails-dom-testing (>= 1, < 3)
-      railties (>= 4.2.0)
-      thor (>= 0.14, < 2.0)
     json (2.3.1)
     jwt (2.2.1)
     kaminari (1.2.1)
@@ -447,7 +443,6 @@ DEPENDENCIES
   icalendar
   jbuilder (~> 2.5)
   jbuilder_cache_multi
-  jquery-rails
   json (>= 2.3.0)
   kaminari
   listen (~> 3.0.5)

app/frontend/packs/application.js

@@ -2,51 +2,49 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
 import 'jquery';
-import 'jquery_ujs';
+import {} from 'jquery-ujs';
 import 'bootstrap-sass';
-import 'polyfill';
+import '../src/javascript/lib/polyfill';
 import 'angular';
 import 'angular-cookies';
 import 'angular-resource';
 import 'angular-sanitize';
 import 'angular-touch';
-import '@uirouter/angularjs/release/angular-ui-router';
-import 'angular-ui-bootstrap/dist/ui-bootstrap-tpls';
-import 'ui-select/dist/select';
-import 'moment/moment';
-import 'moment-timezone/builds/moment-timezone-with-data-2012-2022';
-import 'angular-ui-calendar/src/calendar';
-import 'fullcalendar/dist/fullcalendar';
-import 'angular-moment/angular-moment';
-import 'ngUpload/ng-upload';
+import '@uirouter/angularjs';
+import 'angular-ui-bootstrap';
+import 'ui-select';
+import 'moment';
+import 'moment-timezone';
+import 'angular-ui-calendar';
+import 'fullcalendar';
+import 'angular-moment';
+import 'ngUpload';
 import 'jasny-bootstrap/js/fileinput';
-import 'holderjs/holder';
-import 'AngularDevise/lib/devise';
-import 'devise-modal';
-import 'angular-growl-v2/build/angular-growl';
-import 'angular-xeditable/dist/js/xeditable';
+import 'holderjs';
+import 'AngularDevise';
+import '../src/javascript/lib/devise-modal';
+import 'angular-growl-v2';
+import 'angular-xeditable';
 import 'checklist-model/checklist-model';
 import 'angular-unsavedchanges/lib/unsavedChanges';
 import 'angular-loading-bar/src/loading-bar';
 import 'angular-scroll/angular-scroll';
 import 'angular-google-analytics/dist/angular-google-analytics';
-import 'dirDisqus';
-import 'humanize';
+import '../src/javascript/lib/dirDisqus';
+import '../src/javascript/lib/humanize';
 import 'underscore/underscore';
 import 'elasticsearch-browser/elasticsearch.angular';
 import 'd3/d3';
 import 'nvd3/build/nv.d3.js';
 import 'twitter-fetcher';
-import 'app';
-import 'router';
 import 'medium-editor/dist/js/medium-editor';
 import 'angular-medium-editor/dist/angular-medium-editor';
 import 'bootstrap-switch/dist/js/bootstrap-switch.min';
 import 'angular-bootstrap-switch/dist/angular-bootstrap-switch.min';
 import 'angular-base64-upload/dist/angular-base64-upload.min';
-import 'summernote/src/js/summernote';
+import 'summernote';
 import 'angular-summernote/dist/angular-summernote';
-import 'summernote-ext-nugget';
+import '../src/javascript/lib/summernote-ext-nugget';
 import 'jquery-minicolors/jquery.minicolors.js';
 import 'angular-minicolors/angular-minicolors.js';
 import 'angular-translate/dist/angular-translate';
@@ -66,7 +64,7 @@ import 'angular-hotkeys/build/hotkeys';
 import 'hone/dist/hone';
 import 'tether/dist/js/tether';
 import 'angular-bind-html-compile/angular-bind-html-compile';
-import 'angular-ui-tour/dist/angular-ui-tour';
+import 'angular-ui-tour/app/angular-ui-tour';
 
 import '../src/javascript/app.js';
 import '../src/javascript/router.js.erb';

app/frontend/packs/application.scss

@@ -1,4 +1,3 @@
-
 @import '~ui-select/dist/select';
 @import '~fullcalendar/dist/fullcalendar';
 @import '~jasny-bootstrap/dist/css/jasny-bootstrap';

app/frontend/src/javascript/lib/polyfill.js

@@ -1,7 +1,7 @@
 if (typeof Object.assign !== 'function') {
   // Must be writable: true, enumerable: false, configurable: true
-  Object.defineProperty(Object, "assign", {
-    value: function assign(target, varArgs) { // .length of function is 2
+  Object.defineProperty(Object, 'assign', {
+    value: function assign (target, varArgs) { // .length of function is 2
       'use strict';
       if (target == null) { // TypeError if undefined or null
         throw new TypeError('Cannot convert undefined or null to object');
@@ -28,8 +28,8 @@ if (typeof Object.assign !== 'function') {
   });
 }
 
-Number.isInteger = Number.isInteger || function(value) {
+Number.isInteger = Number.isInteger || function (value) {
   return typeof value === 'number' &&
     isFinite(value) &&
     Math.floor(value) === value;
-};
+};

app/frontend/src/stylesheets/application.scss.erb

@@ -11,7 +11,16 @@
 @import "app.buttons";
 @import "app.components";
 @import "app.plugins";
-@import "modules/*";
+
+@import "modules/abuses";
+@import "modules/cookies";
+@import "modules/icalendar";
+@import "modules/invoice";
+@import "modules/members";
+@import "modules/settings";
+@import "modules/signup";
+@import "modules/stripe";
+@import "modules/tour";
 
 @import "app.responsive";
 

app/frontend/templates/profile/complete.html

@@ -36,11 +36,11 @@
             </div>
             <div class="row col-md-2 col-md-offset-5 hidden-sm hidden-xs" ng-hide="user.merged_at">
               <p class="font-felt fleche-left text-lg upper text-center">
-                <img src="arrow-left.png" class="fleche-left visible-lg visible-md fleche-left-from-top" />
+                <img src="../../images/arrow-left.png" class="fleche-left visible-lg visible-md fleche-left-from-top" />
                 <span class="or" translate>{{ 'app.logged.profile_completion.or' }}</span>
-                <img src="arrow-left.png" class="fleche-right visible-lg visible-md fleche-right-from-top" />
+                <img src="../../images/arrow-left.png" class="fleche-right visible-lg visible-md fleche-right-from-top" />
               </p>
-            </div>
+            </div>clear
             <div class="row">
                 <div class="col-md-6">
                     <div class="m-lg panel panel-default bg-light pos-rlt" ng-hide="hasDuplicate()">

app/frontend/templates/shared/_cart.html

@@ -4,7 +4,7 @@
   </div>
 
   <div class="widget-content no-bg auto wrapper" ng-show="events.reserved.length == 0 && (!events.paid || events.paid.length == 0)">
-    <p class="font-felt fleche-left text-lg"><img src="arrow-left.png" class="fleche-left visible-lg" />
+    <p class="font-felt fleche-left text-lg"><img src="../../images/arrow-left.png" class="fleche-left visible-lg" />
       {{ 'app.shared.cart.select_one_or_more_slots_in_the_calendar' | translate:{SINGLE:limitToOneSlot} }}</p>
   </div>
 
@@ -117,7 +117,7 @@
     </div>
 
     <div class="widget-content no-bg">
-      <p class="font-felt fleche-left text-lg"><img src="arrow-left.png" class="fleche-left visible-lg" />
+      <p class="font-felt fleche-left text-lg"><img src="../../images/arrow-left.png" class="fleche-left visible-lg" />
         {{ 'app.shared.cart.select_a_new_slot_in_the_calendar' | translate }}</p>
     </div>
 

app/frontend/templates/shared/_member_form.html

@@ -10,7 +10,7 @@
       <div class="form-group m-t-lg">
           <div class="fileinput text-center" data-provides="fileinput" ng-class="fileinputClass(user.profile.user_avatar.attachment_url)">
             <div class="fileinput-new thumbnail rounded thumb-128-wrapper" style="width: 140px; height: 140px;">
-              <img src="no_avatar.png" class="img-circle">
+              <img src="../../images/no_avatar.png" class="img-circle">
             </div>
             <div class="fileinput-preview fileinput-exists thumbnail rounded thumb-128-wrapper" data-trigger="fileinput" style="width: 140px; height: 140px; line-height: 140px;">
               <img ng-src="{{ user.profile.user_avatar.attachment_url }}" />
@@ -453,7 +453,7 @@
 
         <div class="form-group" ng-show="social.dailymotion || user.profile.dailymotion" ng-class="{'has-error': userForm['user[profile_attributes][dailymotion]'].$dirty && userForm['user[profile_attributes][dailymotion]'].$invalid}">
           <div class="input-group">
-            <span class="input-group-addon help-cursor" title="{{ 'app.shared.user.used_for_profile' | translate }}"><img src="social/dailymotion.png" alt="d" class="fa-img"/></span>
+            <span class="input-group-addon help-cursor" title="{{ 'app.shared.user.used_for_profile' | translate }}"><img src="../../images/social/dailymotion.png" alt="d" class="fa-img"/></span>
             <input type="text"
                    name="user[profile_attributes][dailymotion]"
                    ng-model="user.profile.dailymotion"
@@ -484,7 +484,7 @@
 
         <div class="form-group" ng-show="social.echosciences || user.profile.echosciences" ng-class="{'has-error': userForm['user[profile_attributes][echosciences]'].$dirty && userForm['user[profile_attributes][echosciences]'].$invalid}">
           <div class="input-group">
-            <span class="input-group-addon help-cursor" title="{{ 'app.shared.user.used_for_profile' | translate }}"><img src="social/echosciences.png" alt="d" class="fa-img"/></span>
+            <span class="input-group-addon help-cursor" title="{{ 'app.shared.user.used_for_profile' | translate }}"><img src="../../images/social/echosciences.png" alt="d" class="fa-img"/></span>
             <input type="text"
                    name="user[profile_attributes][echosciences]"
                    ng-model="user.profile.echosciences"
@@ -551,9 +551,9 @@
           <div ng-click="social.instagram = !social.instagram" ng-hide="social.instagram || user.profile.instagram"><i class="fa fa-instagram fa-2x"></i></div>
           <div ng-click="social.youtube = !social.youtube" ng-hide="social.youtube || user.profile.youtube"><i class="fa fa-youtube fa-2x"></i></div>
           <div ng-click="social.vimeo = !social.vimeo" ng-hide="social.vimeo || user.profile.vimeo"><i class="fa fa-vimeo fa-2x"></i></div>
-          <div ng-click="social.dailymotion = !social.dailymotion" ng-hide="social.dailymotion || user.profile.dailymotion"><img src="social/dailymotion.png" alt="d" class="fa-img contrast-250 fa-2x"/></div>
+          <div ng-click="social.dailymotion = !social.dailymotion" ng-hide="social.dailymotion || user.profile.dailymotion"><img src="../../images/social/dailymotion.png" alt="d" class="fa-img contrast-250 fa-2x"/></div>
           <div ng-click="social.github = !social.github" ng-hide="social.github || user.profile.github"><i class="fa fa-github fa-2x"></i></div>
-          <div ng-click="social.echosciences = !social.echosciences" ng-hide="social.echosciences || user.profile.echosciences"><img src="social/echosciences.png" alt="E" class="fa-img contrast-250 fa-2x"/></div>
+          <div ng-click="social.echosciences = !social.echosciences" ng-hide="social.echosciences || user.profile.echosciences"><img src="../../images/social/echosciences.png" alt="E" class="fa-img contrast-250 fa-2x"/></div>
           <div ng-click="social.pinterest = !social.pinterest" ng-hide="social.pinterest || user.profile.pinterest"><i class="fa fa-pinterest fa-2x"></i></div>
           <div ng-click="social.lastfm = !social.lastfm" ng-hide="social.lastfm || user.profile.lastfm"><i class="fa fa-lastfm fa-2x"></i></div>
           <div ng-click="social.flickr = !social.flickr" ng-hide="social.flickr || user.profile.flickr"><i class="fa fa-flickr fa-2x"></i></div>

app/frontend/templates/stripe/payment_modal.html

@@ -40,9 +40,9 @@
 
   <div class="modal-footer text-center">
     <i class="fa fa-lock fa-2x m-r-sm pos-rlt" style="top:7px; color:#9edd78;"></i>
-    <img src="powered_by_stripe.png" class="m-r-sm" />
-    <img src="mastercard.png" class="m-r-sm" />
-    <img src="visa.png" class="m-r-sm" />
+    <img src="../../images/powered_by_stripe.png" class="m-r-sm" />
+    <img src="../../images/mastercard.png" class="m-r-sm" />
+    <img src="../../images/visa.png" class="m-r-sm" />
   </div>
 
 

config/webpack/environment.js

@@ -1,16 +1,21 @@
 const { environment } = require('@rails/webpacker');
 const htmlErb = require('./loaders/html_erb');
 const jsErb = require('./loaders/js_erb');
+const sassErb = require('./loaders/sass_erb');
 const html = require('./loaders/html');
 const webpack = require('webpack');
 
 environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
   $: 'jquery',
-  jQuery: 'jquery'
+  jQuery: 'jquery',
+  'window.jQuery': 'jquery',
+  Hone: 'hone',
+  Tether: 'tether'
 }));
 
 environment.loaders.prepend('js.erb', jsErb);
 environment.loaders.prepend('html.erb', htmlErb);
+environment.loaders.prepend('sass-erb', sassErb);
 environment.loaders.append('html', html);
 
 environment.splitChunks();

config/webpack/loaders/sass_erb.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: /\.(scss|sass)\.erb$/,
+  enforce: 'pre',
+  exclude: /node_modules/,
+  loader: [
+    'rails-erb-loader',
+    'sass-loader'
+  ]
+};

package.json

@@ -73,6 +73,7 @@
     "jasny-bootstrap": "3.1",
     "jquery": ">=3.5.0",
     "jquery-minicolors": "^2.1.10",
+    "jquery-ujs": "^1.2.2",
     "medium-editor": "4.4.0",
     "moment": "2.22",
     "moment-timezone": "0.5",

yarn.lock

@@ -4769,11 +4769,23 @@ jquery-minicolors@^2.1.10:
   dependencies:
     jquery ">= 1.7.x"
 
+jquery-ujs@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jquery-ujs/-/jquery-ujs-1.2.2.tgz#6a8ef1020e6b6dda385b90a4bddc128c21c56397"
+  integrity sha1-ao7xAg5rbdo4W5CkvdwSjCHFY5c=
+  dependencies:
+    jquery ">=1.8.0"
+
 "jquery@>= 1.7.x", jquery@>=1.7.1, jquery@>=1.9.0, jquery@>=3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.0.tgz#9980b97d9e4194611c36530e7dc46a58d7340fc9"
   integrity sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==
 
+jquery@>=1.8.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
+  integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==
+
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"