From 3a85c35be04e524a13d479e1056767c44c968943 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Tue, 19 Mar 2019 15:25:00 +0300 Subject: [PATCH 01/26] Removed viewer functionality and updated main dashboard --- comparison.html | 6 +- packages/comparison/css/comparison.css | 58 +- packages/comparison/js/comparison.js | 1617 +++++------------------- 3 files changed, 302 insertions(+), 1379 deletions(-) diff --git a/comparison.html b/comparison.html index 11a12bf..8a9bcf5 100644 --- a/comparison.html +++ b/comparison.html @@ -14,6 +14,7 @@ + @@ -23,10 +24,9 @@ $('#element').comparison({ applicationPath: 'http://' + host + ':8080/comparison/', download: true, - upload: true, - print: true, + upload: true, rewrite: true, - preloadResultPageCount: 2, + preloadResultPageCount: 0, multiComparing: true }); diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index dd9e59b..5e14081 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -1,51 +1,14 @@ -.gd-comparison-toggle:checked + .gd-lbl-toggle + #gd-select-compare-files{ - width: 16px; -} - -.gd-comparison-toggle:checked + .gd-lbl-toggle { - left: 1px; - transition: left .25s ease-in-out; - transform: rotate(360deg) translateX(3px); -} - -.gd-lbl-toggle::before { - content: ' '; - display: block; - border-top: 30px solid transparent; - border-bottom: 30px solid transparent; - border-left: 5px solid currentColor; -} -.gd-comparison-toggle { - display: none; - position: fixed; - top: 52%; - left: 289px; - height: 53px; - font-size: 25px; - z-index: 9999; -} -.gd-lbl-toggle { - color: #959da5; - top: 50%; - left: 289px; - cursor: pointer; - position: fixed; - transform: rotate(180deg) translateX(-3px); - z-index: 2; -} .gd-comparison-bar-wrapper{ - position: relative; - top: 50px; - left: 0px; - margin-right: 17px; -} -.gd-comparison-bar-wrapper.active{ - width: 307px; - margin-right: 49px; + background-color: #E7E7E7; + display: flex; + flex-direction: row; } #gd-header-logo { background-image: url('../images/logo.png') !important; } +#gd-add-multicompare { + float: right !important; +} .gd-drag-n-drop-wrap-compare.hover { background: #ddd; border-color: #aaa; @@ -108,14 +71,7 @@ color: #959da5; } #gd-select-compare-files { - width: 307px; - overflow: hidden; - position: fixed; - top: 50px; - background-color: #3e4e5a; - height: 95%; - overflow-y: auto; - z-index: 1; + display: inherit; } .gd-drag-n-drop-wrap-compare { margin-top: 0px; diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 1ce1c2c..37e2ea6 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -31,160 +31,37 @@ var currentPageNumber = 0; var rewrite; var multiComparing; var idx = 0; -// add supported formats -map['folder'] = { 'format': '', 'icon': 'fa-folder' }; -map['pdf'] = { 'format': 'Portable Document Format', 'icon': 'fa-file-pdf' }; -map['doc'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['docx'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['docm'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['dot'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['dotx'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['dotm'] = { 'format': 'Microsoft Word', 'icon': 'fa-file-word' }; -map['xls'] = { 'format': 'Microsoft Excel', 'icon': 'fa-file-excel' }; -map['xlsx'] = { 'format': 'Microsoft Excel', 'icon': 'fa-file-excel' }; -map['xlsm'] = { 'format': 'Microsoft Excel', 'icon': 'fa-file-excel' }; -map['xlsb'] = { 'format': 'Microsoft Excel', 'icon': 'fa-file-excel' }; -map['ppt'] = { 'format': 'Microsoft PowerPoint', 'icon': 'fa-file-powerpoint' }; -map['pptx'] = { 'format': 'Microsoft PowerPoint', 'icon': 'fa-file-powerpoint' }; -map['pps'] = { 'format': 'Microsoft PowerPoint', 'icon': 'fa-file-powerpoint' }; -map['ppsx'] = { 'format': 'Microsoft PowerPoint', 'icon': 'fa-file-powerpoint' }; -map['vsd'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vdx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vss'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vsx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vst'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vtx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vsdx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vdw'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vstx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['vssx'] = { 'format': 'Microsoft Visio', 'icon': 'fa-file-code' }; -map['mpp'] = { 'format': 'Microsoft Project', 'icon': 'fa-file-alt' }; -map['mpt'] = { 'format': 'Microsoft Project', 'icon': 'fa-file-alt' }; -map['msg'] = { 'format': 'Microsoft Outlook', 'icon': 'fa-file-alt' }; -map['eml'] = { 'format': 'Microsoft Outlook', 'icon': 'fa-file-alt' }; -map['emlx'] = { 'format': 'Microsoft Outlook', 'icon': 'fa-file-alt' }; -map['one'] = { 'format': 'Microsoft OneNote', 'icon': 'fa-file-word' }; -map['odt'] = { 'format': 'Open Document Text', 'icon': 'fa-file-word' }; -map['ott'] = { 'format': 'Open Document Text Template', 'icon': 'fa-file-word' }; -map['ods'] = { 'format': 'Open Document Spreadsheet', 'icon': 'fa-file-excel' }; -map['odp'] = { 'format': 'Open Document Presentation', 'icon': 'fa-file-powerpoint' }; -map['otp'] = { 'format': 'Open Document Presentation', 'icon': 'fa-file-powerpoint' }; -map['ots'] = { 'format': 'Open Document Presentation', 'icon': 'fa-file-powerpoint' }; -map['rtf'] = { 'format': 'Rich Text Format', 'icon': 'fa-file-alt' }; -map['txt'] = { 'format': 'Plain Text File', 'icon': 'fa-file-alt' }; -map['csv'] = { 'format': 'Comma-Separated Values', 'icon': 'fa-file-excel' }; -map['html'] = { 'format': 'HyperText Markup Language', 'icon': 'fa-file-word' }; -map['mht'] = { 'format': 'HyperText Markup Language', 'icon': 'fa-file-word' }; -map['mhtml'] = { 'format': 'HyperText Markup Language', 'icon': 'fa-file-word' }; -map['xml'] = { 'format': 'Extensible Markup Language', 'icon': 'fa-file-word' }; -map['xps'] = { 'format': 'XML Paper Specification', 'icon': 'fa-file-word' }; -map['dxf'] = { 'format': 'AutoCAD Drawing File Format', 'icon': 'fa-file-image' }; -map['dwg'] = { 'format': 'AutoCAD Drawing File Format', 'icon': 'fa-file-image' }; -map['bmp'] = { 'format': 'Bitmap Picture', 'icon': 'fa-file-image' }; -map['gif'] = { 'format': 'Graphics Interchange Format', 'icon': 'fa-file-image' }; -map['jpg'] = { 'format': 'Joint Photographic Experts Group', 'icon': 'fa-file-image' }; -map['jpe'] = { 'format': 'Joint Photographic Experts Group', 'icon': 'fa-file-image' }; -map['jpeg'] = { 'format': 'Joint Photographic Experts Group', 'icon': 'fa-file-image' }; -map['jfif'] = { 'format': 'Joint Photographic Experts Group', 'icon': 'fa-file-image' }; -map['png'] = { 'format': 'Portable Network Graphics', 'icon': 'fa-file-image' }; -map['tiff'] = { 'format': 'Tagged Image File Format', 'icon': 'fa-file-photo' }; -map['tif'] = { 'format': 'Tagged Image File Format', 'icon': 'fa-file-photo' }; -map['epub'] = { 'format': 'Electronic Publication', 'icon': 'fa-file-pdf' }; -map['ico'] = { 'format': 'Windows Icon', 'icon': 'fa-file-image' }; -map['webp'] = { 'format': 'Compressed Image', 'icon': 'fa-file-image' }; -map['mobi'] = { 'format': 'Mobipocket eBook', 'icon': 'fa-file-pdf' }; -map['tex'] = { 'format': 'LaTeX Source Document', 'icon': 'fa-file-pdf' }; -map['djvu'] = { 'format': 'Multi-Layer Raster Image', 'icon': 'fa-file-alt' }; -map['unknown'] = { 'format': 'This format is not supported', 'icon': 'fa-file' }; -var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; - -$(document).ready(function(){ +var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; + +$(document).ready(function () { /* ****************************************************************** NAV BAR CONTROLS ****************************************************************** */ - ////////////////////////////////////////////////// - // Toggle comparison tab - ////////////////////////////////////////////////// - $('.gd-lbl-toggle').on(userMouseClick, function(e){ - $(".gd-comparison-bar-wrapper").toggleClass("active"); - }); - - ////////////////////////////////////////////////// - // Toggle navigation dropdown menus - ////////////////////////////////////////////////// - $('.gd-nav-toggle').on(userMouseClick, function(e){ - if($(this).hasClass('open')){ - $(this).removeClass('open'); - }else{ - $(this).addClass('open'); - } - var nav_drop = getElementByClass($(this), '.gd-nav-dropdown'); - toggleNavDropdown(nav_drop); - }); - - ////////////////////////////////////////////////// - // Close modal dialog event - ////////////////////////////////////////////////// - $('.gd-modal-close-action').on(userMouseClick, closeModal); - - ////////////////////////////////////////////////// - // File or directory click event from file tree - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '.gd-filetree-name', function(e){ - var isDir = $(this).parent().find('.fa-folder').hasClass('fa-folder'); - if(isDir){ - // if directory -> browse - if(currentDirectory.length > 0){ - currentDirectory = currentDirectory + "/" + $(this).text(); - }else{ - currentDirectory = $(this).text(); - } - toggleModalDialog(false, ''); - loadFileTree(currentDirectory); - }else{ - toggleModalDialog(false, ''); - var guid = $(this).attr('data-guid'); - fillFileVariables(fileNumber, '', '', guid); - addFileForComparing(null, guid, fileNumber); - } - }); - - ////////////////////////////////////////////////// - // Go to parent directory event from file tree - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '.gd-go-up', function(e){ - if(currentDirectory.length > 0 && currentDirectory.indexOf('/') == -1){ - currentDirectory = ''; - }else{ - currentDirectory = currentDirectory.replace(/\/[^\/]+\/?$/, ''); - } - loadFileTree(currentDirectory); - }); - + ////////////////////////////////////////////////// // Download event ////////////////////////////////////////////////// - $('#gd-btn-download-all').on(userMouseClick, function(e){ + $('#gd-btn-download-all').on(userMouseClick, function (e) { downloadDocument(); }); - $('#gd-btn-download-summary').on(userMouseClick, function(e){ + $('#gd-btn-download-summary').on(userMouseClick, function (e) { downloadDocument(resultData.length - 1); }); ////////////////////////////////////////////////// // Select file for upload event ////////////////////////////////////////////////// - $('#gd-upload-input-first').on('change', function(e){ + $('#gd-upload-input-first').on('change', function (e) { // get selected files var input = $(this); // add files to the table addFileForComparing(input.get(0).files, null, 'first'); }); - $('#gd-upload-input-second').on('change', function(e){ + $('#gd-upload-input-second').on('change', function (e) { // get selected files var input = $(this); // add files to the table @@ -243,55 +120,21 @@ $(document).ready(function(){ $('#gd-url-second').val(''); }); - ////////////////////////////////////////////////// - // Print event - ////////////////////////////////////////////////// - $('#gd-btn-print').on(userMouseClick, function(){ - printResults(); - }); - ////////////////////////////////////////////////// // Open document button (upload dialog) click ////////////////////////////////////////////////// - $('#gd-open-document-first').on(userMouseClick, function(e){ + $('#gd-open-document-first').on(userMouseClick, function (e) { toggleModalDialog(false, ''); fileNumber = 'first'; loadFileTree(''); }); - $('#gd-open-document-second').on(userMouseClick, function(e){ + $('#gd-open-document-second').on(userMouseClick, function (e) { toggleModalDialog(false, ''); fileNumber = 'second'; loadFileTree(''); }); - ////////////////////////////////////////////////// - // Submit password button click (password required modal) - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, "#gd-password-submit", function(e){ - password = $('#gd-password-input').val(); - $('#gd-password-input').val(''); - toggleModalDialog(false, ''); - }); - - ////////////////////////////////////////////////// - // Click on modal body event (used to change slide in swiper) - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '#gd-modal-content', function(e){ - if(isMobile()){ - if($('#gd-upload-files-table > div').length > 0){ - var swiper = new Swiper('.swiper-container'); - if(typeof swiper.length == 'undefined'){ - swiper.slideNext(); - swiper.slidePrev(); - } - for(var i = 0; i < swiper.length; i++){ - swiper[i].slideNext(); - swiper[i].slidePrev(); - } - } - } - }); ////////////////////////////////////////////////// // Compare two files event ////////////////////////////////////////////////// @@ -309,9 +152,9 @@ $(document).ready(function(){ $.each(filesData['files'], function (index, elem) { data.append("files", elem); }); - data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json"})); - data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json"})); - data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json"})); + data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json" })); + data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json" })); + data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json" })); context = 'multiCompare'; contentType = false; @@ -330,9 +173,9 @@ $(document).ready(function(){ $.each(filesData['files'], function (index, elem) { data.append("files", elem); }); - data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json"})); - data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json"})); - data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json"})); + data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json" })); + data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json" })); + data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json" })); context = 'compare'; contentType = false; @@ -404,7 +247,7 @@ $(document).ready(function(){ '' ); // save page data - resultData.push({pageNumber: pageNumber, pageGuid: elem}); + resultData.push({ pageNumber: pageNumber, pageGuid: elem }); setZoomValue(getZoomValue()); }); var counter = preloadResultPageCount; @@ -432,6 +275,7 @@ $(document).ready(function(){ } }); }); + ////////////////////////////////////////////////// // Clean current comparison results ////////////////////////////////////////////////// @@ -448,253 +292,13 @@ $(document).ready(function(){ clearResultsContents(); }); - ////////////////////////////////////////////////// - // Zoom values event - ////////////////////////////////////////////////// - $('#gd-btn-zoom-value > li').bind(userMouseClick, function(e){ - var zoomValue = $(this).text(); - switch(zoomValue){ - case 'Fit Width': - // get page width - var pageWidth = $('.gd-page').width(); - // get screen width - var screenWidth = $('#gd-pages').width(); - // get scale ratio - var scale = (pageWidth / screenWidth) * 100; - // set values - zoomValue = 200 - scale; - break; - case 'Fit Height': - // get page height - var pageHeight = $('.gd-page').height(); - // get screen height - var screenHeight = $('#gd-pages').height(); - // get scale ratio - var scale = (screenHeight / pageHeight) * 100; - // set values - zoomValue = scale; - break; - default: - zoomValue = zoomValue.slice(0, -1); - break; - } - setZoomValue(zoomValue); - }); - - ////////////////////////////////////////////////// - // Zoom in event - ////////////////////////////////////////////////// - $('#gd-btn-zoom-in').on(userMouseClick, function(e){ - var zoom_val = getZoomValue(); - if(zoom_val < 490){ - zoom_val = zoom_val + 10; - } - setZoomValue(zoom_val); - }); - - ////////////////////////////////////////////////// - // Zoom out event - ////////////////////////////////////////////////// - $('#gd-btn-zoom-out').on(userMouseClick, function(e){ - var zoom_val = getZoomValue(); - if(zoom_val > 30){ - zoom_val = zoom_val - 10; - } - setZoomValue(zoom_val); - }); - - ////////////////////////////////////////////////// - // Page scrolling event - ////////////////////////////////////////////////// - var previousScroll = 0; - $('#gd-pages').scroll(function() { - // get last page number - var lastPageNumber = resultData.length; - // get zoom value - var zoomValue = getZoomValue()/100; - var pagePosition = 0; - // get scroll direction - var scrollDown = true; - var currentScroll = $(this).scrollTop(); - if (currentScroll > previousScroll) { - pagePosition = currentPageNumber + 1; - } else { - pagePosition = currentPageNumber - 1; - scrollDown = false; - } - // set scroll direction - previousScroll = currentScroll; - // check if page is visible in the view port more than 50% - if($('#gd-page-' + pagePosition).isOnScreen(0.5, 0.5)){ - // load next page - // to set correct page size we use global array resultData which contains all info about current document - if(preloadResultPageCount > 0) { - // if scroll down load next page - var resultDataPrev = resultData[pagePosition == 0 ? 0 : pagePosition - 1]; - if(scrollDown){ - if(pagePosition < lastPageNumber) { - var resultDatum = resultData[pagePosition]; - appendHtmlContent(pagePosition, resultDatum.pageGuid); - } else if(pagePosition == lastPageNumber) { - appendHtmlContent(pagePosition - 1, resultDataPrev.pageGuid); - } - } else { - // if scroll up load previous page - if(currentPageNumber >= 0) { - appendHtmlContent(currentPageNumber, resultDataPrev.pageGuid); - } - } - } - if (pagePosition >= 0 && pagePosition < lastPageNumber) { - currentPageNumber = pagePosition; - } - } - }); - - ////////////////////////////////////////////////// - // Open modal dialog (file upload) event - ////////////////////////////////////////////////// - $('#gd-btn-upload').on(userMouseClick, function(e){ - toggleModalDialog(true, 'Upload Document', getHtmlUploadForModal()); - var dropZone = $('#gd-dropZone'); - if (typeof dropZone[0] != "undefined") { - //Drag n drop functional - if ($('#gd-dropZone').length) { - if (typeof (window.FileReader) == 'undefined') { - dropZone.text("Your browser doesn't support Drag and Drop"); - dropZone.addClass('error'); - } - } - - dropZone[0].ondragover = function () { - dropZone.addClass('hover'); - return false; - }; - - dropZone[0].ondragleave = function () { - dropZone.removeClass('hover'); - return false; - }; - - dropZone[0].ondrop = function (event) { - event.preventDefault(); - dropZone.removeClass('hover'); - var files = event.dataTransfer.files; - addFileForUploading(files); - }; - } - }); - ////////////////////////////////////////////////// - // Cancel file upload event - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, ".gd-cancel-button", function(e){ - // get selected files - var button = $(this); - // get file name which will be deleted - var fileName = button.closest("div").parent().parent().find("div.gd-file-name")[0].innerHTML; - // find its index in the array - for(var i = 0; i < uploadFilesList.length; i++){ - if(uploadFilesList[i].name == fileName){ - // remove file from the files array - uploadFilesList.splice(i, 1); - } - } - // remove table row - button.closest('div').parent().parent().parent().remove(); - $('#gd-upload-input').val(''); - // recalculate indexes in the files table - var tableRows = $('#gd-upload-files-table > div'); - for(var n = 0; n < tableRows.length; n++){ - $(tableRows[n]).find('div.gd-pregress').attr('id', 'gd-pregress-bar-' + n); - $(tableRows[n]).find("div.gd-upload-complete").attr('id', 'gd-upload-complete-' + n); - $(tableRows[n]).find("div.gd-upload-complete-fail").attr('id', 'gd-upload-failure-' + n); - } - // if table is empty disable upload button - if(tableRows.length == 0){ - $('#gd-upload-button').prop('disabled', true); - } - }); - - ////////////////////////////////////////////////// - // Upload event - ////////////////////////////////////////////////// - $(".gd-modal-body").on(userMouseClick, '#gd-upload-button', function(e){ - // get current number of table rows - var tableRows = $('#gd-upload-files-table > div'); - // initiate URL counter required for proper calculating of the uploaded files in case local files uploaded with URLs - var urlCounter = 0; - // upload file one by one - for (var i = 0; i < tableRows.length; i++) { - // check if current table row contains URL instead of file - if($(tableRows[i]).find("div[data-value]").length > 0) { - // upload URL - uploadDocument(null, i, $(tableRows[i]).find("div.gd-filetree-name").data().value); - // increase URL counter - urlCounter++; - } else { - // check if the current file already uploaded - var isUploaded = $(tableRows[i]).find("div.gd-filetree-name").data().uploaded; - if(!isUploaded){ - // upload local file - uploadDocument(uploadFilesList[i - urlCounter], i); - // mark file as uploaded - $(tableRows[i]).find("div.gd-filetree-name").data().uploaded = true; - } else { - continue; - } - } - } - }); - - ////////////////////////////////////////////////// - // Open URL input event - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '#gd-url-button', function () { - $('#gd-url-wrap').slideDown('fast'); - $('#gd-url').focus(); - }); - - ////////////////////////////////////////////////// - // Close URL input event - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '#gd-url-cancel', function () { - $('#gd-url-wrap').slideUp('fast'); - $('#gd-url').val(''); - }); - - ////////////////////////////////////////////////// - // Add file via URL event - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '#gd-add-url', function () { - addFileForUploading(null, $("#gd-url").val()); - $('#gd-url').val(''); - }); - - ////////////////////////////////////////////////// - // Select files for upload event - ////////////////////////////////////////////////// - $('.gd-modal-body').on('change', '#gd-upload-input', function(e){ - // get selected files - var input = $(this); - // add files to the table - addFileForUploading(input.get(0).files); - }); - - ////////////////////////////////////////////////// - // Open document button (upload dialog) click - ////////////////////////////////////////////////// - $('.gd-modal-body').on(userMouseClick, '#gd-open-document', function(e){ - toggleModalDialog(false, ''); - loadFileTree(''); - }); - - $('#gd-add-file-multicompare').on(userMouseClick, function(e){ + $('#gd-add-file-multicompare').on(userMouseClick, function (e) { var prefix = 'idx' + idx; var newDragnDrop = getHtmlDragAndDropArea(prefix) $(newDragnDrop).insertBefore("#gd-add-multicompare"); initDropZone(prefix); initCloseButton(prefix); - $('#gd-upload-input-' + prefix).on('change', function(e){ + $('#gd-upload-input-' + prefix).on('change', function (e) { // get selected files var input = $(this); // add files to the table @@ -714,7 +318,7 @@ $(document).ready(function(){ addFileForComparing(null, url, prefix); $('#gd-url-' + prefix).val(''); }); - $('#gd-open-document-' + prefix).on(userMouseClick, function(e){ + $('#gd-open-document-' + prefix).on(userMouseClick, function (e) { toggleModalDialog(false, ''); fileNumber = prefix; loadFileTree(''); @@ -760,7 +364,7 @@ function appendHtmlContent(pageNumber, path) { if (!gd_page.hasClass('loaded')) { gd_page.addClass('loaded'); // get document description - var data = {path: path}; + var data = { path: path }; $.ajax({ type: 'POST', url: getApplicationPath('loadResultPage'), @@ -837,7 +441,7 @@ function transform(fileMap, res, passwords) { */ function transformToObj(fileMap, prefix, res) { if (fileMap[prefix]) { - res.push({file: fileMap[prefix], password: getPassword(prefix)}); + res.push({ file: fileMap[prefix], password: getPassword(prefix) }); } } @@ -864,7 +468,7 @@ function collectFiles() { transformToObj(compareFileUrlMap, prefix, urls); } - return {"files": files, "passwords": passwords, "urls": urls, "paths": paths}; + return { "files": files, "passwords": passwords, "urls": urls, "paths": paths }; } /** @@ -876,34 +480,6 @@ function amountOfFiles(filesData) { return filesData['files'].length + filesData['urls'].length + filesData['paths'].length; } - -/** - * Zoom document - * @param {int} zoom_val - zoom value from 0 to 100 - */ -function setZoomValue(zoom_val){ - // adapt value for css - var zoom_val_non_webkit = zoom_val / 100; - var zoom_val_webkit = Math.round(zoom_val) + '%'; - // display zoom value - setNavigationZoomValues(zoom_val_webkit); - // set css zoom values - var style = [ - 'zoom: ' + zoom_val_webkit, - 'zoom: ' + zoom_val_non_webkit, // for non webkit browsers - '-moz-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')' // for mozilla browser - ].join(';'); - // add style - $('#gd-panzoom').attr('style', style); -} - -/** - * Get currently set zoom value - */ -function getZoomValue(){ - return parseInt($('#gd-zoom-value').text().slice(0, -1)); -} - /** * Clear all result data from previously comparing */ @@ -933,202 +509,25 @@ function clearResultsContents() { }); } -/** - * Set zoom values on navigation panel - * @param {int} value - zoom value from 0 to 100 - */ -function setNavigationZoomValues(value){ - $('#gd-zoom-value').text(value); -} - -/** - * Get HTML content for upload modal - **/ -function getHtmlUploadForModal(){ - // upload section - var uploadSection = '
'+ - '
'+ - '
'+ - '

Drag & Drop your files here

'+ - '

OR

'+ - '
'+ - ''+ - ''+ - '
'+ - '
'+ - ''+ - '
'+ - // list of files - '
'+ - ''+ - ''+ - '
'; - return uploadSection; -} - -/** - * Load file tree - * @param {string} dir - files location directory - */ -function loadFileTree(dir) { - var data = {path: dir}; - currentDirectory = dir; - // show loading spinner - $('#gd-modal-spinner').show(); - // get data - $.ajax({ - type: 'POST', - url: getApplicationPath('loadFileTree'), - data: JSON.stringify(data), - contentType: 'application/json', - success: function(returnedData) { - if(returnedData.message != undefined){ - // open error popup - printMessage(returnedData.message); - return; - } - // assembly modal html - $('.gd-modal-body').html(''); // clear previous data - toggleModalDialog(true, "Open Document", getHtmlFileBrowser()); - // hide loading spinner - $('#gd-modal-spinner').hide(); - // append files to tree list - $.each(returnedData, function(index, elem){ - // document name - var name = elem.name; - // document guid - var guid = elem.guid; - // document size - var size = elem.size; - // convert to proper size - var new_size = size + ' Bytes'; - if((size / 1024 / 1024) > 1){ - new_size = (Math.round((size / 1024 / 1024) * 100) / 100) + ' MB'; - }else if((size / 1024) > 1){ - new_size = (Math.round((size / 1024) * 100) / 100) + ' KB'; - } - // document format - var documentFormat = getDocumentFormat(name, elem.isDirectory); - var docFormat = (documentFormat == undefined)? 'fa-folder' : documentFormat; - // append document - $('.gd-modal-table tbody').append( - ''+ - ''+ - '
' + name + '
'+ - '' + docFormat.format + ''+ - '' + new_size + ''+ - ''); - }); - }, - error: function(xhr, status, error) { - var err = eval("(" + xhr.responseText + ")"); - console.log(err.message); - // hide loading spinner - $('#gd-modal-spinner').hide(); - // open error popup - printMessage(err.message); - } - }); -} - -/** - * Get document format (type) - * @param {string} filename - document name - * @param {boolean} isDirectory - define if the current element is directory or file - */ -function getDocumentFormat(filename, isDirectory){ - if(!isDirectory){ - if(typeof map[filename.split('.').pop().toLowerCase()] == "undefined"){ - if(filename.split('.').length > 1){ - return map["unknown"]; - } else { - return map["folder"]; - } - } else { - return map[filename.split('.').pop().toLowerCase()]; - } - } else { - return map["folder"]; - } -} - -/** - * Get application path for GET/POST requests - * @param {string} context - application context - */ -function getApplicationPath(context){ - if(applicationPath != null){ - if(applicationPath.slice(-1) == '/'){ - return applicationPath + context; - }else{ - return applicationPath + "/" + context; - } - }else{ - return context; - } -} - /** * Search for element by class (recursive) * @param {object} target - object where to search for an id * @param {string} class_id - class id */ -function getElementByClass(target, class_id){ +function getElementByClass(target, class_id) { var elem = target.find(class_id); - if(!elem.hasClass(class_id.slice(1))){ + if (!elem.hasClass(class_id.slice(1))) { return getElementByClass(target.parent(), class_id); - }else{ + } else { return elem; } } -/** - * Toggle modal dialog - * @param {boolean} open - open/close value - * @param {string} title - title to display in modal dialog (popup) - */ -function toggleModalDialog(open, title, content){ - if(open){ - $('#modalDialog .gd-modal-title').text(title); - $('#modalDialog') - .css('opacity', 0) - .fadeIn('fast') - .animate( - { opacity: 1 }, - { queue: false, duration: 'fast' } - ); - $('#modalDialog').addClass('in'); - $(".gd-modal-body").append(content); - }else{ - $('#modalDialog').removeClass('in'); - $('#modalDialog') - .css('opacity', 1) - .fadeIn('fast') - .animate( - { opacity: 0 }, - { queue: false, duration: 'fast' } - ) - .css('display', 'none'); - $(".gd-modal-body").html(''); - } -} - /** * Clear all data from previously loaded document * @param {string} message - message to display in popup */ -function printMessage(message){ +function printMessage(message) { var content = '
' + message + '
'; toggleModalDialog(true, 'Error', content); } @@ -1138,7 +537,7 @@ function printMessage(message){ * @param {index} page number, if undefined, then download all results file */ function downloadDocument(index) { - if(documentResultGuid != "" && typeof documentResultGuid != "undefined") { + if (documentResultGuid != "" && typeof documentResultGuid != "undefined") { var extensionParam = "&ext=" + extension; var imageExtParam = "&ext=jpg"; var params = index ? "&index=" + index + imageExtParam : extensionParam; @@ -1150,116 +549,6 @@ function downloadDocument(index) { } } -/** - * Add file to the upload list - * @param {file[]} uploadFiles - Files array for uploading - * @param {string} url - URL of the file - */ -function addFileForUploading(uploadFiles, url) { - // get table in which files will be added - var table = $("#gd-upload-files-table"); - // get current count of table rows - var tableRowsNumber = $('#gd-upload-files-table > div').length; - - if(url){ - // append URL - table.append('
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
' + url.split('/').pop() + '
'+ - ' type: ' + url.split('/').pop().split('.').pop() +''+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ - '
'); - // increase table rows counter after adding new record - tableRowsNumber++ - } else { - // append files - $.each(uploadFiles, function(index, file){ - uploadFilesList.push(file); - // document format - var docFormat = getDocumentFormat(file.name); - // convert to proper size - var new_size = file.size + ' Bytes'; - if((file.size / 1024 / 1024) > 1){ - new_size = (Math.round((file.size / 1024 / 1024) * 100) / 100) + ' MB'; - }else if((file.size / 1024) > 1){ - new_size = (Math.round((file.size / 1024) * 100) / 100) + ' KB'; - } - // append document - table.append('
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
' + file.name + '
'+ - 'size: ' + new_size +''+ - ' type: ' + file.name.split('.').pop() +''+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ - '
'); - // increase table rows counter after adding new record - tableRowsNumber++ - }); - } - $("#gd-upload-button").prop("disabled", false); - if(isMobile()){ - $.each($(".swiper-slide"), function(index, slide){ - $(slide).removeClass("gd-desktop"); - }); - //initialize swiper when document ready - var swiper = new Swiper ('.swiper-container'); - } else { - $.each($(".swiper-slide"), function(index, slide){ - $(slide).removeClass("swiper-slide-cancel"); - }); - } -} - -/** - * Close modal - */ -function closeModal(){ - // remove all files from the upload list - uploadFilesList = []; - var tableRows = $('#gd-upload-files-table > div'); - for(var n = 0; n < tableRows.length; n++){ - $(tableRows[n]).remove(); - } - $("#gd-upload-input").val(''); - toggleModalDialog(false, ''); -} - /** * Clear results and show selection files * @@ -1279,7 +568,7 @@ function clearAndShowSelection(prefix) { */ function clearFilesRows(prefix) { var tableRows = $('#gd-upload-files-table-' + prefix + ' > div'); - for(var n = 0; n < tableRows.length; n++){ + for (var n = 0; n < tableRows.length; n++) { $(tableRows[n]).remove(); } } @@ -1293,67 +582,67 @@ function addFileForComparing(uploadFiles, url, prefix) { // get table in which files will be added var table = $("#gd-upload-files-table-" + prefix); - if(url){ + if (url) { // append URL - table.append('
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
' + url.split(/[\\\/]/).pop() + '
'+ - ' type: ' + url.split('/').pop().split('.').pop() +''+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ + table.append('
' + + '
' + + '
' + + '' + + '
' + + '
' + url.split(/[\\\/]/).pop() + '
' + + ' type: ' + url.split('/').pop().split('.').pop() + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + '
'); $('#gd-url-wrap-' + prefix).slideUp('fast'); $('#gd-url-' + prefix).val(''); } else { // append files - $.each(uploadFiles, function(index, file){ + $.each(uploadFiles, function (index, file) { fillFileVariables(prefix, file, '', ''); // document format var docFormat = getDocumentFormat(file.name); // convert to proper size var new_size = file.size + ' Bytes'; - if((file.size / 1024 / 1024) > 1) { + if ((file.size / 1024 / 1024) > 1) { new_size = (Math.round((file.size / 1024 / 1024) * 100) / 100) + ' MB'; - } else if((file.size / 1024) > 1){ + } else if ((file.size / 1024) > 1) { new_size = (Math.round((file.size / 1024) * 100) / 100) + ' KB'; } // append document - table.append('
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
' + file.name + '
'+ - 'size: ' + new_size +''+ - ' type: ' + file.name.split('.').pop() +''+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ - '
'+ - ''+ - '
'+ - '
'+ - '
'+ + table.append('
' + + '
' + + '
' + + '' + + '
' + + '
' + file.name + '
' + + 'size: ' + new_size + '' + + ' type: ' + file.name.split('.').pop() + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + '
'); }); } - $('#gd-cancel-button-' + prefix).on(userMouseClick, function() { + $('#gd-cancel-button-' + prefix).on(userMouseClick, function () { // get selected files var button = $(this); // remove table row @@ -1365,14 +654,14 @@ function addFileForComparing(uploadFiles, url, prefix) { $("#gd-dropZone-" + prefix).hide(); $("#gd-open-document-" + prefix).hide(); - if(isMobile()){ - $.each($(".swiper-slide"), function(index, slide){ + if (isMobile()) { + $.each($(".swiper-slide"), function (index, slide) { $(slide).removeClass("gd-desktop"); }); //initialize swiper when document ready - var swiper = new Swiper ('.swiper-container'); + var swiper = new Swiper('.swiper-container'); } else { - $.each($(".swiper-slide"), function(index, slide){ + $.each($(".swiper-slide"), function (index, slide) { $(slide).removeClass("swiper-slide-cancel"); }); } @@ -1393,584 +682,262 @@ function fillFileVariables(prefix, file, url, path) { } /** - * Upload document - * @param {file} file - File for uploading - * @param {int} index - Number of the file to upload - * @param {string} url - URL of the file, set it if URL used instead of file - */ -function uploadDocument(file, index, url = ''){ - // prepare form data for uploading - var formData = new FormData(); - // add local file for uploading - formData.append("file", file); - // add URL if set - formData.append("url", url); - formData.append("rewrite", rewrite); - $.ajax({ - // callback function which updates upload progress bar - xhr: function() - { - var xhr = new window.XMLHttpRequest(); - // upload progress - xhr.upload.addEventListener("progress", function(event){ - if (event.lengthComputable) { - $(".gd-modal-close-action").off(userMouseClick); - $("#gd-open-document").prop("disabled", true); - // increase progress - $("#gd-pregress-bar-" + index).addClass("p"+ Math.round(event.loaded / event.total * 100)); - if(event.loaded == event.total){ - $("#gd-pregress-bar-" + index).fadeOut(); - $("#gd-upload-complete-" + index).fadeIn(); - $('.gd-modal-close-action').on(userMouseClick, closeModal); - $("#gd-open-document").prop("disabled", false); - } - } - }, false); - return xhr; - }, - type: 'POST', - url: getApplicationPath('uploadDocument'), - data: formData, - cache: false, - contentType: false, - processData: false, - success: function(returnedData) { - if(returnedData.message != undefined){ - // open error popup - printMessage(returnedData.message); - $("#gd-upload-complete-" + index).fadeOut(); - $("#gd-upload-failure-" + index).fadeIn(); - return; - } - }, - error: function(xhr, status, error) { - if (xhr && xhr.responseText) { - var err = eval("(" + xhr.responseText + ")"); - console.log(err.message); - // open error popup - printMessage(err.message); - } - $("#gd-upload-complete-" + index).fadeOut(); - $("#gd-upload-failure-" + index).fadeIn(); - } - }); -} - - /** - * Print results - */ - function printResults(){ - // get current document content - var documentContainer = $("#gd-panzoom"); - // force each document page to be printed as a new page - var cssPrint = ''; - // open print dialog - var windowObject = window.open('', "PrintWindow", "width=750,height=650,top=50,left=50,toolbars=yes,scrollbars=yes,status=yes,resizable=yes"); - // add current document into the print window - windowObject.document.writeln(cssPrint); - // add current document into the print window - windowObject.document.writeln(documentContainer[0].innerHTML); - windowObject.document.close(); - windowObject.focus(); - windowObject.print(); - windowObject.close(); - } - - /** - * Close modal - */ - function closeModal(){ - toggleModalDialog(false, ''); + * Get HTML content for drag and drop area + **/ +function getHtmlDragAndDropArea(prefix) { + // close icon for multi comparing + var close = ''; + if (prefix && prefix.startsWith('idx')) { + close = '
'; } - /** - * Get HTML content for file browser modal - **/ - function getHtmlFileBrowser(){ - return '
'+ - '
 Loading... Please wait.
