2

I am creating one rails application with the latest version 6.1.3 and ruby version 2.7.2. I have one old theme and I want to integrate it into my application.

But somehow I can not able to integrate it successfully. Please check my error and integration steps below.

Error enter image description here

Integration

app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
require("./external/imagesloaded.min")
require("./external/isotope.min")
require("./external/simpleLightbox.min")
require("./external/theme")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

All custom theme js files store in app/javascript/packs/external

app/javascript/packs/external/theme.js

;(function($){
  "use strict"

  /*  Isotope Fillter js */
    console.log("file execute successfully");
    function gallery_isotope(){
    if ( $('.gallery_f_inner').length ){
      // Activate isotope in container
      $(".gallery_f_inner").imagesLoaded( function() {
        $(".gallery_f_inner").isotope({
          layoutMode: 'fitRows',
          animationOptions: {
            duration: 750,
            easing: 'linear'
          }
        });
      });

      // Add isotope click function
      $(".gallery_filter li").on('click',function(){
        $(".gallery_filter li").removeClass("active");
        $(this).addClass("active");

        var selector = $(this).attr("data-filter");
        $(".gallery_f_inner").isotope({
          filter: selector,
          animationOptions: {
            duration: 450,
            easing: "linear",
            queue: false,
          }
        });
        return false;
      });
    }
  }
  setTimeout(() => {
    gallery_isotope();
    $('.imageGallery1 .light').simpleLightbox();
  }, 800);

  /*  Simple LightBox js */
})(jQuery)

I tried this solution but I have 7 custom js files and each file in a minimum of 16 different kinds of functions so it's very tough to convert all js files manually.

Please guide me where I am wrong and suggest me a feasible solution. Thanks in Advance.

0 Answers0