vendredi 9 août 2019

How to convert javascript with define statements and module exports back to pure javascript?

Hi, I am trying to view a web page offline in a localhost environment. The site seems to be an https://emberjs.com/ based app that uses a bunch of define and export statements to organize the app functionality.

The thing is, I don't really need any of the app overhead since I already have the entire page downloaded (there are no links to other pages - all content is on one page) and therefore I just require the browser interaction. That is also to say I don't require ember on my local system. The reason I am using localhost is because some of the large assets are on a cloud storage site and the mechanism to retrieve those particular assets does not work with file:// protocol.

The web app seems rather complex and is way beyond my abilities to decipher and reverse engineer. I just know that for my goals, simply having the user interaction portions of the app (like playing audio file, video file, clicking through slideshows, etc) will suffice. I don't require any AJAX sort of interaction. Basically I just need the page to work similar to Chrome or Firefox Offline viewing.

So after downloading all the assets and replacing all remote links with local links, I saw that all the javascript is handled through two massive files: vendor.js and app.js.

Vendor.js is where various vendor components reside, like jquery. App.js is where the app is loaded and where all page interaction is scripted. If viewing the remote file in Chrome, it is able to build an entire source directory structure where I see all individual assets, but they are all mixed in to the massive vendor.js and app.js.

If I comment out the app.js include in the page's HTML, then there is no user interaction. I see all audio and video components but no reaction to me pressing play buttons (which all depend on audio/video js modules). If I include app.js then the page acts like it is loading for the first time and all the downloaded assets are basically wiped from the browser. That is, when I load the page as localhost/thepage.html I first see the fully downloaded page but then it refreshes and goes into the app initialization mode which amounts to blank page showing that it is trying to load the app, which in my case is not needed since I already downloaded the page after the app loaded...

That is where I am stuck. I can't figure out how to disintegrate the app overhead from the app's interaction code.

Looking in Chrome developer under sources, here is what a typical page interaction module looks like:

define('theapp/mixins/av-players', ['exports', 'ember'], function (exports, _ember) {
  exports['default'] = _ember['default'].Mixin.create({
    startAV: function startAV() {
      var mainPanel = $('.main-panel'),
          video = $('.video-player').get(0),
          video_player = $('.video-player .player').get(0),
          audio = $('.audio-player .player').get(0),
          seek = $('.audio-player .audio-controls #player-seek'),
          volume = $('.audio-player #player-vol'),
          timeCode = $('.audio-player .audio-timecode'),
          controls = $('.audio-controls > i, .audio-controls > label').not('.fa-retweet'),
          repeatBtn = $('.audio-controls > .fa-retweet'),
          player = $('.audio-player'),
          title = $('.header .current-course-topic'),
          lesson = $('.audio-player .topic-title');

      if ($.isMobile) {
        $('.video-player .fa-chevron-circle-right').addClass('ipad-control');
      }

      $(document).on('click', '.track-handle', $.proxy(this.playAudioFromOb, { lesson: lesson, video: video, video_player: video_player, audio: audio, controls: controls, player: player })).on('click', '.audio-asset', $.proxy(this.playAudioFromOb, { lesson: lesson, video: video, video_player: video_player, audio: audio, controls: controls, player: player })).on('click', '.video-asset', $.proxy(this.playVideoFromOb, { audio: audio, player: player, video: video, video_player: video_player })).on('click', '.video-player .fa-chevron-circle-right', $.proxy(this.minmaxVideoPlayer, { video: video, video_player: video_player, mainPanel: mainPanel })).on('click', '.video-player .fa-play-circle', $.proxy(this.videoPlayAction, { video_player: video_player })).on('click', '.video-player .fa-pause', $.proxy(this.videoPauseAction, { video_player: video_player })).on('click', '.video-player .fa-times-circle', $.proxy(this.closeVideoPlayer, { video: video, video_player: video_player }));

Plus a whole bunch of other code, but you get the point: these interaction modules are what I need to strip from the app.js and just reduce everything down to these modules.

I am not sure if I really need these define constructs, which is why I was thinking that if I could find the needed modules in Chrome's sources view, I could just create another app.js with just the needed module code, no exports, or any other unnecessary complications, but at same time I really just want to see what you all recommend in terms of procedure.

So in summary, I am expecting to view my downloaded page and to interact with various modules on the page such as audio and video players. What I am getting instead is a page that thinks the app has to load from scratch and is therefore ignoring everything that is already on the page...




Aucun commentaire:

Enregistrer un commentaire