migrate from asset pipeline to webpacker

- migrated images
- ongoing stylesheets migration

app/assets/javascripts/directives/socialLink.js.erb

@@ -19,10 +19,10 @@ Application.Directives.directive('socialLink', [ function () {
     templateUrl: '<%= asset_path "shared/_social_link.html" %>',
     link (scope, element, attributes) {
       if (scope.network === 'dailymotion') {
-        scope.image = "<%= asset_path('social/dailymotion.png') %>";
+        scope.image = "<%= asset_pack_path('social/dailymotion.png') %>";
         return scope.altText = 'd';
       } else if (scope.network === 'echosciences') {
-        scope.image = "<%= asset_path('social/echosciences.png') %>";
+        scope.image = "<%= asset_pack_path('social/echosciences.png') %>";
         return scope.altText = 'E)';
       } else {
         if (scope.network === 'website') {

app/assets/templates/profile/complete.html.erb

@@ -36,9 +36,9 @@
             </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">
-                <%= image_tag("fleche-left.png", class: 'fleche-left visible-lg visible-md fleche-left-from-top') %>
+                <%= image_pack_tag("arrow-left.png", class: 'fleche-left visible-lg visible-md fleche-left-from-top') %>
                 <span class="or" translate>{{ 'app.logged.profile_completion.or' }}</span>
-                <%= image_tag("fleche-left.png", class: 'fleche-right visible-lg visible-md fleche-right-from-top') %>
+                <%= image_pack_tag("arrow-left.png", class: 'fleche-right visible-lg visible-md fleche-right-from-top') %>
               </p>
             </div>
             <div class="row">

app/assets/templates/shared/_cart.html.erb

@@ -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"><%= image_tag('fleche-left.png', class: 'fleche-left visible-lg') %>
+    <p class="font-felt fleche-left text-lg"><%= image_pack_tag('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"><%= image_tag('fleche-left.png', class: 'fleche-left visible-lg') %>
+      <p class="font-felt fleche-left text-lg"><%= image_pack_tag('arrow-left.png', class: 'fleche-left visible-lg') %>
         {{ 'app.shared.cart.select_a_new_slot_in_the_calendar' | translate }}</p>
     </div>
 

app/assets/templates/shared/_member_form.html.erb

@@ -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="<%= image_path("no_avatar.png") %>" class="img-circle">
+              <img src="<%= image_pack_path("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="<%= asset_path('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="<%= asset_pack_path('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="<%= asset_path('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="<%= asset_pack_path('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="<%= asset_path('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="<%= asset_pack_path('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="<%= asset_path('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="<%= asset_pack_path('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/assets/templates/shared/_user_avatar.html.erb

@@ -1,4 +1,4 @@
-<img ng-src="<%= image_path("no_avatar.png") %>" class="img-circle" ng-class="avatarClass"
+<img ng-src="<%= image_pack_path("no_avatar.png") %>" class="img-circle" ng-class="avatarClass"
      ng-if="!userAvatar || !userAvatar.attachment_url">
 <img ng-src="{{userAvatar.attachment_url}}" class="img-circle" ng-class="avatarClass"
      ng-if="userAvatar.attachment_url">

app/assets/templates/stripe/payment_modal.html.erb

@@ -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>
-    <%= image_tag("powered_by_stripe.png", class: 'm-r-sm') %>
-    <%= image_tag("mastercard.png", class: 'm-r-sm') %>
-    <%= image_tag("visa.png", class: 'm-r-sm') %>
+    <%= image_pack_tag("powered_by_stripe.png", class: 'm-r-sm') %>
+    <%= image_pack_tag("mastercard.png", class: 'm-r-sm') %>
+    <%= image_pack_tag("visa.png", class: 'm-r-sm') %>
   </div>
 
 

app/javascript/packs/application.js

@@ -1,18 +1,7 @@
-/* eslint no-console:0 */
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-//
-// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
-// layout file, like app/views/layouts/application.html.erb
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
 
+import '../stylesheets/application.scss.erb';
 
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
-
-console.log('Hello World from Webpacker')
+const images = require.context('../images', true);
+const imagePath = (name) => images(name, true);

app/views/layouts/notifications_mailer.html.erb

@@ -25,7 +25,7 @@
                 <% if CustomAsset.get_url('logo-file') %>
                   <a href="<%= root_url %>"><img src="<%= root_url + CustomAsset.get_url('logo-file') %>" alt="<%=fablab_name%>" width="140px;"></a>
                 <% else %>
-                  <a href="<%= root_url %>"><img src="<%= root_url + image_url('fablab-logo.png') %>" alt="<%=fablab_name%>" width="140px;"></a>
+                  <a href="<%= root_url %>"><img src="<%= root_url + image_pack_url('fabmanager-logo.png') %>" alt="<%=fablab_name%>" width="140px;"></a>
                 <% end %>
               </td>
             </tr>