'+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - ''+ - '' + + // drag and drop section + var htmlSection = '
' + + close + + '
' + + '
' + + '

Drag & Drop the ' + replacePrefix(prefix) + ' file here

' + + '

OR

' + + '
' + + '' + + '' + + '
' + + '
' + + 'BROWSE files' + + '
' + + '
' + + '' + + '
' + // list of files - '
'+ - '
DocumentFormatSize
...
'+ + '
' + ''; - } - - /** - * Get HTML content for drag and drop area - **/ - function getHtmlDragAndDropArea(prefix){ - // close icon for multi comparing - var close = ''; - if (prefix && prefix.startsWith('idx')) { - close = '
'; - } - - // drag and drop section - var htmlSection = '
'+ - close + - '
'+ - '
'+ - '

Drag & Drop the ' + replacePrefix(prefix) + ' file here

'+ - '

OR

'+ - '
'+ - ''+ - ''+ - '
'+ - '
'+ - 'BROWSE files'+ - '
'+ - '
'+ - ''+ - '
'+ - // list of files - '
'+ - '
'; - return htmlSection; - } - - /** - * Replace prefix for file more than second - * - * @param prefix - * @returns 'first', 'second' for 1, 2. After 2 returns 'next' - */ - function replacePrefix(prefix) { - if (prefix == 'first' || prefix == 'second') { - return prefix; - } - return 'next'; - } + return htmlSection; +} - /** - * Toggle top navigation menus zoom - * @param {object} target - dropdown target to be opened/closed - */ - function toggleNavDropdown(target){ - var isOpened = target.hasClass('opened'); - if(!isOpened){ - $(target).addClass('opened'); - $(target) - .css('opacity', 0) - .slideDown('fast') - .animate( - { opacity: 1 }, - { queue: false, duration: 'fast' } - ); - }else{ - $(target).removeClass('opened'); - $(target) - .css('opacity', 1) - .slideUp('fast') - .animate( - { opacity: 0 }, - { queue: false, duration: 'fast' } - ); - } +/** + * Replace prefix for file more than second + * + * @param prefix + * @returns 'first', 'second' for 1, 2. After 2 returns 'next' + */ +function replacePrefix(prefix) { + if (prefix == 'first' || prefix == 'second') { + return prefix; } + return 'next'; +} - /** - * Init remove button for selection area - * @param prefix - prefix for selection area - */ - function initCloseButton(prefix) { - $('#gd-close-dad-area-' + prefix).on(userMouseClick, function(e) { - fillFileVariables(prefix, '', '', ''); - $('#gd-upload-section-' + prefix).remove(); - }); - } +/** + * Init remove button for selection area + * @param prefix - prefix for selection area + */ +function initCloseButton(prefix) { + $('#gd-close-dad-area-' + prefix).on(userMouseClick, function (e) { + fillFileVariables(prefix, '', '', ''); + $('#gd-upload-section-' + prefix).remove(); + }); +} - /** - * Init drop zone for file selection area - * @param prefix - prefix for selection area - */ - function initDropZone(prefix) { - var dropZone = $('#gd-dropZone-' + prefix); - if (typeof dropZone[0] != "undefined") { - //Drag n drop functional - if ($('#gd-dropZone-' + prefix).length) { - if (typeof (window.FileReader) == 'undefined') { - dropZone.text("Your browser doesn't support Drag and Drop"); - dropZone.addClass('error'); - } +/** + * Init drop zone for file selection area + * @param prefix - prefix for selection area + */ +function initDropZone(prefix) { + var dropZone = $('#gd-dropZone-' + prefix); + if (typeof dropZone[0] != "undefined") { + //Drag n drop functional + if ($('#gd-dropZone-' + prefix).length) { + if (typeof (window.FileReader) == 'undefined') { + dropZone.text("Your browser doesn't support Drag and Drop"); + dropZone.addClass('error'); } + } - dropZone[0].ondragover = function (event) { - event.stopPropagation(); - event.preventDefault(); - dropZone.addClass('hover'); - return false; - }; + dropZone[0].ondragover = function (event) { + event.stopPropagation(); + event.preventDefault(); + dropZone.addClass('hover'); + return false; + }; - dropZone[0].ondragleave = function (event) { - event.stopPropagation(); - event.preventDefault(); - dropZone.removeClass('hover'); - return false; - }; + dropZone[0].ondragleave = function (event) { + event.stopPropagation(); + event.preventDefault(); + dropZone.removeClass('hover'); + return false; + }; - dropZone[0].ondrop = function (event) { - event.stopPropagation(); - event.preventDefault(); - dropZone.removeClass('hover'); - var files = event.dataTransfer.files; - addFileForComparing(files, null, prefix); - }; - } + dropZone[0].ondrop = function (event) { + event.stopPropagation(); + event.preventDefault(); + dropZone.removeClass('hover'); + var files = event.dataTransfer.files; + addFileForComparing(files, null, prefix); + }; } +} +/* +****************************************************************** +****************************************************************** +GROUPDOCS.COMAPRISON PLUGIN +****************************************************************** +****************************************************************** +*/ +(function ($) { /* ****************************************************************** + STATIC VALUES ****************************************************************** - GROUPDOCS.COMAPRISON PLUGIN + */ + var gd_navbar = '#gd-navbar'; + + /* ****************************************************************** + METHODS ****************************************************************** */ - (function( $ ) { - /* - ****************************************************************** - STATIC VALUES - ****************************************************************** - */ - var gd_navbar = '#gd-navbar'; - - /* - ****************************************************************** - METHODS - ****************************************************************** - */ - var methods = { - init : function( options ) { - // set defaults - var defaults = { - applicationPath: null, - preloadResultPageCount: 1, - zoom : true, - download: true, - upload: true, - print: true, - rewrite: true, - multiComparing: false - }; - options = $.extend(defaults, options); - - // set global option params - applicationPath = options.applicationPath; - preloadResultPageCount = options.preloadResultPageCount; - rewrite = options.rewrite; - multiComparing = options.multiComparing; - - // assembly html base - this.append(getHtmlBase); - this.append(getHtmlModalDialog); - - $(gd_navbar).append(getHtmlComparisonPanel); - $(gd_navbar).append(getHtmlNavSplitter); - - // assembly nav bar - if(options.download){ - $(gd_navbar).append(getHtmlNavDownloadPanel); - $(gd_navbar).append(getHtmlNavSplitter); - } - if(options.upload){ - $(gd_navbar).append(getHtmlNavUploadPanel); - $(gd_navbar).append(getHtmlNavSplitter); - } - if(options.print){ - $(gd_navbar).append(getHtmlNavPrintPanel); - $(gd_navbar).append(getHtmlNavSplitter); - } - if(options.zoom){ - $(gd_navbar).append(getHtmlNavZoomPanel); - $(gd_navbar).append(getHtmlNavSplitter); - } + var methods = { + init: function (options) { + // set defaults + var defaults = { + applicationPath: null, + preloadResultPageCount: 0, + download: true, + upload: true, + rewrite: true, + multiComparing: false + }; + $('#element').viewer({ + applicationPath: options.applicationPath, + defaultDocument: '', + htmlMode: false, + preloadPageCount: options.preloadResultPageCount, + zoom: false, + pageSelector: false, + search: false, + thumbnails: false, + rotate: false, + download: options.download, + upload: options.upload, + print: false, + browse: false, + rewrite: options.rewrite, + saveRotateState: false, + enableRightClick: options.enableRightClick + }); - initDropZone('first'); - initDropZone('second'); + options = $.extend(defaults, options); - } - }; + // set global option params + applicationPath = options.applicationPath; + preloadResultPageCount = options.preloadResultPageCount; + rewrite = options.rewrite; + multiComparing = options.multiComparing; + $(".wrapper").append(getHtmlBase); + // assembly html base - /* - ****************************************************************** - INIT PLUGIN - ****************************************************************** - */ - $.fn.comparison = function( method ) { - if ( methods[method] ) { - return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); - } else if ( typeof method === 'object' || ! method ) { - return methods.init.apply( this, arguments ); - } else { - $.error( 'Method' + method + ' does not exist on jQuery.comparison' ); - } - }; - /* - ****************************************************************** - HTML MARKUP - ****************************************************************** - */ - function getHtmlComparisonPanel(){ - return '
  • '+ - '' + - ''+ - 'Compare'+ - ''+ - '
    • '+ - '
  • '+ - '' + - ''+ - 'Clean comparing'+ - ''+ - '
    • '; - } - - function getHtmlBase(){ - return '
    '+ - '
    '+ - // header BEGIN - '
    '+ - ''+ - - // nav bar BEGIN - '
      '+ - // nav bar content - '
    '+ - // nav bar END - '
    '+ - // header END - '
    '+ - ''+ - ''+ - '
    '+ - '
    '+ - getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + getHtmlMultiCompare() + - '
    '+ - '
    '+ - '
    '+ - // pages BEGIN - '
    '+ - ''+ - '
    '+ - // list of pages - '
    '+ - '
    '+ - // pages END - '
    '+ - '
    '; - } + $(gd_navbar).prepend(getHtmlComparisonPanel); - function getHtmlMultiCompare() { - if (multiComparing) { - return '
    '+ - '
    ' + - '' + - '
    ' + - '
    '; - } else { - return ''; + // assembly nav bar + if (options.download) { + $(gd_navbar).append(getHtmlNavDownloadPanel); } - } - - function getHtmlModalDialog(){ - return '
    '+ - '
    '+ - '
    '+ - // header - '
    '+ - '
    x
    '+ - '

    '+ - '
    '+ - // body - '
    '+ - // modal content will be here - '
    '+ - // footer - '
    '+ - // empty footer - '
    '+ - '
    '+ - '
    '+ - '
    '; - } - - function getHtmlNavSplitter(){ - return ''; - } - - function getHtmlNavDownloadPanel() { - return '
  • '+ - '' + - '' + - 'Download' + - ''+ - ''+ - '
      '+ - '
    • Download All Results
      • ' + - '
    • Download Summary
      • ' + - '
    '+ - '
    • '; - } - function getHtmlNavPrintPanel(){ - return '
  • Print
    • '; - } - - function getHtmlNavUploadPanel(){ - return '
  • Upload
    • '; - } + // assembly nav bar + if (options.multiComparing) { + $(gd_navbar).append(getHtmlMultiCompare); + } - function getHtmlNavZoomPanel(){ - return '
  • '+ - '100%'+ - ''+ - '
      '+ - '
    • 25%
      • '+ - '
    • 50%
      • '+ - '
    • 100%
      • '+ - '
    • 150%
      • '+ - '
    • 200%
      • '+ - '
    • 300%
      • '+ - ''+ - '
    • Fit Width
      • '+ - '
    • Fit Height
      • '+ - '
    '+ - '
    • '+ - '
  • '+ - ''+ - 'Zoom In'+ - '
    • '+ - '
  • '+ - ''+ - 'Zoom Out'+ - '
    • '; + initDropZone('first'); + initDropZone('second'); + $(".gd-nav-separator").remove(); } - - })(jQuery); + }; /* ****************************************************************** - ****************************************************************** - JQUERY SCROLL TO PLUGIN - ****************************************************************** + INIT PLUGIN ****************************************************************** */ - $.fn.scrollTo = function( target, options, callback ){ - if(typeof options == 'function' && arguments.length == 2){ callback = options; options = target; } - var settings = $.extend({ - scrollTarget : target, - offsetTop : 50, - duration : 500, - zoom : 100, - easing : 'swing' - }, options); - return this.each(function(){ - var scrollPane = $(this); - var scrollTarget = (typeof settings.scrollTarget == "number") ? settings.scrollTarget : $(settings.scrollTarget); - if(typeof settings.scrollTarget != "number"){ - var scrollYTop = scrollTarget.offset().top * settings.zoom / 100; - } - var scrollY = (typeof scrollTarget == "number") ? scrollTarget : scrollYTop + scrollPane.scrollTop() - parseInt(settings.offsetTop); - scrollPane.animate({scrollTop : scrollY }, parseInt(settings.duration), settings.easing, function(){ - if (typeof callback == 'function') { - callback.call(this); - } - }); - }); - } + $.fn.comparison = function (method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return methods.init.apply(this, arguments); + } else { + $.error('Method' + method + ' does not exist on jQuery.comparison'); + } + }; /* ****************************************************************** - ****************************************************************** - JQUERY CHECK IF IN VIEWPORT PLUGIN - ****************************************************************** + HTML MARKUP ****************************************************************** */ - $.fn.isOnScreen = function(x, y){ - - if(x == null || typeof x == 'undefined') x = 1; - if(y == null || typeof y == 'undefined') y = 1; - - var win = $(window); - - var viewport = { - top : win.scrollTop(), - left : win.scrollLeft() - }; - viewport.right = viewport.left + win.width(); - viewport.bottom = viewport.top + win.height(); - - var height = this.outerHeight(); - var width = this.outerWidth(); - - if(!width || !height){ - return false; - } - - var bounds = this.offset(); - bounds.right = bounds.left + width; - bounds.bottom = bounds.top + height; - - var visible = (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); + function getHtmlComparisonPanel() { + return '
  • ' + + '' + + '' + + 'Compare' + + '' + + '
    • '; + } - if(!visible){ - return false; - } + function getHtmlBase() { + return '
    ' + + '
    ' + + '
    ' + + getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + + '
    ' + + '
    ' + + '
    ' + + // pages BEGIN + '
    ' + + '' + + '
    ' + + // list of pages + '
    ' + + '
    ' + + // pages END + '
    ' + + ''; + } - var deltas = { - top : Math.min( 1, ( bounds.bottom - viewport.top ) / height), - bottom : Math.min(1, ( viewport.bottom - bounds.top ) / height), - left : Math.min(1, ( bounds.right - viewport.left ) / width), - right : Math.min(1, ( viewport.right - bounds.left ) / width) - }; + function getHtmlMultiCompare() { + return '
  • ' + + '' + + '' + + 'Compare' + + '' + + '
    • '; + } - return (deltas.left * deltas.right) >= x && (deltas.top * deltas.bottom) >= y; - }; + function getHtmlNavDownloadPanel() { + var downloadBtn = $("#gd-btn-download"); + var downloadDropDown = '
  • ' + + '' + + '' + + 'Download' + + '' + + '' + + '' + + '
    • '; + downloadBtn.html(downloadDropDown); + } - /* - ****************************************************************** - ****************************************************************** - CHECK IF MOBILE - ****************************************************************** - ****************************************************************** - */ - var isMobile = function(){ - return 'ontouchstart' in window // works on most browsers - || 'onmsgesturechange' in window; // works on ie10 - }; \ No newline at end of file +})(jQuery); \ No newline at end of file From 6ac648ed214f9f24943329dc7fe64976e044a924 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Sat, 23 Mar 2019 13:56:41 +0200 Subject: [PATCH 02/26] Splitted layout --- comparison.html | 1 - packages/comparison/css/all.css | 3671 ------------------------ packages/comparison/css/comparison.css | 210 +- packages/comparison/js/comparison.js | 129 +- 4 files changed, 91 insertions(+), 3920 deletions(-) delete mode 100644 packages/comparison/css/all.css diff --git a/comparison.html b/comparison.html index 8a9bcf5..dcaab61 100644 --- a/comparison.html +++ b/comparison.html @@ -1,7 +1,6 @@ GroupDocs.Comparison for Java Spring - diff --git a/packages/comparison/css/all.css b/packages/comparison/css/all.css deleted file mode 100644 index 148911e..0000000 --- a/packages/comparison/css/all.css +++ /dev/null @@ -1,3671 +0,0 @@ -/*! - * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com - * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) - */ -.fa, -.fas, -.far, -.fal, -.fab { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; } - -.fa-lg { - font-size: 1.33333em; - line-height: 0.75em; - vertical-align: -.0667em; } - -.fa-xs { - font-size: .75em; } - -.fa-sm { - font-size: .875em; } - -.fa-1x { - font-size: 1em; } - -.fa-2x { - font-size: 2em; } - -.fa-3x { - font-size: 3em; } - -.fa-4x { - font-size: 4em; } - -.fa-5x { - font-size: 5em; } - -.fa-6x { - font-size: 6em; } - -.fa-7x { - font-size: 7em; } - -.fa-8x { - font-size: 8em; } - -.fa-9x { - font-size: 9em; } - -.fa-10x { - font-size: 10em; } - -.fa-fw { - text-align: center; - width: 1.25em; } - -.fa-ul { - list-style-type: none; - margin-left: 2.5em; - padding-left: 0; } - .fa-ul > li { - position: relative; } - -.fa-li { - left: -2em; - position: absolute; - text-align: center; - width: 2em; - line-height: inherit; } - -.fa-border { - border: solid 0.08em #eee; - border-radius: .1em; - padding: .2em .25em .15em; } - -.fa-pull-left { - float: left; } - -.fa-pull-right { - float: right; } - -.fa.fa-pull-left, -.fas.fa-pull-left, -.far.fa-pull-left, -.fal.fa-pull-left, -.fab.fa-pull-left { - margin-right: .3em; } - -.fa.fa-pull-right, -.fas.fa-pull-right, -.far.fa-pull-right, -.fal.fa-pull-right, -.fab.fa-pull-right { - margin-left: .3em; } - -.fa-spin { - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; } - -.fa-pulse { - -webkit-animation: fa-spin 1s infinite steps(8); - animation: fa-spin 1s infinite steps(8); } - -@-webkit-keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -@keyframes fa-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); } } - -.fa-rotate-90 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); } - -.fa-rotate-180 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } - -.fa-rotate-270 { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; - -webkit-transform: rotate(270deg); - transform: rotate(270deg); } - -.fa-flip-horizontal { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; - -webkit-transform: scale(-1, 1); - transform: scale(-1, 1); } - -.fa-flip-vertical { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; - -webkit-transform: scale(1, -1); - transform: scale(1, -1); } - -.fa-flip-horizontal.fa-flip-vertical { - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; - -webkit-transform: scale(-1, -1); - transform: scale(-1, -1); } - -:root .fa-rotate-90, -:root .fa-rotate-180, -:root .fa-rotate-270, -:root .fa-flip-horizontal, -:root .fa-flip-vertical { - -webkit-filter: none; - filter: none; } - -.fa-stack { - display: inline-block; - height: 2em; - line-height: 2em; - position: relative; - vertical-align: middle; - width: 2em; } - -.fa-stack-1x, -.fa-stack-2x { - left: 0; - position: absolute; - text-align: center; - width: 100%; } - -.fa-stack-1x { - line-height: inherit; } - -.fa-stack-2x { - font-size: 2em; } - -.fa-inverse { - color: #fff; } - -/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen -readers do not read off random characters that represent icons */ -.fa-500px:before { - content: "\f26e"; } - -.fa-accessible-icon:before { - content: "\f368"; } - -.fa-accusoft:before { - content: "\f369"; } - -.fa-address-book:before { - content: "\f2b9"; } - -.fa-address-card:before { - content: "\f2bb"; } - -.fa-adjust:before { - content: "\f042"; } - -.fa-adn:before { - content: "\f170"; } - -.fa-adversal:before { - content: "\f36a"; } - -.fa-affiliatetheme:before { - content: "\f36b"; } - -.fa-air-freshener:before { - content: "\f5d0"; } - -.fa-algolia:before { - content: "\f36c"; } - -.fa-align-center:before { - content: "\f037"; } - -.fa-align-justify:before { - content: "\f039"; } - -.fa-align-left:before { - content: "\f036"; } - -.fa-align-right:before { - content: "\f038"; } - -.fa-allergies:before { - content: "\f461"; } - -.fa-amazon:before { - content: "\f270"; } - -.fa-amazon-pay:before { - content: "\f42c"; } - -.fa-ambulance:before { - content: "\f0f9"; } - -.fa-american-sign-language-interpreting:before { - content: "\f2a3"; } - -.fa-amilia:before { - content: "\f36d"; } - -.fa-anchor:before { - content: "\f13d"; } - -.fa-android:before { - content: "\f17b"; } - -.fa-angellist:before { - content: "\f209"; } - -.fa-angle-double-down:before { - content: "\f103"; } - -.fa-angle-double-left:before { - content: "\f100"; } - -.fa-angle-double-right:before { - content: "\f101"; } - -.fa-angle-double-up:before { - content: "\f102"; } - -.fa-angle-down:before { - content: "\f107"; } - -.fa-angle-left:before { - content: "\f104"; } - -.fa-angle-right:before { - content: "\f105"; } - -.fa-angle-up:before { - content: "\f106"; } - -.fa-angry:before { - content: "\f556"; } - -.fa-angrycreative:before { - content: "\f36e"; } - -.fa-angular:before { - content: "\f420"; } - -.fa-app-store:before { - content: "\f36f"; } - -.fa-app-store-ios:before { - content: "\f370"; } - -.fa-apper:before { - content: "\f371"; } - -.fa-apple:before { - content: "\f179"; } - -.fa-apple-alt:before { - content: "\f5d1"; } - -.fa-apple-pay:before { - content: "\f415"; } - -.fa-archive:before { - content: "\f187"; } - -.fa-archway:before { - content: "\f557"; } - -.fa-arrow-alt-circle-down:before { - content: "\f358"; } - -.fa-arrow-alt-circle-left:before { - content: "\f359"; } - -.fa-arrow-alt-circle-right:before { - content: "\f35a"; } - -.fa-arrow-alt-circle-up:before { - content: "\f35b"; } - -.fa-arrow-circle-down:before { - content: "\f0ab"; } - -.fa-arrow-circle-left:before { - content: "\f0a8"; } - -.fa-arrow-circle-right:before { - content: "\f0a9"; } - -.fa-arrow-circle-up:before { - content: "\f0aa"; } - -.fa-arrow-down:before { - content: "\f063"; } - -.fa-arrow-left:before { - content: "\f060"; } - -.fa-arrow-right:before { - content: "\f061"; } - -.fa-arrow-up:before { - content: "\f062"; } - -.fa-arrows-alt:before { - content: "\f0b2"; } - -.fa-arrows-alt-h:before { - content: "\f337"; } - -.fa-arrows-alt-v:before { - content: "\f338"; } - -.fa-assistive-listening-systems:before { - content: "\f2a2"; } - -.fa-asterisk:before { - content: "\f069"; } - -.fa-asymmetrik:before { - content: "\f372"; } - -.fa-at:before { - content: "\f1fa"; } - -.fa-atlas:before { - content: "\f558"; } - -.fa-atom:before { - content: "\f5d2"; } - -.fa-audible:before { - content: "\f373"; } - -.fa-audio-description:before { - content: "\f29e"; } - -.fa-autoprefixer:before { - content: "\f41c"; } - -.fa-avianex:before { - content: "\f374"; } - -.fa-aviato:before { - content: "\f421"; } - -.fa-award:before { - content: "\f559"; } - -.fa-aws:before { - content: "\f375"; } - -.fa-backspace:before { - content: "\f55a"; } - -.fa-backward:before { - content: "\f04a"; } - -.fa-balance-scale:before { - content: "\f24e"; } - -.fa-ban:before { - content: "\f05e"; } - -.fa-band-aid:before { - content: "\f462"; } - -.fa-bandcamp:before { - content: "\f2d5"; } - -.fa-barcode:before { - content: "\f02a"; } - -.fa-bars:before { - content: "\f0c9"; } - -.fa-baseball-ball:before { - content: "\f433"; } - -.fa-basketball-ball:before { - content: "\f434"; } - -.fa-bath:before { - content: "\f2cd"; } - -.fa-battery-empty:before { - content: "\f244"; } - -.fa-battery-full:before { - content: "\f240"; } - -.fa-battery-half:before { - content: "\f242"; } - -.fa-battery-quarter:before { - content: "\f243"; } - -.fa-battery-three-quarters:before { - content: "\f241"; } - -.fa-bed:before { - content: "\f236"; } - -.fa-beer:before { - content: "\f0fc"; } - -.fa-behance:before { - content: "\f1b4"; } - -.fa-behance-square:before { - content: "\f1b5"; } - -.fa-bell:before { - content: "\f0f3"; } - -.fa-bell-slash:before { - content: "\f1f6"; } - -.fa-bezier-curve:before { - content: "\f55b"; } - -.fa-bicycle:before { - content: "\f206"; } - -.fa-bimobject:before { - content: "\f378"; } - -.fa-binoculars:before { - content: "\f1e5"; } - -.fa-birthday-cake:before { - content: "\f1fd"; } - -.fa-bitbucket:before { - content: "\f171"; } - -.fa-bitcoin:before { - content: "\f379"; } - -.fa-bity:before { - content: "\f37a"; } - -.fa-black-tie:before { - content: "\f27e"; } - -.fa-blackberry:before { - content: "\f37b"; } - -.fa-blender:before { - content: "\f517"; } - -.fa-blind:before { - content: "\f29d"; } - -.fa-blogger:before { - content: "\f37c"; } - -.fa-blogger-b:before { - content: "\f37d"; } - -.fa-bluetooth:before { - content: "\f293"; } - -.fa-bluetooth-b:before { - content: "\f294"; } - -.fa-bold:before { - content: "\f032"; } - -.fa-bolt:before { - content: "\f0e7"; } - -.fa-bomb:before { - content: "\f1e2"; } - -.fa-bone:before { - content: "\f5d7"; } - -.fa-bong:before { - content: "\f55c"; } - -.fa-book:before { - content: "\f02d"; } - -.fa-book-open:before { - content: "\f518"; } - -.fa-book-reader:before { - content: "\f5da"; } - -.fa-bookmark:before { - content: "\f02e"; } - -.fa-bowling-ball:before { - content: "\f436"; } - -.fa-box:before { - content: "\f466"; } - -.fa-box-open:before { - content: "\f49e"; } - -.fa-boxes:before { - content: "\f468"; } - -.fa-braille:before { - content: "\f2a1"; } - -.fa-brain:before { - content: "\f5dc"; } - -.fa-briefcase:before { - content: "\f0b1"; } - -.fa-briefcase-medical:before { - content: "\f469"; } - -.fa-broadcast-tower:before { - content: "\f519"; } - -.fa-broom:before { - content: "\f51a"; } - -.fa-brush:before { - content: "\f55d"; } - -.fa-btc:before { - content: "\f15a"; } - -.fa-bug:before { - content: "\f188"; } - -.fa-building:before { - content: "\f1ad"; } - -.fa-bullhorn:before { - content: "\f0a1"; } - -.fa-bullseye:before { - content: "\f140"; } - -.fa-burn:before { - content: "\f46a"; } - -.fa-buromobelexperte:before { - content: "\f37f"; } - -.fa-bus:before { - content: "\f207"; } - -.fa-bus-alt:before { - content: "\f55e"; } - -.fa-buysellads:before { - content: "\f20d"; } - -.fa-calculator:before { - content: "\f1ec"; } - -.fa-calendar:before { - content: "\f133"; } - -.fa-calendar-alt:before { - content: "\f073"; } - -.fa-calendar-check:before { - content: "\f274"; } - -.fa-calendar-minus:before { - content: "\f272"; } - -.fa-calendar-plus:before { - content: "\f271"; } - -.fa-calendar-times:before { - content: "\f273"; } - -.fa-camera:before { - content: "\f030"; } - -.fa-camera-retro:before { - content: "\f083"; } - -.fa-cannabis:before { - content: "\f55f"; } - -.fa-capsules:before { - content: "\f46b"; } - -.fa-car:before { - content: "\f1b9"; } - -.fa-car-alt:before { - content: "\f5de"; } - -.fa-car-battery:before { - content: "\f5df"; } - -.fa-car-crash:before { - content: "\f5e1"; } - -.fa-car-side:before { - content: "\f5e4"; } - -.fa-caret-down:before { - content: "\f0d7"; } - -.fa-caret-left:before { - content: "\f0d9"; } - -.fa-caret-right:before { - content: "\f0da"; } - -.fa-caret-square-down:before { - content: "\f150"; } - -.fa-caret-square-left:before { - content: "\f191"; } - -.fa-caret-square-right:before { - content: "\f152"; } - -.fa-caret-square-up:before { - content: "\f151"; } - -.fa-caret-up:before { - content: "\f0d8"; } - -.fa-cart-arrow-down:before { - content: "\f218"; } - -.fa-cart-plus:before { - content: "\f217"; } - -.fa-cc-amazon-pay:before { - content: "\f42d"; } - -.fa-cc-amex:before { - content: "\f1f3"; } - -.fa-cc-apple-pay:before { - content: "\f416"; } - -.fa-cc-diners-club:before { - content: "\f24c"; } - -.fa-cc-discover:before { - content: "\f1f2"; } - -.fa-cc-jcb:before { - content: "\f24b"; } - -.fa-cc-mastercard:before { - content: "\f1f1"; } - -.fa-cc-paypal:before { - content: "\f1f4"; } - -.fa-cc-stripe:before { - content: "\f1f5"; } - -.fa-cc-visa:before { - content: "\f1f0"; } - -.fa-centercode:before { - content: "\f380"; } - -.fa-certificate:before { - content: "\f0a3"; } - -.fa-chalkboard:before { - content: "\f51b"; } - -.fa-chalkboard-teacher:before { - content: "\f51c"; } - -.fa-charging-station:before { - content: "\f5e7"; } - -.fa-chart-area:before { - content: "\f1fe"; } - -.fa-chart-bar:before { - content: "\f080"; } - -.fa-chart-line:before { - content: "\f201"; } - -.fa-chart-pie:before { - content: "\f200"; } - -.fa-check:before { - content: "\f00c"; } - -.fa-check-circle:before { - content: "\f058"; } - -.fa-check-double:before { - content: "\f560"; } - -.fa-check-square:before { - content: "\f14a"; } - -.fa-chess:before { - content: "\f439"; } - -.fa-chess-bishop:before { - content: "\f43a"; } - -.fa-chess-board:before { - content: "\f43c"; } - -.fa-chess-king:before { - content: "\f43f"; } - -.fa-chess-knight:before { - content: "\f441"; } - -.fa-chess-pawn:before { - content: "\f443"; } - -.fa-chess-queen:before { - content: "\f445"; } - -.fa-chess-rook:before { - content: "\f447"; } - -.fa-chevron-circle-down:before { - content: "\f13a"; } - -.fa-chevron-circle-left:before { - content: "\f137"; } - -.fa-chevron-circle-right:before { - content: "\f138"; } - -.fa-chevron-circle-up:before { - content: "\f139"; } - -.fa-chevron-down:before { - content: "\f078"; } - -.fa-chevron-left:before { - content: "\f053"; } - -.fa-chevron-right:before { - content: "\f054"; } - -.fa-chevron-up:before { - content: "\f077"; } - -.fa-child:before { - content: "\f1ae"; } - -.fa-chrome:before { - content: "\f268"; } - -.fa-church:before { - content: "\f51d"; } - -.fa-circle:before { - content: "\f111"; } - -.fa-circle-notch:before { - content: "\f1ce"; } - -.fa-clipboard:before { - content: "\f328"; } - -.fa-clipboard-check:before { - content: "\f46c"; } - -.fa-clipboard-list:before { - content: "\f46d"; } - -.fa-clock:before { - content: "\f017"; } - -.fa-clone:before { - content: "\f24d"; } - -.fa-closed-captioning:before { - content: "\f20a"; } - -.fa-cloud:before { - content: "\f0c2"; } - -.fa-cloud-download-alt:before { - content: "\f381"; } - -.fa-cloud-upload-alt:before { - content: "\f382"; } - -.fa-cloudscale:before { - content: "\f383"; } - -.fa-cloudsmith:before { - content: "\f384"; } - -.fa-cloudversify:before { - content: "\f385"; } - -.fa-cocktail:before { - content: "\f561"; } - -.fa-code:before { - content: "\f121"; } - -.fa-code-branch:before { - content: "\f126"; } - -.fa-codepen:before { - content: "\f1cb"; } - -.fa-codiepie:before { - content: "\f284"; } - -.fa-coffee:before { - content: "\f0f4"; } - -.fa-cog:before { - content: "\f013"; } - -.fa-cogs:before { - content: "\f085"; } - -.fa-coins:before { - content: "\f51e"; } - -.fa-columns:before { - content: "\f0db"; } - -.fa-comment:before { - content: "\f075"; } - -.fa-comment-alt:before { - content: "\f27a"; } - -.fa-comment-dots:before { - content: "\f4ad"; } - -.fa-comment-slash:before { - content: "\f4b3"; } - -.fa-comments:before { - content: "\f086"; } - -.fa-compact-disc:before { - content: "\f51f"; } - -.fa-compass:before { - content: "\f14e"; } - -.fa-compress:before { - content: "\f066"; } - -.fa-concierge-bell:before { - content: "\f562"; } - -.fa-connectdevelop:before { - content: "\f20e"; } - -.fa-contao:before { - content: "\f26d"; } - -.fa-cookie:before { - content: "\f563"; } - -.fa-cookie-bite:before { - content: "\f564"; } - -.fa-copy:before { - content: "\f0c5"; } - -.fa-copyright:before { - content: "\f1f9"; } - -.fa-couch:before { - content: "\f4b8"; } - -.fa-cpanel:before { - content: "\f388"; } - -.fa-creative-commons:before { - content: "\f25e"; } - -.fa-creative-commons-by:before { - content: "\f4e7"; } - -.fa-creative-commons-nc:before { - content: "\f4e8"; } - -.fa-creative-commons-nc-eu:before { - content: "\f4e9"; } - -.fa-creative-commons-nc-jp:before { - content: "\f4ea"; } - -.fa-creative-commons-nd:before { - content: "\f4eb"; } - -.fa-creative-commons-pd:before { - content: "\f4ec"; } - -.fa-creative-commons-pd-alt:before { - content: "\f4ed"; } - -.fa-creative-commons-remix:before { - content: "\f4ee"; } - -.fa-creative-commons-sa:before { - content: "\f4ef"; } - -.fa-creative-commons-sampling:before { - content: "\f4f0"; } - -.fa-creative-commons-sampling-plus:before { - content: "\f4f1"; } - -.fa-creative-commons-share:before { - content: "\f4f2"; } - -.fa-credit-card:before { - content: "\f09d"; } - -.fa-crop:before { - content: "\f125"; } - -.fa-crop-alt:before { - content: "\f565"; } - -.fa-crosshairs:before { - content: "\f05b"; } - -.fa-crow:before { - content: "\f520"; } - -.fa-crown:before { - content: "\f521"; } - -.fa-css3:before { - content: "\f13c"; } - -.fa-css3-alt:before { - content: "\f38b"; } - -.fa-cube:before { - content: "\f1b2"; } - -.fa-cubes:before { - content: "\f1b3"; } - -.fa-cut:before { - content: "\f0c4"; } - -.fa-cuttlefish:before { - content: "\f38c"; } - -.fa-d-and-d:before { - content: "\f38d"; } - -.fa-dashcube:before { - content: "\f210"; } - -.fa-database:before { - content: "\f1c0"; } - -.fa-deaf:before { - content: "\f2a4"; } - -.fa-delicious:before { - content: "\f1a5"; } - -.fa-deploydog:before { - content: "\f38e"; } - -.fa-deskpro:before { - content: "\f38f"; } - -.fa-desktop:before { - content: "\f108"; } - -.fa-deviantart:before { - content: "\f1bd"; } - -.fa-diagnoses:before { - content: "\f470"; } - -.fa-dice:before { - content: "\f522"; } - -.fa-dice-five:before { - content: "\f523"; } - -.fa-dice-four:before { - content: "\f524"; } - -.fa-dice-one:before { - content: "\f525"; } - -.fa-dice-six:before { - content: "\f526"; } - -.fa-dice-three:before { - content: "\f527"; } - -.fa-dice-two:before { - content: "\f528"; } - -.fa-digg:before { - content: "\f1a6"; } - -.fa-digital-ocean:before { - content: "\f391"; } - -.fa-digital-tachograph:before { - content: "\f566"; } - -.fa-directions:before { - content: "\f5eb"; } - -.fa-discord:before { - content: "\f392"; } - -.fa-discourse:before { - content: "\f393"; } - -.fa-divide:before { - content: "\f529"; } - -.fa-dizzy:before { - content: "\f567"; } - -.fa-dna:before { - content: "\f471"; } - -.fa-dochub:before { - content: "\f394"; } - -.fa-docker:before { - content: "\f395"; } - -.fa-dollar-sign:before { - content: "\f155"; } - -.fa-dolly:before { - content: "\f472"; } - -.fa-dolly-flatbed:before { - content: "\f474"; } - -.fa-donate:before { - content: "\f4b9"; } - -.fa-door-closed:before { - content: "\f52a"; } - -.fa-door-open:before { - content: "\f52b"; } - -.fa-dot-circle:before { - content: "\f192"; } - -.fa-dove:before { - content: "\f4ba"; } - -.fa-download:before { - content: "\f019"; } - -.fa-draft2digital:before { - content: "\f396"; } - -.fa-drafting-compass:before { - content: "\f568"; } - -.fa-draw-polygon:before { - content: "\f5ee"; } - -.fa-dribbble:before { - content: "\f17d"; } - -.fa-dribbble-square:before { - content: "\f397"; } - -.fa-dropbox:before { - content: "\f16b"; } - -.fa-drum:before { - content: "\f569"; } - -.fa-drum-steelpan:before { - content: "\f56a"; } - -.fa-drupal:before { - content: "\f1a9"; } - -.fa-dumbbell:before { - content: "\f44b"; } - -.fa-dyalog:before { - content: "\f399"; } - -.fa-earlybirds:before { - content: "\f39a"; } - -.fa-ebay:before { - content: "\f4f4"; } - -.fa-edge:before { - content: "\f282"; } - -.fa-edit:before { - content: "\f044"; } - -.fa-eject:before { - content: "\f052"; } - -.fa-elementor:before { - content: "\f430"; } - -.fa-ellipsis-h:before { - content: "\f141"; } - -.fa-ellipsis-v:before { - content: "\f142"; } - -.fa-ello:before { - content: "\f5f1"; } - -.fa-ember:before { - content: "\f423"; } - -.fa-empire:before { - content: "\f1d1"; } - -.fa-envelope:before { - content: "\f0e0"; } - -.fa-envelope-open:before { - content: "\f2b6"; } - -.fa-envelope-square:before { - content: "\f199"; } - -.fa-envira:before { - content: "\f299"; } - -.fa-equals:before { - content: "\f52c"; } - -.fa-eraser:before { - content: "\f12d"; } - -.fa-erlang:before { - content: "\f39d"; } - -.fa-ethereum:before { - content: "\f42e"; } - -.fa-etsy:before { - content: "\f2d7"; } - -.fa-euro-sign:before { - content: "\f153"; } - -.fa-exchange-alt:before { - content: "\f362"; } - -.fa-exclamation:before { - content: "\f12a"; } - -.fa-exclamation-circle:before { - content: "\f06a"; } - -.fa-exclamation-triangle:before { - content: "\f071"; } - -.fa-expand:before { - content: "\f065"; } - -.fa-expand-arrows-alt:before { - content: "\f31e"; } - -.fa-expeditedssl:before { - content: "\f23e"; } - -.fa-external-link-alt:before { - content: "\f35d"; } - -.fa-external-link-square-alt:before { - content: "\f360"; } - -.fa-eye:before { - content: "\f06e"; } - -.fa-eye-dropper:before { - content: "\f1fb"; } - -.fa-eye-slash:before { - content: "\f070"; } - -.fa-facebook:before { - content: "\f09a"; } - -.fa-facebook-f:before { - content: "\f39e"; } - -.fa-facebook-messenger:before { - content: "\f39f"; } - -.fa-facebook-square:before { - content: "\f082"; } - -.fa-fast-backward:before { - content: "\f049"; } - -.fa-fast-forward:before { - content: "\f050"; } - -.fa-fax:before { - content: "\f1ac"; } - -.fa-feather:before { - content: "\f52d"; } - -.fa-feather-alt:before { - content: "\f56b"; } - -.fa-female:before { - content: "\f182"; } - -.fa-fighter-jet:before { - content: "\f0fb"; } - -.fa-file:before { - content: "\f15b"; } - -.fa-file-alt:before { - content: "\f15c"; } - -.fa-file-archive:before { - content: "\f1c6"; } - -.fa-file-audio:before { - content: "\f1c7"; } - -.fa-file-code:before { - content: "\f1c9"; } - -.fa-file-contract:before { - content: "\f56c"; } - -.fa-file-download:before { - content: "\f56d"; } - -.fa-file-excel:before { - content: "\f1c3"; } - -.fa-file-export:before { - content: "\f56e"; } - -.fa-file-image:before { - content: "\f1c5"; } - -.fa-file-import:before { - content: "\f56f"; } - -.fa-file-invoice:before { - content: "\f570"; } - -.fa-file-invoice-dollar:before { - content: "\f571"; } - -.fa-file-medical:before { - content: "\f477"; } - -.fa-file-medical-alt:before { - content: "\f478"; } - -.fa-file-pdf:before { - content: "\f1c1"; } - -.fa-file-powerpoint:before { - content: "\f1c4"; } - -.fa-file-prescription:before { - content: "\f572"; } - -.fa-file-signature:before { - content: "\f573"; } - -.fa-file-upload:before { - content: "\f574"; } - -.fa-file-video:before { - content: "\f1c8"; } - -.fa-file-word:before { - content: "\f1c2"; } - -.fa-fill:before { - content: "\f575"; } - -.fa-fill-drip:before { - content: "\f576"; } - -.fa-film:before { - content: "\f008"; } - -.fa-filter:before { - content: "\f0b0"; } - -.fa-fingerprint:before { - content: "\f577"; } - -.fa-fire:before { - content: "\f06d"; } - -.fa-fire-extinguisher:before { - content: "\f134"; } - -.fa-firefox:before { - content: "\f269"; } - -.fa-first-aid:before { - content: "\f479"; } - -.fa-first-order:before { - content: "\f2b0"; } - -.fa-first-order-alt:before { - content: "\f50a"; } - -.fa-firstdraft:before { - content: "\f3a1"; } - -.fa-fish:before { - content: "\f578"; } - -.fa-flag:before { - content: "\f024"; } - -.fa-flag-checkered:before { - content: "\f11e"; } - -.fa-flask:before { - content: "\f0c3"; } - -.fa-flickr:before { - content: "\f16e"; } - -.fa-flipboard:before { - content: "\f44d"; } - -.fa-flushed:before { - content: "\f579"; } - -.fa-fly:before { - content: "\f417"; } - -.fa-folder:before { - content: "\f07b"; } - -.fa-folder-open:before { - content: "\f07c"; } - -.fa-font:before { - content: "\f031"; } - -.fa-font-awesome:before { - content: "\f2b4"; } - -.fa-font-awesome-alt:before { - content: "\f35c"; } - -.fa-font-awesome-flag:before { - content: "\f425"; } - -.fa-font-awesome-logo-full:before { - content: "\f4e6"; } - -.fa-fonticons:before { - content: "\f280"; } - -.fa-fonticons-fi:before { - content: "\f3a2"; } - -.fa-football-ball:before { - content: "\f44e"; } - -.fa-fort-awesome:before { - content: "\f286"; } - -.fa-fort-awesome-alt:before { - content: "\f3a3"; } - -.fa-forumbee:before { - content: "\f211"; } - -.fa-forward:before { - content: "\f04e"; } - -.fa-foursquare:before { - content: "\f180"; } - -.fa-free-code-camp:before { - content: "\f2c5"; } - -.fa-freebsd:before { - content: "\f3a4"; } - -.fa-frog:before { - content: "\f52e"; } - -.fa-frown:before { - content: "\f119"; } - -.fa-frown-open:before { - content: "\f57a"; } - -.fa-fulcrum:before { - content: "\f50b"; } - -.fa-futbol:before { - content: "\f1e3"; } - -.fa-galactic-republic:before { - content: "\f50c"; } - -.fa-galactic-senate:before { - content: "\f50d"; } - -.fa-gamepad:before { - content: "\f11b"; } - -.fa-gas-pump:before { - content: "\f52f"; } - -.fa-gavel:before { - content: "\f0e3"; } - -.fa-gem:before { - content: "\f3a5"; } - -.fa-genderless:before { - content: "\f22d"; } - -.fa-get-pocket:before { - content: "\f265"; } - -.fa-gg:before { - content: "\f260"; } - -.fa-gg-circle:before { - content: "\f261"; } - -.fa-gift:before { - content: "\f06b"; } - -.fa-git:before { - content: "\f1d3"; } - -.fa-git-square:before { - content: "\f1d2"; } - -.fa-github:before { - content: "\f09b"; } - -.fa-github-alt:before { - content: "\f113"; } - -.fa-github-square:before { - content: "\f092"; } - -.fa-gitkraken:before { - content: "\f3a6"; } - -.fa-gitlab:before { - content: "\f296"; } - -.fa-gitter:before { - content: "\f426"; } - -.fa-glass-martini:before { - content: "\f000"; } - -.fa-glass-martini-alt:before { - content: "\f57b"; } - -.fa-glasses:before { - content: "\f530"; } - -.fa-glide:before { - content: "\f2a5"; } - -.fa-glide-g:before { - content: "\f2a6"; } - -.fa-globe:before { - content: "\f0ac"; } - -.fa-globe-africa:before { - content: "\f57c"; } - -.fa-globe-americas:before { - content: "\f57d"; } - -.fa-globe-asia:before { - content: "\f57e"; } - -.fa-gofore:before { - content: "\f3a7"; } - -.fa-golf-ball:before { - content: "\f450"; } - -.fa-goodreads:before { - content: "\f3a8"; } - -.fa-goodreads-g:before { - content: "\f3a9"; } - -.fa-google:before { - content: "\f1a0"; } - -.fa-google-drive:before { - content: "\f3aa"; } - -.fa-google-play:before { - content: "\f3ab"; } - -.fa-google-plus:before { - content: "\f2b3"; } - -.fa-google-plus-g:before { - content: "\f0d5"; } - -.fa-google-plus-square:before { - content: "\f0d4"; } - -.fa-google-wallet:before { - content: "\f1ee"; } - -.fa-graduation-cap:before { - content: "\f19d"; } - -.fa-gratipay:before { - content: "\f184"; } - -.fa-grav:before { - content: "\f2d6"; } - -.fa-greater-than:before { - content: "\f531"; } - -.fa-greater-than-equal:before { - content: "\f532"; } - -.fa-grimace:before { - content: "\f57f"; } - -.fa-grin:before { - content: "\f580"; } - -.fa-grin-alt:before { - content: "\f581"; } - -.fa-grin-beam:before { - content: "\f582"; } - -.fa-grin-beam-sweat:before { - content: "\f583"; } - -.fa-grin-hearts:before { - content: "\f584"; } - -.fa-grin-squint:before { - content: "\f585"; } - -.fa-grin-squint-tears:before { - content: "\f586"; } - -.fa-grin-stars:before { - content: "\f587"; } - -.fa-grin-tears:before { - content: "\f588"; } - -.fa-grin-tongue:before { - content: "\f589"; } - -.fa-grin-tongue-squint:before { - content: "\f58a"; } - -.fa-grin-tongue-wink:before { - content: "\f58b"; } - -.fa-grin-wink:before { - content: "\f58c"; } - -.fa-grip-horizontal:before { - content: "\f58d"; } - -.fa-grip-vertical:before { - content: "\f58e"; } - -.fa-gripfire:before { - content: "\f3ac"; } - -.fa-grunt:before { - content: "\f3ad"; } - -.fa-gulp:before { - content: "\f3ae"; } - -.fa-h-square:before { - content: "\f0fd"; } - -.fa-hacker-news:before { - content: "\f1d4"; } - -.fa-hacker-news-square:before { - content: "\f3af"; } - -.fa-hackerrank:before { - content: "\f5f7"; } - -.fa-hand-holding:before { - content: "\f4bd"; } - -.fa-hand-holding-heart:before { - content: "\f4be"; } - -.fa-hand-holding-usd:before { - content: "\f4c0"; } - -.fa-hand-lizard:before { - content: "\f258"; } - -.fa-hand-paper:before { - content: "\f256"; } - -.fa-hand-peace:before { - content: "\f25b"; } - -.fa-hand-point-down:before { - content: "\f0a7"; } - -.fa-hand-point-left:before { - content: "\f0a5"; } - -.fa-hand-point-right:before { - content: "\f0a4"; } - -.fa-hand-point-up:before { - content: "\f0a6"; } - -.fa-hand-pointer:before { - content: "\f25a"; } - -.fa-hand-rock:before { - content: "\f255"; } - -.fa-hand-scissors:before { - content: "\f257"; } - -.fa-hand-spock:before { - content: "\f259"; } - -.fa-hands:before { - content: "\f4c2"; } - -.fa-hands-helping:before { - content: "\f4c4"; } - -.fa-handshake:before { - content: "\f2b5"; } - -.fa-hashtag:before { - content: "\f292"; } - -.fa-hdd:before { - content: "\f0a0"; } - -.fa-heading:before { - content: "\f1dc"; } - -.fa-headphones:before { - content: "\f025"; } - -.fa-headphones-alt:before { - content: "\f58f"; } - -.fa-headset:before { - content: "\f590"; } - -.fa-heart:before { - content: "\f004"; } - -.fa-heartbeat:before { - content: "\f21e"; } - -.fa-helicopter:before { - content: "\f533"; } - -.fa-highlighter:before { - content: "\f591"; } - -.fa-hips:before { - content: "\f452"; } - -.fa-hire-a-helper:before { - content: "\f3b0"; } - -.fa-history:before { - content: "\f1da"; } - -.fa-hockey-puck:before { - content: "\f453"; } - -.fa-home:before { - content: "\f015"; } - -.fa-hooli:before { - content: "\f427"; } - -.fa-hornbill:before { - content: "\f592"; } - -.fa-hospital:before { - content: "\f0f8"; } - -.fa-hospital-alt:before { - content: "\f47d"; } - -.fa-hospital-symbol:before { - content: "\f47e"; } - -.fa-hot-tub:before { - content: "\f593"; } - -.fa-hotel:before { - content: "\f594"; } - -.fa-hotjar:before { - content: "\f3b1"; } - -.fa-hourglass:before { - content: "\f254"; } - -.fa-hourglass-end:before { - content: "\f253"; } - -.fa-hourglass-half:before { - content: "\f252"; } - -.fa-hourglass-start:before { - content: "\f251"; } - -.fa-houzz:before { - content: "\f27c"; } - -.fa-html5:before { - content: "\f13b"; } - -.fa-hubspot:before { - content: "\f3b2"; } - -.fa-i-cursor:before { - content: "\f246"; } - -.fa-id-badge:before { - content: "\f2c1"; } - -.fa-id-card:before { - content: "\f2c2"; } - -.fa-id-card-alt:before { - content: "\f47f"; } - -.fa-image:before { - content: "\f03e"; } - -.fa-images:before { - content: "\f302"; } - -.fa-imdb:before { - content: "\f2d8"; } - -.fa-inbox:before { - content: "\f01c"; } - -.fa-indent:before { - content: "\f03c"; } - -.fa-industry:before { - content: "\f275"; } - -.fa-infinity:before { - content: "\f534"; } - -.fa-info:before { - content: "\f129"; } - -.fa-info-circle:before { - content: "\f05a"; } - -.fa-instagram:before { - content: "\f16d"; } - -.fa-internet-explorer:before { - content: "\f26b"; } - -.fa-ioxhost:before { - content: "\f208"; } - -.fa-italic:before { - content: "\f033"; } - -.fa-itunes:before { - content: "\f3b4"; } - -.fa-itunes-note:before { - content: "\f3b5"; } - -.fa-java:before { - content: "\f4e4"; } - -.fa-jedi-order:before { - content: "\f50e"; } - -.fa-jenkins:before { - content: "\f3b6"; } - -.fa-joget:before { - content: "\f3b7"; } - -.fa-joint:before { - content: "\f595"; } - -.fa-joomla:before { - content: "\f1aa"; } - -.fa-js:before { - content: "\f3b8"; } - -.fa-js-square:before { - content: "\f3b9"; } - -.fa-jsfiddle:before { - content: "\f1cc"; } - -.fa-kaggle:before { - content: "\f5fa"; } - -.fa-key:before { - content: "\f084"; } - -.fa-keybase:before { - content: "\f4f5"; } - -.fa-keyboard:before { - content: "\f11c"; } - -.fa-keycdn:before { - content: "\f3ba"; } - -.fa-kickstarter:before { - content: "\f3bb"; } - -.fa-kickstarter-k:before { - content: "\f3bc"; } - -.fa-kiss:before { - content: "\f596"; } - -.fa-kiss-beam:before { - content: "\f597"; } - -.fa-kiss-wink-heart:before { - content: "\f598"; } - -.fa-kiwi-bird:before { - content: "\f535"; } - -.fa-korvue:before { - content: "\f42f"; } - -.fa-language:before { - content: "\f1ab"; } - -.fa-laptop:before { - content: "\f109"; } - -.fa-laptop-code:before { - content: "\f5fc"; } - -.fa-laravel:before { - content: "\f3bd"; } - -.fa-lastfm:before { - content: "\f202"; } - -.fa-lastfm-square:before { - content: "\f203"; } - -.fa-laugh:before { - content: "\f599"; } - -.fa-laugh-beam:before { - content: "\f59a"; } - -.fa-laugh-squint:before { - content: "\f59b"; } - -.fa-laugh-wink:before { - content: "\f59c"; } - -.fa-layer-group:before { - content: "\f5fd"; } - -.fa-leaf:before { - content: "\f06c"; } - -.fa-leanpub:before { - content: "\f212"; } - -.fa-lemon:before { - content: "\f094"; } - -.fa-less:before { - content: "\f41d"; } - -.fa-less-than:before { - content: "\f536"; } - -.fa-less-than-equal:before { - content: "\f537"; } - -.fa-level-down-alt:before { - content: "\f3be"; } - -.fa-level-up-alt:before { - content: "\f3bf"; } - -.fa-life-ring:before { - content: "\f1cd"; } - -.fa-lightbulb:before { - content: "\f0eb"; } - -.fa-line:before { - content: "\f3c0"; } - -.fa-link:before { - content: "\f0c1"; } - -.fa-linkedin:before { - content: "\f08c"; } - -.fa-linkedin-in:before { - content: "\f0e1"; } - -.fa-linode:before { - content: "\f2b8"; } - -.fa-linux:before { - content: "\f17c"; } - -.fa-lira-sign:before { - content: "\f195"; } - -.fa-list:before { - content: "\f03a"; } - -.fa-list-alt:before { - content: "\f022"; } - -.fa-list-ol:before { - content: "\f0cb"; } - -.fa-list-ul:before { - content: "\f0ca"; } - -.fa-location-arrow:before { - content: "\f124"; } - -.fa-lock:before { - content: "\f023"; } - -.fa-lock-open:before { - content: "\f3c1"; } - -.fa-long-arrow-alt-down:before { - content: "\f309"; } - -.fa-long-arrow-alt-left:before { - content: "\f30a"; } - -.fa-long-arrow-alt-right:before { - content: "\f30b"; } - -.fa-long-arrow-alt-up:before { - content: "\f30c"; } - -.fa-low-vision:before { - content: "\f2a8"; } - -.fa-luggage-cart:before { - content: "\f59d"; } - -.fa-lyft:before { - content: "\f3c3"; } - -.fa-magento:before { - content: "\f3c4"; } - -.fa-magic:before { - content: "\f0d0"; } - -.fa-magnet:before { - content: "\f076"; } - -.fa-mailchimp:before { - content: "\f59e"; } - -.fa-male:before { - content: "\f183"; } - -.fa-mandalorian:before { - content: "\f50f"; } - -.fa-map:before { - content: "\f279"; } - -.fa-map-marked:before { - content: "\f59f"; } - -.fa-map-marked-alt:before { - content: "\f5a0"; } - -.fa-map-marker:before { - content: "\f041"; } - -.fa-map-marker-alt:before { - content: "\f3c5"; } - -.fa-map-pin:before { - content: "\f276"; } - -.fa-map-signs:before { - content: "\f277"; } - -.fa-markdown:before { - content: "\f60f"; } - -.fa-marker:before { - content: "\f5a1"; } - -.fa-mars:before { - content: "\f222"; } - -.fa-mars-double:before { - content: "\f227"; } - -.fa-mars-stroke:before { - content: "\f229"; } - -.fa-mars-stroke-h:before { - content: "\f22b"; } - -.fa-mars-stroke-v:before { - content: "\f22a"; } - -.fa-mastodon:before { - content: "\f4f6"; } - -.fa-maxcdn:before { - content: "\f136"; } - -.fa-medal:before { - content: "\f5a2"; } - -.fa-medapps:before { - content: "\f3c6"; } - -.fa-medium:before { - content: "\f23a"; } - -.fa-medium-m:before { - content: "\f3c7"; } - -.fa-medkit:before { - content: "\f0fa"; } - -.fa-medrt:before { - content: "\f3c8"; } - -.fa-meetup:before { - content: "\f2e0"; } - -.fa-megaport:before { - content: "\f5a3"; } - -.fa-meh:before { - content: "\f11a"; } - -.fa-meh-blank:before { - content: "\f5a4"; } - -.fa-meh-rolling-eyes:before { - content: "\f5a5"; } - -.fa-memory:before { - content: "\f538"; } - -.fa-mercury:before { - content: "\f223"; } - -.fa-microchip:before { - content: "\f2db"; } - -.fa-microphone:before { - content: "\f130"; } - -.fa-microphone-alt:before { - content: "\f3c9"; } - -.fa-microphone-alt-slash:before { - content: "\f539"; } - -.fa-microphone-slash:before { - content: "\f131"; } - -.fa-microscope:before { - content: "\f610"; } - -.fa-microsoft:before { - content: "\f3ca"; } - -.fa-minus:before { - content: "\f068"; } - -.fa-minus-circle:before { - content: "\f056"; } - -.fa-minus-square:before { - content: "\f146"; } - -.fa-mix:before { - content: "\f3cb"; } - -.fa-mixcloud:before { - content: "\f289"; } - -.fa-mizuni:before { - content: "\f3cc"; } - -.fa-mobile:before { - content: "\f10b"; } - -.fa-mobile-alt:before { - content: "\f3cd"; } - -.fa-modx:before { - content: "\f285"; } - -.fa-monero:before { - content: "\f3d0"; } - -.fa-money-bill:before { - content: "\f0d6"; } - -.fa-money-bill-alt:before { - content: "\f3d1"; } - -.fa-money-bill-wave:before { - content: "\f53a"; } - -.fa-money-bill-wave-alt:before { - content: "\f53b"; } - -.fa-money-check:before { - content: "\f53c"; } - -.fa-money-check-alt:before { - content: "\f53d"; } - -.fa-monument:before { - content: "\f5a6"; } - -.fa-moon:before { - content: "\f186"; } - -.fa-mortar-pestle:before { - content: "\f5a7"; } - -.fa-motorcycle:before { - content: "\f21c"; } - -.fa-mouse-pointer:before { - content: "\f245"; } - -.fa-music:before { - content: "\f001"; } - -.fa-napster:before { - content: "\f3d2"; } - -.fa-neos:before { - content: "\f612"; } - -.fa-neuter:before { - content: "\f22c"; } - -.fa-newspaper:before { - content: "\f1ea"; } - -.fa-nimblr:before { - content: "\f5a8"; } - -.fa-nintendo-switch:before { - content: "\f418"; } - -.fa-node:before { - content: "\f419"; } - -.fa-node-js:before { - content: "\f3d3"; } - -.fa-not-equal:before { - content: "\f53e"; } - -.fa-notes-medical:before { - content: "\f481"; } - -.fa-npm:before { - content: "\f3d4"; } - -.fa-ns8:before { - content: "\f3d5"; } - -.fa-nutritionix:before { - content: "\f3d6"; } - -.fa-object-group:before { - content: "\f247"; } - -.fa-object-ungroup:before { - content: "\f248"; } - -.fa-odnoklassniki:before { - content: "\f263"; } - -.fa-odnoklassniki-square:before { - content: "\f264"; } - -.fa-oil-can:before { - content: "\f613"; } - -.fa-old-republic:before { - content: "\f510"; } - -.fa-opencart:before { - content: "\f23d"; } - -.fa-openid:before { - content: "\f19b"; } - -.fa-opera:before { - content: "\f26a"; } - -.fa-optin-monster:before { - content: "\f23c"; } - -.fa-osi:before { - content: "\f41a"; } - -.fa-outdent:before { - content: "\f03b"; } - -.fa-page4:before { - content: "\f3d7"; } - -.fa-pagelines:before { - content: "\f18c"; } - -.fa-paint-brush:before { - content: "\f1fc"; } - -.fa-paint-roller:before { - content: "\f5aa"; } - -.fa-palette:before { - content: "\f53f"; } - -.fa-palfed:before { - content: "\f3d8"; } - -.fa-pallet:before { - content: "\f482"; } - -.fa-paper-plane:before { - content: "\f1d8"; } - -.fa-paperclip:before { - content: "\f0c6"; } - -.fa-parachute-box:before { - content: "\f4cd"; } - -.fa-paragraph:before { - content: "\f1dd"; } - -.fa-parking:before { - content: "\f540"; } - -.fa-passport:before { - content: "\f5ab"; } - -.fa-paste:before { - content: "\f0ea"; } - -.fa-patreon:before { - content: "\f3d9"; } - -.fa-pause:before { - content: "\f04c"; } - -.fa-pause-circle:before { - content: "\f28b"; } - -.fa-paw:before { - content: "\f1b0"; } - -.fa-paypal:before { - content: "\f1ed"; } - -.fa-pen:before { - content: "\f304"; } - -.fa-pen-alt:before { - content: "\f305"; } - -.fa-pen-fancy:before { - content: "\f5ac"; } - -.fa-pen-nib:before { - content: "\f5ad"; } - -.fa-pen-square:before { - content: "\f14b"; } - -.fa-pencil-alt:before { - content: "\f303"; } - -.fa-pencil-ruler:before { - content: "\f5ae"; } - -.fa-people-carry:before { - content: "\f4ce"; } - -.fa-percent:before { - content: "\f295"; } - -.fa-percentage:before { - content: "\f541"; } - -.fa-periscope:before { - content: "\f3da"; } - -.fa-phabricator:before { - content: "\f3db"; } - -.fa-phoenix-framework:before { - content: "\f3dc"; } - -.fa-phoenix-squadron:before { - content: "\f511"; } - -.fa-phone:before { - content: "\f095"; } - -.fa-phone-slash:before { - content: "\f3dd"; } - -.fa-phone-square:before { - content: "\f098"; } - -.fa-phone-volume:before { - content: "\f2a0"; } - -.fa-php:before { - content: "\f457"; } - -.fa-pied-piper:before { - content: "\f2ae"; } - -.fa-pied-piper-alt:before { - content: "\f1a8"; } - -.fa-pied-piper-hat:before { - content: "\f4e5"; } - -.fa-pied-piper-pp:before { - content: "\f1a7"; } - -.fa-piggy-bank:before { - content: "\f4d3"; } - -.fa-pills:before { - content: "\f484"; } - -.fa-pinterest:before { - content: "\f0d2"; } - -.fa-pinterest-p:before { - content: "\f231"; } - -.fa-pinterest-square:before { - content: "\f0d3"; } - -.fa-plane:before { - content: "\f072"; } - -.fa-plane-arrival:before { - content: "\f5af"; } - -.fa-plane-departure:before { - content: "\f5b0"; } - -.fa-play:before { - content: "\f04b"; } - -.fa-play-circle:before { - content: "\f144"; } - -.fa-playstation:before { - content: "\f3df"; } - -.fa-plug:before { - content: "\f1e6"; } - -.fa-plus:before { - content: "\f067"; } - -.fa-plus-circle:before { - content: "\f055"; } - -.fa-plus-square:before { - content: "\f0fe"; } - -.fa-podcast:before { - content: "\f2ce"; } - -.fa-poo:before { - content: "\f2fe"; } - -.fa-poop:before { - content: "\f619"; } - -.fa-portrait:before { - content: "\f3e0"; } - -.fa-pound-sign:before { - content: "\f154"; } - -.fa-power-off:before { - content: "\f011"; } - -.fa-prescription:before { - content: "\f5b1"; } - -.fa-prescription-bottle:before { - content: "\f485"; } - -.fa-prescription-bottle-alt:before { - content: "\f486"; } - -.fa-print:before { - content: "\f02f"; } - -.fa-procedures:before { - content: "\f487"; } - -.fa-product-hunt:before { - content: "\f288"; } - -.fa-project-diagram:before { - content: "\f542"; } - -.fa-pushed:before { - content: "\f3e1"; } - -.fa-puzzle-piece:before { - content: "\f12e"; } - -.fa-python:before { - content: "\f3e2"; } - -.fa-qq:before { - content: "\f1d6"; } - -.fa-qrcode:before { - content: "\f029"; } - -.fa-question:before { - content: "\f128"; } - -.fa-question-circle:before { - content: "\f059"; } - -.fa-quidditch:before { - content: "\f458"; } - -.fa-quinscape:before { - content: "\f459"; } - -.fa-quora:before { - content: "\f2c4"; } - -.fa-quote-left:before { - content: "\f10d"; } - -.fa-quote-right:before { - content: "\f10e"; } - -.fa-r-project:before { - content: "\f4f7"; } - -.fa-random:before { - content: "\f074"; } - -.fa-ravelry:before { - content: "\f2d9"; } - -.fa-react:before { - content: "\f41b"; } - -.fa-readme:before { - content: "\f4d5"; } - -.fa-rebel:before { - content: "\f1d0"; } - -.fa-receipt:before { - content: "\f543"; } - -.fa-recycle:before { - content: "\f1b8"; } - -.fa-red-river:before { - content: "\f3e3"; } - -.fa-reddit:before { - content: "\f1a1"; } - -.fa-reddit-alien:before { - content: "\f281"; } - -.fa-reddit-square:before { - content: "\f1a2"; } - -.fa-redo:before { - content: "\f01e"; } - -.fa-redo-alt:before { - content: "\f2f9"; } - -.fa-registered:before { - content: "\f25d"; } - -.fa-rendact:before { - content: "\f3e4"; } - -.fa-renren:before { - content: "\f18b"; } - -.fa-reply:before { - content: "\f3e5"; } - -.fa-reply-all:before { - content: "\f122"; } - -.fa-replyd:before { - content: "\f3e6"; } - -.fa-researchgate:before { - content: "\f4f8"; } - -.fa-resolving:before { - content: "\f3e7"; } - -.fa-retweet:before { - content: "\f079"; } - -.fa-rev:before { - content: "\f5b2"; } - -.fa-ribbon:before { - content: "\f4d6"; } - -.fa-road:before { - content: "\f018"; } - -.fa-robot:before { - content: "\f544"; } - -.fa-rocket:before { - content: "\f135"; } - -.fa-rocketchat:before { - content: "\f3e8"; } - -.fa-rockrms:before { - content: "\f3e9"; } - -.fa-route:before { - content: "\f4d7"; } - -.fa-rss:before { - content: "\f09e"; } - -.fa-rss-square:before { - content: "\f143"; } - -.fa-ruble-sign:before { - content: "\f158"; } - -.fa-ruler:before { - content: "\f545"; } - -.fa-ruler-combined:before { - content: "\f546"; } - -.fa-ruler-horizontal:before { - content: "\f547"; } - -.fa-ruler-vertical:before { - content: "\f548"; } - -.fa-rupee-sign:before { - content: "\f156"; } - -.fa-sad-cry:before { - content: "\f5b3"; } - -.fa-sad-tear:before { - content: "\f5b4"; } - -.fa-safari:before { - content: "\f267"; } - -.fa-sass:before { - content: "\f41e"; } - -.fa-save:before { - content: "\f0c7"; } - -.fa-schlix:before { - content: "\f3ea"; } - -.fa-school:before { - content: "\f549"; } - -.fa-screwdriver:before { - content: "\f54a"; } - -.fa-scribd:before { - content: "\f28a"; } - -.fa-search:before { - content: "\f002"; } - -.fa-search-minus:before { - content: "\f010"; } - -.fa-search-plus:before { - content: "\f00e"; } - -.fa-searchengin:before { - content: "\f3eb"; } - -.fa-seedling:before { - content: "\f4d8"; } - -.fa-sellcast:before { - content: "\f2da"; } - -.fa-sellsy:before { - content: "\f213"; } - -.fa-server:before { - content: "\f233"; } - -.fa-servicestack:before { - content: "\f3ec"; } - -.fa-shapes:before { - content: "\f61f"; } - -.fa-share:before { - content: "\f064"; } - -.fa-share-alt:before { - content: "\f1e0"; } - -.fa-share-alt-square:before { - content: "\f1e1"; } - -.fa-share-square:before { - content: "\f14d"; } - -.fa-shekel-sign:before { - content: "\f20b"; } - -.fa-shield-alt:before { - content: "\f3ed"; } - -.fa-ship:before { - content: "\f21a"; } - -.fa-shipping-fast:before { - content: "\f48b"; } - -.fa-shirtsinbulk:before { - content: "\f214"; } - -.fa-shoe-prints:before { - content: "\f54b"; } - -.fa-shopping-bag:before { - content: "\f290"; } - -.fa-shopping-basket:before { - content: "\f291"; } - -.fa-shopping-cart:before { - content: "\f07a"; } - -.fa-shopware:before { - content: "\f5b5"; } - -.fa-shower:before { - content: "\f2cc"; } - -.fa-shuttle-van:before { - content: "\f5b6"; } - -.fa-sign:before { - content: "\f4d9"; } - -.fa-sign-in-alt:before { - content: "\f2f6"; } - -.fa-sign-language:before { - content: "\f2a7"; } - -.fa-sign-out-alt:before { - content: "\f2f5"; } - -.fa-signal:before { - content: "\f012"; } - -.fa-signature:before { - content: "\f5b7"; } - -.fa-simplybuilt:before { - content: "\f215"; } - -.fa-sistrix:before { - content: "\f3ee"; } - -.fa-sitemap:before { - content: "\f0e8"; } - -.fa-sith:before { - content: "\f512"; } - -.fa-skull:before { - content: "\f54c"; } - -.fa-skyatlas:before { - content: "\f216"; } - -.fa-skype:before { - content: "\f17e"; } - -.fa-slack:before { - content: "\f198"; } - -.fa-slack-hash:before { - content: "\f3ef"; } - -.fa-sliders-h:before { - content: "\f1de"; } - -.fa-slideshare:before { - content: "\f1e7"; } - -.fa-smile:before { - content: "\f118"; } - -.fa-smile-beam:before { - content: "\f5b8"; } - -.fa-smile-wink:before { - content: "\f4da"; } - -.fa-smoking:before { - content: "\f48d"; } - -.fa-smoking-ban:before { - content: "\f54d"; } - -.fa-snapchat:before { - content: "\f2ab"; } - -.fa-snapchat-ghost:before { - content: "\f2ac"; } - -.fa-snapchat-square:before { - content: "\f2ad"; } - -.fa-snowflake:before { - content: "\f2dc"; } - -.fa-solar-panel:before { - content: "\f5ba"; } - -.fa-sort:before { - content: "\f0dc"; } - -.fa-sort-alpha-down:before { - content: "\f15d"; } - -.fa-sort-alpha-up:before { - content: "\f15e"; } - -.fa-sort-amount-down:before { - content: "\f160"; } - -.fa-sort-amount-up:before { - content: "\f161"; } - -.fa-sort-down:before { - content: "\f0dd"; } - -.fa-sort-numeric-down:before { - content: "\f162"; } - -.fa-sort-numeric-up:before { - content: "\f163"; } - -.fa-sort-up:before { - content: "\f0de"; } - -.fa-soundcloud:before { - content: "\f1be"; } - -.fa-spa:before { - content: "\f5bb"; } - -.fa-space-shuttle:before { - content: "\f197"; } - -.fa-speakap:before { - content: "\f3f3"; } - -.fa-spinner:before { - content: "\f110"; } - -.fa-splotch:before { - content: "\f5bc"; } - -.fa-spotify:before { - content: "\f1bc"; } - -.fa-spray-can:before { - content: "\f5bd"; } - -.fa-square:before { - content: "\f0c8"; } - -.fa-square-full:before { - content: "\f45c"; } - -.fa-squarespace:before { - content: "\f5be"; } - -.fa-stack-exchange:before { - content: "\f18d"; } - -.fa-stack-overflow:before { - content: "\f16c"; } - -.fa-stamp:before { - content: "\f5bf"; } - -.fa-star:before { - content: "\f005"; } - -.fa-star-half:before { - content: "\f089"; } - -.fa-star-half-alt:before { - content: "\f5c0"; } - -.fa-star-of-life:before { - content: "\f621"; } - -.fa-staylinked:before { - content: "\f3f5"; } - -.fa-steam:before { - content: "\f1b6"; } - -.fa-steam-square:before { - content: "\f1b7"; } - -.fa-steam-symbol:before { - content: "\f3f6"; } - -.fa-step-backward:before { - content: "\f048"; } - -.fa-step-forward:before { - content: "\f051"; } - -.fa-stethoscope:before { - content: "\f0f1"; } - -.fa-sticker-mule:before { - content: "\f3f7"; } - -.fa-sticky-note:before { - content: "\f249"; } - -.fa-stop:before { - content: "\f04d"; } - -.fa-stop-circle:before { - content: "\f28d"; } - -.fa-stopwatch:before { - content: "\f2f2"; } - -.fa-store:before { - content: "\f54e"; } - -.fa-store-alt:before { - content: "\f54f"; } - -.fa-strava:before { - content: "\f428"; } - -.fa-stream:before { - content: "\f550"; } - -.fa-street-view:before { - content: "\f21d"; } - -.fa-strikethrough:before { - content: "\f0cc"; } - -.fa-stripe:before { - content: "\f429"; } - -.fa-stripe-s:before { - content: "\f42a"; } - -.fa-stroopwafel:before { - content: "\f551"; } - -.fa-studiovinari:before { - content: "\f3f8"; } - -.fa-stumbleupon:before { - content: "\f1a4"; } - -.fa-stumbleupon-circle:before { - content: "\f1a3"; } - -.fa-subscript:before { - content: "\f12c"; } - -.fa-subway:before { - content: "\f239"; } - -.fa-suitcase:before { - content: "\f0f2"; } - -.fa-suitcase-rolling:before { - content: "\f5c1"; } - -.fa-sun:before { - content: "\f185"; } - -.fa-superpowers:before { - content: "\f2dd"; } - -.fa-superscript:before { - content: "\f12b"; } - -.fa-supple:before { - content: "\f3f9"; } - -.fa-surprise:before { - content: "\f5c2"; } - -.fa-swatchbook:before { - content: "\f5c3"; } - -.fa-swimmer:before { - content: "\f5c4"; } - -.fa-swimming-pool:before { - content: "\f5c5"; } - -.fa-sync:before { - content: "\f021"; } - -.fa-sync-alt:before { - content: "\f2f1"; } - -.fa-syringe:before { - content: "\f48e"; } - -.fa-table:before { - content: "\f0ce"; } - -.fa-table-tennis:before { - content: "\f45d"; } - -.fa-tablet:before { - content: "\f10a"; } - -.fa-tablet-alt:before { - content: "\f3fa"; } - -.fa-tablets:before { - content: "\f490"; } - -.fa-tachometer-alt:before { - content: "\f3fd"; } - -.fa-tag:before { - content: "\f02b"; } - -.fa-tags:before { - content: "\f02c"; } - -.fa-tape:before { - content: "\f4db"; } - -.fa-tasks:before { - content: "\f0ae"; } - -.fa-taxi:before { - content: "\f1ba"; } - -.fa-teamspeak:before { - content: "\f4f9"; } - -.fa-teeth:before { - content: "\f62e"; } - -.fa-teeth-open:before { - content: "\f62f"; } - -.fa-telegram:before { - content: "\f2c6"; } - -.fa-telegram-plane:before { - content: "\f3fe"; } - -.fa-tencent-weibo:before { - content: "\f1d5"; } - -.fa-terminal:before { - content: "\f120"; } - -.fa-text-height:before { - content: "\f034"; } - -.fa-text-width:before { - content: "\f035"; } - -.fa-th:before { - content: "\f00a"; } - -.fa-th-large:before { - content: "\f009"; } - -.fa-th-list:before { - content: "\f00b"; } - -.fa-theater-masks:before { - content: "\f630"; } - -.fa-themeco:before { - content: "\f5c6"; } - -.fa-themeisle:before { - content: "\f2b2"; } - -.fa-thermometer:before { - content: "\f491"; } - -.fa-thermometer-empty:before { - content: "\f2cb"; } - -.fa-thermometer-full:before { - content: "\f2c7"; } - -.fa-thermometer-half:before { - content: "\f2c9"; } - -.fa-thermometer-quarter:before { - content: "\f2ca"; } - -.fa-thermometer-three-quarters:before { - content: "\f2c8"; } - -.fa-thumbs-down:before { - content: "\f165"; } - -.fa-thumbs-up:before { - content: "\f164"; } - -.fa-thumbtack:before { - content: "\f08d"; } - -.fa-ticket-alt:before { - content: "\f3ff"; } - -.fa-times:before { - content: "\f00d"; } - -.fa-times-circle:before { - content: "\f057"; } - -.fa-tint:before { - content: "\f043"; } - -.fa-tint-slash:before { - content: "\f5c7"; } - -.fa-tired:before { - content: "\f5c8"; } - -.fa-toggle-off:before { - content: "\f204"; } - -.fa-toggle-on:before { - content: "\f205"; } - -.fa-toolbox:before { - content: "\f552"; } - -.fa-tooth:before { - content: "\f5c9"; } - -.fa-trade-federation:before { - content: "\f513"; } - -.fa-trademark:before { - content: "\f25c"; } - -.fa-traffic-light:before { - content: "\f637"; } - -.fa-train:before { - content: "\f238"; } - -.fa-transgender:before { - content: "\f224"; } - -.fa-transgender-alt:before { - content: "\f225"; } - -.fa-trash:before { - content: "\f1f8"; } - -.fa-trash-alt:before { - content: "\f2ed"; } - -.fa-tree:before { - content: "\f1bb"; } - -.fa-trello:before { - content: "\f181"; } - -.fa-tripadvisor:before { - content: "\f262"; } - -.fa-trophy:before { - content: "\f091"; } - -.fa-truck:before { - content: "\f0d1"; } - -.fa-truck-loading:before { - content: "\f4de"; } - -.fa-truck-monster:before { - content: "\f63b"; } - -.fa-truck-moving:before { - content: "\f4df"; } - -.fa-truck-pickup:before { - content: "\f63c"; } - -.fa-tshirt:before { - content: "\f553"; } - -.fa-tty:before { - content: "\f1e4"; } - -.fa-tumblr:before { - content: "\f173"; } - -.fa-tumblr-square:before { - content: "\f174"; } - -.fa-tv:before { - content: "\f26c"; } - -.fa-twitch:before { - content: "\f1e8"; } - -.fa-twitter:before { - content: "\f099"; } - -.fa-twitter-square:before { - content: "\f081"; } - -.fa-typo3:before { - content: "\f42b"; } - -.fa-uber:before { - content: "\f402"; } - -.fa-uikit:before { - content: "\f403"; } - -.fa-umbrella:before { - content: "\f0e9"; } - -.fa-umbrella-beach:before { - content: "\f5ca"; } - -.fa-underline:before { - content: "\f0cd"; } - -.fa-undo:before { - content: "\f0e2"; } - -.fa-undo-alt:before { - content: "\f2ea"; } - -.fa-uniregistry:before { - content: "\f404"; } - -.fa-universal-access:before { - content: "\f29a"; } - -.fa-university:before { - content: "\f19c"; } - -.fa-unlink:before { - content: "\f127"; } - -.fa-unlock:before { - content: "\f09c"; } - -.fa-unlock-alt:before { - content: "\f13e"; } - -.fa-untappd:before { - content: "\f405"; } - -.fa-upload:before { - content: "\f093"; } - -.fa-usb:before { - content: "\f287"; } - -.fa-user:before { - content: "\f007"; } - -.fa-user-alt:before { - content: "\f406"; } - -.fa-user-alt-slash:before { - content: "\f4fa"; } - -.fa-user-astronaut:before { - content: "\f4fb"; } - -.fa-user-check:before { - content: "\f4fc"; } - -.fa-user-circle:before { - content: "\f2bd"; } - -.fa-user-clock:before { - content: "\f4fd"; } - -.fa-user-cog:before { - content: "\f4fe"; } - -.fa-user-edit:before { - content: "\f4ff"; } - -.fa-user-friends:before { - content: "\f500"; } - -.fa-user-graduate:before { - content: "\f501"; } - -.fa-user-lock:before { - content: "\f502"; } - -.fa-user-md:before { - content: "\f0f0"; } - -.fa-user-minus:before { - content: "\f503"; } - -.fa-user-ninja:before { - content: "\f504"; } - -.fa-user-plus:before { - content: "\f234"; } - -.fa-user-secret:before { - content: "\f21b"; } - -.fa-user-shield:before { - content: "\f505"; } - -.fa-user-slash:before { - content: "\f506"; } - -.fa-user-tag:before { - content: "\f507"; } - -.fa-user-tie:before { - content: "\f508"; } - -.fa-user-times:before { - content: "\f235"; } - -.fa-users:before { - content: "\f0c0"; } - -.fa-users-cog:before { - content: "\f509"; } - -.fa-ussunnah:before { - content: "\f407"; } - -.fa-utensil-spoon:before { - content: "\f2e5"; } - -.fa-utensils:before { - content: "\f2e7"; } - -.fa-vaadin:before { - content: "\f408"; } - -.fa-vector-square:before { - content: "\f5cb"; } - -.fa-venus:before { - content: "\f221"; } - -.fa-venus-double:before { - content: "\f226"; } - -.fa-venus-mars:before { - content: "\f228"; } - -.fa-viacoin:before { - content: "\f237"; } - -.fa-viadeo:before { - content: "\f2a9"; } - -.fa-viadeo-square:before { - content: "\f2aa"; } - -.fa-vial:before { - content: "\f492"; } - -.fa-vials:before { - content: "\f493"; } - -.fa-viber:before { - content: "\f409"; } - -.fa-video:before { - content: "\f03d"; } - -.fa-video-slash:before { - content: "\f4e2"; } - -.fa-vimeo:before { - content: "\f40a"; } - -.fa-vimeo-square:before { - content: "\f194"; } - -.fa-vimeo-v:before { - content: "\f27d"; } - -.fa-vine:before { - content: "\f1ca"; } - -.fa-vk:before { - content: "\f189"; } - -.fa-vnv:before { - content: "\f40b"; } - -.fa-volleyball-ball:before { - content: "\f45f"; } - -.fa-volume-down:before { - content: "\f027"; } - -.fa-volume-off:before { - content: "\f026"; } - -.fa-volume-up:before { - content: "\f028"; } - -.fa-vuejs:before { - content: "\f41f"; } - -.fa-walking:before { - content: "\f554"; } - -.fa-wallet:before { - content: "\f555"; } - -.fa-warehouse:before { - content: "\f494"; } - -.fa-weebly:before { - content: "\f5cc"; } - -.fa-weibo:before { - content: "\f18a"; } - -.fa-weight:before { - content: "\f496"; } - -.fa-weight-hanging:before { - content: "\f5cd"; } - -.fa-weixin:before { - content: "\f1d7"; } - -.fa-whatsapp:before { - content: "\f232"; } - -.fa-whatsapp-square:before { - content: "\f40c"; } - -.fa-wheelchair:before { - content: "\f193"; } - -.fa-whmcs:before { - content: "\f40d"; } - -.fa-wifi:before { - content: "\f1eb"; } - -.fa-wikipedia-w:before { - content: "\f266"; } - -.fa-window-close:before { - content: "\f410"; } - -.fa-window-maximize:before { - content: "\f2d0"; } - -.fa-window-minimize:before { - content: "\f2d1"; } - -.fa-window-restore:before { - content: "\f2d2"; } - -.fa-windows:before { - content: "\f17a"; } - -.fa-wine-glass:before { - content: "\f4e3"; } - -.fa-wine-glass-alt:before { - content: "\f5ce"; } - -.fa-wix:before { - content: "\f5cf"; } - -.fa-wolf-pack-battalion:before { - content: "\f514"; } - -.fa-won-sign:before { - content: "\f159"; } - -.fa-wordpress:before { - content: "\f19a"; } - -.fa-wordpress-simple:before { - content: "\f411"; } - -.fa-wpbeginner:before { - content: "\f297"; } - -.fa-wpexplorer:before { - content: "\f2de"; } - -.fa-wpforms:before { - content: "\f298"; } - -.fa-wrench:before { - content: "\f0ad"; } - -.fa-x-ray:before { - content: "\f497"; } - -.fa-xbox:before { - content: "\f412"; } - -.fa-xing:before { - content: "\f168"; } - -.fa-xing-square:before { - content: "\f169"; } - -.fa-y-combinator:before { - content: "\f23b"; } - -.fa-yahoo:before { - content: "\f19e"; } - -.fa-yandex:before { - content: "\f413"; } - -.fa-yandex-international:before { - content: "\f414"; } - -.fa-yelp:before { - content: "\f1e9"; } - -.fa-yen-sign:before { - content: "\f157"; } - -.fa-yoast:before { - content: "\f2b1"; } - -.fa-youtube:before { - content: "\f167"; } - -.fa-youtube-square:before { - content: "\f431"; } - -.fa-zhihu:before { - content: "\f63f"; } - -.sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; } - -.sr-only-focusable:active, .sr-only-focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; } -@font-face { - font-family: 'Font Awesome 5 Brands'; - font-style: normal; - font-weight: normal; - src: url("../webfonts/fa-brands-400.eot"); - src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); } - -.fab { - font-family: 'Font Awesome 5 Brands'; } -@font-face { - font-family: 'Font Awesome 5 Free'; - font-style: normal; - font-weight: 400; - src: url("../webfonts/fa-regular-400.eot"); - src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); } - -.far { - font-family: 'Font Awesome 5 Free'; - font-weight: 400; } -@font-face { - font-family: 'Font Awesome 5 Free'; - font-style: normal; - font-weight: 900; - src: url("../webfonts/fa-solid-900.eot"); - src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); } - -.fa, -.fas { - font-family: 'Font Awesome 5 Free'; - font-weight: 900; } diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 5e14081..ad8ffd0 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -1,181 +1,65 @@ -.gd-comparison-bar-wrapper{ +.gd-comparison-bar-wrapper { background-color: #E7E7E7; display: flex; - flex-direction: row; -} -#gd-header-logo { - background-image: url('../images/logo.png') !important; -} -#gd-add-multicompare { - float: right !important; -} -.gd-drag-n-drop-wrap-compare.hover { - background: #ddd; - border-color: #aaa; -} -#gd-compare-spinner { - position: absolute; - left: 44%; -} -.gd-url-cancel { - background: transparent; - position: absolute; - left: -5px; - top: 3px; - font-size: 19px; - color: #959da5; -} -.gd-url-cancel-first i { - font-size: 21px; - margin-top: 5px; - margin-left: 6px; -} -.gd-add-url { - position: absolute; - top: 0; - color: #fff; - background-color: #959da5; - padding: 7px 16px 6px; - font-size: 12px; -} -.gd-cancel-button { - color: #959da5; -} -.gd-upload-files-table-idx { - left: 15px; - width: 260px; - border-spacing: 0; - position: relative; -} -.gd-upload-files-table-idx>tbody>tr:nth-of-type(odd) { - background-color: #f9f9f9; -} -.gd-filetree-name-compare { - position: absolute; - top: 20px; - left: 43px; - width: 260px; - color: #f8f8f8; -} -.gd-filetree-name-compare > span { - font-size: 12px; - font-weight: 300; - color: #9a9a9a; - margin-right: 15px; -} -.gd-upload-files-table-i { - font-size: 21px; - position: absolute; - top: 25px; - left: 10px; - color: #959da5; + flex-direction: row; + margin-top: 50px; + width: 100%; } -#gd-select-compare-files { - display: inherit; +.gd-comparison-bar-wrapper-multicompare { + flex-wrap: wrap; } -.gd-drag-n-drop-wrap-compare { - margin-top: 0px; - width: 268px; - border: 2px dashed #ccc; - background-color: #f8f8f8; - text-align: center; - cursor: default; - position: inherit; -} -.gd-drag-n-drop-wrap-compare h2 { - color: #cacaca; - margin: 5px 0; - font-size: 13px; - font-weight: 300; + .tab-slider-body { + width: 50%; + border-right: 2px solid #ddd; + } +.gd-compare-area-head { + height: 37px; + background-color: #FFFFFF; + display: flex; } -.gd-drag-n-drop-wrap-compare h4 { - color: #cacaca; - font-weight: 300; +.gd-compare-area-head i:first-of-type { + color: #959DA5; + margin: 12px 15px 11px 13px; font-size: 14px; - margin: 10px 0; -} -.gd-drag-n-drop-wrap-compare h5 { - color: #afafaf; - font-weight: 200; - font-size: 12px; - margin: 20px 0 0 0; -} -#gd-select-compare-files section { - padding: 12px 0 13px 16px; - width: 281px; -} -.gd-drag-n-drop-buttons .btn { - width: 112px; -} -#gd-pages section { - display: block; - padding: 20px 0 0; -} -.gd-upload-section-label { - background-color: #3e4e5a; - border-radius: 0px; - color: #ffffff; - padding-top: 9px; - padding-left: 7px; - display: inline-block; - text-align: center; - font-size: 11px; -} -#gd-upload-section-label i { - margin-right: 10px; - margin-left: -10px; -} -.gd-drag-n-drop-icon .fa-cloud-download-alt { - color: #efefef; - font-size: 47px; -} -.gd-browse-document i { - font-size: 51px; - color: #959da5; } -.gd-modal-buttons { - display: inline-grid; +.gd-compare-browse{ + color: #959DA5; + margin: 12px 18px 11px 13px; font-size: 14px; - cursor: pointer; } -.gd-page { - display: block; -} -#gd-pages img { - text-align: center; - width: unset; +.gd-close-dad-area { + color: #959DA5; + font-size: 21px; + margin: 8px 14px 8px 0; } -.gd-password-wrap { - position: absolute; - margin-top: 60px; - z-index: 1; +.gd-compare-url { + border: 0; + height: 37px; + width: 100%; + padding-left: 5px; } -.swiper-wrapper { - height: 100px !important; +#gd-header-logo { + background-image: url('../images/logo.png') !important; } -.gd-upload-complete-fail { - right: 55px; - top: 3px; - display: none; - color: #FF0000; +#gd-add-multicompare { + float: right !important; } -.gd-add-file-multicompare i { - color: #959da5; - font-size: 50px; +.gd-drag-n-drop-icon { + font-size: 65px; + color: #959DA5; + margin: 448px auto 0 auto; } -.gd-files-blocks { +.gd-drag-n-drop-wrap-compare { display: flex; - display: inherit; - height: 100%; - width: 100%; -} -.gd-close-dad-area i { - color: #ffffff; + flex-direction: column; } -.gd-password-wrap > input { - width: unset; +.gd-compare-drag-label { + color: #959DA5; + font-size: 15px; + margin: 38px auto; } -.gd-url-wrap > input { - width: 70%; - margin-left: 20px; +.gd-drag-n-drop-icon-multicompare { + font-size: 65px; + color: #959DA5; + margin: 173px auto auto auto; } \ No newline at end of file diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 37e2ea6..fc45f06 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -30,7 +30,6 @@ var map = {}; var currentPageNumber = 0; var rewrite; var multiComparing; -var idx = 0; var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; $(document).ready(function () { @@ -292,38 +291,14 @@ $(document).ready(function () { clearResultsContents(); }); - $('#gd-add-file-multicompare').on(userMouseClick, function (e) { - var prefix = 'idx' + idx; - var newDragnDrop = getHtmlDragAndDropArea(prefix) - $(newDragnDrop).insertBefore("#gd-add-multicompare"); + $('#gd-add-multicompare').on(userMouseClick, function (e) { + var prefix = $(".tab-slider-body").length + 1; + if (prefix <= 4) { + var newDragnDrop = getHtmlDragAndDropArea(prefix) + $(".gd-comparison-bar-wrapper").append(newDragnDrop); + } initDropZone(prefix); - initCloseButton(prefix); - $('#gd-upload-input-' + prefix).on('change', function (e) { - // get selected files - var input = $(this); - // add files to the table - addFileForComparing(input.get(0).files, null, prefix); - }); - $('#gd-url-button-' + prefix).on(userMouseClick, function () { - $('#gd-url-wrap-' + prefix).slideDown('fast'); - $('#gd-url-' + prefix).focus(); - }); - $('#gd-url-cancel-' + prefix).on(userMouseClick, function () { - $('#gd-url-wrap-' + prefix).slideUp('fast'); - $('#gd-url-' + prefix).val(''); - }); - $('#gd-add-url-' + prefix).on(userMouseClick, function () { - var url = $("#gd-url-" + prefix).val(); - fillFileVariables(prefix, '', url, ''); - addFileForComparing(null, url, prefix); - $('#gd-url-' + prefix).val(''); - }); - $('#gd-open-document-' + prefix).on(userMouseClick, function (e) { - toggleModalDialog(false, ''); - fileNumber = prefix; - loadFileTree(''); - }); - idx = idx + 1; + initCloseButton(prefix); }); // // END of document ready function @@ -685,42 +660,34 @@ function fillFileVariables(prefix, file, url, path) { * Get HTML content for drag and drop area **/ function getHtmlDragAndDropArea(prefix) { - // close icon for multi comparing - var close = ''; - if (prefix && prefix.startsWith('idx')) { - close = '
    '; - } - + // close icon for multi comparing + if (prefix > 2) { + prefix = replacePrefix(prefix); + } // drag and drop section - var htmlSection = '
    ' + - close + - '
    ' + - '
    ' + - '

    Drag & Drop the ' + replacePrefix(prefix) + ' file here

    ' + - '

    OR

    ' + - '
    ' + - '' + - '' + - '
    ' + - '
    ' + - 'BROWSE files' + - '
    ' + - '
    ' + - '' + + return '
    ' + + getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + '
    '; + } function getHtmlMultiCompare() { From 54d43efd8bd5ba99031462323f100c735c89b8cd Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Mon, 25 Mar 2019 11:46:18 +0200 Subject: [PATCH 03/26] Finished splitted layout --- packages/comparison/css/comparison.css | 17 ++++++++++++----- packages/comparison/js/comparison.js | 13 +++++++++++-- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index ad8ffd0..4919a92 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -5,13 +5,16 @@ margin-top: 50px; width: 100%; } +.gd-comparison-bar-wrapper.full { + flex-wrap: wrap; +} .gd-comparison-bar-wrapper-multicompare { flex-wrap: wrap; } - .tab-slider-body { - width: 50%; - border-right: 2px solid #ddd; - } +.tab-slider-body { +width: 50%; +border-right: 2px solid #ddd; +} .gd-compare-area-head { height: 37px; background-color: #FFFFFF; @@ -47,11 +50,15 @@ .gd-drag-n-drop-icon { font-size: 65px; color: #959DA5; - margin: 448px auto 0 auto; + margin: auto; +} +.gd-drag-n-drop-wrap-compare.full { + padding-top: 200px; } .gd-drag-n-drop-wrap-compare { display: flex; flex-direction: column; + padding-top: 448px; } .gd-compare-drag-label { color: #959DA5; diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index fc45f06..1e09565 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -297,6 +297,10 @@ $(document).ready(function () { var newDragnDrop = getHtmlDragAndDropArea(prefix) $(".gd-comparison-bar-wrapper").append(newDragnDrop); } + if (prefix == 4) { + $(".gd-comparison-bar-wrapper").addClass("full"); + $(".gd-drag-n-drop-wrap-compare").addClass("full"); + } initDropZone(prefix); initCloseButton(prefix); }); @@ -661,8 +665,10 @@ function fillFileVariables(prefix, file, url, path) { **/ function getHtmlDragAndDropArea(prefix) { // close icon for multi comparing + var close = ""; if (prefix > 2) { prefix = replacePrefix(prefix); + close = ''; } // drag and drop section var htmlSection = '
    ' + @@ -670,7 +676,7 @@ function getHtmlDragAndDropArea(prefix) { ''+ '' + '' + - '' + + close + '' + '
    ' + @@ -713,10 +719,13 @@ function replacePrefix(prefix) { * Init remove button for selection area * @param prefix - prefix for selection area */ -function initCloseButton(prefix) { +function initCloseButton(prefix) { + prefix = replacePrefix(prefix); $('#gd-close-dad-area-' + prefix).on(userMouseClick, function (e) { fillFileVariables(prefix, '', '', ''); $('#gd-upload-section-' + prefix).remove(); + $(".gd-comparison-bar-wrapper").removeClass("full"); + $(".gd-drag-n-drop-wrap-compare").removeClass("full"); }); } From 68b4ac696b849d14439f777553295313a00240f9 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Mon, 25 Mar 2019 15:32:06 +0200 Subject: [PATCH 04/26] Developed open file component --- packages/comparison/css/comparison.css | 49 +- packages/comparison/js/comparison.js | 589 ++++++------------------- 2 files changed, 184 insertions(+), 454 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 4919a92..a47a514 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -1,72 +1,105 @@ .gd-comparison-bar-wrapper { background-color: #E7E7E7; display: flex; - flex-direction: row; + flex-direction: row; margin-top: 50px; width: 100%; } + +.gd-comparison-bar-wrapper i { + cursor: pointer; +} + .gd-comparison-bar-wrapper.full { flex-wrap: wrap; -} +} + .gd-comparison-bar-wrapper-multicompare { flex-wrap: wrap; } -.tab-slider-body { -width: 50%; -border-right: 2px solid #ddd; + +.gd-compare-section { + width: 50%; + border-right: 2px solid #ddd; } + .gd-compare-area-head { height: 37px; background-color: #FFFFFF; display: flex; } + .gd-compare-area-head i:first-of-type { color: #959DA5; margin: 12px 15px 11px 13px; font-size: 14px; } -.gd-compare-browse{ + +.gd-compare-browse { color: #959DA5; margin: 12px 18px 11px 13px; font-size: 14px; } + .gd-close-dad-area { color: #959DA5; - font-size: 21px; - margin: 8px 14px 8px 0; + font-size: 14px; + margin: 12px 14px 8px 0; } + .gd-compare-url { border: 0; height: 37px; width: 100%; padding-left: 5px; } + #gd-header-logo { background-image: url('../images/logo.png') !important; } + #gd-add-multicompare { float: right !important; } + .gd-drag-n-drop-icon { font-size: 65px; color: #959DA5; margin: auto; } + .gd-drag-n-drop-wrap-compare.full { padding-top: 200px; } + .gd-drag-n-drop-wrap-compare { display: flex; flex-direction: column; padding-top: 448px; } + .gd-compare-drag-label { color: #959DA5; font-size: 15px; margin: 38px auto; } + .gd-drag-n-drop-icon-multicompare { font-size: 65px; color: #959DA5; margin: 173px auto auto auto; +} + +#gd-pages { + width: 100%; + height: 91%; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; +} + +.gd-wrapper { + width: 600px; + margin: 10px; } \ No newline at end of file diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 1e09565..52b9f85 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -15,21 +15,12 @@ GLOBAL VARIABLES */ var applicationPath; var preloadResultPageCount; -var currentDirectory; -var compareFileMap = {}; -var compareFileGuidMap = {}; -var compareFileUrlMap = {}; -var uploadFilesList = []; +var compareFilesMap = []; var documentResultGuid; -var extension; -var changedPages; -var resultData = []; -var fileNumber; var password = ''; -var map = {}; -var currentPageNumber = 0; var rewrite; var multiComparing; +var browsePrefix = ""; var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; $(document).ready(function () { @@ -39,7 +30,7 @@ $(document).ready(function () { NAV BAR CONTROLS ****************************************************************** */ - + ////////////////////////////////////////////////// // Download event ////////////////////////////////////////////////// @@ -49,90 +40,65 @@ $(document).ready(function () { $('#gd-btn-download-summary').on(userMouseClick, function (e) { downloadDocument(resultData.length - 1); - }); - ////////////////////////////////////////////////// - // Select file for upload event - ////////////////////////////////////////////////// - $('#gd-upload-input-first').on('change', function (e) { - // get selected files - var input = $(this); - // add files to the table - addFileForComparing(input.get(0).files, null, 'first'); - }); + }); - $('#gd-upload-input-second').on('change', function (e) { - // get selected files - var input = $(this); - // add files to the table - addFileForComparing(input.get(0).files, null, 'second'); - }); - - ////////////////////////////////////////////////// - // Open first URL input event ////////////////////////////////////////////////// - $('#gd-url-button-first').on(userMouseClick, function () { - $('#gd-url-wrap-first').slideDown('fast'); - $('#gd-url-first').focus(); - }); - + // Disable default file or diretory click event ////////////////////////////////////////////////// - // Close first URL input event - ////////////////////////////////////////////////// - $('#gd-url-cancel-first').on(userMouseClick, function () { - $('#gd-url-wrap-first').slideUp('fast'); - $('#gd-url-first').val(''); - }); - - ////////////////////////////////////////////////// - // Add first file via URL event - ////////////////////////////////////////////////// - $('#gd-add-url-first').on(userMouseClick, function () { - var url = $("#gd-url-first").val(); - fillFileVariables('first', '', url, ''); - addFileForComparing(null, url, 'first'); - $('#gd-url-first').val(''); - }); - + $('.gd-modal-body').off(userMouseClick); + ////////////////////////////////////////////////// - // Open second URL input event + // File or directory click event from file tree ////////////////////////////////////////////////// - $('#gd-url-button-second').on(userMouseClick, function () { - $('#gd-url-wrap-second').slideDown('fast'); - $('#gd-url-second').focus(); + $('.gd-modal-body').on(userMouseClick, '.gd-filetree-name', function (e) { + var isDir = $(this).parent().find('.fa-folder').hasClass('fa-folder'); + if (isDir) { + // if directory -> browse + if (currentDirectory.length > 0) { + currentDirectory = currentDirectory + "/" + $(this).text(); + } else { + currentDirectory = $(this).text(); + } + toggleModalDialog(false, ''); + loadFileTree(currentDirectory); + } else { + // if document -> open + toggleModalDialog(false, ''); + password = ""; + clearDocumentPreview(browsePrefix); + var compareFile = { guid: "" }; + compareFile.guid = $(this).attr('data-guid'); + compareFilesMap.push(compareFile); + appendHtmlContent(browsePrefix, compareFile.guid); + } }); - ////////////////////////////////////////////////// - // Close second URL input event - ////////////////////////////////////////////////// - $('#gd-url-cancel-second').on(userMouseClick, function () { - $('#gd-url-wrap-second').slideUp('fast'); - $('#gd-url-second').val(''); - }); ////////////////////////////////////////////////// - // Add second file via URL event + // Add file via URL event ////////////////////////////////////////////////// - $('#gd-add-url-second').on(userMouseClick, function () { - var url = $("#gd-url-second").val(); - fillFileVariables('second', '', url, ''); - addFileForComparing(null, url, 'second'); - $('#gd-url-second').val(''); - }); + $('.gd-add-url-compare').on(userMouseClick, function (event) { + var url = $(event.target.parentElement).find(".gd-compare-url").val(); + var prefix = $(event.target.parentElement).find(".gd-compare-url").attr("id").split("-").pop(); + if (isUrlValid(url)) { + clearDocumentPreview(prefix); + uploadDocumentFromUrl(url, prefix); + $(event.target.parentElement).find(".gd-compare-url").val(''); + } else { + $('#gd-url-first').val(''); + alert("please enter valid URL"); + } + }); ////////////////////////////////////////////////// // Open document button (upload dialog) click ////////////////////////////////////////////////// - $('#gd-open-document-first').on(userMouseClick, function (e) { - toggleModalDialog(false, ''); - fileNumber = 'first'; + $('.gd-compare-browse').on(userMouseClick, function (e) { + browsePrefix = $(event.target.parentElement.parentElement).attr("id").split("-").pop(); + toggleModalDialog(false, ''); loadFileTree(''); }); - $('#gd-open-document-second').on(userMouseClick, function (e) { - toggleModalDialog(false, ''); - fileNumber = 'second'; - loadFileTree(''); - }); ////////////////////////////////////////////////// // Compare two files event @@ -273,37 +239,7 @@ $(document).ready(function () { printMessage(err.message); } }); - }); - - ////////////////////////////////////////////////// - // Clean current comparison results - ////////////////////////////////////////////////// - $('#gd-btn-clean-compare').on(userMouseClick, function () { - clearFilesRows('first'); - clearFilesRows('second'); - clearAndShowSelection('first'); - clearAndShowSelection('second'); - for (var i = 0; i < idx; i++) { - var prefix = 'idx' + i; - clearFilesRows(prefix); - clearAndShowSelection(prefix); - } - clearResultsContents(); - }); - - $('#gd-add-multicompare').on(userMouseClick, function (e) { - var prefix = $(".tab-slider-body").length + 1; - if (prefix <= 4) { - var newDragnDrop = getHtmlDragAndDropArea(prefix) - $(".gd-comparison-bar-wrapper").append(newDragnDrop); - } - if (prefix == 4) { - $(".gd-comparison-bar-wrapper").addClass("full"); - $(".gd-drag-n-drop-wrap-compare").addClass("full"); - } - initDropZone(prefix); - initCloseButton(prefix); - }); + }); // // END of document ready function }); @@ -314,201 +250,94 @@ FUNCTIONS ****************************************************************** */ -/** - * Checks map with 'first' and 'second' files - */ -function mapIsEmpty(amap) { - if (amap) { - if (amap['first'] == null || amap['first'] == undefined || amap['first'] == '' - || amap['second'] == null || amap['second'] == undefined || amap['second'] == '') { - - return true; - } else { - return false; - } - } else { - return true; - } +function clearDocumentPreview(prefix) { + $.each($("#gd-upload-section-" + prefix).find(".gd-wrapper"), function (index, page) { + $(page).remove(); + }); } + /** - * Append html content to an empty page - * @param {int} pageNumber - page number - * @param {string} path - document guid, path to the file + * Upload document + * @param {file} file - File for uploading + * @param {int} index - Number of the file to upload + * @param {string} url - URL of the file, set it if URL used instead of file */ -function appendHtmlContent(pageNumber, path) { - // initialize data - var gd_page = $('#gd-page-' + pageNumber); - - if (!gd_page.hasClass('loaded')) { - gd_page.addClass('loaded'); - // get document description - var data = { path: path }; - $.ajax({ - type: 'POST', - url: getApplicationPath('loadResultPage'), - data: JSON.stringify(data), - contentType: "application/json", - success: function (htmlData) { - if (htmlData.error != undefined) { - // open error popup - printMessage(htmlData.error); - return; - } - - gd_page.find('.gd-page-spinner').hide(); - - // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + - '' + - '
    '); - }, - error: function (xhr, status, error) { +function uploadDocumentFromUrl(url, prefix) { + // prepare form data for uploading + var formData = new FormData(); + // add URL if set + formData.append("url", url); + formData.append("rewrite", rewrite); + $.ajax({ + type: 'POST', + url: getApplicationPath('uploadDocument'), + data: formData, + cache: false, + contentType: false, + processData: false, + success: function (returnedData) { + if (returnedData.message != undefined) { + // open error popup + printMessage(returnedData.message); + return; + } + var compareFile = { guid: "" }; + compareFile.guid = returnedData.guid; + compareFilesMap.push(compareFile); + appendHtmlContent(prefix, compareFile.guid); + }, + error: function (xhr, status, error) { + if (xhr && xhr.responseText) { var err = eval("(" + xhr.responseText + ")"); console.log(err.message); // open error popup - printMessage(err.error); + printMessage(err.message); } - }); - } -} - -/** - * Get the value of password for file - * @param prefix for specifying the file - * @returns password - */ -function getPassword(prefix) { - return $('#gd-password-input-' + prefix).val(); -} - -/** - * Fill files for comparing - * @param fileMap - * @param prefix - * @param res - * @param passwords - */ -function transformInternal(fileMap, prefix, res, passwords) { - if (fileMap[prefix]) { - res.push(fileMap[prefix]); - passwords.push(getPassword(prefix)); - } -} - -/** - * Transform files for comparing - * @param fileMap - * @param res - * @param passwords - */ -function transform(fileMap, res, passwords) { - if (passwords) { - transformInternal(fileMap, 'first', res, passwords); - transformInternal(fileMap, 'second', res, passwords); - } else { - transformToObj(fileMap, 'first', res); - transformToObj(fileMap, 'second', res); - } -} - -/** - * Transform to object into list - * @param fileMap - * @param prefix - * @param res - */ -function transformToObj(fileMap, prefix, res) { - if (fileMap[prefix]) { - res.push({ file: fileMap[prefix], password: getPassword(prefix) }); - } -} - -/** - * Collect and prepare files for compare - * - * @returns object with files, passwords, urls, paths prepared for compare - */ -function collectFiles() { - var files = []; - var passwords = []; - var urls = []; - var paths = []; - transform(compareFileMap, files, passwords); - transform(compareFileGuidMap, paths, null); - transform(compareFileUrlMap, urls, null); - for (var i = 0; i < idx; i++) { - var prefix = 'idx' + i; - // fill files and passwords - transformInternal(compareFileMap, prefix, files, passwords); - // fill paths by objects with path to file and password - transformToObj(compareFileGuidMap, prefix, paths); - // fill urls by objects with url to file and password - transformToObj(compareFileUrlMap, prefix, urls); - } - - return { "files": files, "passwords": passwords, "urls": urls, "paths": paths }; -} - -/** - * Returns amount of selected files - * @param filesData - * @returns - */ -function amountOfFiles(filesData) { - return filesData['files'].length + filesData['urls'].length + filesData['paths'].length; -} - -/** - * Clear all result data from previously comparing - */ -function clearResultsContents() { - // set zoom to default - setZoomValue(100); - // clear result variables - documentResultGuid = ''; - extension = ''; - changedPages = []; - resultData = []; - currentPageNumber = 0; - // clear passwords - $('#gd-password-input-first').val(''); - $('#gd-password-input-second').val(''); - for (var i = 0; i < idx; i++) { - var prefix = 'idx' + i; - $('#gd-password-input-' + prefix).val(''); - } - // hide spinner - $('#gd-compare-spinner').hide(); - // remove previously rendered results pages - $('#gd-panzoom').html(''); - // go to top - $('#gd-pages').scrollTo(0, { - duration: 0 + $("#gd-upload-complete-" + index).fadeOut(); + $("#gd-upload-failure-" + index).fadeIn(); + } }); } /** - * Search for element by class (recursive) - * @param {object} target - object where to search for an id - * @param {string} class_id - class id - */ -function getElementByClass(target, class_id) { - var elem = target.find(class_id); - if (!elem.hasClass(class_id.slice(1))) { - return getElementByClass(target.parent(), class_id); - } else { - return elem; - } -} - -/** - * Clear all data from previously loaded document - * @param {string} message - message to display in popup + * Append html content to an empty page + * @param {string} prefix - current compare area prefix */ -function printMessage(message) { - var content = '
    ' + message + '
    '; - toggleModalDialog(true, 'Error', content); +function appendHtmlContent(prefix, guid) { + // initialize data + var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); + $("#gd-dropZone-" + prefix).hide(); + gd_page.find('.gd-page-spinner').show(); + // get document description + var data = { path: guid }; + $.ajax({ + type: 'POST', + url: getApplicationPath('loadDocumentPages'), + data: JSON.stringify(data), + contentType: "application/json", + success: function (htmlData) { + if (htmlData.error != undefined) { + // open error popup + printMessage(htmlData.error); + return; + } + gd_page.find('.gd-page-spinner').hide(); + $.each(htmlData.pages, function (index, page) { + // append page image, in image mode append occurred after setting the size to avoid zero size usage + gd_page.append('
    ' + + '' + + '
    '); + }); + + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.message); + // open error popup + printMessage(err.error); + } + }); } /** @@ -528,171 +357,35 @@ function downloadDocument(index) { } } -/** - * Clear results and show selection files - * - * @param prefix 'first' or 'second' file - */ -function clearAndShowSelection(prefix) { - // remove file from the files array - fillFileVariables(prefix, '', '', ''); - $('#gd-upload-input-' + prefix).val(''); - $('#gd-open-document-' + prefix).show(); - $("#gd-dropZone-" + prefix).show(); -} - -/** - * Clear table with selected files - * @param prefix 'first' or 'second' file - */ -function clearFilesRows(prefix) { - var tableRows = $('#gd-upload-files-table-' + prefix + ' > div'); - for (var n = 0; n < tableRows.length; n++) { - $(tableRows[n]).remove(); - } -} - -/** - * Add file to the upload list - * @param {file[]} uploadFiles - Files array for uploading - * @param {string} url - URL of the file - */ -function addFileForComparing(uploadFiles, url, prefix) { - // get table in which files will be added - var table = $("#gd-upload-files-table-" + prefix); - - if (url) { - // append URL - table.append('
    ' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + url.split(/[\\\/]/).pop() + '
    ' + - ' type: ' + url.split('/').pop().split('.').pop() + '' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    '); - $('#gd-url-wrap-' + prefix).slideUp('fast'); - $('#gd-url-' + prefix).val(''); - } else { - // append files - $.each(uploadFiles, function (index, file) { - fillFileVariables(prefix, file, '', ''); - // document format - var docFormat = getDocumentFormat(file.name); - // convert to proper size - var new_size = file.size + ' Bytes'; - if ((file.size / 1024 / 1024) > 1) { - new_size = (Math.round((file.size / 1024 / 1024) * 100) / 100) + ' MB'; - } else if ((file.size / 1024) > 1) { - new_size = (Math.round((file.size / 1024) * 100) / 100) + ' KB'; - } - // append document - table.append('
    ' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + file.name + '
    ' + - 'size: ' + new_size + '' + - ' type: ' + file.name.split('.').pop() + '' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '' + - '
    ' + - '
    ' + - '
    ' + - '
    '); - }); - } - - $('#gd-cancel-button-' + prefix).on(userMouseClick, function () { - // get selected files - var button = $(this); - // remove table row - button.closest('div').parent().parent().parent().remove(); - - clearAndShowSelection(prefix); - }); - - $("#gd-dropZone-" + prefix).hide(); - - $("#gd-open-document-" + prefix).hide(); - if (isMobile()) { - $.each($(".swiper-slide"), function (index, slide) { - $(slide).removeClass("gd-desktop"); - }); - //initialize swiper when document ready - var swiper = new Swiper('.swiper-container'); - } else { - $.each($(".swiper-slide"), function (index, slide) { - $(slide).removeClass("swiper-slide-cancel"); - }); - } -} - -/** - * Fill variables with data of first or second files - * - * @param prefix 'first' or 'second' - * @param file file data - * @param url url to file - * @param path path to file - */ -function fillFileVariables(prefix, file, url, path) { - compareFileMap[prefix] = file; - compareFileGuidMap[prefix] = path; - compareFileUrlMap[prefix] = url; -} - /** * Get HTML content for drag and drop area **/ function getHtmlDragAndDropArea(prefix) { // close icon for multi comparing - var close = ""; + if (prefix > 2) { prefix = replacePrefix(prefix); - close = ''; - } + } // drag and drop section - var htmlSection = '
    ' + + var htmlSection = '
    ' + '
    ' + - ''+ - '' + + '' + + '' + '' + - close + + '' + '
    ' + '
    ' + - '
    ' + - '' + - '
    ' + - '
    Drop your document here or click to select a file
    ' + + '
    ' + + '' + + '
    ' + + '
    Drop your document here or click to select a file
    ' + '
    ' + //// pages BEGIN - //'
    ' + - //'' + - //'
    ' + - //// list of pages - //'
    ' + - //'
    ' + + '
    ' + + '' + + '
    ' + // // pages END '
    '; return htmlSection; @@ -712,14 +405,14 @@ function replacePrefix(prefix) { case 4: return "fourth"; break; - } + } } /** * Init remove button for selection area * @param prefix - prefix for selection area */ -function initCloseButton(prefix) { +function initCloseButton(prefix) { prefix = replacePrefix(prefix); $('#gd-close-dad-area-' + prefix).on(userMouseClick, function (e) { fillFileVariables(prefix, '', '', ''); @@ -768,6 +461,10 @@ function initDropZone(prefix) { } } +function isUrlValid(url) { + return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url); +} + /* ****************************************************************** ****************************************************************** @@ -878,10 +575,10 @@ GROUPDOCS.COMAPRISON PLUGIN } function getHtmlBase() { - return '
    ' + - getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + + return '
    ' + + getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + '
    '; - + } function getHtmlMultiCompare() { From 93b53dbee1b97a5d8ba6d3aab9b350f299d9904c Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Tue, 26 Mar 2019 14:59:58 +0200 Subject: [PATCH 05/26] Added open document component --- packages/comparison/css/comparison.css | 25 +++- packages/comparison/js/comparison.js | 173 +++++++++++++++++++------ 2 files changed, 157 insertions(+), 41 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index a47a514..f866e2d 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -14,12 +14,19 @@ flex-wrap: wrap; } +.gd-comparison-bar-wrapper.full .gd-compare-section { + height: 462px; +} + +.gd-comparison-bar-wrapper.full #gd-pages { + height: 424px; +} .gd-comparison-bar-wrapper-multicompare { flex-wrap: wrap; } .gd-compare-section { - width: 50%; + width: 960px; border-right: 2px solid #ddd; } @@ -29,6 +36,19 @@ display: flex; } +.gd-compare-head-buttons { + display: flex; + width: 100%; +} + +.gd-compare-file-info { + display: none; + width: 100%; +} +.gd-compare-file-name { + color: #959da5; + margin: 10px; +} .gd-compare-area-head i:first-of-type { color: #959DA5; margin: 12px 15px 11px 13px; @@ -91,12 +111,11 @@ } #gd-pages { - width: 100%; - height: 91%; display: flex; flex-direction: column; align-items: center; margin: auto; + height: 884px; } .gd-wrapper { diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 52b9f85..2079ab6 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -16,7 +16,7 @@ GLOBAL VARIABLES var applicationPath; var preloadResultPageCount; var compareFilesMap = []; -var documentResultGuid; +var compareDocumentGuid; var password = ''; var rewrite; var multiComparing; @@ -40,13 +40,13 @@ $(document).ready(function () { $('#gd-btn-download-summary').on(userMouseClick, function (e) { downloadDocument(resultData.length - 1); - }); + }); ////////////////////////////////////////////////// // Disable default file or diretory click event ////////////////////////////////////////////////// $('.gd-modal-body').off(userMouseClick); - + ////////////////////////////////////////////////// // File or directory click event from file tree ////////////////////////////////////////////////// @@ -65,37 +65,48 @@ $(document).ready(function () { // if document -> open toggleModalDialog(false, ''); password = ""; - clearDocumentPreview(browsePrefix); - var compareFile = { guid: "" }; - compareFile.guid = $(this).attr('data-guid'); - compareFilesMap.push(compareFile); - appendHtmlContent(browsePrefix, compareFile.guid); + appendHtmlContent(browsePrefix, $(this).attr('data-guid')); } }); + ////////////////////////////////////////////////// + // Add new comparison section + ////////////////////////////////////////////////// + $('#gd-add-multicompare').on(userMouseClick, function (e) { + var prefix = $(".gd-compare-section").length + 1; + if (prefix <= 4) { + var newDragnDrop = getHtmlDragAndDropArea(prefix) + $(".gd-comparison-bar-wrapper").append(newDragnDrop); + } + if (prefix == 4) { + $(".gd-comparison-bar-wrapper").addClass("full"); + $(".gd-drag-n-drop-wrap-compare").addClass("full"); + } + initDropZone(prefix); + addCloseSection(); + }); ////////////////////////////////////////////////// // Add file via URL event ////////////////////////////////////////////////// - $('.gd-add-url-compare').on(userMouseClick, function (event) { + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-add-url-compare', function (event) { var url = $(event.target.parentElement).find(".gd-compare-url").val(); var prefix = $(event.target.parentElement).find(".gd-compare-url").attr("id").split("-").pop(); - if (isUrlValid(url)) { - clearDocumentPreview(prefix); + if (isUrlValid(url)) { uploadDocumentFromUrl(url, prefix); $(event.target.parentElement).find(".gd-compare-url").val(''); } else { $('#gd-url-first').val(''); alert("please enter valid URL"); } - }); - + }); + ////////////////////////////////////////////////// // Open document button (upload dialog) click ////////////////////////////////////////////////// - $('.gd-compare-browse').on(userMouseClick, function (e) { - browsePrefix = $(event.target.parentElement.parentElement).attr("id").split("-").pop(); - toggleModalDialog(false, ''); + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-compare-browse', function (e) { + browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); + toggleModalDialog(false, ''); loadFileTree(''); }); @@ -239,7 +250,9 @@ $(document).ready(function () { printMessage(err.message); } }); - }); + }); + + initCloseButton(); // // END of document ready function }); @@ -250,12 +263,48 @@ FUNCTIONS ****************************************************************** */ +function getFileNameFromPath(guid) { + return guid.match(/[-_\w]+[.][\w]+$/i)[0]; +} + +function addDocInfoHead(guid, prefix) { + var icon = getDocumentFormat(guid).icon; + var fileName = getFileNameFromPath(guid); + $("#gd-upload-section-" + prefix).find(".gd-compare-head-buttons").hide() + var fileInfoArea = $("#gd-upload-section-" + prefix).find(".gd-compare-file-info"); + $(fileInfoArea).css("display", "flex"); + $(fileInfoArea).find("i").addClass(icon); + $(fileInfoArea).find(".gd-compare-file-name").html(fileName); + addCloseSection(); +} + +function removeDocInfoHead(prefix) { + var fileInfoArea = $("#gd-upload-section-" + prefix).find(".gd-compare-file-info"); + var icon = getDocumentFormat($(fileInfoArea).find(".gd-compare-file-name").html()).icon; + $(fileInfoArea).hide(); + $(fileInfoArea).find("i").removeClass(icon); + $(fileInfoArea).find(".gd-compare-file-name").html(""); + $("#gd-upload-section-" + prefix).find(".gd-compare-head-buttons").show() +} + function clearDocumentPreview(prefix) { $.each($("#gd-upload-section-" + prefix).find(".gd-wrapper"), function (index, page) { $(page).remove(); }); + $("#gd-dropZone-" + prefix).show(); + var fileName = $("#gd-upload-section-" + prefix).find(".gd-compare-file-name").html(); + removeFileFromCompare(fileName); } +function removeFileFromCompare(fileName) { + $.each(compareFilesMap, function (index, filePath) { + if (filePath.guid.indexOf(fileName) > 0) { + compareFilesMap = $.grep(compareFilesMap, function (value) { + return value != filePath; + }); + } + }) +} /** * Upload document @@ -281,11 +330,8 @@ function uploadDocumentFromUrl(url, prefix) { // open error popup printMessage(returnedData.message); return; - } - var compareFile = { guid: "" }; - compareFile.guid = returnedData.guid; - compareFilesMap.push(compareFile); - appendHtmlContent(prefix, compareFile.guid); + } + appendHtmlContent(prefix, returnedData.guid); }, error: function (xhr, status, error) { if (xhr && xhr.responseText) { @@ -321,15 +367,19 @@ function appendHtmlContent(prefix, guid) { // open error popup printMessage(htmlData.error); return; - } - gd_page.find('.gd-page-spinner').hide(); + } + var compareFile = { guid: "" }; + compareFile.guid = guid; + compareFilesMap.push(compareFile); + addDocInfoHead(compareFile.guid, prefix); + gd_page.find('.gd-page-spinner').hide(); $.each(htmlData.pages, function (index, page) { // append page image, in image mode append occurred after setting the size to avoid zero size usage gd_page.append('
    ' + '' + '
    '); }); - + }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); @@ -357,22 +407,59 @@ function downloadDocument(index) { } } +function addCloseSection() { + var sectionsCount = $(".gd-compare-section").length; + $.each($(".gd-compare-section"), function (index, section) { + var prefix = convertIndexToString(index + 1); + var close = ''; + if ($(section).find(".gd-close-dad-area").length == 0) { + if (sectionsCount == 2 && prefix == browsePrefix) { + $(section).find(".gd-compare-area-head").append(close); + } else if (sectionsCount > 2) { + $(section).find(".gd-compare-area-head").append(close); + } + } + }); +} + +function convertIndexToString(index) { + switch (index) { + case 1: + return "first"; + break; + case 2: + return "second"; + break; + case 3: + return "third"; + break; + case 4: + return "fourth"; + break; + } +} + /** * Get HTML content for drag and drop area **/ function getHtmlDragAndDropArea(prefix) { // close icon for multi comparing - + if (prefix > 2) { prefix = replacePrefix(prefix); } // drag and drop section var htmlSection = '
    ' + '
    ' + - '' + - '' + - '' + - '' + + '
    '+ + '' + + '' + + '' + + '
    ' + + '
    '+ + '' + + '
    ' + + '
    ' + '
    ' + '
    ' + @@ -384,7 +471,7 @@ function getHtmlDragAndDropArea(prefix) { //// pages BEGIN '
    ' + - '' + + '' + '
    ' + // // pages END '
    '; @@ -412,13 +499,23 @@ function replacePrefix(prefix) { * Init remove button for selection area * @param prefix - prefix for selection area */ -function initCloseButton(prefix) { - prefix = replacePrefix(prefix); - $('#gd-close-dad-area-' + prefix).on(userMouseClick, function (e) { - fillFileVariables(prefix, '', '', ''); - $('#gd-upload-section-' + prefix).remove(); - $(".gd-comparison-bar-wrapper").removeClass("full"); - $(".gd-drag-n-drop-wrap-compare").removeClass("full"); +function initCloseButton() { + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { + var prefix = $(e.target).attr("id").split("-").pop(); + if ($('#gd-upload-section-' + prefix).find(".gd-wrapper").length > 0) { + clearDocumentPreview(prefix); + removeDocInfoHead(prefix); + if ($(".gd-compare-section").length == 2) { + $('#gd-upload-section-' + prefix).find(".gd-close-dad-area").remove(); + } + } else { + $('#gd-upload-section-' + prefix).remove(); + $(".gd-comparison-bar-wrapper").removeClass("full"); + $(".gd-drag-n-drop-wrap-compare").removeClass("full"); + if ($(".gd-compare-section").length == 2 && $(".gd-compare-section").find(".gd-wrapper").length == 0) { + $('.gd-compare-section').find(".gd-close-dad-area").remove(); + } + } }); } From dea66886a055060bc19ba2a21f62357e1bf09115 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 28 Mar 2019 08:54:45 +0200 Subject: [PATCH 06/26] Added right side bar panel --- packages/comparison/css/comparison.css | 93 ++++++- packages/comparison/js/comparison.js | 326 +++++++++++++------------ 2 files changed, 264 insertions(+), 155 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index f866e2d..8ab8df8 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -26,7 +26,7 @@ } .gd-compare-section { - width: 960px; + width: 100%; border-right: 2px solid #ddd; } @@ -121,4 +121,95 @@ .gd-wrapper { width: 600px; margin: 10px; +} + +/* +****************************************** +Right side panel +****************************************** +*/ +.gd-differences-wrapper { + display: flex; + flex-flow: column; + margin-right: -334px; + width: 334px; + transition: margin-right 0.2s cubic-bezier(0.81, 0.01, 1, 1); +} + +.gd-differences-wrapper.active { + margin-right: 0px; + width: 334px; + z-index: 999; + background-color: #FFF; + transition: margin-right 0.2s cubic-bezier(0.81, 0.01, 1, 1); +} + +.gd-differences-header { + height: 50px; + background-color: #222E35; + display: flex; + flex-flow: row; +} + +.gd-differences-header > i:first-child { + font-size: 24px; + color: #959DA5; + margin: 12px 9px 18px 14px; +} + +.gd-differences-header span { + font-size: 13px; + color: rgba(237, 240, 242, 0.57); + margin: 18px 187px 23px 0; +} + +.gd-differences-header .close { + font-size: 24px; + color: rgba(237, 240, 242, 0.4); + margin: 13px 14px 17px 0; + cursor: pointer; +} + +.gd-differences-body { + display: flex; + flex-flow: column; + padding-top: 14px; + overflow: visible; + overflow-y: auto; + overflow-x: hidden; +} +.gd-difference { + flex-flow: row wrap; + height: 75px; + border-bottom: 1px solid #eee; + cursor: pointer; +} +.gd-difference i { + font-size: 14px; + margin: 14px 13px 0px 20px; +} +.gd-difference .fa-arrow-right { + color: #16B901; +} +.gd-difference .fa-pencil-alt { + color: #CED600; +} +.gd-difference .fa-times { + color: #B96401; +} +.gd-difference-title { + color: #222E35; + font-size: 13px; + font-weight: bold; + margin: 15px 0px 10px 0; +} +.gd-difference-page { + color: rgba(149, 157, 165, 0.48); + font-size: 11px; + margin: 17px 14px 48px 154px; +} +.gd-differentce-comment { + color: #959DA5; + font-size: 13px; + margin: 10px 0px 18px 45px; } \ No newline at end of file diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 2079ab6..ea99954 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -1,4 +1,4 @@ -/** +/** * GroupDocs.Comparison.JS * Copyright (c) 2001-2018 Aspose Pty Ltd * Licensed under MIT @@ -19,7 +19,6 @@ var compareFilesMap = []; var compareDocumentGuid; var password = ''; var rewrite; -var multiComparing; var browsePrefix = ""; var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; @@ -29,7 +28,7 @@ $(document).ready(function () { ****************************************************************** NAV BAR CONTROLS ****************************************************************** - */ + */ ////////////////////////////////////////////////// // Download event @@ -45,7 +44,7 @@ $(document).ready(function () { ////////////////////////////////////////////////// // Disable default file or diretory click event ////////////////////////////////////////////////// - $('.gd-modal-body').off(userMouseClick); + $('.gd-modal-body').off(userMouseClick, '.gd-filetree-name'); ////////////////////////////////////////////////// // File or directory click event from file tree @@ -75,7 +74,7 @@ $(document).ready(function () { $('#gd-add-multicompare').on(userMouseClick, function (e) { var prefix = $(".gd-compare-section").length + 1; if (prefix <= 4) { - var newDragnDrop = getHtmlDragAndDropArea(prefix) + var newDragnDrop = getHtmlCompareSection(prefix) $(".gd-comparison-bar-wrapper").append(newDragnDrop); } if (prefix == 4) { @@ -100,6 +99,13 @@ $(document).ready(function () { alert("please enter valid URL"); } }); + + ////////////////////////////////////////////////// + // Add file via URL event + ////////////////////////////////////////////////// + $(".gd-differences-wrapper").on(userMouseClick, '.close', function (event) { + $(".gd-differences-wrapper").removeClass("active"); + }); ////////////////////////////////////////////////// // Open document button (upload dialog) click @@ -108,149 +114,7 @@ $(document).ready(function () { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); toggleModalDialog(false, ''); loadFileTree(''); - }); - - - ////////////////////////////////////////////////// - // Compare two files event - ////////////////////////////////////////////////// - $('#gd-btn-compare').on(userMouseClick, function () { - var context; - var contentType = 'application/json'; - var data; - // collect all selected files in arrays - var filesData = collectFiles(); - // calculate amount of selected files - var amountOfFiles1 = amountOfFiles(filesData); - // if multi-compare supports and amount of files more than 2 - if (multiComparing && amountOfFiles1 > 2) { - data = new FormData(); - $.each(filesData['files'], function (index, elem) { - data.append("files", elem); - }); - data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json" })); - data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json" })); - data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json" })); - - context = 'multiCompare'; - contentType = false; - } else { - var firstPass = getPassword('first'); - var secondPass = getPassword('second'); - // paths of files less than 2 - if (mapIsEmpty(compareFileGuidMap)) { - // urls less than 2 - if (mapIsEmpty(compareFileUrlMap)) { - // files less than 2 - if (mapIsEmpty(compareFileMap)) { - // files are 2, but got by different ways - if (amountOfFiles1 == 2) { - data = new FormData(); - $.each(filesData['files'], function (index, elem) { - data.append("files", elem); - }); - data.append("passwords", new Blob([JSON.stringify(filesData['passwords'])], { type: "application/json" })); - data.append("urls", new Blob([JSON.stringify(filesData['urls'])], { type: "application/json" })); - data.append("paths", new Blob([JSON.stringify(filesData['paths'])], { type: "application/json" })); - - context = 'compare'; - contentType = false; - } else { // files are less than 2 - printMessage("Select files for comparing first!"); - return; - } - } else { // files are 2 for comparing - data = new FormData(); - data.append("firstFile", compareFileMap['first']); - data.append("secondFile", compareFileMap['second']); - data.append("firstPassword", firstPass); - data.append("secondPassword", secondPass); - context = 'compareFiles'; - contentType = false; - } - } else { // urls are 2, compare with urls - data = JSON.stringify({ - firstPath: compareFileUrlMap['first'], - secondPath: compareFileUrlMap['second'], - firstPassword: firstPass, - secondPassword: secondPass - }); - context = 'compareWithUrls'; - } - } else {// paths are 2, compare with paths - data = JSON.stringify({ - firstPath: compareFileGuidMap['first'], - secondPath: compareFileGuidMap['second'], - firstPassword: firstPass, - secondPassword: secondPass - }); - context = 'compareWithPaths'; - } - } - // clear previous results - clearResultsContents(); - // show loading spinner - $('#gd-compare-spinner').show(); - // send compare - $.ajax({ - type: 'POST', - url: getApplicationPath(context), - data: data, - contentType: contentType, - processData: false, - success: function (returnedData) { - if (returnedData.message != undefined) { - // open error popup - printMessage(returnedData.message); - return; - } - // hide loading spinner - $('#gd-compare-spinner').hide(); - documentResultGuid = returnedData.guid; - extension = returnedData.extension; - $.each(returnedData.pages, function (index, elem) { - changedPages = elem.page; - }); - var totalPageNumber = returnedData.pages.length; - // append changes - $.each(returnedData.pages, function (index, elem) { - var pageNumber = index; - - // append empty page - $('#gd-panzoom').append( - '
    ' + - '' + - '
    ' - ); - // save page data - resultData.push({ pageNumber: pageNumber, pageGuid: elem }); - setZoomValue(getZoomValue()); - }); - var counter = preloadResultPageCount; - // check pre-load page number is bigger than total pages number - if (preloadResultPageCount > totalPageNumber) { - counter = totalPageNumber; - } - // get page according to the pre-load page number - for (var i = 0; i < counter; i++) { - // render page - appendHtmlContent(i, resultData[i].pageGuid); - } - - // hide delete file icon - $('#gd-cancel-button-first').hide(); - $('#gd-cancel-button-second').hide(); - }, - error: function (xhr, status, error) { - var err = eval("(" + xhr.responseText + ")"); - console.log(err.message); - // hide loading spinner - $('#gd-compare-spinner').hide(); - // open error popup - printMessage(err.message); - } - }); - }); + }); initCloseButton(); // @@ -346,6 +210,37 @@ function uploadDocumentFromUrl(url, prefix) { }); } +function uploadDragFile(file, prefix) { + // prepare form data for uploading + var formData = new FormData(); + // add local file for uploading + formData.append("file", file); + formData.append("rewrite", rewrite); + $.ajax({ + type: 'POST', + url: getApplicationPath('uploadDocument'), + data: formData, + cache: false, + contentType: false, + processData: false, + success: function (returnedData) { + if (returnedData.message != undefined) { + // open error popup + printMessage(returnedData.message); + return; + } + browsePrefix = prefix; + appendHtmlContent(prefix, returnedData.guid); + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.Message); + // open error popup + printMessage(err.message); + } + }); +} + /** * Append html content to an empty page * @param {string} prefix - current compare area prefix @@ -379,7 +274,10 @@ function appendHtmlContent(prefix, guid) { '' + '
    '); }); - + setFitWidth(prefix); + if (compareFilesMap.length >= 2) { + $('#gd-btn-compare').on(userMouseClick, compareFiles); + } }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); @@ -390,6 +288,119 @@ function appendHtmlContent(prefix, guid) { }); } +function compareFiles() { + var data = { guids: compareFilesMap }; + // send compare + $.ajax({ + type: 'POST', + url: getApplicationPath("compare"), + data: data, + contentType: contentType, + processData: false, + success: function (returnedData) { + if (returnedData.message != undefined) { + // open error popup + printMessage(returnedData.message); + return; + } + // hide loading spinner + $('#gd-compare-spinner').hide(); + documentResultGuid = returnedData.guid; + extension = returnedData.extension; + $.each(returnedData.pages, function (index, elem) { + changedPages = elem.page; + }); + var totalPageNumber = returnedData.pages.length; + // append changes + $.each(returnedData.pages, function (index, elem) { + var pageNumber = index; + + // append empty page + $('#gd-panzoom').append( + '
    ' + + '' + + '
    ' + ); + // save page data + resultData.push({ pageNumber: pageNumber, pageGuid: elem }); + setZoomValue(getZoomValue()); + }); + var counter = preloadResultPageCount; + // check pre-load page number is bigger than total pages number + if (preloadResultPageCount > totalPageNumber) { + counter = totalPageNumber; + } + // get page according to the pre-load page number + for (var i = 0; i < counter; i++) { + // render page + appendHtmlContent(i, resultData[i].pageGuid); + } + + // hide delete file icon + $('#gd-cancel-button-first').hide(); + $('#gd-cancel-button-second').hide(); + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.message); + // hide loading spinner + $('#gd-compare-spinner').hide(); + // open error popup + printMessage(err.message); + } + }); +} + + +function setFitWidth(prefix) { + // get page width + var pageWidth = $('.gd-wrapper').width(); + // get screen width + var screenWidth = $('#gd-pages').width(); + // get scale ratio + var scale = (pageWidth / screenWidth) * 100; + // set values + zoomValue = 200 - scale; + setZoomValue(zoomValue, prefix); +} + +/** +* Zoom document +* @param {int} zoom_val - zoom value from 0 to 100 +*/ +function setZoomValue(zoom_val, prefix) { + // adapt value for css + var zoom_val_non_webkit = zoom_val / 100; + var zoom_val_webkit = Math.round(zoom_val) + '%'; + // display zoom value + setNavigationZoomValues(zoom_val_webkit); + if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { + if (zoom_val > 100) { + $(".gd-page").each(function (index, page) { + (!$(page).hasClass("gd-page-zoomed")) ? $(page).addClass("gd-page-zoomed") : ""; + }); + } else { + $(".gd-page").each(function (index, page) { + $(page).removeClass("gd-page-zoomed"); + }); + } + } + // set css zoom values + var style = [ + 'zoom: ' + zoom_val_webkit, + 'zoom: ' + zoom_val_non_webkit, // for non webkit browsers + '-moz-transform: scale(' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')', + '-moz-transform-origin: top;', + '-webkit-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')', + '-ms-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')', + '-o-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')' + ].join(';'); + $.each($('#gd-upload-section-' + prefix).find(".gd-wrapper"), function (index, page) { + $(page).attr('style', style); + }); +} + + /** * Download result * @param {index} page number, if undefined, then download all results file @@ -442,7 +453,7 @@ function convertIndexToString(index) { /** * Get HTML content for drag and drop area **/ -function getHtmlDragAndDropArea(prefix) { +function getHtmlCompareSection(prefix) { // close icon for multi comparing if (prefix > 2) { @@ -552,8 +563,8 @@ function initDropZone(prefix) { event.stopPropagation(); event.preventDefault(); dropZone.removeClass('hover'); - var files = event.dataTransfer.files; - addFileForComparing(files, null, prefix); + var files = event.dataTransfer.files; + uploadDragFile(files[0], prefix); }; } } @@ -663,7 +674,7 @@ GROUPDOCS.COMAPRISON PLUGIN ****************************************************************** */ function getHtmlComparisonPanel() { - return '
  • ' + + return '
  • ' + '' + '' + 'Compare' + @@ -673,7 +684,14 @@ GROUPDOCS.COMAPRISON PLUGIN function getHtmlBase() { return '
    ' + - getHtmlDragAndDropArea('first') + getHtmlDragAndDropArea('second') + + getHtmlCompareSection('first') + getHtmlCompareSection('second') + + '
    ' + + '
    ' + + '
    ' + + 'Differences' + + '
    ' + + '
    ' + + '
    ' + '
    '; } From e141e1f0f71182c54806334c6dad89c685a8d320 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 29 Mar 2019 09:29:11 +0200 Subject: [PATCH 07/26] Developed functionality to view differences list --- packages/comparison/css/comparison.css | 12 ++- packages/comparison/js/comparison.js | 113 +++++++++++++------------ 2 files changed, 67 insertions(+), 58 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 8ab8df8..4c4dafe 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -15,7 +15,7 @@ } .gd-comparison-bar-wrapper.full .gd-compare-section { - height: 462px; + height: 462px; } .gd-comparison-bar-wrapper.full #gd-pages { @@ -26,7 +26,7 @@ } .gd-compare-section { - width: 100%; + width: 959px; border-right: 2px solid #ddd; } @@ -177,6 +177,7 @@ Right side panel overflow: visible; overflow-y: auto; overflow-x: hidden; + height: 100%; } .gd-difference { flex-flow: row wrap; @@ -206,10 +207,15 @@ Right side panel .gd-difference-page { color: rgba(149, 157, 165, 0.48); font-size: 11px; - margin: 17px 14px 48px 154px; + margin: 17px 14px 48px 0px; + float: right; } .gd-differentce-comment { color: #959DA5; font-size: 13px; margin: 10px 0px 18px 45px; + width: 262px; + white-space: nowrap; /*keep text on one line */ + overflow: hidden; /*prevent text from being shown outside the border */ + text-overflow: ellipsis; } \ No newline at end of file diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index ea99954..b6b6f77 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -20,6 +20,12 @@ var compareDocumentGuid; var password = ''; var rewrite; var browsePrefix = ""; +var differencesTypes = {}; +differencesTypes[1] = { 'icon': '', 'title': 'Text edited' }; +differencesTypes[2] = { 'icon': '', 'title': 'Text Added' }; +differencesTypes[3] = { 'icon': '', 'title': 'Text deleted' }; +differencesTypes[4] = { 'icon': '', 'title': 'Text Added' }; +differencesTypes[6] = { 'icon': '', 'title': 'Style changed' }; var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; $(document).ready(function () { @@ -105,6 +111,8 @@ $(document).ready(function () { ////////////////////////////////////////////////// $(".gd-differences-wrapper").on(userMouseClick, '.close', function (event) { $(".gd-differences-wrapper").removeClass("active"); + $(".gd-compare-section").css("width", "959px"); + $(".gd-comparison-bar-wrapper").css("width", "959px"); }); ////////////////////////////////////////////////// @@ -168,6 +176,9 @@ function removeFileFromCompare(fileName) { }); } }) + if (compareFilesMap.length < 2) { + ($('#gd-btn-compare').hasClass("disabled")) ? "" : $('#gd-btn-compare').addClass("disabled"); + } } /** @@ -249,7 +260,7 @@ function appendHtmlContent(prefix, guid) { // initialize data var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); $("#gd-dropZone-" + prefix).hide(); - gd_page.find('.gd-page-spinner').show(); + $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); // get document description var data = { path: guid }; $.ajax({ @@ -263,11 +274,11 @@ function appendHtmlContent(prefix, guid) { printMessage(htmlData.error); return; } - var compareFile = { guid: "" }; + var compareFile = { guid: "", password: "" }; compareFile.guid = guid; compareFilesMap.push(compareFile); addDocInfoHead(compareFile.guid, prefix); - gd_page.find('.gd-page-spinner').hide(); + $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); $.each(htmlData.pages, function (index, page) { // append page image, in image mode append occurred after setting the size to avoid zero size usage gd_page.append('
    ' + @@ -277,6 +288,7 @@ function appendHtmlContent(prefix, guid) { setFitWidth(prefix); if (compareFilesMap.length >= 2) { $('#gd-btn-compare').on(userMouseClick, compareFiles); + $('#gd-btn-compare').removeClass("disabled"); } }, error: function (xhr, status, error) { @@ -294,8 +306,8 @@ function compareFiles() { $.ajax({ type: 'POST', url: getApplicationPath("compare"), - data: data, - contentType: contentType, + data: JSON.stringify(data), + contentType: "application/json", processData: false, success: function (returnedData) { if (returnedData.message != undefined) { @@ -305,40 +317,19 @@ function compareFiles() { } // hide loading spinner $('#gd-compare-spinner').hide(); - documentResultGuid = returnedData.guid; - extension = returnedData.extension; - $.each(returnedData.pages, function (index, elem) { - changedPages = elem.page; + documentResultGuid = returnedData.guid; + var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; + $(lastSection).find(".gd-wrapper").remove(); + var resultPagesHtml = ""; + $.each(returnedData.pages, function (index, page) { + resultPagesHtml = resultPagesHtml + '
    ' + + '' + + '
    '; }); - var totalPageNumber = returnedData.pages.length; - // append changes - $.each(returnedData.pages, function (index, elem) { - var pageNumber = index; - - // append empty page - $('#gd-panzoom').append( - '
    ' + - '' + - '
    ' - ); - // save page data - resultData.push({ pageNumber: pageNumber, pageGuid: elem }); - setZoomValue(getZoomValue()); - }); - var counter = preloadResultPageCount; - // check pre-load page number is bigger than total pages number - if (preloadResultPageCount > totalPageNumber) { - counter = totalPageNumber; - } - // get page according to the pre-load page number - for (var i = 0; i < counter; i++) { - // render page - appendHtmlContent(i, resultData[i].pageGuid); - } - - // hide delete file icon - $('#gd-cancel-button-first').hide(); - $('#gd-cancel-button-second').hide(); + $(lastSection).find("#gd-pages").append(resultPagesHtml); + var prefix = $(lastSection).attr("id").split("-").pop(); + setFitWidth(prefix); + ShowDifferences(returnedData.changes); }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); @@ -351,6 +342,16 @@ function compareFiles() { }); } +function ShowDifferences(changes) { + $(".gd-differences-body").html(""); + $.each(changes, function (index, change) { + var changeHtml = getDifferenceHtml(change); + $(".gd-differences-body").append(changeHtml); + }); + $(".gd-differences-wrapper").addClass("active"); + $(".gd-compare-section").css("width", "795px"); + $(".gd-comparison-bar-wrapper").css("width", "83%"); +} function setFitWidth(prefix) { // get page width @@ -371,21 +372,7 @@ function setFitWidth(prefix) { function setZoomValue(zoom_val, prefix) { // adapt value for css var zoom_val_non_webkit = zoom_val / 100; - var zoom_val_webkit = Math.round(zoom_val) + '%'; - // display zoom value - setNavigationZoomValues(zoom_val_webkit); - if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { - if (zoom_val > 100) { - $(".gd-page").each(function (index, page) { - (!$(page).hasClass("gd-page-zoomed")) ? $(page).addClass("gd-page-zoomed") : ""; - }); - } else { - $(".gd-page").each(function (index, page) { - $(page).removeClass("gd-page-zoomed"); - }); - } - } - // set css zoom values + var zoom_val_webkit = Math.round(zoom_val) + '%'; var style = [ 'zoom: ' + zoom_val_webkit, 'zoom: ' + zoom_val_non_webkit, // for non webkit browsers @@ -573,6 +560,24 @@ function isUrlValid(url) { return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url); } +function getDifferenceHtml(difference) { + var comment = ""; + + if (difference.Type == 6) { + $.each(difference.StyleChanges, function (index, style) { + comment = comment + style.ChangedProperty + " "; + }); + } else { + comment = difference.Text; + } + return '
    ' + + differencesTypes[difference.Type].icon + + differencesTypes[difference.Type].title + + 'Page ' + difference.Page.Id + '' + + '
    ' + comment + '
    ' + + '
    '; +} + /* ****************************************************************** ****************************************************************** @@ -693,7 +698,6 @@ GROUPDOCS.COMAPRISON PLUGIN '
    ' + '
    ' + '
    '; - } function getHtmlMultiCompare() { @@ -719,5 +723,4 @@ GROUPDOCS.COMAPRISON PLUGIN '
    • '; downloadBtn.html(downloadDropDown); } - })(jQuery); \ No newline at end of file From 25ab017321d0a500f629d2518ab6738153f76282 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 4 Apr 2019 08:53:00 +0300 Subject: [PATCH 08/26] Added initial version of the highlight --- packages/comparison/css/comparison.css | 36 ++++++++- packages/comparison/js/comparison.js | 100 ++++++++++++++++--------- 2 files changed, 95 insertions(+), 41 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 4c4dafe..87c0286 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -26,7 +26,7 @@ } .gd-compare-section { - width: 959px; + width: inherit; border-right: 2px solid #ddd; } @@ -119,16 +119,44 @@ } .gd-wrapper { - width: 600px; - margin: 10px; + width: inherit; + padding: 5px 10px; + position: relative; +} + +/* +****************************************** +Hightlight elements +****************************************** +*/ + +.difference { + position: absolute; } +.gd-difference-1 { + background-color: rgba(0, 122, 255, 0.4); +} + +.gd-difference-2, .gd-difference-4 { + background-color: rgba(46, 237, 0, 0.4); +} + +.gd-difference-3 { + background-color: rgba(237, 0, 0, 0.4); +} + +.gd-difference-6 { + background-color: rgba(215, 224, 0, 0.4); + } + + /* ****************************************** Right side panel ****************************************** */ -.gd-differences-wrapper { + .gd-differences-wrapper { display: flex; flex-flow: column; margin-right: -334px; diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index b6b6f77..bb488cb 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -17,6 +17,7 @@ var applicationPath; var preloadResultPageCount; var compareFilesMap = []; var compareDocumentGuid; +var differences; var password = ''; var rewrite; var browsePrefix = ""; @@ -26,6 +27,7 @@ differencesTypes[2] = { 'icon': '', 'title': ' differencesTypes[3] = { 'icon': '', 'title': 'Text deleted' }; differencesTypes[4] = { 'icon': '', 'title': 'Text Added' }; differencesTypes[6] = { 'icon': '', 'title': 'Style changed' }; + var userMouseClick = ('ontouch' in document.documentElement) ? 'touch click' : 'click'; $(document).ready(function () { @@ -86,6 +88,7 @@ $(document).ready(function () { if (prefix == 4) { $(".gd-comparison-bar-wrapper").addClass("full"); $(".gd-drag-n-drop-wrap-compare").addClass("full"); + $(".gd-compare-section").css("width", "959px"); } initDropZone(prefix); addCloseSection(); @@ -110,9 +113,7 @@ $(document).ready(function () { // Add file via URL event ////////////////////////////////////////////////// $(".gd-differences-wrapper").on(userMouseClick, '.close', function (event) { - $(".gd-differences-wrapper").removeClass("active"); - $(".gd-compare-section").css("width", "959px"); - $(".gd-comparison-bar-wrapper").css("width", "959px"); + closeDifferences(); }); ////////////////////////////////////////////////// @@ -135,6 +136,12 @@ FUNCTIONS ****************************************************************** */ +function closeDifferences() { + $(".gd-differences-wrapper").removeClass("active"); + //$(".gd-compare-section").css("width", "959px"); + $(".gd-comparison-bar-wrapper").css("width", "100%"); +} + function getFileNameFromPath(guid) { return guid.match(/[-_\w]+[.][\w]+$/i)[0]; } @@ -318,18 +325,8 @@ function compareFiles() { // hide loading spinner $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; - var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; - $(lastSection).find(".gd-wrapper").remove(); - var resultPagesHtml = ""; - $.each(returnedData.pages, function (index, page) { - resultPagesHtml = resultPagesHtml + '
    ' + - '' + - '
    '; - }); - $(lastSection).find("#gd-pages").append(resultPagesHtml); - var prefix = $(lastSection).attr("id").split("-").pop(); - setFitWidth(prefix); - ShowDifferences(returnedData.changes); + differences = returnedData.changes; + ShowDifferences(); }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); @@ -342,15 +339,50 @@ function compareFiles() { }); } -function ShowDifferences(changes) { +function ShowDifferences() { $(".gd-differences-body").html(""); - $.each(changes, function (index, change) { + $.each(differences, function (index, change) { var changeHtml = getDifferenceHtml(change); $(".gd-differences-body").append(changeHtml); + highlightDifference(change); }); $(".gd-differences-wrapper").addClass("active"); - $(".gd-compare-section").css("width", "795px"); + // $(".gd-compare-section").css("width", "795px"); $(".gd-comparison-bar-wrapper").css("width", "83%"); + $.each($(".gd-compare-section"), function (index, section) { + var prefix = $(section).attr("id").split("-").pop(); + setFitWidth(prefix); + }) +} + +function highlightDifference(change) { + var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; + var highlightHtml = getHightlightHtml(change); + var page = $(lastSection).find(".gd-wrapper")[change.Page.Id]; + $(page).append(highlightHtml); +} + +function getHightlightHtml(change) { + var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + change.Box.X + 'px; top: ' + change.Box.Y + 'px"'; + return '
    '; +} + +function getDifferenceHtml(difference) { + var comment = ""; + + if (difference.Type == 6) { + $.each(difference.StyleChanges, function (index, style) { + comment = comment + style.ChangedProperty + " "; + }); + } else { + comment = difference.Text; + } + return '
    ' + + differencesTypes[difference.Type].icon + + differencesTypes[difference.Type].title + + 'Page ' + (difference.Page.Id + 1) + '' + + '
    ' + comment + '
    ' + + '
    '; } function setFitWidth(prefix) { @@ -498,7 +530,8 @@ function replacePrefix(prefix) { * @param prefix - prefix for selection area */ function initCloseButton() { - $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { + closeDifferences(); var prefix = $(e.target).attr("id").split("-").pop(); if ($('#gd-upload-section-' + prefix).find(".gd-wrapper").length > 0) { clearDocumentPreview(prefix); @@ -510,13 +543,24 @@ function initCloseButton() { $('#gd-upload-section-' + prefix).remove(); $(".gd-comparison-bar-wrapper").removeClass("full"); $(".gd-drag-n-drop-wrap-compare").removeClass("full"); + $(".gd-compare-section").css("width", "inherit"); if ($(".gd-compare-section").length == 2 && $(".gd-compare-section").find(".gd-wrapper").length == 0) { $('.gd-compare-section').find(".gd-close-dad-area").remove(); } + reIndexSections(); } }); } +function reIndexSections() { + $.each($(".gd-compare-section"), function (index, section) { + var prefix = convertIndexToString(index + 1); + $(section).attr("id", "gd-upload-section-" + prefix); + $(section).find(".gd-compare-url").attr("id", "gd-url-" + prefix); + $(section).find(".gd-drag-n-drop-wrap-compare").attr("id", "gd-dropZone-" + prefix); + $(section).find(".gd-close-dad-area").attr("id", "gd-close-dad-area-" + prefix); + }); +} /** * Init drop zone for file selection area * @param prefix - prefix for selection area @@ -560,24 +604,6 @@ function isUrlValid(url) { return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url); } -function getDifferenceHtml(difference) { - var comment = ""; - - if (difference.Type == 6) { - $.each(difference.StyleChanges, function (index, style) { - comment = comment + style.ChangedProperty + " "; - }); - } else { - comment = difference.Text; - } - return '
    ' + - differencesTypes[difference.Type].icon + - differencesTypes[difference.Type].title + - 'Page ' + difference.Page.Id + '' + - '
    ' + comment + '
    ' + - '
    '; -} - /* ****************************************************************** ****************************************************************** From d00b9e7eaee6188589b06d0845ac470d299628d2 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 4 Apr 2019 14:58:03 +0300 Subject: [PATCH 09/26] Added difference highlight and scroll --- packages/comparison/css/comparison.css | 6 +- packages/comparison/js/comparison.js | 107 ++++++++++++++++++++----- 2 files changed, 92 insertions(+), 21 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 87c0286..3bd418f 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -116,6 +116,7 @@ align-items: center; margin: auto; height: 884px; + position: relative; } .gd-wrapper { @@ -129,10 +130,13 @@ Hightlight elements ****************************************** */ - .difference { position: absolute; } +.difference.active { + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); + z-index: 999; +} .gd-difference-1 { background-color: rgba(0, 122, 255, 0.4); } diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index bb488cb..695539d 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -17,7 +17,6 @@ var applicationPath; var preloadResultPageCount; var compareFilesMap = []; var compareDocumentGuid; -var differences; var password = ''; var rewrite; var browsePrefix = ""; @@ -123,7 +122,13 @@ $(document).ready(function () { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); toggleModalDialog(false, ''); loadFileTree(''); - }); + }); + + $(".gd-comparison-bar-wrapper").on(userMouseClick, function (e) { + if ($(".difference.active").length > 0) { + $(".difference.active").removeClass("active"); + } + }); initCloseButton(); // @@ -137,8 +142,7 @@ FUNCTIONS */ function closeDifferences() { - $(".gd-differences-wrapper").removeClass("active"); - //$(".gd-compare-section").css("width", "959px"); + $(".gd-differences-wrapper").removeClass("active"); $(".gd-comparison-bar-wrapper").css("width", "100%"); } @@ -266,6 +270,7 @@ function uploadDragFile(file, prefix) { function appendHtmlContent(prefix, guid) { // initialize data var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); + compareDocumentGuid = guid; $("#gd-dropZone-" + prefix).hide(); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); // get document description @@ -288,13 +293,17 @@ function appendHtmlContent(prefix, guid) { $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); $.each(htmlData.pages, function (index, page) { // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + + gd_page.append('
    ' + '' + '
    '); }); setFitWidth(prefix); if (compareFilesMap.length >= 2) { - $('#gd-btn-compare').on(userMouseClick, compareFiles); + $('#gd-btn-compare').on(userMouseClick, function (event) { + event.preventDefault(); + event.stopImmediatePropagation(); + compareFiles(); + }); $('#gd-btn-compare').removeClass("disabled"); } }, @@ -309,6 +318,7 @@ function appendHtmlContent(prefix, guid) { function compareFiles() { var data = { guids: compareFilesMap }; + fadeAll(true); // send compare $.ajax({ type: 'POST', @@ -317,6 +327,7 @@ function compareFiles() { contentType: "application/json", processData: false, success: function (returnedData) { + fadeAll(false); if (returnedData.message != undefined) { // open error popup printMessage(returnedData.message); @@ -325,8 +336,8 @@ function compareFiles() { // hide loading spinner $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; - differences = returnedData.changes; - ShowDifferences(); + var differences = returnedData.changes; + ShowDifferences(differences); }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); @@ -339,12 +350,15 @@ function compareFiles() { }); } -function ShowDifferences() { +function ShowDifferences(differences) { $(".gd-differences-body").html(""); $.each(differences, function (index, change) { var changeHtml = getDifferenceHtml(change); $(".gd-differences-body").append(changeHtml); - highlightDifference(change); + addHighlightDifferences(change); + $(".gd-difference").on(userMouseClick, function (e) { + highlightDifference(e); + }); }); $(".gd-differences-wrapper").addClass("active"); // $(".gd-compare-section").css("width", "795px"); @@ -355,29 +369,81 @@ function ShowDifferences() { }) } -function highlightDifference(change) { +function addHighlightDifferences(change) { var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; - var highlightHtml = getHightlightHtml(change); var page = $(lastSection).find(".gd-wrapper")[change.Page.Id]; + var highlightHtml = getHightlightHtml(change, page); $(page).append(highlightHtml); } -function getHightlightHtml(change) { - var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + change.Box.X + 'px; top: ' + change.Box.Y + 'px"'; - return '
    '; +function highlightDifference(event) { + event.stopImmediatePropagation(); + event.preventDefault(); + $(".difference.active").removeClass("active"); + var differenceId = ($(event.target).data("id") || $(event.target).data("id") == 0) ? $(event.target).data("id") : $(event.target).parent().data("id"); + $('.difference[data-id="' + differenceId + '"]').addClass("active"); + var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; + scrollToDifference(lastSection, '.difference[data-id="' + differenceId + '"]'); +} + +/** +* Scroll to page +* @param {int} pageNumber - page number where to scroll +*/ +function scrollToDifference(section, difference) { + // get zoom value + var zoomValue = $('.gd-wrapper').css('zoom') * 100; + if (typeof zoomValue == 'undefined') { + zoomValue = 100; + } + // scroll + $(section).find("#gd-pages").scrollTo(difference, { + zoom: zoomValue + }); +} + +function getHightlightHtml(change, page) { + var y = 0; + var x = change.Box.X + parseInt($(page).css("padding-left")); + if (getDocumentFormat(compareDocumentGuid).format == "Portable Document Format") { + y = change.Page.Height - change.Box.Y + parseInt($(page).css("padding-top")); + } else { + y = change.Box.Y + parseInt($(page).css("padding-top")); + } + + var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; + return '
    '; } function getDifferenceHtml(difference) { var comment = ""; - - if (difference.Type == 6) { + if (difference.Type == 0) { + return; + } + if (difference.StyleChanges) { $.each(difference.StyleChanges, function (index, style) { - comment = comment + style.ChangedProperty + " "; + $.each(style, function (key, value) { + if (typeof value == "number") { + value = Math.round(value); + } + switch(key) + { + case "ChangedProperty": + comment = "Changed style: " + value; + break; + case "OldValue": + comment = comment + " From: " + value; + break; + case "NewValue": + comment = comment + " To: " + value; + break; + } + }); }); } else { comment = difference.Text; } - return '
    ' + + return '
    ' + differencesTypes[difference.Type].icon + differencesTypes[difference.Type].title + 'Page ' + (difference.Page.Id + 1) + '' + @@ -500,7 +566,7 @@ function getHtmlCompareSection(prefix) { '
    ' + //// pages BEGIN - '
    ' + + '
    ' + '' + '
    ' + // // pages END @@ -532,6 +598,7 @@ function replacePrefix(prefix) { function initCloseButton() { $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { closeDifferences(); + $(".difference").remove(); var prefix = $(e.target).attr("id").split("-").pop(); if ($('#gd-upload-section-' + prefix).find(".gd-wrapper").length > 0) { clearDocumentPreview(prefix); From 8f439ca3cf83ae927d6bbf39a1f4834b1fd9893c Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 5 Apr 2019 10:10:37 +0300 Subject: [PATCH 10/26] Initial version --- packages/comparison/css/comparison.css | 9 ++- packages/comparison/js/comparison.js | 107 ++++++++++++++++++++----- 2 files changed, 96 insertions(+), 20 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 3bd418f..6b2fd97 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -130,10 +130,15 @@ Hightlight elements ****************************************** */ -.difference { +.highlight-difference { position: absolute; + cursor: pointer; +} +.highlight-difference.active { + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); + z-index: 999; } -.difference.active { +.gd-difference.active { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); z-index: 999; } diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 695539d..b0c5919 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -14,13 +14,14 @@ GLOBAL VARIABLES ****************************************************************** */ var applicationPath; -var preloadResultPageCount; +var preloadPageCount; var compareFilesMap = []; var compareDocumentGuid; var password = ''; var rewrite; var browsePrefix = ""; var differencesTypes = {}; +var loadedPageNumber = 0; differencesTypes[1] = { 'icon': '', 'title': 'Text edited' }; differencesTypes[2] = { 'icon': '', 'title': 'Text Added' }; differencesTypes[3] = { 'icon': '', 'title': 'Text deleted' }; @@ -125,8 +126,9 @@ $(document).ready(function () { }); $(".gd-comparison-bar-wrapper").on(userMouseClick, function (e) { - if ($(".difference.active").length > 0) { - $(".difference.active").removeClass("active"); + if ($(".highlight-difference.active").length > 0) { + $(".highlight-difference.active").removeClass("active"); + $(".gd-difference.active").removeClass("active"); } }); @@ -273,6 +275,59 @@ function appendHtmlContent(prefix, guid) { compareDocumentGuid = guid; $("#gd-dropZone-" + prefix).hide(); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); + if (preloadPageCount == 0) { + loadAllPages(guid); + } else { + generatepagesTemplates(); + loadPage(guid); + } +} + +function loadPage(guid) { + // get document description + var data = { path: guid }; + $.ajax({ + type: 'POST', + url: getApplicationPath('loadDocumentPage'), + data: JSON.stringify(data), + contentType: "application/json", + success: function (htmlData) { + if (htmlData.error != undefined) { + // open error popup + printMessage(htmlData.error); + return; + } + var compareFile = { guid: "", password: "" }; + compareFile.guid = guid; + compareFilesMap.push(compareFile); + addDocInfoHead(compareFile.guid, prefix); + $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); + $.each(htmlData.pages, function (index, page) { + // append page image, in image mode append occurred after setting the size to avoid zero size usage + gd_page.append('
    ' + + '' + + '
    '); + }); + setFitWidth(prefix); + if (compareFilesMap.length >= 2) { + $('#gd-btn-compare').on(userMouseClick, function (event) { + event.preventDefault(); + event.stopImmediatePropagation(); + compareFiles(); + }); + $('#gd-btn-compare').removeClass("disabled"); + } + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.message); + // open error popup + printMessage(err.error); + } + }); +} + +function loadAllPages(guid) { // get document description var data = { path: guid }; $.ajax({ @@ -285,7 +340,7 @@ function appendHtmlContent(prefix, guid) { // open error popup printMessage(htmlData.error); return; - } + } var compareFile = { guid: "", password: "" }; compareFile.guid = guid; compareFilesMap.push(compareFile); @@ -293,7 +348,7 @@ function appendHtmlContent(prefix, guid) { $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); $.each(htmlData.pages, function (index, page) { // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + + gd_page.append('
    ' + '' + '
    '); }); @@ -356,10 +411,10 @@ function ShowDifferences(differences) { var changeHtml = getDifferenceHtml(change); $(".gd-differences-body").append(changeHtml); addHighlightDifferences(change); - $(".gd-difference").on(userMouseClick, function (e) { + $(".gd-difference, .highlight-difference").on(userMouseClick, function (e) { highlightDifference(e); }); - }); + }); $(".gd-differences-wrapper").addClass("active"); // $(".gd-compare-section").css("width", "795px"); $(".gd-comparison-bar-wrapper").css("width", "83%"); @@ -371,19 +426,26 @@ function ShowDifferences(differences) { function addHighlightDifferences(change) { var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; - var page = $(lastSection).find(".gd-wrapper")[change.Page.Id]; - var highlightHtml = getHightlightHtml(change, page); - $(page).append(highlightHtml); + var firstSection = $(".gd-compare-section")[0]; + var page = $(lastSection).find(".gd-page-" + (change.Page.Id + 1)); + var originalDocPage = $(firstSection).find(".gd-page-" + (change.Page.Id + 1)); + var highlightHtml = (change.Type == 3) ? getHightlightHtml(change, originalDocPage) : getHightlightHtml(change, page); + (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } function highlightDifference(event) { event.stopImmediatePropagation(); event.preventDefault(); - $(".difference.active").removeClass("active"); + $(".highlight-difference.active").removeClass("active"); + $(".gd-difference.active").removeClass("active"); var differenceId = ($(event.target).data("id") || $(event.target).data("id") == 0) ? $(event.target).data("id") : $(event.target).parent().data("id"); - $('.difference[data-id="' + differenceId + '"]').addClass("active"); - var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; - scrollToDifference(lastSection, '.difference[data-id="' + differenceId + '"]'); + var differenceHighligted = $('.highlight-difference[data-id="' + differenceId + '"]'); + var difference = $('.gd-difference[data-id="' + differenceId + '"]') + $(differenceHighligted).addClass("active"); + $(difference).addClass("active"); + var Section = $(differenceHighligted).closest(".gd-compare-section"); + scrollToDifference(Section, differenceHighligted); + scrollDifferencesPanel(difference); } /** @@ -391,13 +453,22 @@ function highlightDifference(event) { * @param {int} pageNumber - page number where to scroll */ function scrollToDifference(section, difference) { + // get zoom value + var zoomValue = 100; + // scroll + $(section).find("#gd-pages").scrollTo(difference, { + zoom: zoomValue + }); +} + +function scrollDifferencesPanel(difference) { // get zoom value var zoomValue = $('.gd-wrapper').css('zoom') * 100; if (typeof zoomValue == 'undefined') { zoomValue = 100; } // scroll - $(section).find("#gd-pages").scrollTo(difference, { + $(".gd-differences-body").scrollTo(difference, { zoom: zoomValue }); } @@ -412,7 +483,7 @@ function getHightlightHtml(change, page) { } var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; - return '
    '; + return '
    '; } function getDifferenceHtml(difference) { @@ -598,7 +669,7 @@ function replacePrefix(prefix) { function initCloseButton() { $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { closeDifferences(); - $(".difference").remove(); + $(".highlight-difference").remove(); var prefix = $(e.target).attr("id").split("-").pop(); if ($('#gd-upload-section-' + prefix).find(".gd-wrapper").length > 0) { clearDocumentPreview(prefix); @@ -725,7 +796,7 @@ GROUPDOCS.COMAPRISON PLUGIN // set global option params applicationPath = options.applicationPath; - preloadResultPageCount = options.preloadResultPageCount; + preloadPageCount = options.preloadResultPageCount; rewrite = options.rewrite; multiComparing = options.multiComparing; $("#gd-pages").remove(); From 9d88b459444eb87b5349b4da8d71cafbf4838aea Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 5 Apr 2019 13:02:04 +0300 Subject: [PATCH 11/26] Fixed close button adding for URL --- packages/comparison/css/comparison.css | 1 + packages/comparison/js/comparison.js | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 6b2fd97..7917b91 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -20,6 +20,7 @@ .gd-comparison-bar-wrapper.full #gd-pages { height: 424px; + position: inherit; } .gd-comparison-bar-wrapper-multicompare { flex-wrap: wrap; diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index b0c5919..7875842 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -219,6 +219,7 @@ function uploadDocumentFromUrl(url, prefix) { printMessage(returnedData.message); return; } + browsePrefix = prefix; appendHtmlContent(prefix, returnedData.guid); }, error: function (xhr, status, error) { @@ -270,20 +271,20 @@ function uploadDragFile(file, prefix) { * @param {string} prefix - current compare area prefix */ function appendHtmlContent(prefix, guid) { - // initialize data - var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); + // initialize data compareDocumentGuid = guid; $("#gd-dropZone-" + prefix).hide(); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); if (preloadPageCount == 0) { - loadAllPages(guid); + loadAllPages(guid, prefix); } else { generatepagesTemplates(); - loadPage(guid); + loadPage(guid, prefix); } } -function loadPage(guid) { +function loadPage(guid, prefix) { + var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description var data = { path: guid }; $.ajax({ @@ -327,7 +328,8 @@ function loadPage(guid) { }); } -function loadAllPages(guid) { +function loadAllPages(guid, prefix) { + var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description var data = { path: guid }; $.ajax({ From 522259b6dc60aad282769ddecd282eb24276bd62 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Mon, 8 Apr 2019 13:58:31 +0300 Subject: [PATCH 12/26] Developed preload page feature --- comparison.html | 2 +- packages/comparison/css/comparison.css | 6 ++ packages/comparison/js/comparison.js | 109 +++++++++++++++++++++++-- viewer.html | 2 +- 4 files changed, 112 insertions(+), 7 deletions(-) diff --git a/comparison.html b/comparison.html index dcaab61..15a5e59 100644 --- a/comparison.html +++ b/comparison.html @@ -25,7 +25,7 @@ download: true, upload: true, rewrite: true, - preloadResultPageCount: 0, + preloadResultPageCount: 2, multiComparing: true }); diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 7917b91..3eca5ab 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -126,6 +126,12 @@ position: relative; } +.gd-compare-preload { + background-color: #ffffff; + margin: 5px; + display: grid; +} + /* ****************************************** Hightlight elements diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 7875842..9605e28 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -133,6 +133,63 @@ $(document).ready(function () { }); initCloseButton(); + + ////////////////////////////////////////////////// + // Page scrolling event + ////////////////////////////////////////////////// + var previousScroll = 0; + $('#gd-pages').scroll(function () { + var pagesAttr = $('#gd-page-num').text().split('/'); + // get current page number + var currentPageNumber = parseInt(pagesAttr[0]); + // get last page number + var lastPageNumber = parseInt(pagesAttr[1]); + var pagePosition = 0; + // get scroll direction + var scrollDown = true; + var currentScroll = $(this).scrollTop(); + if (currentScroll < previousScroll) { + scrollDown = false; + } + // set scroll direction + previousScroll = currentScroll; + var zoom = parseInt($("#gd-zoom-value").html()) / 100; + var delta = 0.5; + if (zoom < 1) { + delta = 1; + } + for (i = 1; i <= lastPageNumber; i++) { + // check if page is visible in the view port more than 50% + if ($('#gd-page-' + i).isOnScreen(delta, delta)) { + // change current page value + if (i != currentPageNumber) { + // set current page number + setNavigationPageValues(i, lastPageNumber); + } + // load next page + // to set correct page size we use global array documentData which contains all info about current document + if (preloadPageCount > 0) { + // if scroll down load next page + if (scrollDown) { + if (i + 1 <= lastPageNumber) { + appendHtmlContent(i + 1, documentGuid); + } else if (i == lastPageNumber) { + appendHtmlContent(i, documentGuid); + } + } else { + // if scroll up load previous page + if (currentPageNumber - 1 >= 1) { + appendHtmlContent(currentPageNumber - 1, documentGuid); + } + } + } + } + } + if ($(this).scrollTop() == 0 && !scrollDown) { + setNavigationPageValues(1, lastPageNumber); + } + }); + // // END of document ready function }); @@ -277,16 +334,55 @@ function appendHtmlContent(prefix, guid) { $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); if (preloadPageCount == 0) { loadAllPages(guid, prefix); - } else { - generatepagesTemplates(); - loadPage(guid, prefix); + } else { + for (i = 0; i < preloadPageCount; i++) { + loadPage(guid, prefix, i + 1); + } } } -function loadPage(guid, prefix) { +function generatePagesTemplates(guid, prefix) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description var data = { path: guid }; + $.ajax({ + type: 'POST', + url: getApplicationPath('loadDocumentInfo'), + data: JSON.stringify(data), + contentType: "application/json", + success: function (htmlData) { + if (htmlData.error != undefined) { + // open error popup + printMessage(htmlData.error); + return; + } + var firstPage = $(gd_page).find(".gd-wrapper")[0] + var pageSize = { width: $(firstPage).width(), height: $(firstPage).height() }; + $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); + for (i = preloadPageCount; i < htmlData.pages.length; i++) { + // append page image, in image mode append occurred after setting the size to avoid zero size usage + gd_page.append('
    ' + + '
     Loading... Please wait.
    '+ + '
    '); + } + setFitWidth(prefix); + $(gd_page).find(".gd-compare-preload").css("width", Math.round(pageSize.width)); + $(gd_page).find(".gd-compare-preload").css("height", Math.round(pageSize.height)); + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.message); + // open error popup + printMessage(err.error); + } + }); +} + + +function loadPage(guid, prefix, currentPageNumber) { + var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); + // get document description + var data = { path: guid, page: currentPageNumber }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentPage'), @@ -305,11 +401,14 @@ function loadPage(guid, prefix) { $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); $.each(htmlData.pages, function (index, page) { // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + + gd_page.append('
    ' + '' + '
    '); }); setFitWidth(prefix); + if (currentPageNumber == preloadPageCount) { + generatePagesTemplates(guid, prefix); + } if (compareFilesMap.length >= 2) { $('#gd-btn-compare').on(userMouseClick, function (event) { event.preventDefault(); diff --git a/viewer.html b/viewer.html index 40f048d..0586481 100755 --- a/viewer.html +++ b/viewer.html @@ -20,7 +20,7 @@ $('#element').viewer({ applicationPath: 'http://' + host + ':8080/viewer/', defaultDocument: '', - preloadPageCount: 0, + preloadPageCount: 2, rewrite: true, zoom: true, pageSelector: true, From 63d5ba1ccea812d4356dfdafb62fc567743534e6 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Tue, 9 Apr 2019 15:39:14 +0300 Subject: [PATCH 13/26] Added page scrolling event --- packages/comparison/js/comparison.js | 57 ++++++++-------------------- 1 file changed, 15 insertions(+), 42 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 9605e28..bee5a5b 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -138,56 +138,27 @@ $(document).ready(function () { // Page scrolling event ////////////////////////////////////////////////// var previousScroll = 0; - $('#gd-pages').scroll(function () { - var pagesAttr = $('#gd-page-num').text().split('/'); - // get current page number - var currentPageNumber = parseInt(pagesAttr[0]); + $('#gd-pages').scroll(function () { // get last page number - var lastPageNumber = parseInt(pagesAttr[1]); - var pagePosition = 0; - // get scroll direction - var scrollDown = true; - var currentScroll = $(this).scrollTop(); - if (currentScroll < previousScroll) { - scrollDown = false; - } - // set scroll direction - previousScroll = currentScroll; - var zoom = parseInt($("#gd-zoom-value").html()) / 100; + var allPages = $("#gd-pages").parent().find(".gd-wrapper"); + var guid = $("#gd-pages").parent().find(".gd-compare-file-name").data("guid"); + var lastPageNumber = allPages.length; + var prefix = $("#gd-pages").parent().attr("id").split("-").pop(); + + var zoom = parseFloat(allPages.css("zoom"), ); var delta = 0.5; if (zoom < 1) { delta = 1; } - for (i = 1; i <= lastPageNumber; i++) { + for (i = preloadPageCount; i <= lastPageNumber; i++) { // check if page is visible in the view port more than 50% - if ($('#gd-page-' + i).isOnScreen(delta, delta)) { - // change current page value - if (i != currentPageNumber) { - // set current page number - setNavigationPageValues(i, lastPageNumber); - } - // load next page - // to set correct page size we use global array documentData which contains all info about current document - if (preloadPageCount > 0) { - // if scroll down load next page - if (scrollDown) { - if (i + 1 <= lastPageNumber) { - appendHtmlContent(i + 1, documentGuid); - } else if (i == lastPageNumber) { - appendHtmlContent(i, documentGuid); - } - } else { - // if scroll up load previous page - if (currentPageNumber - 1 >= 1) { - appendHtmlContent(currentPageNumber - 1, documentGuid); - } - } - } + if ($(allPages[i]).isOnScreen(delta, delta)) { + + loadPage(guid, prefix, i); + } } - if ($(this).scrollTop() == 0 && !scrollDown) { - setNavigationPageValues(1, lastPageNumber); - } + }); // @@ -217,6 +188,7 @@ function addDocInfoHead(guid, prefix) { $(fileInfoArea).css("display", "flex"); $(fileInfoArea).find("i").addClass(icon); $(fileInfoArea).find(".gd-compare-file-name").html(fileName); + $(fileInfoArea).find(".gd-compare-file-name").data("guid", guid); addCloseSection(); } @@ -226,6 +198,7 @@ function removeDocInfoHead(prefix) { $(fileInfoArea).hide(); $(fileInfoArea).find("i").removeClass(icon); $(fileInfoArea).find(".gd-compare-file-name").html(""); + $(fileInfoArea).find(".gd-compare-file-name").data("guid", ""); $("#gd-upload-section-" + prefix).find(".gd-compare-head-buttons").show() } From 8f6b606b95abce93ac8b71819be35fd2e116568c Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Wed, 10 Apr 2019 14:17:56 +0300 Subject: [PATCH 14/26] Finished preload pages feature --- comparison.html | 2 +- packages/comparison/js/comparison.js | 183 ++++++++++++++------------- 2 files changed, 98 insertions(+), 87 deletions(-) diff --git a/comparison.html b/comparison.html index 15a5e59..dcaab61 100644 --- a/comparison.html +++ b/comparison.html @@ -25,7 +25,7 @@ download: true, upload: true, rewrite: true, - preloadResultPageCount: 2, + preloadResultPageCount: 0, multiComparing: true }); diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index bee5a5b..fb14913 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -36,7 +36,7 @@ $(document).ready(function () { ****************************************************************** NAV BAR CONTROLS ****************************************************************** - */ + */ ////////////////////////////////////////////////// // Download event @@ -90,7 +90,7 @@ $(document).ready(function () { $(".gd-drag-n-drop-wrap-compare").addClass("full"); $(".gd-compare-section").css("width", "959px"); } - initDropZone(prefix); + initDropZone(prefix); addCloseSection(); }); @@ -100,7 +100,7 @@ $(document).ready(function () { $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-add-url-compare', function (event) { var url = $(event.target.parentElement).find(".gd-compare-url").val(); var prefix = $(event.target.parentElement).find(".gd-compare-url").attr("id").split("-").pop(); - if (isUrlValid(url)) { + if (isUrlValid(url)) { uploadDocumentFromUrl(url, prefix); $(event.target.parentElement).find(".gd-compare-url").val(''); } else { @@ -115,7 +115,7 @@ $(document).ready(function () { $(".gd-differences-wrapper").on(userMouseClick, '.close', function (event) { closeDifferences(); }); - + ////////////////////////////////////////////////// // Open document button (upload dialog) click ////////////////////////////////////////////////// @@ -123,14 +123,14 @@ $(document).ready(function () { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); toggleModalDialog(false, ''); loadFileTree(''); - }); + }); $(".gd-comparison-bar-wrapper").on(userMouseClick, function (e) { if ($(".highlight-difference.active").length > 0) { $(".highlight-difference.active").removeClass("active"); $(".gd-difference.active").removeClass("active"); } - }); + }); initCloseButton(); @@ -138,27 +138,30 @@ $(document).ready(function () { // Page scrolling event ////////////////////////////////////////////////// var previousScroll = 0; - $('#gd-pages').scroll(function () { + var currentlyLoadedPage = null; + $('.gd-pages').scroll(function (event) { // get last page number - var allPages = $("#gd-pages").parent().find(".gd-wrapper"); - var guid = $("#gd-pages").parent().find(".gd-compare-file-name").data("guid"); + var allPages = $(event.target).parent().find(".gd-wrapper"); + var guid = $(event.target).parent().find(".gd-compare-file-name").data("guid"); var lastPageNumber = allPages.length; - var prefix = $("#gd-pages").parent().attr("id").split("-").pop(); - - var zoom = parseFloat(allPages.css("zoom"), ); + var prefix = $(event.target).parent().attr("id").split("-").pop(); + + var zoom = parseFloat(allPages.css("zoom")); var delta = 0.5; if (zoom < 1) { delta = 1; - } + } for (i = preloadPageCount; i <= lastPageNumber; i++) { // check if page is visible in the view port more than 50% - if ($(allPages[i]).isOnScreen(delta, delta)) { - - loadPage(guid, prefix, i); - + if ($(allPages[i]).isOnScreen(delta, delta)) { + if ($(allPages[i]).hasClass("gd-compare-preload") && !$(allPages[i]).is(currentlyLoadedPage)) { + currentlyLoadedPage = $(allPages[i]); + loadPage(guid, prefix, i + 1, true); + } } } + }); // @@ -172,7 +175,7 @@ FUNCTIONS */ function closeDifferences() { - $(".gd-differences-wrapper").removeClass("active"); + $(".gd-differences-wrapper").removeClass("active"); $(".gd-comparison-bar-wrapper").css("width", "100%"); } @@ -206,13 +209,13 @@ function clearDocumentPreview(prefix) { $.each($("#gd-upload-section-" + prefix).find(".gd-wrapper"), function (index, page) { $(page).remove(); }); - $("#gd-dropZone-" + prefix).show(); + $("#gd-dropZone-" + prefix).show(); var fileName = $("#gd-upload-section-" + prefix).find(".gd-compare-file-name").html(); removeFileFromCompare(fileName); } function removeFileFromCompare(fileName) { - $.each(compareFilesMap, function (index, filePath) { + $.each(compareFilesMap, function (index, filePath) { if (filePath.guid.indexOf(fileName) > 0) { compareFilesMap = $.grep(compareFilesMap, function (value) { return value != filePath; @@ -220,7 +223,7 @@ function removeFileFromCompare(fileName) { } }) if (compareFilesMap.length < 2) { - ($('#gd-btn-compare').hasClass("disabled")) ? "" : $('#gd-btn-compare').addClass("disabled"); + ($('#gd-btn-compare').hasClass("disabled")) ? "" : $('#gd-btn-compare').addClass("disabled"); } } @@ -248,7 +251,7 @@ function uploadDocumentFromUrl(url, prefix) { // open error popup printMessage(returnedData.message); return; - } + } browsePrefix = prefix; appendHtmlContent(prefix, returnedData.guid); }, @@ -269,9 +272,9 @@ function uploadDragFile(file, prefix) { // prepare form data for uploading var formData = new FormData(); // add local file for uploading - formData.append("file", file); + formData.append("file", file); formData.append("rewrite", rewrite); - $.ajax({ + $.ajax({ type: 'POST', url: getApplicationPath('uploadDocument'), data: formData, @@ -307,10 +310,10 @@ function appendHtmlContent(prefix, guid) { $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); if (preloadPageCount == 0) { loadAllPages(guid, prefix); - } else { + } else { for (i = 0; i < preloadPageCount; i++) { - loadPage(guid, prefix, i + 1); - } + loadPage(guid, prefix, i + 1, false); + } } } @@ -328,17 +331,17 @@ function generatePagesTemplates(guid, prefix) { // open error popup printMessage(htmlData.error); return; - } + } var firstPage = $(gd_page).find(".gd-wrapper")[0] var pageSize = { width: $(firstPage).width(), height: $(firstPage).height() }; $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); for (i = preloadPageCount; i < htmlData.pages.length; i++) { // append page image, in image mode append occurred after setting the size to avoid zero size usage gd_page.append('
    ' + - '
     Loading... Please wait.
    '+ + '
     Loading... Please wait.
    ' + '
    '); } - setFitWidth(prefix); + setFitWidth(prefix); $(gd_page).find(".gd-compare-preload").css("width", Math.round(pageSize.width)); $(gd_page).find(".gd-compare-preload").css("height", Math.round(pageSize.height)); }, @@ -352,7 +355,7 @@ function generatePagesTemplates(guid, prefix) { } -function loadPage(guid, prefix, currentPageNumber) { +function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description var data = { path: guid, page: currentPageNumber }; @@ -367,28 +370,37 @@ function loadPage(guid, prefix, currentPageNumber) { printMessage(htmlData.error); return; } - var compareFile = { guid: "", password: "" }; - compareFile.guid = guid; - compareFilesMap.push(compareFile); - addDocInfoHead(compareFile.guid, prefix); - $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); - $.each(htmlData.pages, function (index, page) { - // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + - '' + - '
    '); - }); - setFitWidth(prefix); - if (currentPageNumber == preloadPageCount) { - generatePagesTemplates(guid, prefix); - } - if (compareFilesMap.length >= 2) { - $('#gd-btn-compare').on(userMouseClick, function (event) { - event.preventDefault(); - event.stopImmediatePropagation(); - compareFiles(); + if (replaceTemplate) { + var template = $('#gd-upload-section-' + prefix).find('.gd-compare-preload')[0]; + $(template).find("#gd-compare-spinner").remove(); + $(template).append(''); + $(template).removeClass("gd-compare-preload"); + $(template).css("width", "inherit"); + $(template).css("height", "unset"); + } else { + var compareFile = { guid: "", password: "" }; + compareFile.guid = guid; + compareFilesMap.push(compareFile); + addDocInfoHead(compareFile.guid, prefix); + $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); + $.each(htmlData.pages, function (index, page) { + // append page image, in image mode append occurred after setting the size to avoid zero size usage + gd_page.append('
    ' + + '' + + '
    '); }); - $('#gd-btn-compare').removeClass("disabled"); + setFitWidth(prefix); + if (currentPageNumber == preloadPageCount) { + generatePagesTemplates(guid, prefix); + } + if (compareFilesMap.length >= 2) { + $('#gd-btn-compare').on(userMouseClick, function (event) { + event.preventDefault(); + event.stopImmediatePropagation(); + compareFiles(); + }); + $('#gd-btn-compare').removeClass("disabled"); + } } }, error: function (xhr, status, error) { @@ -464,7 +476,7 @@ function compareFiles() { } // hide loading spinner $('#gd-compare-spinner').hide(); - documentResultGuid = returnedData.guid; + documentResultGuid = returnedData.guid; var differences = returnedData.changes; ShowDifferences(differences); }, @@ -487,10 +499,10 @@ function ShowDifferences(differences) { addHighlightDifferences(change); $(".gd-difference, .highlight-difference").on(userMouseClick, function (e) { highlightDifference(e); - }); - }); + }); + }); $(".gd-differences-wrapper").addClass("active"); - // $(".gd-compare-section").css("width", "795px"); + // $(".gd-compare-section").css("width", "795px"); $(".gd-comparison-bar-wrapper").css("width", "83%"); $.each($(".gd-compare-section"), function (index, section) { var prefix = $(section).attr("id").split("-").pop(); @@ -528,7 +540,7 @@ function highlightDifference(event) { */ function scrollToDifference(section, difference) { // get zoom value - var zoomValue = 100; + var zoomValue = 100; // scroll $(section).find("#gd-pages").scrollTo(difference, { zoom: zoomValue @@ -571,8 +583,7 @@ function getDifferenceHtml(difference) { if (typeof value == "number") { value = Math.round(value); } - switch(key) - { + switch (key) { case "ChangedProperty": comment = "Changed style: " + value; break; @@ -582,8 +593,8 @@ function getDifferenceHtml(difference) { case "NewValue": comment = comment + " To: " + value; break; - } - }); + } + }); }); } else { comment = difference.Text; @@ -604,7 +615,7 @@ function setFitWidth(prefix) { // get scale ratio var scale = (pageWidth / screenWidth) * 100; // set values - zoomValue = 200 - scale; + zoomValue = 200 - scale; setZoomValue(zoomValue, prefix); } @@ -615,7 +626,7 @@ function setFitWidth(prefix) { function setZoomValue(zoom_val, prefix) { // adapt value for css var zoom_val_non_webkit = zoom_val / 100; - var zoom_val_webkit = Math.round(zoom_val) + '%'; + var zoom_val_webkit = Math.round(zoom_val) + '%'; var style = [ 'zoom: ' + zoom_val_webkit, 'zoom: ' + zoom_val_non_webkit, // for non webkit browsers @@ -624,10 +635,10 @@ function setZoomValue(zoom_val, prefix) { '-webkit-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')', '-ms-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')', '-o-transform: (' + zoom_val_non_webkit + ', ' + zoom_val_non_webkit + ')' - ].join(';'); + ].join(';'); $.each($('#gd-upload-section-' + prefix).find(".gd-wrapper"), function (index, page) { $(page).attr('style', style); - }); + }); } @@ -660,7 +671,7 @@ function addCloseSection() { $(section).find(".gd-compare-area-head").append(close); } } - }); + }); } function convertIndexToString(index) { @@ -692,15 +703,15 @@ function getHtmlCompareSection(prefix) { // drag and drop section var htmlSection = '
    ' + '
    ' + - '
    '+ - '' + - '' + - '' + - '
    ' + - '
    '+ - '' + - '
    ' + - '
    ' + + '
    ' + + '' + + '' + + '' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    ' + '
    ' + '
    ' + @@ -711,7 +722,7 @@ function getHtmlCompareSection(prefix) { '
    ' + //// pages BEGIN - '
    ' + + '
    ' + '' + '
    ' + // // pages END @@ -740,10 +751,10 @@ function replacePrefix(prefix) { * Init remove button for selection area * @param prefix - prefix for selection area */ -function initCloseButton() { - $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { +function initCloseButton() { + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-close-dad-area', function (e) { closeDifferences(); - $(".highlight-difference").remove(); + $(".highlight-difference").remove(); var prefix = $(e.target).attr("id").split("-").pop(); if ($('#gd-upload-section-' + prefix).find(".gd-wrapper").length > 0) { clearDocumentPreview(prefix); @@ -806,8 +817,8 @@ function initDropZone(prefix) { event.stopPropagation(); event.preventDefault(); dropZone.removeClass('hover'); - var files = event.dataTransfer.files; - uploadDragFile(files[0], prefix); + var files = event.dataTransfer.files; + uploadDragFile(files[0], prefix); }; } } @@ -930,11 +941,11 @@ GROUPDOCS.COMAPRISON PLUGIN getHtmlCompareSection('first') + getHtmlCompareSection('second') + '
    ' + '
    ' + - '
    ' + - 'Differences' + - '
    ' + - '
    ' + - '
    ' + + '
    ' + + 'Differences' + + '
    ' + + '
    ' + + '
    ' + '
    '; } From 1629f2992f47b3eed0c13f7ceb6216dc10b471a8 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Tue, 4 Jun 2019 12:43:16 +0300 Subject: [PATCH 15/26] Updates for pdf differences positioning --- packages/comparison/js/comparison.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index fb14913..0cc4622 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -513,8 +513,8 @@ function ShowDifferences(differences) { function addHighlightDifferences(change) { var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; var firstSection = $(".gd-compare-section")[0]; - var page = $(lastSection).find(".gd-page-" + (change.Page.Id + 1)); - var originalDocPage = $(firstSection).find(".gd-page-" + (change.Page.Id + 1)); + var page = $(lastSection).find(".gd-page-" + (change.PageInfo.Id)); + var originalDocPage = $(firstSection).find(".gd-page-" + (change.PageInfo.Id)); var highlightHtml = (change.Type == 3) ? getHightlightHtml(change, originalDocPage) : getHightlightHtml(change, page); (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } @@ -559,14 +559,9 @@ function scrollDifferencesPanel(difference) { }); } -function getHightlightHtml(change, page) { - var y = 0; - var x = change.Box.X + parseInt($(page).css("padding-left")); - if (getDocumentFormat(compareDocumentGuid).format == "Portable Document Format") { - y = change.Page.Height - change.Box.Y + parseInt($(page).css("padding-top")); - } else { - y = change.Box.Y + parseInt($(page).css("padding-top")); - } +function getHightlightHtml(change, page) { + var x = change.Box.X + parseInt($(page).css("padding-left")) + parseInt($(".gd-wrapper").css("padding").split(" ")[1]) + parseInt($(".gd-pages").css("padding")); + var y = change.Box.Y + parseInt($(page).css("padding-top")) + parseInt($(".gd-pages").css("padding")); var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; return '
    '; @@ -577,7 +572,7 @@ function getDifferenceHtml(difference) { if (difference.Type == 0) { return; } - if (difference.StyleChanges) { + if (difference.StyleChanges && difference.StyleChanges.legth > 0) { $.each(difference.StyleChanges, function (index, style) { $.each(style, function (key, value) { if (typeof value == "number") { @@ -602,7 +597,7 @@ function getDifferenceHtml(difference) { return '
    ' + differencesTypes[difference.Type].icon + differencesTypes[difference.Type].title + - 'Page ' + (difference.Page.Id + 1) + '' + + 'Page ' + (difference.PageInfo.Id) + '' + '
    ' + comment + '
    ' + '
    '; } From c93f5fdc077a52c2df8325b7db9456c2947f3ee9 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 4 Jul 2019 15:31:01 +0300 Subject: [PATCH 16/26] Updated changes coordinates calculation --- packages/comparison/js/comparison.js | 32 +++++++++++++++++++--------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 0cc4622..4407ba9 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -418,13 +418,21 @@ function loadAllPages(guid, prefix) { var data = { path: guid }; $.ajax({ type: 'POST', - url: getApplicationPath('loadDocumentPages'), + url: getApplicationPath('loadDocumentDescription'), data: JSON.stringify(data), contentType: "application/json", success: function (htmlData) { - if (htmlData.error != undefined) { - // open error popup - printMessage(htmlData.error); + if (htmlData.message != undefined) { + fadeAll(false); + if (htmlData.message == "Password Required") { + openPasswordModal(); + } else if (htmlData.message == "Incorrect password") { + openPasswordModal(htmlData.message); + return; + } else { + // open error popup + printMessage(htmlData.message); + } return; } var compareFile = { guid: "", password: "" }; @@ -501,8 +509,7 @@ function ShowDifferences(differences) { highlightDifference(e); }); }); - $(".gd-differences-wrapper").addClass("active"); - // $(".gd-compare-section").css("width", "795px"); + $(".gd-differences-wrapper").addClass("active"); $(".gd-comparison-bar-wrapper").css("width", "83%"); $.each($(".gd-compare-section"), function (index, section) { var prefix = $(section).attr("id").split("-").pop(); @@ -511,10 +518,14 @@ function ShowDifferences(differences) { } function addHighlightDifferences(change) { + var id = change.PageInfo.Id; + if (getDocumentFormat(compareDocumentGuid).format == "Microsoft Word") { + id = id + 1; + } var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; var firstSection = $(".gd-compare-section")[0]; - var page = $(lastSection).find(".gd-page-" + (change.PageInfo.Id)); - var originalDocPage = $(firstSection).find(".gd-page-" + (change.PageInfo.Id)); + var page = $(lastSection).find(".gd-page-" + (id)); + var originalDocPage = $(firstSection).find(".gd-page-" + (id)); var highlightHtml = (change.Type == 3) ? getHightlightHtml(change, originalDocPage) : getHightlightHtml(change, page); (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } @@ -561,8 +572,9 @@ function scrollDifferencesPanel(difference) { function getHightlightHtml(change, page) { var x = change.Box.X + parseInt($(page).css("padding-left")) + parseInt($(".gd-wrapper").css("padding").split(" ")[1]) + parseInt($(".gd-pages").css("padding")); - var y = change.Box.Y + parseInt($(page).css("padding-top")) + parseInt($(".gd-pages").css("padding")); - + var y = change.Box.Y + parseInt($(".gd-pages").css("padding")); + x = x / $(".gd-wrapper").css("zoom"); + y = y * $(".gd-wrapper").css("zoom"); var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; return '
    '; } From 3eecd5cc4eb2d0d53d5c8ee8a12b454a9db275f7 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Wed, 10 Jul 2019 09:54:37 +0300 Subject: [PATCH 17/26] Removed multycomparing and added file formats filter --- packages/comparison/js/comparison.js | 172 ++++++++++++++++----------- 1 file changed, 104 insertions(+), 68 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 4407ba9..bc06be1 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -22,6 +22,7 @@ var rewrite; var browsePrefix = ""; var differencesTypes = {}; var loadedPageNumber = 0; +var sourceExt = ""; differencesTypes[1] = { 'icon': '', 'title': 'Text edited' }; differencesTypes[2] = { 'icon': '', 'title': 'Text Added' }; differencesTypes[3] = { 'icon': '', 'title': 'Text deleted' }; @@ -54,6 +55,11 @@ $(document).ready(function () { ////////////////////////////////////////////////// $('.gd-modal-body').off(userMouseClick, '.gd-filetree-name'); + ////////////////////////////////////////////////// + // Disable default go up event + ////////////////////////////////////////////////// + $('.gd-modal-body').off(userMouseClick, '.gd-go-up'); + ////////////////////////////////////////////////// // File or directory click event from file tree ////////////////////////////////////////////////// @@ -67,31 +73,26 @@ $(document).ready(function () { currentDirectory = $(this).text(); } toggleModalDialog(false, ''); - loadFileTree(currentDirectory); + loadFileTreeComparison(currentDirectory); } else { // if document -> open toggleModalDialog(false, ''); password = ""; + sourceExt = $(this).attr('data-guid').split('.').pop(); appendHtmlContent(browsePrefix, $(this).attr('data-guid')); } - }); + }); ////////////////////////////////////////////////// - // Add new comparison section + // Go to parent directory event from file tree ////////////////////////////////////////////////// - $('#gd-add-multicompare').on(userMouseClick, function (e) { - var prefix = $(".gd-compare-section").length + 1; - if (prefix <= 4) { - var newDragnDrop = getHtmlCompareSection(prefix) - $(".gd-comparison-bar-wrapper").append(newDragnDrop); - } - if (prefix == 4) { - $(".gd-comparison-bar-wrapper").addClass("full"); - $(".gd-drag-n-drop-wrap-compare").addClass("full"); - $(".gd-compare-section").css("width", "959px"); + $('.gd-modal-body').on('click', '.gd-go-up', function (e) { + if (currentDirectory.length > 0 && currentDirectory.indexOf('/') == -1) { + currentDirectory = ''; + } else { + currentDirectory = currentDirectory.replace(/\/[^\/]+\/?$/, ''); } - initDropZone(prefix); - addCloseSection(); + loadFileTreeComparison(currentDirectory); }); ////////////////////////////////////////////////// @@ -121,8 +122,8 @@ $(document).ready(function () { ////////////////////////////////////////////////// $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-compare-browse', function (e) { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); - toggleModalDialog(false, ''); - loadFileTree(''); + toggleModalDialog(false, ''); + loadFileTreeComparison(''); }); $(".gd-comparison-bar-wrapper").on(userMouseClick, function (e) { @@ -159,9 +160,7 @@ $(document).ready(function () { loadPage(guid, prefix, i + 1, true); } } - } - - + } }); // @@ -174,6 +173,78 @@ FUNCTIONS ****************************************************************** */ +/** +* Load file tree +* @param {string} dir - files location directory +*/ +function loadFileTreeComparison(dir) { + var data = { path: dir }; + currentDirectory = dir; + // clear previously entered password + clearPassword(); + // show loading spinner + $('#gd-modal-spinner').show(); + // get data + $.ajax({ + type: 'POST', + url: getApplicationPath('loadFileTree'), + data: JSON.stringify(data), + contentType: 'application/json', + success: function (returnedData) { + if (returnedData.message != undefined) { + // open error popup + printMessage(returnedData.message); + return; + } + // assembly modal html + $('.gd-modal-body').html(''); // clear previous data + toggleModalDialog(true, "Open Document", getHtmlFileBrowser()); + // hide loading spinner + $('#gd-modal-spinner').hide(); + // append files to tree list + $.each(returnedData, function (index, elem) { + if (sourceExt != "") { + if (elem.name.split('.').pop() != sourceExt && !elem.isDirectory) { + return true; + } + } + // document name + var name = elem.name; + // document guid + var guid = elem.guid; + // document size + var size = elem.size; + // convert to proper size + var new_size = size + ' Bytes'; + if ((size / 1024 / 1024) > 1) { + new_size = (Math.round((size / 1024 / 1024) * 100) / 100) + ' MB'; + } else if ((size / 1024) > 1) { + new_size = (Math.round((size / 1024) * 100) / 100) + ' KB'; + } + // document format + var docFormat = (getDocumentFormat(name, elem.isDirectory) == undefined) ? 'fa-folder' : getDocumentFormat(name, elem.isDirectory); + // append document + $('.gd-modal-table tbody').append( + '' + + '' + + '
    ' + name + '
    ' + + '' + docFormat.format + '' + + '' + new_size + '' + + ''); + }); + }, + error: function (xhr, status, error) { + var err = eval("(" + xhr.responseText + ")"); + console.log(err.Message); + // hide loading spinner + $('#gd-modal-spinner').hide(); + // open error popup + printMessage(err.message); + } + }); +} + + function closeDifferences() { $(".gd-differences-wrapper").removeClass("active"); $(".gd-comparison-bar-wrapper").css("width", "100%"); @@ -212,6 +283,9 @@ function clearDocumentPreview(prefix) { $("#gd-dropZone-" + prefix).show(); var fileName = $("#gd-upload-section-" + prefix).find(".gd-compare-file-name").html(); removeFileFromCompare(fileName); + if ($(".gd-wrapper").length == 0) { + sourceExt = ""; + } } function removeFileFromCompare(fileName) { @@ -526,7 +600,7 @@ function addHighlightDifferences(change) { var firstSection = $(".gd-compare-section")[0]; var page = $(lastSection).find(".gd-page-" + (id)); var originalDocPage = $(firstSection).find(".gd-page-" + (id)); - var highlightHtml = (change.Type == 3) ? getHightlightHtml(change, originalDocPage) : getHightlightHtml(change, page); + var highlightHtml = getHightlightHtml(change); (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } @@ -570,11 +644,11 @@ function scrollDifferencesPanel(difference) { }); } -function getHightlightHtml(change, page) { - var x = change.Box.X + parseInt($(page).css("padding-left")) + parseInt($(".gd-wrapper").css("padding").split(" ")[1]) + parseInt($(".gd-pages").css("padding")); - var y = change.Box.Y + parseInt($(".gd-pages").css("padding")); - x = x / $(".gd-wrapper").css("zoom"); - y = y * $(".gd-wrapper").css("zoom"); +function getHightlightHtml(change) { + var x = change.Box.X; + var y = change.Box.Y; + x = x * $(".gd-wrapper").css("zoom") * 0.81; + y = y * $(".gd-wrapper").css("zoom") * 0.81; var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; return '
    '; } @@ -702,11 +776,6 @@ function convertIndexToString(index) { * Get HTML content for drag and drop area **/ function getHtmlCompareSection(prefix) { - // close icon for multi comparing - - if (prefix > 2) { - prefix = replacePrefix(prefix); - } // drag and drop section var htmlSection = '
    ' + '
    ' + @@ -737,23 +806,6 @@ function getHtmlCompareSection(prefix) { return htmlSection; } -/** - * Replace prefix for file more than second - * - * @param prefix - * @returns 'first', 'second' for 1, 2. After 2 returns 'next' - */ -function replacePrefix(prefix) { - switch (prefix) { - case 3: - return "third"; - break; - case 4: - return "fourth"; - break; - } -} - /** * Init remove button for selection area * @param prefix - prefix for selection area @@ -862,8 +914,7 @@ GROUPDOCS.COMAPRISON PLUGIN preloadResultPageCount: 0, download: true, upload: true, - rewrite: true, - multiComparing: false + rewrite: true }; $('#element').viewer({ applicationPath: options.applicationPath, @@ -889,8 +940,7 @@ GROUPDOCS.COMAPRISON PLUGIN // set global option params applicationPath = options.applicationPath; preloadPageCount = options.preloadResultPageCount; - rewrite = options.rewrite; - multiComparing = options.multiComparing; + rewrite = options.rewrite; $("#gd-pages").remove(); $(".wrapper").append(getHtmlBase); // assembly html base @@ -902,12 +952,7 @@ GROUPDOCS.COMAPRISON PLUGIN if (options.download) { $(gd_navbar).append(getHtmlNavDownloadPanel); } - - // assembly nav bar - if (options.multiComparing) { - $(gd_navbar).append(getHtmlMultiCompare); - } - + initDropZone('first'); initDropZone('second'); $(".gd-nav-separator").remove(); @@ -954,16 +999,7 @@ GROUPDOCS.COMAPRISON PLUGIN '
    ' + '
    ' + '
    '; - } - - function getHtmlMultiCompare() { - return '
  • ' + - '' + - '' + - 'Compare' + - '' + - '
    • '; - } + } function getHtmlNavDownloadPanel() { var downloadBtn = $("#gd-btn-download"); From 1ef147c6452d29a374baadeb0b371ed3eb827034 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Wed, 10 Jul 2019 13:26:24 +0300 Subject: [PATCH 18/26] Improved preload pages --- packages/comparison/js/comparison.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index bc06be1..3f201d9 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -447,7 +447,7 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { if (replaceTemplate) { var template = $('#gd-upload-section-' + prefix).find('.gd-compare-preload')[0]; $(template).find("#gd-compare-spinner").remove(); - $(template).append(''); + $(template).append(''); $(template).removeClass("gd-compare-preload"); $(template).css("width", "inherit"); $(template).css("height", "unset"); @@ -457,12 +457,19 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { compareFilesMap.push(compareFile); addDocInfoHead(compareFile.guid, prefix); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); - $.each(htmlData.pages, function (index, page) { + if (htmlData.pages) { + $.each(htmlData.pages, function (index, page) { + // append page image, in image mode append occurred after setting the size to avoid zero size usage + gd_page.append('
    ' + + '' + + '
    '); + }); + } else { // append page image, in image mode append occurred after setting the size to avoid zero size usage - gd_page.append('
    ' + - '' + + gd_page.append('
    ' + + '' + '
    '); - }); + } setFitWidth(prefix); if (currentPageNumber == preloadPageCount) { generatePagesTemplates(guid, prefix); From 5718544bfb0719293491892f3fa21a42309866fc Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Wed, 10 Jul 2019 18:03:12 +0300 Subject: [PATCH 19/26] Renamed path to guid --- packages/comparison/js/comparison.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 3f201d9..6304a83 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -432,7 +432,7 @@ function generatePagesTemplates(guid, prefix) { function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description - var data = { path: guid, page: currentPageNumber }; + var data = { guid: guid, page: currentPageNumber }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentPage'), @@ -496,7 +496,7 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { function loadAllPages(guid, prefix) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description - var data = { path: guid }; + var data = { guid: guid }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentDescription'), From e906e0ba06339cd2123a3f61318f8eb11c157ee6 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 11 Jul 2019 10:20:09 +0300 Subject: [PATCH 20/26] Fixed password protected documents and FireFox zoom detection --- packages/comparison/css/comparison.css | 4 ++- packages/comparison/js/comparison.js | 49 ++++++++++++++++++-------- 2 files changed, 38 insertions(+), 15 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index 3eca5ab..e9dd975 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -257,7 +257,9 @@ Right side panel .gd-differentce-comment { color: #959DA5; font-size: 13px; - margin: 10px 0px 18px 45px; + position: relative; + top: 7px; + left: 48px; width: 262px; white-space: nowrap; /*keep text on one line */ overflow: hidden; /*prevent text from being shown outside the border */ diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 6304a83..b8f82f4 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -58,7 +58,18 @@ $(document).ready(function () { ////////////////////////////////////////////////// // Disable default go up event ////////////////////////////////////////////////// - $('.gd-modal-body').off(userMouseClick, '.gd-go-up'); + $('.gd-modal-body').off(userMouseClick, '#gd-password-submit'); + + ////////////////////////////////////////////////// + // Submit password button click (password required modal) + ////////////////////////////////////////////////// + $('.gd-modal-body').on('click', "#gd-password-submit", function (e) { + password = $('#gd-password-input').val(); + $('#gd-password-input').val(''); + toggleModalDialog(false, ''); + appendHtmlContent(browsePrefix, compareDocumentGuid, password); + }); + ////////////////////////////////////////////////// // File or directory click event from file tree @@ -377,24 +388,24 @@ function uploadDragFile(file, prefix) { * Append html content to an empty page * @param {string} prefix - current compare area prefix */ -function appendHtmlContent(prefix, guid) { +function appendHtmlContent(prefix, guid, password) { // initialize data compareDocumentGuid = guid; $("#gd-dropZone-" + prefix).hide(); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').show(); if (preloadPageCount == 0) { - loadAllPages(guid, prefix); + loadAllPages(guid, prefix, password); } else { for (i = 0; i < preloadPageCount; i++) { - loadPage(guid, prefix, i + 1, false); + loadPage(guid, prefix, i + 1, password, false); } } } -function generatePagesTemplates(guid, prefix) { +function generatePagesTemplates(guid, prefix, password) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description - var data = { path: guid }; + var data = { guid: guid, password: password }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentInfo'), @@ -429,10 +440,10 @@ function generatePagesTemplates(guid, prefix) { } -function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { +function loadPage(guid, prefix, currentPageNumber, password, replaceTemplate) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description - var data = { guid: guid, page: currentPageNumber }; + var data = { guid: guid, page: currentPageNumber, password: password }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentPage'), @@ -454,6 +465,7 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { } else { var compareFile = { guid: "", password: "" }; compareFile.guid = guid; + compareFile.password = password; compareFilesMap.push(compareFile); addDocInfoHead(compareFile.guid, prefix); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); @@ -472,7 +484,7 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { } setFitWidth(prefix); if (currentPageNumber == preloadPageCount) { - generatePagesTemplates(guid, prefix); + generatePagesTemplates(guid, prefix, password); } if (compareFilesMap.length >= 2) { $('#gd-btn-compare').on(userMouseClick, function (event) { @@ -493,10 +505,10 @@ function loadPage(guid, prefix, currentPageNumber, replaceTemplate) { }); } -function loadAllPages(guid, prefix) { +function loadAllPages(guid, prefix, password) { var gd_page = $('#gd-upload-section-' + prefix).find("#gd-pages"); // get document description - var data = { guid: guid }; + var data = { guid: guid, password: password }; $.ajax({ type: 'POST', url: getApplicationPath('loadDocumentDescription'), @@ -518,6 +530,7 @@ function loadAllPages(guid, prefix) { } var compareFile = { guid: "", password: "" }; compareFile.guid = guid; + compareFile.password = password; compareFilesMap.push(compareFile); addDocInfoHead(compareFile.guid, prefix); $('#gd-upload-section-' + prefix).find('#gd-compare-spinner').hide(); @@ -654,8 +667,16 @@ function scrollDifferencesPanel(difference) { function getHightlightHtml(change) { var x = change.Box.X; var y = change.Box.Y; - x = x * $(".gd-wrapper").css("zoom") * 0.81; - y = y * $(".gd-wrapper").css("zoom") * 0.81; + var zoom = 1; + if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { + zoom = parseFloat($(".gd-wrapper").css("-moz-transform").match(/[+-]?\d+(\.\d+)?/)[0]); + x = x + (parseInt($(".gd-wrapper").css("paddingLeft")) * 2) + parseInt($(".gd-pages").css("paddingLeft")); + y = y + (parseInt($(".gd-wrapper").css("paddingTop")) * 2) + parseInt($(".gd-pages").css("paddingTop")); + } else { + zoom = $(".gd-wrapper").css("zoom"); + } + x = x * zoom * 0.81; + y = y * zoom * 0.81; var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; return '
    '; } @@ -690,7 +711,7 @@ function getDifferenceHtml(difference) { return '
    ' + differencesTypes[difference.Type].icon + differencesTypes[difference.Type].title + - 'Page ' + (difference.PageInfo.Id) + '' + + 'Page ' + (difference.PageInfo.Id + 1) + '' + '
    ' + comment + '
    ' + '
    '; } From 6f8820883acc0d9f3e246f39a53f4533a1a3e923 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Thu, 11 Jul 2019 10:49:34 +0300 Subject: [PATCH 21/26] Added message for identical documents --- packages/comparison/js/comparison.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index b8f82f4..c6d49a9 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -580,7 +580,11 @@ function compareFiles() { $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; var differences = returnedData.changes; - ShowDifferences(differences); + if (differences.length > 0) { + ShowDifferences(differences); + } else { + toggleModalDialog(true, 'Compared', "These documents are identical"); + } }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); From a54f6cff6347fbf7e30b82c067d7bc7fef2eab0c Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 12 Jul 2019 09:59:33 +0300 Subject: [PATCH 22/26] Improved positioning --- packages/comparison/css/comparison.css | 5 +- packages/comparison/js/comparison.js | 127 +++++++++++++------------ 2 files changed, 68 insertions(+), 64 deletions(-) diff --git a/packages/comparison/css/comparison.css b/packages/comparison/css/comparison.css index e9dd975..af5c151 100644 --- a/packages/comparison/css/comparison.css +++ b/packages/comparison/css/comparison.css @@ -140,6 +140,7 @@ Hightlight elements .highlight-difference { position: absolute; cursor: pointer; + z-index: 1; } .highlight-difference.active { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); @@ -177,7 +178,7 @@ Right side panel flex-flow: column; margin-right: -334px; width: 334px; - transition: margin-right 0.2s cubic-bezier(0.81, 0.01, 1, 1); + transition: margin-right 0.2s; } .gd-differences-wrapper.active { @@ -185,7 +186,7 @@ Right side panel width: 334px; z-index: 999; background-color: #FFF; - transition: margin-right 0.2s cubic-bezier(0.81, 0.01, 1, 1); + transition: margin-right 0.2s; } .gd-differences-header { diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index c6d49a9..f10b02f 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -42,14 +42,10 @@ $(document).ready(function () { ////////////////////////////////////////////////// // Download event ////////////////////////////////////////////////// - $('#gd-btn-download-all').on(userMouseClick, function (e) { + $('#gd-btn-download-compared').on(userMouseClick, function (e) { downloadDocument(); }); - $('#gd-btn-download-summary').on(userMouseClick, function (e) { - downloadDocument(resultData.length - 1); - }); - ////////////////////////////////////////////////// // Disable default file or diretory click event ////////////////////////////////////////////////// @@ -92,7 +88,7 @@ $(document).ready(function () { sourceExt = $(this).attr('data-guid').split('.').pop(); appendHtmlContent(browsePrefix, $(this).attr('data-guid')); } - }); + }); ////////////////////////////////////////////////// // Go to parent directory event from file tree @@ -133,8 +129,8 @@ $(document).ready(function () { ////////////////////////////////////////////////// $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-compare-browse', function (e) { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); - toggleModalDialog(false, ''); - loadFileTreeComparison(''); + toggleModalDialog(false, ''); + loadFileTreeComparison(''); }); $(".gd-comparison-bar-wrapper").on(userMouseClick, function (e) { @@ -151,7 +147,7 @@ $(document).ready(function () { ////////////////////////////////////////////////// var previousScroll = 0; var currentlyLoadedPage = null; - $('.gd-pages').scroll(function (event) { + $('.gd-pages').scroll(function (event) { // get last page number var allPages = $(event.target).parent().find(".gd-wrapper"); var guid = $(event.target).parent().find(".gd-compare-file-name").data("guid"); @@ -162,16 +158,16 @@ $(document).ready(function () { var delta = 0.5; if (zoom < 1) { delta = 1; - } + } for (i = preloadPageCount; i <= lastPageNumber; i++) { // check if page is visible in the view port more than 50% if ($(allPages[i]).isOnScreen(delta, delta)) { - if ($(allPages[i]).hasClass("gd-compare-preload") && !$(allPages[i]).is(currentlyLoadedPage)) { + if ($(allPages[i]).hasClass("gd-compare-preload") && !$(allPages[i]).is(currentlyLoadedPage)) { currentlyLoadedPage = $(allPages[i]); loadPage(guid, prefix, i + 1, true); } } - } + } }); // @@ -259,10 +255,21 @@ function loadFileTreeComparison(dir) { function closeDifferences() { $(".gd-differences-wrapper").removeClass("active"); $(".gd-comparison-bar-wrapper").css("width", "100%"); + recalculateChangesPositioning(); +} + +function recalculateChangesPositioning() { + $(".highlight-difference").each(function (index, difference) { + var top = $(difference).position().top; + var left = $(difference).position().left; + $(difference).css("top", top / 0.81); + $(difference).css("left", left / 0.81); + }); } + function getFileNameFromPath(guid) { - return guid.match(/[-_\w]+[.][\w]+$/i)[0]; + return guid.replace(/^.*[\\\/]/, ''); } function addDocInfoHead(guid, prefix) { @@ -274,7 +281,7 @@ function addDocInfoHead(guid, prefix) { $(fileInfoArea).find("i").addClass(icon); $(fileInfoArea).find(".gd-compare-file-name").html(fileName); $(fileInfoArea).find(".gd-compare-file-name").data("guid", guid); - addCloseSection(); + addCloseSection(prefix); } function removeDocInfoHead(prefix) { @@ -300,6 +307,7 @@ function clearDocumentPreview(prefix) { } function removeFileFromCompare(fileName) { + $('#gd-btn-download-compared').hasClass("disabled") ? "" : $('#gd-btn-download-compared').addClass("disabled"); $.each(compareFilesMap, function (index, filePath) { if (filePath.guid.indexOf(fileName) > 0) { compareFilesMap = $.grep(compareFilesMap, function (value) { @@ -561,6 +569,9 @@ function loadAllPages(guid, prefix, password) { function compareFiles() { var data = { guids: compareFilesMap }; + if ($(".highlight-difference").length > 0) { + $(".highlight-difference").remove(); + } fadeAll(true); // send compare $.ajax({ @@ -579,6 +590,7 @@ function compareFiles() { // hide loading spinner $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; + $('#gd-btn-download-compared').hasClass("disabled") ? $('#gd-btn-download-compared').removeClass("disabled") : ""; var differences = returnedData.changes; if (differences.length > 0) { ShowDifferences(differences); @@ -599,32 +611,34 @@ function compareFiles() { function ShowDifferences(differences) { $(".gd-differences-body").html(""); + $(".gd-differences-wrapper").addClass("active"); + $(".gd-comparison-bar-wrapper").css("width", "83%"); + $.each(differences, function (index, change) { - var changeHtml = getDifferenceHtml(change); + var id = generateRandomInteger(); + var changeHtml = getDifferenceHtml(change, id); $(".gd-differences-body").append(changeHtml); - addHighlightDifferences(change); + addHighlightDifferences(change, id); $(".gd-difference, .highlight-difference").on(userMouseClick, function (e) { highlightDifference(e); }); }); - $(".gd-differences-wrapper").addClass("active"); - $(".gd-comparison-bar-wrapper").css("width", "83%"); $.each($(".gd-compare-section"), function (index, section) { var prefix = $(section).attr("id").split("-").pop(); setFitWidth(prefix); }) } -function addHighlightDifferences(change) { +function addHighlightDifferences(change, changeId) { var id = change.PageInfo.Id; - if (getDocumentFormat(compareDocumentGuid).format == "Microsoft Word") { + if (getDocumentFormat(compareDocumentGuid).format != "Portable Document Format") { id = id + 1; } var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; var firstSection = $(".gd-compare-section")[0]; var page = $(lastSection).find(".gd-page-" + (id)); var originalDocPage = $(firstSection).find(".gd-page-" + (id)); - var highlightHtml = getHightlightHtml(change); + var highlightHtml = getHightlightHtml(change, changeId); (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } @@ -668,7 +682,7 @@ function scrollDifferencesPanel(difference) { }); } -function getHightlightHtml(change) { +function getHightlightHtml(change, guid) { var x = change.Box.X; var y = change.Box.Y; var zoom = 1; @@ -678,14 +692,16 @@ function getHightlightHtml(change) { y = y + (parseInt($(".gd-wrapper").css("paddingTop")) * 2) + parseInt($(".gd-pages").css("paddingTop")); } else { zoom = $(".gd-wrapper").css("zoom"); + x = x - (parseInt($(".gd-wrapper").css("padding-left")) * 2); + y = y + (parseInt($(".gd-wrapper").css("padding-top")) * 2); } - x = x * zoom * 0.81; - y = y * zoom * 0.81; + x = x / zoom * 0.81; + y = y / zoom * 0.81; var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; - return '
    '; + return '
    '; } -function getDifferenceHtml(difference) { +function getDifferenceHtml(difference, id) { var comment = ""; if (difference.Type == 0) { return; @@ -712,7 +728,7 @@ function getDifferenceHtml(difference) { } else { comment = difference.Text; } - return '
    ' + + return '
    ' + differencesTypes[difference.Type].icon + differencesTypes[difference.Type].title + 'Page ' + (difference.PageInfo.Id + 1) + '' + @@ -720,6 +736,14 @@ function getDifferenceHtml(difference) { '
    '; } +function generateRandomInteger() { + function _p8(s) { + var p = (Math.random().toString(16) + "000000000").substr(2, 8); + return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p; + } + return _p8() + _p8(true) + _p8(true) + _p8(); +} + function setFitWidth(prefix) { // get page width var pageWidth = $('.gd-wrapper').width(); @@ -760,31 +784,20 @@ function setZoomValue(zoom_val, prefix) { * @param {index} page number, if undefined, then download all results file */ function downloadDocument(index) { - if (documentResultGuid != "" && typeof documentResultGuid != "undefined") { - var extensionParam = "&ext=" + extension; - var imageExtParam = "&ext=jpg"; - var params = index ? "&index=" + index + imageExtParam : extensionParam; + if (documentResultGuid && documentResultGuid != "") { // Open download dialog - window.location.assign(getApplicationPath('downloadDocument/?guid=') + documentResultGuid + params); + window.location.assign(getApplicationPath('downloadDocument/?guid=') + documentResultGuid); } else { // open error popup printMessage("Please compare documents first"); } } -function addCloseSection() { - var sectionsCount = $(".gd-compare-section").length; - $.each($(".gd-compare-section"), function (index, section) { - var prefix = convertIndexToString(index + 1); - var close = ''; - if ($(section).find(".gd-close-dad-area").length == 0) { - if (sectionsCount == 2 && prefix == browsePrefix) { - $(section).find(".gd-compare-area-head").append(close); - } else if (sectionsCount > 2) { - $(section).find(".gd-compare-area-head").append(close); - } - } - }); +function addCloseSection(prefix) { + var close = ''; + if ($("#gd-upload-section-" + prefix).find(".gd-close-dad-area").length == 0) { + $("#gd-upload-section-" + prefix).find(".gd-compare-area-head").append(close); + } } function convertIndexToString(index) { @@ -946,7 +959,7 @@ GROUPDOCS.COMAPRISON PLUGIN preloadResultPageCount: 0, download: true, upload: true, - rewrite: true + rewrite: true }; $('#element').viewer({ applicationPath: options.applicationPath, @@ -958,7 +971,7 @@ GROUPDOCS.COMAPRISON PLUGIN search: false, thumbnails: false, rotate: false, - download: options.download, + download: false, upload: options.upload, print: false, browse: false, @@ -972,7 +985,7 @@ GROUPDOCS.COMAPRISON PLUGIN // set global option params applicationPath = options.applicationPath; preloadPageCount = options.preloadResultPageCount; - rewrite = options.rewrite; + rewrite = options.rewrite; $("#gd-pages").remove(); $(".wrapper").append(getHtmlBase); // assembly html base @@ -984,7 +997,7 @@ GROUPDOCS.COMAPRISON PLUGIN if (options.download) { $(gd_navbar).append(getHtmlNavDownloadPanel); } - + initDropZone('first'); initDropZone('second'); $(".gd-nav-separator").remove(); @@ -1031,20 +1044,10 @@ GROUPDOCS.COMAPRISON PLUGIN '
    ' + '
    ' + '
    '; - } + } function getHtmlNavDownloadPanel() { - var downloadBtn = $("#gd-btn-download"); - var downloadDropDown = '
  • ' + - '' + - '' + - 'Download' + - '' + - '' + - '
      ' + - // download types will be here - '
    ' + - '
    • '; - downloadBtn.html(downloadDropDown); + + return '
  • Download
    • '; } })(jQuery); \ No newline at end of file From c61d35689e90055769b6a0396db7439aa06d3985 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 12 Jul 2019 10:17:35 +0300 Subject: [PATCH 23/26] Fixed issue with not opened chnages panel --- packages/comparison/js/comparison.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index f10b02f..9fa4185 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -629,15 +629,20 @@ function ShowDifferences(differences) { }) } -function addHighlightDifferences(change, changeId) { - var id = change.PageInfo.Id; - if (getDocumentFormat(compareDocumentGuid).format != "Portable Document Format") { - id = id + 1; +function addHighlightDifferences(change, changeId, pageId) { + if (!pageId) { + pageId = change.PageInfo.Id; + if (getDocumentFormat(compareDocumentGuid).format != "Portable Document Format") { + pageId = pageId + 1; + } } var lastSection = $(".gd-compare-section")[$(".gd-compare-section").length - 1]; var firstSection = $(".gd-compare-section")[0]; - var page = $(lastSection).find(".gd-page-" + (id)); - var originalDocPage = $(firstSection).find(".gd-page-" + (id)); + var page = $(lastSection).find(".gd-page-" + (pageId)); + if (page.length == 0) { + addHighlightDifferences(change, changeId, pageId - 1); + } + var originalDocPage = $(firstSection).find(".gd-page-" + (pageId)); var highlightHtml = getHightlightHtml(change, changeId); (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } @@ -692,7 +697,7 @@ function getHightlightHtml(change, guid) { y = y + (parseInt($(".gd-wrapper").css("paddingTop")) * 2) + parseInt($(".gd-pages").css("paddingTop")); } else { zoom = $(".gd-wrapper").css("zoom"); - x = x - (parseInt($(".gd-wrapper").css("padding-left")) * 2); + x = x + (parseInt($(".gd-wrapper").css("padding-left")) * 2); y = y + (parseInt($(".gd-wrapper").css("padding-top")) * 2); } x = x / zoom * 0.81; From db8e89e8e928a50c126aa385df39f212ff6835b0 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 12 Jul 2019 11:55:11 +0300 Subject: [PATCH 24/26] Fixed canel case object fields to lower case --- packages/comparison/js/comparison.js | 45 +++++++++++++++++++--------- 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 9fa4185..2651f2a 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -591,7 +591,15 @@ function compareFiles() { $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; $('#gd-btn-download-compared').hasClass("disabled") ? $('#gd-btn-download-compared').removeClass("disabled") : ""; - var differences = returnedData.changes; + var differences = []; + // Since this code is used for both .NET and Java platforms we should make object fields lowerCase + $.each(returnedData.changes, function (index, change) { + + change.Box = keysToLower(change.Box); + change.pageInfo = keysToLower(change.PageInfo); + differences.push(keysToLower(change)); + + }); if (differences.length > 0) { ShowDifferences(differences); } else { @@ -609,6 +617,15 @@ function compareFiles() { }); } +function keysToLower(obj) { + let result = Object.keys(obj) + .reduce((destination, key) => { + destination[key.substr(0, 1).toLowerCase() + key.substr(1)] = obj[key]; + return destination; + }, {}); + return result; +} + function ShowDifferences(differences) { $(".gd-differences-body").html(""); $(".gd-differences-wrapper").addClass("active"); @@ -631,7 +648,7 @@ function ShowDifferences(differences) { function addHighlightDifferences(change, changeId, pageId) { if (!pageId) { - pageId = change.PageInfo.Id; + pageId = change.pageInfo.id; if (getDocumentFormat(compareDocumentGuid).format != "Portable Document Format") { pageId = pageId + 1; } @@ -644,7 +661,7 @@ function addHighlightDifferences(change, changeId, pageId) { } var originalDocPage = $(firstSection).find(".gd-page-" + (pageId)); var highlightHtml = getHightlightHtml(change, changeId); - (change.Type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); + (change.type == 3) ? $(originalDocPage).append(highlightHtml) : $(page).append(highlightHtml); } function highlightDifference(event) { @@ -688,8 +705,8 @@ function scrollDifferencesPanel(difference) { } function getHightlightHtml(change, guid) { - var x = change.Box.X; - var y = change.Box.Y; + var x = change.box.x; + var y = change.box.y; var zoom = 1; if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { zoom = parseFloat($(".gd-wrapper").css("-moz-transform").match(/[+-]?\d+(\.\d+)?/)[0]); @@ -702,17 +719,17 @@ function getHightlightHtml(change, guid) { } x = x / zoom * 0.81; y = y / zoom * 0.81; - var style = 'style="width: ' + change.Box.Width + 'px; height: ' + change.Box.Height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; - return '
    '; + var style = 'style="width: ' + change.box.width + 'px; height: ' + change.box.height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; + return '
    '; } function getDifferenceHtml(difference, id) { var comment = ""; - if (difference.Type == 0) { + if (difference.type == 0) { return; } - if (difference.StyleChanges && difference.StyleChanges.legth > 0) { - $.each(difference.StyleChanges, function (index, style) { + if (difference.styleChanges && difference.styleChanges.legth > 0) { + $.each(difference.styleChanges, function (index, style) { $.each(style, function (key, value) { if (typeof value == "number") { value = Math.round(value); @@ -731,12 +748,12 @@ function getDifferenceHtml(difference, id) { }); }); } else { - comment = difference.Text; + comment = difference.text; } return '
    ' + - differencesTypes[difference.Type].icon + - differencesTypes[difference.Type].title + - 'Page ' + (difference.PageInfo.Id + 1) + '' + + differencesTypes[difference.type].icon + + differencesTypes[difference.type].title + + 'Page ' + (difference.pageInfo.id + 1) + '' + '
    ' + comment + '
    ' + '
    '; } From ec75eda5725ac51cf2b41fa4c806a0fed52447f4 Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 12 Jul 2019 14:02:22 +0300 Subject: [PATCH 25/26] Fixed pages rendering in the FireFox --- comparison.html | 3 +- packages/comparison/js/comparison.js | 51 +++++++++++----------------- 2 files changed, 20 insertions(+), 34 deletions(-) diff --git a/comparison.html b/comparison.html index dcaab61..a579720 100644 --- a/comparison.html +++ b/comparison.html @@ -25,8 +25,7 @@ download: true, upload: true, rewrite: true, - preloadResultPageCount: 0, - multiComparing: true + preloadResultPageCount: 0 }); diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 2651f2a..6816122 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -127,7 +127,7 @@ $(document).ready(function () { ////////////////////////////////////////////////// // Open document button (upload dialog) click ////////////////////////////////////////////////// - $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-compare-browse', function (e) { + $(".gd-comparison-bar-wrapper").on(userMouseClick, '.gd-compare-browse, .gd-browse-comparison', function (e) { browsePrefix = $(event.target.closest(".gd-compare-section")).attr("id").split("-").pop(); toggleModalDialog(false, ''); loadFileTreeComparison(''); @@ -434,7 +434,9 @@ function generatePagesTemplates(guid, prefix, password) { '
     Loading... Please wait.
    ' + '
    '); } - setFitWidth(prefix); + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + setFitWidth(prefix); + } $(gd_page).find(".gd-compare-preload").css("width", Math.round(pageSize.width)); $(gd_page).find(".gd-compare-preload").css("height", Math.round(pageSize.height)); }, @@ -490,7 +492,9 @@ function loadPage(guid, prefix, currentPageNumber, password, replaceTemplate) { '' + '
    '); } - setFitWidth(prefix); + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + setFitWidth(prefix); + } if (currentPageNumber == preloadPageCount) { generatePagesTemplates(guid, prefix, password); } @@ -548,7 +552,9 @@ function loadAllPages(guid, prefix, password) { '' + '
    '); }); - setFitWidth(prefix); + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + setFitWidth(prefix); + } if (compareFilesMap.length >= 2) { $('#gd-btn-compare').on(userMouseClick, function (event) { event.preventDefault(); @@ -591,15 +597,7 @@ function compareFiles() { $('#gd-compare-spinner').hide(); documentResultGuid = returnedData.guid; $('#gd-btn-download-compared').hasClass("disabled") ? $('#gd-btn-download-compared').removeClass("disabled") : ""; - var differences = []; - // Since this code is used for both .NET and Java platforms we should make object fields lowerCase - $.each(returnedData.changes, function (index, change) { - - change.Box = keysToLower(change.Box); - change.pageInfo = keysToLower(change.PageInfo); - differences.push(keysToLower(change)); - - }); + var differences = returnedData.changes; if (differences.length > 0) { ShowDifferences(differences); } else { @@ -617,15 +615,6 @@ function compareFiles() { }); } -function keysToLower(obj) { - let result = Object.keys(obj) - .reduce((destination, key) => { - destination[key.substr(0, 1).toLowerCase() + key.substr(1)] = obj[key]; - return destination; - }, {}); - return result; -} - function ShowDifferences(differences) { $(".gd-differences-body").html(""); $(".gd-differences-wrapper").addClass("active"); @@ -640,10 +629,12 @@ function ShowDifferences(differences) { highlightDifference(e); }); }); - $.each($(".gd-compare-section"), function (index, section) { - var prefix = $(section).attr("id").split("-").pop(); - setFitWidth(prefix); - }) + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + $.each($(".gd-compare-section"), function (index, section) { + var prefix = $(section).attr("id").split("-").pop(); + setFitWidth(prefix); + }) + } } function addHighlightDifferences(change, changeId, pageId) { @@ -708,11 +699,7 @@ function getHightlightHtml(change, guid) { var x = change.box.x; var y = change.box.y; var zoom = 1; - if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { - zoom = parseFloat($(".gd-wrapper").css("-moz-transform").match(/[+-]?\d+(\.\d+)?/)[0]); - x = x + (parseInt($(".gd-wrapper").css("paddingLeft")) * 2) + parseInt($(".gd-pages").css("paddingLeft")); - y = y + (parseInt($(".gd-wrapper").css("paddingTop")) * 2) + parseInt($(".gd-pages").css("paddingTop")); - } else { + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { zoom = $(".gd-wrapper").css("zoom"); x = x + (parseInt($(".gd-wrapper").css("padding-left")) * 2); y = y + (parseInt($(".gd-wrapper").css("padding-top")) * 2); @@ -859,7 +846,7 @@ function getHtmlCompareSection(prefix) { '
    ' + '
    ' + - '' + + '' + '
    ' + '
    Drop your document here or click to select a file
    ' + '
    ' + From a0c30137c10f64bb9f43c1a8f4748eedcd0571fd Mon Sep 17 00:00:00 2001 From: pavelteplitsky Date: Fri, 12 Jul 2019 14:16:57 +0300 Subject: [PATCH 26/26] Improved positioning for FireFox --- packages/comparison/js/comparison.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/comparison/js/comparison.js b/packages/comparison/js/comparison.js index 6816122..59a0c54 100644 --- a/packages/comparison/js/comparison.js +++ b/packages/comparison/js/comparison.js @@ -699,13 +699,15 @@ function getHightlightHtml(change, guid) { var x = change.box.x; var y = change.box.y; var zoom = 1; - if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { + if (navigator.userAgent.toLowerCase().indexOf('firefox') == -1) { zoom = $(".gd-wrapper").css("zoom"); - x = x + (parseInt($(".gd-wrapper").css("padding-left")) * 2); - y = y + (parseInt($(".gd-wrapper").css("padding-top")) * 2); + x = x / zoom * 0.81 + (parseInt($(".gd-wrapper").css("paddingLeft")) * 2); + y = y / zoom * 0.81 + (parseInt($(".gd-wrapper").css("paddingTop")) * 2); + } else { + x = x * 0.81 + (parseInt($(".gd-wrapper").css("paddingLeft")) * 2); + y = y * 0.81 + (parseInt($(".gd-wrapper").css("paddingTop")) * 2); } - x = x / zoom * 0.81; - y = y / zoom * 0.81; + var style = 'style="width: ' + change.box.width + 'px; height: ' + change.box.height + 'px; left: ' + x + 'px; top: ' + y + 'px"'; return '
    '; }