froala-audio - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

froala-audio.js

@@ -1,3 +0,8 @@
-(function($, _) {
+'use strict';
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+(function ($, _) {
   'use strict';
+
   $.extend($.FE.POPUP_TEMPLATES, {
@@ -20,17 +25,14 @@ 'audio.insert': '[_BUTTONS_][_BY_URL_LAYER_][_UPLOAD_LAYER_][_PROGRESS_BAR_]',
 
-  $.FE.PLUGINS.audio = function(editor) {
-    const MISSING_LINK = 1;
-    const ERROR_DURING_UPLOAD = 2;
-    const BAD_RESPONSE = 4;
-    const BAD_FILE_TYPE = 8;
+  $.FE.PLUGINS.audio = function (editor) {
+    var _errorMessages;
 
-    const errorMessages = {
-      [MISSING_LINK]: 'No link in upload response.',
-      [ERROR_DURING_UPLOAD]: 'Error during file upload.',
-      [BAD_RESPONSE]: 'Parsing response failed.',
-      [BAD_FILE_TYPE]: 'Unsupported file type - please provide an audio file.',
-    };
+    var MISSING_LINK = 1;
+    var ERROR_DURING_UPLOAD = 2;
+    var BAD_RESPONSE = 4;
+    var BAD_FILE_TYPE = 8;
 
-    let currentAudio = null;
-    const stopEditing = function(audio) {
+    var errorMessages = (_errorMessages = {}, _defineProperty(_errorMessages, MISSING_LINK, 'No link in upload response.'), _defineProperty(_errorMessages, ERROR_DURING_UPLOAD, 'Error during file upload.'), _defineProperty(_errorMessages, BAD_RESPONSE, 'Parsing response failed.'), _defineProperty(_errorMessages, BAD_FILE_TYPE, 'Unsupported file type - please provide an audio file.'), _errorMessages);
+
+    var currentAudio = null;
+    var stopEditing = function stopEditing(audio) {
       if (!audio) audio = editor.$el.find('.fr-audio');
@@ -43,5 +45,5 @@ if (!audio.length) return;
 
-    const bindInsertEvents = function($popup) {
+    var bindInsertEvents = function bindInsertEvents($popup) {
       // Drag over the droppable area.
-      editor.events.$on($popup, 'dragover dragenter', '.fr-audio-upload-layer', function() {
+      editor.events.$on($popup, 'dragover dragenter', '.fr-audio-upload-layer', function () {
         $(this).addClass('fr-drop');
@@ -52,3 +54,3 @@ return false;
       // Drag end.
-      editor.events.$on($popup, 'dragleave dragend', '.fr-audio-upload-layer', function() {
+      editor.events.$on($popup, 'dragleave dragend', '.fr-audio-upload-layer', function () {
         $(this).removeClass('fr-drop');
@@ -59,3 +61,3 @@ return false;
       // Drop.
-      editor.events.$on($popup, 'drop', '.fr-audio-upload-layer', function(e) {
+      editor.events.$on($popup, 'drop', '.fr-audio-upload-layer', function (e) {
         e.preventDefault();
@@ -66,6 +68,6 @@ e.stopPropagation();
 
-        const dt = e.originalEvent.dataTransfer;
+        var dt = e.originalEvent.dataTransfer;
 
         if (dt && dt.files) {
-          const inst = $popup.data('instance') || editor;
+          var inst = $popup.data('instance') || editor;
           inst.events.disableBlur();
@@ -78,3 +80,3 @@ inst.audio.upload(dt.files);
       if (editor.helpers.isIOS()) {
-        editor.events.$on($popup, 'touchstart', '.fr-audio-upload-layer input[type="file"]', function() {
+        editor.events.$on($popup, 'touchstart', '.fr-audio-upload-layer input[type="file"]', function () {
           $(this).trigger('click');
@@ -84,5 +86,5 @@ }, true);
 
-      editor.events.$on($popup, 'change', '.fr-audio-upload-layer input[type="file"]', function() {
+      editor.events.$on($popup, 'change', '.fr-audio-upload-layer input[type="file"]', function () {
         if (this.files) {
-          const inst = $popup.data('instance') || editor;
+          var inst = $popup.data('instance') || editor;
           inst.events.disableBlur();
@@ -100,5 +102,5 @@ $popup.find('input:focus').blur();
 
-    const refreshInsertPopup = function() {
-      const $popup = editor.popups.get('audio.insert');
-      const $inputs = $popup.find('input, button');
+    var refreshInsertPopup = function refreshInsertPopup() {
+      var $popup = editor.popups.get('audio.insert');
+      var $inputs = $popup.find('input, button');
       $inputs.prop('disabled', false).val('').trigger('change');
@@ -108,42 +110,20 @@ };
     /* eslint-disable camelcase */
-    const initInsertPopup = function() {
+    var initInsertPopup = function initInsertPopup() {
       editor.popups.onRefresh('audio.insert', refreshInsertPopup);
       editor.popups.onHide('audio.insert', editor.audio.hideProgressBar);
 
-      let buttonSpec = editor.opts.audioInsertButtons;
+      var buttonSpec = editor.opts.audioInsertButtons;
       if (!editor.opts.audioUpload) buttonSpec = _.omit(buttonSpec, 'audioUpload');
-      const buttons = buttonSpec.length < 2 ? '' : `<div class="fr-buttons">
-                ${editor.button.buildList(buttonSpec)}
-            </div>`;
+      var buttons = buttonSpec.length < 2 ? '' : '<div class="fr-buttons">\n                ' + editor.button.buildList(buttonSpec) + '\n            </div>';
 
-      const by_url_layer = `<div class="fr-audio-by-url-layer fr-layer" id="fr-audio-by-url-layer-${editor.id}">
-                <div class="fr-input-line">
-                    <input id="fr-audio-by-url-layer-text-${editor.id}" type="text" placeholder="${editor.language.translate('Paste in an audio URL')}" tabIndex="1" aria-required="true" />
-                </div>
-                <div class="fr-action-buttons">
-                    <button type="button" class="fr-command fr-submit" data-cmd="audioInsertByURL" tabIndex="2" role="button">${editor.language.translate('Insert')}</button>
-                </div>
-            </div>`;
+      var by_url_layer = '<div class="fr-audio-by-url-layer fr-layer" id="fr-audio-by-url-layer-' + editor.id + '">\n                <div class="fr-input-line">\n                    <input id="fr-audio-by-url-layer-text-' + editor.id + '" type="text" placeholder="' + editor.language.translate('Paste in an audio URL') + '" tabIndex="1" aria-required="true" />\n                </div>\n                <div class="fr-action-buttons">\n                    <button type="button" class="fr-command fr-submit" data-cmd="audioInsertByURL" tabIndex="2" role="button">' + editor.language.translate('Insert') + '</button>\n                </div>\n            </div>';
 
-      const accept = editor.opts.audioAllowedTypes.map(t => 'audio/' + t).join(',');
-      const upload_layer = `<div class="fr-audio-upload-layer fr-file-upload-layer fr-layer" id="fr-audio-upload-layer-${editor.id}">
-                <strong>${editor.language.translate('Drop audio')}</strong><br />(${editor.language.translate('or click')})
-                <div class="fr-form">
-                    <input type="file" accept="${accept}" tabIndex="-1" aria-labelledby="fr-audio-upload-layer-${editor.id}" role="button" />
-                </div>
-            </div>`;
+      var accept = editor.opts.audioAllowedTypes.map(function (t) {
+        return 'audio/' + t;
+      }).join(',');
+      var upload_layer = '<div class="fr-audio-upload-layer fr-file-upload-layer fr-layer" id="fr-audio-upload-layer-' + editor.id + '">\n                <strong>' + editor.language.translate('Drop audio') + '</strong><br />(' + editor.language.translate('or click') + ')\n                <div class="fr-form">\n                    <input type="file" accept="' + accept + '" tabIndex="-1" aria-labelledby="fr-audio-upload-layer-' + editor.id + '" role="button" />\n                </div>\n            </div>';
 
-      const progress_bar = `<div class="fr-audio-progress-bar-layer fr-layer">
-                <h3 tabIndex="-1" class="fr-message">${editor.language.translate('Uploading')}</h3>
-                <div class="fr-loader">
-                    <span class="fr-progress"></span>
-                </div>
-                <div class="fr-action-buttons">
-                    <button type="button" class="fr-command fr-dismiss" data-cmd="audioDismissError" tabIndex="2" role="button">
-                        ${editor.language.translate('OK')}
-                    </button>
-                </div>
-            </div>`;
+      var progress_bar = '<div class="fr-audio-progress-bar-layer fr-layer">\n                <h3 tabIndex="-1" class="fr-message">' + editor.language.translate('Uploading') + '</h3>\n                <div class="fr-loader">\n                    <span class="fr-progress"></span>\n                </div>\n                <div class="fr-action-buttons">\n                    <button type="button" class="fr-command fr-dismiss" data-cmd="audioDismissError" tabIndex="2" role="button">\n                        ' + editor.language.translate('OK') + '\n                    </button>\n                </div>\n            </div>';
 
-      const $popup = editor.popups.create('audio.insert', {buttons, by_url_layer, upload_layer, progress_bar});
+      var $popup = editor.popups.create('audio.insert', { buttons: buttons, by_url_layer: by_url_layer, upload_layer: upload_layer, progress_bar: progress_bar });
       bindInsertEvents($popup);
@@ -153,13 +133,11 @@ return $popup;
 
-    const initEditPopup = function() {
-      const buttonSpec = editor.opts.audioEditButtons;
-      const buttons = buttonSpec.length < 1 ? '' : `<div class="fr-buttons">
-                ${editor.button.buildList(buttonSpec)}
-            </div>`;
-      return editor.popups.create('audio.edit', {buttons});
+    var initEditPopup = function initEditPopup() {
+      var buttonSpec = editor.opts.audioEditButtons;
+      var buttons = buttonSpec.length < 1 ? '' : '<div class="fr-buttons">\n                ' + editor.button.buildList(buttonSpec) + '\n            </div>';
+      return editor.popups.create('audio.edit', { buttons: buttons });
     };
     /* eslint-enable camelcase */
 
-    const showProgressBar = function(message) {
-      const $popup = editor.popups.get('audio.insert') || initInsertPopup();
+    var showProgressBar = function showProgressBar(message) {
+      var $popup = editor.popups.get('audio.insert') || initInsertPopup();
 
@@ -173,9 +151,8 @@ $popup.find('.fr-layer.fr-active').removeClass('fr-active').addClass('fr-pactive');
 
-
-    const showErrorMessage = function(message) {
+    var showErrorMessage = function showErrorMessage(message) {
       showProgressBar();
-      const $popup = editor.popups.get('audio.insert');
-      const $layer = $popup.find('.fr-audio-progress-bar-layer');
+      var $popup = editor.popups.get('audio.insert');
+      var $layer = $popup.find('.fr-audio-progress-bar-layer');
       $layer.addClass('fr-error');
-      const $messageHeader = $layer.find('h3');
+      var $messageHeader = $layer.find('h3');
       $messageHeader.text(editor.language.translate(message));
@@ -186,13 +163,13 @@ editor.events.disableBlur();
 
-    const throwError = function(code, response) {
+    var throwError = function throwError(code, response) {
       editor.edit.on();
       showErrorMessage(errorMessages[code]);
-      editor.events.trigger('audio.error', [{code, message: errorMessages[code]}, response]);
+      editor.events.trigger('audio.error', [{ code: code, message: errorMessages[code] }, response]);
     };
 
-    const showProgressMessage = function(message, progress) {
-      const $popup = editor.popups.get('audio.insert');
+    var showProgressMessage = function showProgressMessage(message, progress) {
+      var $popup = editor.popups.get('audio.insert');
       if (!$popup) return;
 
-      const $layer = $popup.find('.fr-audio-progress-bar-layer');
+      var $layer = $popup.find('.fr-audio-progress-bar-layer');
       $layer.find('h3').text(editor.language.translate(message) + (progress ? ' ' + progress + '%' : ''));
@@ -209,3 +186,3 @@ $layer.removeClass('fr-error');
 
-    const parseResponse = function(response) {
+    var parseResponse = function parseResponse(response) {
       if (editor.events.trigger('audio.uploaded', [response], true) === false) {
@@ -216,3 +193,3 @@ editor.edit.on();
 
-      const res = JSON.parse(response);
+      var res = JSON.parse(response);
       if (res.link) return res;
@@ -223,7 +200,5 @@ throwError(MISSING_LINK, response);
 
-    const addNewAudio = function(src, data) {
+    var addNewAudio = function addNewAudio(src, data) {
       if (!data) data = {};
-      const $audio = $('<span contenteditable="false" draggable="true" class="fr-audio fr-uploading">' +
-                '<audio controls="controls" controlsList="nodownload"></audio>' +
-            '</span>');
+      var $audio = $('<span contenteditable="false" draggable="true" class="fr-audio fr-uploading">' + '<audio controls="controls" controlsList="nodownload"></audio>' + '</span>');
       $audio.toggleClass('fr-draggable', editor.opts.audioMove);
@@ -243,3 +218,3 @@
       editor.html.wrap();
-      const $marker = editor.$el.find('.fr-marker');
+      var $marker = editor.$el.find('.fr-marker');
 
@@ -254,17 +229,14 @@ // Do not insert audio inside emoticon.
 
-      const player = $audio.find('audio');
-      player
-        .text(editor.language.translate('Your browser does not support HTML5 audio.'))
-        .on('canplaythrough loadeddata', function() {
-          editor.popups.hide('audio.insert');
-          $audio.removeClass('fr-uploading');
-          editor.events.trigger('audio.loaded', [$audio]);
-        })
-        .on('error', function(e) {
-          editor.popups.hide('audio.insert');
-          $audio.addClass('fr-error').removeClass('fr-uploading');
-          editor.events.trigger('audio.error', [$audio, e]);
-        })
-        .attr(_.mapKeys(data, (v, k) => 'data-' + _.kebabCase(k)))
-        .attr({src});
+      var player = $audio.find('audio');
+      player.text(editor.language.translate('Your browser does not support HTML5 audio.')).on('canplaythrough loadeddata', function () {
+        editor.popups.hide('audio.insert');
+        $audio.removeClass('fr-uploading');
+        editor.events.trigger('audio.loaded', [$audio]);
+      }).on('error', function (e) {
+        editor.popups.hide('audio.insert');
+        $audio.addClass('fr-error').removeClass('fr-uploading');
+        editor.events.trigger('audio.error', [$audio, e]);
+      }).attr(_.mapKeys(data, function (v, k) {
+        return 'data-' + _.kebabCase(k);
+      })).attr({ src: src });
 
@@ -274,27 +246,22 @@ return $audio;
 
-    const replaceAudio = function($audio, src) {
-      const player = $audio.find('audio');
+    var replaceAudio = function replaceAudio($audio, src) {
+      var player = $audio.find('audio');
       // If you try to replace it with itself, we clear the src first so that the events still fire.
-      if (player.attr('src') === src) player.attr({src: ''});
+      if (player.attr('src') === src) player.attr({ src: '' });
 
       $audio.addClass('fr-uploading');
-      player
-        .off('canplaythrough loadeddata')
-        .off('error')
-        .on('canplaythrough loadeddata', function() {
-          editor.popups.hide('audio.insert');
-          $audio.removeClass('fr-uploading');
-          editor.events.trigger('audio.loaded', [$audio]);
-          stopEditing($audio);
-        })
-        .on('error', function(e) {
-          $audio.addClass('fr-error').removeClass('fr-uploading');
-          editor.audio.showEditPopup($audio);
-          editor.events.trigger('audio.error', [$audio, e]);
-        })
-        .attr({src});
+      player.off('canplaythrough loadeddata').off('error').on('canplaythrough loadeddata', function () {
+        editor.popups.hide('audio.insert');
+        $audio.removeClass('fr-uploading');
+        editor.events.trigger('audio.loaded', [$audio]);
+        stopEditing($audio);
+      }).on('error', function (e) {
+        $audio.addClass('fr-error').removeClass('fr-uploading');
+        editor.audio.showEditPopup($audio);
+        editor.events.trigger('audio.error', [$audio, e]);
+      }).attr({ src: src });
       return $audio;
     };
 
-    const insertHtmlAudio = function(link, data) {
+    var insertHtmlAudio = function insertHtmlAudio(link, data) {
       editor.edit.on();
@@ -304,4 +271,4 @@ showProgressMessage('Loading audio');
 
-      const replace = !!currentAudio;
-      const $audio = replace ? replaceAudio(currentAudio, link) : addNewAudio(link, data);
+      var replace = !!currentAudio;
+      var $audio = replace ? replaceAudio(currentAudio, link) : addNewAudio(link, data);
 
@@ -312,5 +279,5 @@ editor.undo.saveStep();
 
-    let touchScroll = false;
-    const editAudio = function(e) {
-      const $audio = $(this);
+    var touchScroll = false;
+    var editAudio = function editAudio(e) {
+      var $audio = $(this);
       if (touchScroll && e && e.type === 'touchend') {
@@ -343,3 +310,3 @@ return true;
       editor.selection.clear();
-      const range = editor.doc.createRange();
+      var range = editor.doc.createRange();
       range.selectNode($audio[0]);
@@ -353,26 +320,28 @@ editor.selection.get().addRange(range);
     return {
-      _init() {
+      _init: function _init() {
         if (editor.helpers.isMobile()) {
-          editor.events.$on(editor.$el, 'touchstart', 'span.fr-audio', function() {
+          editor.events.$on(editor.$el, 'touchstart', 'span.fr-audio', function () {
             touchScroll = false;
           });
 
-          editor.events.$on(editor.$el, 'touchmove', function() {
+          editor.events.$on(editor.$el, 'touchmove', function () {
             touchScroll = true;
           });
         }
-        editor.events.$on(editor.$el, 'mousedown', 'span.fr-audio', function(e) {
+        editor.events.$on(editor.$el, 'mousedown', 'span.fr-audio', function (e) {
           e.stopPropagation();
         });
         editor.events.$on(editor.$el, 'click touchend', 'span.fr-audio', editAudio);
-        editor.events.on('mouseup window.mouseup', () => stopEditing());
-        editor.events.on('commands.mousedown', function($btn) {
+        editor.events.on('mouseup window.mouseup', function () {
+          return stopEditing();
+        });
+        editor.events.on('commands.mousedown', function ($btn) {
           if ($btn.parents('.fr-toolbar').length) stopEditing();
         });
       },
-      showInsertPopup() {
+      showInsertPopup: function showInsertPopup() {
         if (!editor.popups.get('audio.insert')) initInsertPopup();
 
         // Find the first button and show its associated layer.
-        editor.opts.audioInsertButtons.some(function(b) {
+        editor.opts.audioInsertButtons.some(function (b) {
           if (b === 'audioByURL') {
@@ -389,4 +358,4 @@ editor.audio.showLayer('audio-by-url');
       },
-      showEditPopup($audio) {
-        const $popup = 'audio.edit';
+      showEditPopup: function showEditPopup($audio) {
+        var $popup = 'audio.edit';
         if (!editor.popups.get($popup)) initEditPopup();
@@ -396,11 +365,14 @@ editor.popups.setContainer($popup, editor.$sc);
 
-        const $player = $audio.find('audio');
-        const {left, top} = $player.offset();
-        const height = $player.outerHeight();
+        var $player = $audio.find('audio');
 
+        var _$player$offset = $player.offset(),
+            left = _$player$offset.left,
+            top = _$player$offset.top;
+
+        var height = $player.outerHeight();
+
         editor.popups.show($popup, left + $player.outerWidth() / 2, top + height, height);
       },
-
-      refreshByURLButton($btn) {
-        const $popup = editor.popups.get('audio.insert');
+      refreshByURLButton: function refreshByURLButton($btn) {
+        var $popup = editor.popups.get('audio.insert');
         if ($popup.find('.fr-audio-by-url-layer').hasClass('fr-active')) {
@@ -410,4 +382,4 @@ $btn.addClass('fr-active').attr('aria-pressed', true);
       },
-      refreshUploadButton($btn) {
-        const $popup = editor.popups.get('audio.insert');
+      refreshUploadButton: function refreshUploadButton($btn) {
+        var $popup = editor.popups.get('audio.insert');
         if ($popup.find('.fr-audio-upload-layer').hasClass('fr-active')) {
@@ -417,8 +389,7 @@ $btn.addClass('fr-active').attr('aria-pressed', true);
       },
-
-      align(val) {
+      align: function align(val) {
         if (!currentAudio) return false;
         // Center is the default, so just clear the alignment if that's what was requested.
         if (val === 'center') val = '';
-        currentAudio.css({textAlign: val});
+        currentAudio.css({ textAlign: val });
         // Changing the alignment will almost certainly move the actual audio player away from the edit popup,
@@ -428,15 +399,14 @@ // so we re-display the popup to get them back in sync.
       },
-      refreshAlignButton($btn) {
+      refreshAlignButton: function refreshAlignButton($btn) {
         if (!currentAudio) return false;
-        const align = currentAudio.css('textAlign') || 'center';
+        var align = currentAudio.css('textAlign') || 'center';
         // This is copied from how the video plugin does it. Yes, it's gross.
         $btn.children(':first').replaceWith(editor.icon.create('audioAlign' + _.capitalize(align)));
       },
-      refreshAlignDropdown($btn, $dropdown) {
+      refreshAlignDropdown: function refreshAlignDropdown($btn, $dropdown) {
         if (!currentAudio) return;
-        const align = currentAudio.css('textAlign') || 'center';
-        $dropdown.find(`.fr-command[data-param1="${align}"]`).addClass('fr-active').attr('aria-selected', true);
+        var align = currentAudio.css('textAlign') || 'center';
+        $dropdown.find('.fr-command[data-param1="' + align + '"]').addClass('fr-active').attr('aria-selected', true);
       },
-
-      back() {
+      back: function back() {
         if (currentAudio) {
@@ -453,18 +423,19 @@ editor.audio.showEditPopup(currentAudio);
       },
-      refreshBackButton($btn) {
-        const showBack = currentAudio || editor.opts.toolbarInline;
+      refreshBackButton: function refreshBackButton($btn) {
+        var showBack = currentAudio || editor.opts.toolbarInline;
         $btn.toggleClass('fr-hidden', !showBack);
         $btn.next('.fr-separator').toggleClass('fr-hidden', !showBack);
       },
-
-      showLayer(name) {
-        const $popup = editor.popups.get('audio.insert');
+      showLayer: function showLayer(name) {
+        var $popup = editor.popups.get('audio.insert');
         editor.popups.setContainer('audio.insert', currentAudio ? editor.$sc : editor.$tb);
 
-        let left, top, height = 0;
+        var left = void 0,
+            top = void 0,
+            height = 0;
         if (currentAudio) {
-          const $player = currentAudio.find('audio');
+          var $player = currentAudio.find('audio');
           height = $player.outerHeight();
 
-          const offset = $player.offset();
+          var offset = $player.offset();
           left = offset.left + $player.width() / 2;
@@ -479,6 +450,6 @@ top = offset.top + height;
         } else {
-          const $btn = editor.$tb.find('.fr-command[data-cmd="insertAudio"]');
-          const offset = $btn.offset();
-          left = offset.left + $btn.outerWidth() / 2;
-          top = offset.top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);
+          var $btn = editor.$tb.find('.fr-command[data-cmd="insertAudio"]');
+          var _offset = $btn.offset();
+          left = _offset.left + $btn.outerWidth() / 2;
+          top = _offset.top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);
         }
@@ -493,5 +464,4 @@
       },
-
-      hideProgressBar(dismiss) {
-        const $popup = editor.popups.get('audio.insert');
+      hideProgressBar: function hideProgressBar(dismiss) {
+        var $popup = editor.popups.get('audio.insert');
         if (!$popup) return;
@@ -504,3 +474,3 @@
         // Dismiss error message.
-        const audios = editor.$el.find('audio.fr-error');
+        var audios = editor.$el.find('audio.fr-error');
         if (dismiss || audios.length) {
@@ -519,8 +489,7 @@ editor.events.focus();
       },
-
-      insertByURL(link) {
+      insertByURL: function insertByURL(link) {
         if (!link) {
-          const $popup = editor.popups.get('audio.insert');
+          var $popup = editor.popups.get('audio.insert');
           link = ($popup.find('.fr-audio-by-url-layer input[type="text"]').val() || '').trim();
-          $popup.find('input, button').prop({disabled: true});
+          $popup.find('input, button').prop({ disabled: true });
         }
@@ -531,3 +500,3 @@
       },
-      upload(audios) {
+      upload: function upload(audios) {
         // Make sure we have what to upload.
@@ -539,3 +508,3 @@ if (!(audios && audios.length)) return false;
 
-        const audio = audios[0];
+        var audio = audios[0];
 
@@ -549,14 +518,19 @@ if (!_.includes(editor.opts.audioAllowedTypes, audio.type.replace(/audio\//g, ''))) {
 
-        const formData = new FormData();
-        _.each(editor.opts.audioUploadParams, (key, value) => formData.append(key, value));
+        var formData = new FormData();
+        _.each(editor.opts.audioUploadParams, function (key, value) {
+          return formData.append(key, value);
+        });
         formData.append(editor.opts.audioUploadParam, audio);
 
-        const url = editor.opts.audioUploadURL;
-        const xhr = editor.core.getXHR(url, editor.opts.audioUploadMethod);
+        var url = editor.opts.audioUploadURL;
+        var xhr = editor.core.getXHR(url, editor.opts.audioUploadMethod);
 
         // Set upload events.
-        xhr.onload = function() {
+        xhr.onload = function () {
           showProgressMessage('Loading audio');
 
-          const {status, response, responseText} = this;
+          var status = this.status,
+              response = this.response,
+              responseText = this.responseText;
+
           if (status === 415) {
@@ -572,3 +546,3 @@ throwError(BAD_FILE_TYPE, JSON.parse(responseText));
           try {
-            const resp = parseResponse(responseText);
+            var resp = parseResponse(responseText);
             if (resp) insertHtmlAudio(resp.link, resp);
@@ -581,11 +555,11 @@ } catch (ex) {
 
-        xhr.onerror = function() {
+        xhr.onerror = function () {
           throwError(BAD_RESPONSE, this.response || this.responseText || this.responseXML);
         };
 
-        xhr.upload.onprogress = function(e) {
-          if (e.lengthComputable) showProgressMessage('Uploading', (e.loaded / e.total * 100 | 0));
+        xhr.upload.onprogress = function (e) {
+          if (e.lengthComputable) showProgressMessage('Uploading', e.loaded / e.total * 100 | 0);
         };
 
-        xhr.onabort = function() {
+        xhr.onabort = function () {
           editor.edit.on();
@@ -600,5 +574,5 @@ editor.audio.hideProgressBar(true);
 
-        const $popup = editor.popups.get('audio.insert');
+        var $popup = editor.popups.get('audio.insert');
         if ($popup) {
-          $popup.off('abortUpload').on('abortUpload', function() {
+          $popup.off('abortUpload').on('abortUpload', function () {
             if (xhr.readyState !== 4) xhr.abort();
@@ -612,15 +586,13 @@ });
       },
-
-      replace() {
+      replace: function replace() {
         if (!currentAudio) return;
         editor.audio.showInsertPopup();
       },
-
-      remove() {
+      remove: function remove() {
         if (!currentAudio) return;
-        const $audio = currentAudio;
+        var $audio = currentAudio;
         if (editor.events.trigger('audio.beforeRemove', [$audio]) === false) return;
         editor.popups.hideAll();
 
-        const el = $audio[0];
+        var el = $audio[0];
         editor.selection.setBefore(el) || editor.selection.setAfter(el);
@@ -637,3 +609,3 @@ $audio.remove();
 
-  $.FE.DefineIcon('insertAudio', {NAME: 'volume-up'});
+  $.FE.DefineIcon('insertAudio', { NAME: 'volume-up' });
   $.FE.RegisterCommand('insertAudio', {
@@ -645,3 +617,3 @@ title: 'Insert Audio',
     popup: true,
-    callback() {
+    callback: function callback() {
       if (!this.popups.isVisible('audio.insert')) return this.audio.showInsertPopup();
@@ -654,6 +626,7 @@ if (this.$el.find('.fr-marker').length) {
     },
+
     plugin: 'audio'
   });
 
-  $.FE.DefineIcon('audioByURL', {NAME: 'link'});
+  $.FE.DefineIcon('audioByURL', { NAME: 'link' });
   $.FE.RegisterCommand('audioByURL', {
@@ -664,6 +637,6 @@ title: 'By URL',
     toggle: true,
-    callback() {
+    callback: function callback() {
       this.audio.showLayer('audio-by-url');
     },
-    refresh($btn) {
+    refresh: function refresh($btn) {
       this.audio.refreshByURLButton($btn);
@@ -673,3 +646,3 @@ }
 
-  $.FE.DefineIcon('audioUpload', {NAME: 'upload'});
+  $.FE.DefineIcon('audioUpload', { NAME: 'upload' });
   $.FE.RegisterCommand('audioUpload', {
@@ -680,6 +653,6 @@ title: 'Upload Audio',
     toggle: true,
-    callback() {
+    callback: function callback() {
       this.audio.showLayer('audio-upload');
     },
-    refresh($btn) {
+    refresh: function refresh($btn) {
       this.audio.refreshUploadButton($btn);
@@ -692,3 +665,3 @@ }
     undo: false,
-    callback() {
+    callback: function callback() {
       this.audio.hideProgressBar(true);
@@ -701,3 +674,3 @@ }
     focus: true,
-    callback() {
+    callback: function callback() {
       this.audio.insertByURL();
@@ -721,22 +694,18 @@ }
     },
-    html() {
-      const mkOption = (label, val) => `<li role="presentation">
-                <a class="fr-command fr-title" tabIndex="-1" role="option" data-cmd="audioAlign"
-                   data-param1="${val}" title="${this.language.translate(label)}">
-                    ${this.icon.create('audioAlign' + _.capitalize(val))}
-                    <span class="fr-sr-only">${this.language.translate(label)}</span>
-                </a>
-            </li>`;
+    html: function html() {
+      var _this = this;
 
-      return `<ul class="fr-dropdown-list" role="presentation">
-                ${_.map($.FE.COMMANDS.audioAlign.options, mkOption).join('\n')}
-            </ul>`;
+      var mkOption = function mkOption(label, val) {
+        return '<li role="presentation">\n                <a class="fr-command fr-title" tabIndex="-1" role="option" data-cmd="audioAlign"\n                   data-param1="' + val + '" title="' + _this.language.translate(label) + '">\n                    ' + _this.icon.create('audioAlign' + _.capitalize(val)) + '\n                    <span class="fr-sr-only">' + _this.language.translate(label) + '</span>\n                </a>\n            </li>';
+      };
+
+      return '<ul class="fr-dropdown-list" role="presentation">\n                ' + _.map($.FE.COMMANDS.audioAlign.options, mkOption).join('\n') + '\n            </ul>';
     },
-    callback(cmd, val) {
+    callback: function callback(cmd, val) {
       this.audio.align(val);
     },
-    refresh($btn) {
+    refresh: function refresh($btn) {
       this.audio.refreshAlignButton($btn);
     },
-    refreshOnShow($btn, $dropdown) {
+    refreshOnShow: function refreshOnShow($btn, $dropdown) {
       this.audio.refreshAlignDropdown($btn, $dropdown);
@@ -746,3 +715,3 @@ }
 
-  $.FE.DefineIcon('audioReplace', {NAME: 'exchange'});
+  $.FE.DefineIcon('audioReplace', { NAME: 'exchange' });
   $.FE.RegisterCommand('audioReplace', {
@@ -754,3 +723,3 @@ title: 'Replace',
     refreshAfterCallback: false,
-    callback() {
+    callback: function callback() {
       this.audio.replace();
@@ -760,6 +729,6 @@ }
 
-  $.FE.DefineIcon('audioRemove', {NAME: 'trash'});
+  $.FE.DefineIcon('audioRemove', { NAME: 'trash' });
   $.FE.RegisterCommand('audioRemove', {
     title: 'Remove',
-    callback() {
+    callback: function callback() {
       this.audio.remove();
@@ -775,6 +744,6 @@ }
     back: true,
-    callback() {
+    callback: function callback() {
       this.audio.back();
     },
-    refresh($btn) {
+    refresh: function refresh($btn) {
       this.audio.refreshBackButton($btn);
@@ -790,7 +759,7 @@ }
     undo: false,
-    callback() {
-      const src = prompt(this.language.translate('Paste the URL of the audio you want to insert.'));
+    callback: function callback() {
+      var src = prompt(this.language.translate('Paste the URL of the audio you want to insert.'));
       if (src) this.audio.insertByURL(src);
     }
   });
-})(window.jQuery, window._);
+})(window.jQuery, window._);

package.json

 {
 	"name": "froala-audio",
 	"description": "Plugin for inserting and modifying audio players with Froala WYSIWYG Editor.",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"main": "./froala-audio.js",
@@ -18,4 +18,14 @@ "repository": "https://github.com/ecoach-lms/froala-audio",
 	"devDependencies": {
+		"babel-cli": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
 		"eslint": "^4.18.1"
+	},
+	"babel": {
+		"presets": [
+			"env"
+		]
+	},
+	"scripts": {
+		"prepublishOnly": "babel src --out-dir ."
 	}
 }

README.md

@@ -1,2 +0,2 @@
-# froala-audio
+# froala-audio [![npm](https://img.shields.io/npm/v/froala-audio.svg)](https://www.npmjs.com/package/froala-audio) [![license](https://img.shields.io/npm/l/froala-audio.svg)](LICENSE.md)
 
@@ -3,0 +3,0 @@ A simple plugin for [Froala WYSIWYG Editor](https://www.froala.com/wysiwyg-editor/) that allows users to insert and customise audio players in the editor.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33527

increased by6.13%

Worsened metrics

Dev dependency count

3

increased by200%

Lines of code

643

decreased by-4.03%

No dependency changes