@groupdocs.examples.jquery/conversion - npm Package Compare versions

Comparing version 0.16.0 to 0.16.1

js/conversion.js

@@ -218,3 +218,3 @@ /**
             });
-        }   
+        }
     });
@@ -275,3 +275,3 @@
             if (file.guid == guid && file.destinationType == destinationGuid.split(".").pop()) {
-                convert(file);               
+                convert(file);
             }
@@ -288,3 +288,3 @@ });
         if (download) {
-            documentGuid = $(e.target).parent().parent().find(".gd-destination-file").data("guid").match(/\\([^\\]+)$/)[1];
+            documentGuid = $(e.target).parent().parent().find(".gd-destination-file").data("guid").replace(/\\/g, "/").split("/").pop();
             downloadDocument();
@@ -294,3 +294,7 @@ }
 
-    initiConversionDropZone();    
+    initiConversionDropZone();
+
+    if (isMobile()) {
+        showMobileMenu();
+    }
 });
@@ -382,32 +386,4 @@
     $.each(conversionQueue, function (index, file) {
-        if (!file.added) {
-            var docFormat = getDocumentFormat(file.guid.split('.').pop());
-            var extension = file.guid.replace(/^.*\./, '');
-            var destinationGuid = file.guid.replace(extension, file.destinationType);
-            var destinationFileName = destinationGuid.replace(/^.*[\\\/]/, '');
-            html = html + '<div class="gd-convert-item">' +
-                '<div class="gd-convert-remove">' +
-                '<span>×</span>' +
-                '</div>' +
-                '<div class="gd-filequeue-name disabled" data-guid="' + file.guid + '">' +
-                '<i class="fa ' + docFormat.icon + '"></i>' +
-                '<div class="gd-file-name gd-queue-name">' + file.guid.replace(/^.*[\\\/]/, '') +
-                '<div class="gd-file-format">' + docFormat.format + '</div>' +
-                '</div>' +
-                '</div>' +
-                '<div class="gd-file-size gd-queue-size">' + file.size + '</div>' +
-                '<div class="gd-convert-status">' +
-                '<i class="far fa-clock gd-conversion-pending"></i>' +
-                '<i class="fas fa-check gd-conversion-complite"></i>' +                
-                '<i class="gd-convert-progress fa fa-circle-o-notch fa-spin"></i>' +
-                '</div>' +
-                '<div class="gd-filequeue-name disabled gd-destination-file" data-guid="' + destinationGuid + '">' +
-                '<i class="fa ' + getDocumentFormat(file.destinationType).icon + '"></i>' +
-                '<div class="gd-file-name gd-queue-name">' + destinationFileName +
-                '<div class="gd-file-format">' + getDocumentFormat(file.destinationType).format + '</div>' +
-                '</div>' +
-                '</div>' +
-                '<div class="gd-convert-single"><i class="fas fa-exchange-alt"></i></div>' +
-                '<div class="gd-download-single"><i class="fas fa-download"></i></div>' +
-                '</div>';
+        if (!file.added) {    
+            html = html + getQueueItemHtml(file);
             file.added = true;
@@ -420,2 +396,57 @@ }
 
+function getQueueItemHtml(file) {
+    var item = "";
+    var docFormat = getDocumentFormat(file.guid.split('.').pop());
+    var extension = file.guid.replace(/^.*\./, '');
+    var destinationGuid = file.guid.replace(extension, file.destinationType);
+    var destinationFileName = destinationGuid.replace(/^.*[\\\/]/, '');
+    if (isMobile()) {
+        item = '<div class="gd-convert-item">' +
+                    '<div class="gd-convert-remove">' +
+                        '<span>×</span>' +
+                    '</div>' +
+                    '<div class="gd-filequeue-name" data-guid="' + file.guid + '">' +
+                        '<i class="fa ' + docFormat.icon + '"></i>' +
+                        '<div class="gd-file-name gd-queue-name">' + file.guid.replace(/^.*[\\\/]/, '') +
+                            '<div class="gd-filequeue-name gd-destination-file" data-guid="' + destinationGuid + '">' +
+                                '<i class="fa fa-arrow-right"></i>' +
+                                '<i class="fa ' + getDocumentFormat(file.destinationType).icon + '"></i>' +
+                                '<div class="gd-file-name gd-queue-name">' + destinationFileName + '</div>'+
+                            '</div>' +
+                        '</div>' +
+                    '</div>' +      
+                    '<i class="gd-convert-progress fa fa-circle-o-notch fa-spin"></i>' +
+                    '<div class="gd-convert-single"><i class="fas fa-exchange-alt"></i></div>' +
+                    '<div class="gd-download-single"><i class="fas fa-download"></i></div>' +
+                '</div>';
+    } else {
+        item = '<div class="gd-convert-item">' +
+                    '<div class="gd-convert-remove">' +
+                        '<span>×</span>' +
+                    '</div>' +
+                    '<div class="gd-filequeue-name disabled" data-guid="' + file.guid + '">' +
+                        '<i class="fa ' + docFormat.icon + '"></i>' +
+                        '<div class="gd-file-name gd-queue-name">' + file.guid.replace(/^.*[\\\/]/, '') +
+                            '<div class="gd-file-format">' + docFormat.format + '</div>' +
+                        '</div>' +
+                    '</div>' +
+                    '<div class="gd-file-size gd-queue-size">' + file.size + '</div>' +
+                    '<div class="gd-convert-status">' +
+                        '<i class="far fa-clock gd-conversion-pending"></i>' +
+                        '<i class="fas fa-check gd-conversion-complite"></i>' +
+                        '<i class="gd-convert-progress fa fa-circle-o-notch fa-spin"></i>' +
+                    '</div>' +
+                    '<div class="gd-filequeue-name disabled gd-destination-file" data-guid="' + destinationGuid + '">' +
+                        '<i class="fa ' + getDocumentFormat(file.destinationType).icon + '"></i>' +
+                        '<div class="gd-file-name gd-queue-name">' + destinationFileName +
+                            '<div class="gd-file-format">' + getDocumentFormat(file.destinationType).format + '</div>' +
+                        '</div>' +
+                    '</div>' +
+                    '<div class="gd-convert-single"><i class="fas fa-exchange-alt"></i></div>' +
+                    '<div class="gd-download-single"><i class="fas fa-download"></i></div>' +
+                '</div>';
+    }
+    return item;
+}
+
 /**
@@ -530,3 +561,2 @@ * Upload document
                 var conversionTypes = getConversionTypesHtml(elem.conversionTypes, false, guid);
-               
                 // append document
@@ -584,3 +614,16 @@ $('.gd-modal-table-body').append(
         $(currentConversionItem).parent().find(".gd-convert-status .gd-conversion-pending").hide();
-        var progressBar = $(currentConversionItem).parent().find(".gd-convert-progress");
+       
+        var progressBar = "";
+        var convertSingle = "";
+        var downloadButton = "";
+        if (isMobile()) {
+            progressBar = $(currentConversionItem).parent().parent().parent().find(".gd-convert-progress");
+            convertSingle = $(currentConversionItem).parent().parent().parent().find(".gd-convert-single");
+            downloadButton = $(currentConversionItem).parent().parent().parent().find(".gd-download-single");
+            $(convertSingle).hide();
+        } else {
+            progressBar = $(currentConversionItem).parent().find(".gd-convert-progress");
+            convertSingle = $(currentConversionItem).parent().find(".gd-convert-single");
+            downloadButton = $(currentConversionItem).parent().find(".gd-download-single");
+        }       
         $(progressBar).css("display", "flex");
@@ -600,8 +643,10 @@ $.ajax({
                 $(progressBar).hide();
-                $(currentConversionItem).parent().find(".gd-convert-status .gd-conversion-complite").show();
+                if (!isMobile()) {
+                    $(currentConversionItem).parent().find(".gd-convert-status .gd-conversion-complite").show();
+                }
                 $(currentConversionItem).removeClass("disabled");
-                // change covnert button with download button
-                if (download) {
-                    $(currentConversionItem).parent().find(".gd-convert-single").hide();
-                    $(currentConversionItem).parent().find(".gd-download-single").show();
+                // change covnert button with download button                
+                if (download) {          
+                    $(convertSingle).hide();
+                    downloadButton.show();
                     $(currentConversionItem).css("cursor", "pointer");
@@ -613,3 +658,3 @@ $(currentConversionItem).on(userMouseClick, function (e) {
                 }
-                
+
                 // remove converted file from the queue
@@ -655,10 +700,10 @@ conversionQueue = $.grep(conversionQueue, function (value) {
 function prepareMultipleConversionTypes() {
-    var allTypes = [];  
-   
+    var allTypes = [];
+
     $.each($(".gd-checkbox-single:checked"), function (index, element) {
         var types = $(element).parent().parent().find(".gd-conversion-menu li");
         var typesArray = [];
-        $.each(types, function (index, type) {         
-            typesArray.push($(type).find(".gd-type").html());            
-        });      
+        $.each(types, function (index, type) {
+            typesArray.push($(type).find(".gd-type").html());
+        });
         allTypes.push(typesArray);
@@ -677,3 +722,3 @@ });
         var counter = 0;
-        for (i = 0; i < longestArray.length; i++) {            
+        for (i = 0; i < longestArray.length; i++) {
             var type = (longestArray[i].type) ? longestArray[i].type : longestArray[i];
@@ -686,3 +731,3 @@ if ($.inArray(type, element) == -1) {
             }
-        }       
+        }
         longestArray.filesCounter = counter;
@@ -695,3 +740,3 @@ });
     return '<div class="gd-type-warning" title="1 selected file(s) can’t be converted to ' + type.type + ' format">' +
-        '<i class="fas fa-exclamation-triangle"></i>' +      
+        '<i class="fas fa-exclamation-triangle"></i>' +
         '</div>';
@@ -721,3 +766,3 @@ }
             multipleClass = "";
-        }        
+        }
         return '<div class="gd-conversions ' + multipleClass + '" data-guid="' + guid + '">' +
@@ -734,5 +779,12 @@ plus +
         return '<div class="gd-conversions"></div>';
-    }   
+    }
 }
 
+/**
+ * Hide all menu. For mobile only.
+ */
+function showMobileMenu() {
+    $('#gd-mobile-menu').show();
+}
+
 /*
@@ -788,3 +840,3 @@ ******************************************************************
             });
-
+            $('#gd-header-logo').append(getHtmlHeaderForMobile());
             options = $.extend(defaults, options);
@@ -819,7 +871,19 @@ download = options.download;
     /*
-       ******************************************************************
-       HTML MARKUP
-       ******************************************************************
-       */
+    ******************************************************************
+    HTML MARKUP
+    ******************************************************************
+    */
+    function getHtmlHeaderForMobile() {
+        return '<div id="gd-mobile-menu" class="gd-mobile-menu">' +
+            '<span id="gd-mobile-menu-open" class="gd-mobile-menu-open">' +
+            '<i class="fas fa-bars fa-lg fa-inverse"></i>' +
+            '</span>' +
+            '</div>';
+    }
+
     function getHtmlBase() {
+        var draglabel = "";
+        if (!isMobile()) {
+            draglabel = "Drag your document here or click"
+        }
         return '<div id="gd-convert-area">' +
@@ -829,3 +893,3 @@ '<i class="fas fa-exchange-alt"></i>' +
             '<label>Conversion queue is empty</label>' +
-            '<label>Drag your document here or click <i class="fa fa-folder-open"></i> to select a files</label>' +
+            '<label>' + draglabel + ' <i class="fa fa-folder-open"></i> to select a files</label>' +
             '</div>' +
@@ -832,0 +896,0 @@ '</div>' +

package.json

 {
   "name": "@groupdocs.examples.jquery/conversion",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "jQuery plugin that allows to display and comapre documents supported by groupdocs libraries APIs",
@@ -14,3 +14,3 @@ "main": "index.js",
   },
-  "gitHead": "a8f044475cc84c976e440c5203dcfa079f56519f"
+  "gitHead": "4dcd4a961b481858f08b00ce36c38257fd9c1316"
 }

No alert changes

Improved metrics

Total package byte prevSize

94835

increased by4.95%

Lines of code

1323

increased by11.83%

No dependency changes