From c6caae649d1ed4ee51289b702ea9135469a37f3c Mon Sep 17 00:00:00 2001 From: manishsaraan Date: Tue, 31 Jul 2018 23:02:22 +0530 Subject: [PATCH 1/3] WIP: show image thumbnail --- src/inject.js | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/inject.js b/src/inject.js index a1f448d2..9d183bf1 100755 --- a/src/inject.js +++ b/src/inject.js @@ -94,6 +94,25 @@ var utils = { [].forEach.call(document.querySelectorAll(selector), function (el) { el.parentNode.removeChild(el); }); + }, + getFileExtension: function(filename){ + var filenameArray = filename.split("."); + if( filenameArray.length === 1 || ( filenameArray[0] === "" && filenameArray.length === 2 ) ) { + return false; + } + + return filenameArray.pop(); + }, + isImage: function(extension){ + return ['png', 'jpg', 'jpeg', 'svg'].indexOf(extension) !== -1 ? true : false; + }, + totalImagesInDirectory: function(files){ + var totalImageFiles = files.filter(function(file){ + var extension = utils.getFileExtension(file.name); + return extension && utils.isImage(extension); + }); + + return totalImageFiles.length; } }; @@ -258,12 +277,15 @@ var domUtils = { addFileSizeAndDownloadLink: function () { var links = document.querySelectorAll('tr.js-navigation-item > td.content a'); var elems = document.querySelectorAll('tr.js-navigation-item > td.age'); + var fileElements = document.querySelectorAll('tr.js-navigation-item > td.icon'); var uptree = document.querySelectorAll('tr.up-tree > td'); var isAnyFilePresent = false; if (elems.length && elems.length === links.length) { // verify length for showing in-sync apiUtils.getRepoContent(function (data) { data = utils.sortFileStructureAsOnSite(data); + var totalImagesInDirectory = utils.totalImagesInDirectory(data); + if (!data) { return; } @@ -279,11 +301,10 @@ var domUtils = { if (!isAnyFilePresent) { return; } - + if (uptree && uptree[3]) { uptree[3].insertAdjacentHTML('afterend', ''); } - for (var i = 0; i < elems.length; i++) { if (data[i].type === 'file') { var formattedFileSize = utils.getFileSizeAndUnit(data[i]); @@ -298,6 +319,11 @@ var domUtils = { '' + '' ''; + + if(totalImagesInDirectory <= 100){ + var image = ''; + fileElements[i].innerHTML= image; + } elems[i].insertAdjacentHTML('afterend', html); } else { elems[i].insertAdjacentHTML('afterend', ''); From 121aa79a9461179c51b33fd258319c0c8e239d39 Mon Sep 17 00:00:00 2001 From: manishsaraan Date: Wed, 1 Aug 2018 15:50:14 +0530 Subject: [PATCH 2/3] Show image thumbnail functionality implemented --- src/inject.js | 49 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/src/inject.js b/src/inject.js index 9d183bf1..cfa2abe9 100755 --- a/src/inject.js +++ b/src/inject.js @@ -10,6 +10,7 @@ ***********************/ var GITHUB_API_REPOS_BASE_URI = 'https://api.github.com/repos/'; +var SHOW_MAX_IMAGES = 100; var storedGithubToken, defaultBranch, repoSize; var utils = { @@ -97,22 +98,42 @@ var utils = { }, getFileExtension: function(filename){ var filenameArray = filename.split("."); + + // check also for files without any extensions if( filenameArray.length === 1 || ( filenameArray[0] === "" && filenameArray.length === 2 ) ) { return false; } - return filenameArray.pop(); + return filenameArray.pop().toLowerCase(); }, - isImage: function(extension){ - return ['png', 'jpg', 'jpeg', 'svg'].indexOf(extension) !== -1 ? true : false; + isImage: function(file){ + var extension = utils.getFileExtension(file.name); + var isImageExtension = ['png', 'jpg', 'jpeg', 'gif'].indexOf(extension) !== -1 ? true : false; + + return extension && isImageExtension; }, totalImagesInDirectory: function(files){ - var totalImageFiles = files.filter(function(file){ - var extension = utils.getFileExtension(file.name); - return extension && utils.isImage(extension); - }); + if(files){ + var totalImageFiles = files.filter(function(file){ + return utils.isImage(file); + }); - return totalImageFiles.length; + return totalImageFiles.length; + } + + return 0; + }, + buildImageContainer: function(src){ + var img = document.createElement('img'); + var anchor = document.createElement('a'); + anchor.href = src; + anchor.target ="_blank"; + img.src = src; + img.height=25; + img.width=25; + anchor.appendChild(img); + + return anchor; } }; @@ -277,7 +298,7 @@ var domUtils = { addFileSizeAndDownloadLink: function () { var links = document.querySelectorAll('tr.js-navigation-item > td.content a'); var elems = document.querySelectorAll('tr.js-navigation-item > td.age'); - var fileElements = document.querySelectorAll('tr.js-navigation-item > td.icon'); + var fileIconContainer = document.querySelectorAll('tr.js-navigation-item > td.icon'); var uptree = document.querySelectorAll('tr.up-tree > td'); var isAnyFilePresent = false; @@ -319,11 +340,13 @@ var domUtils = { '' + '' ''; - - if(totalImagesInDirectory <= 100){ - var image = ''; - fileElements[i].innerHTML= image; + + // if there are more than 100 images in directory then dont show images + if(totalImagesInDirectory <= SHOW_MAX_IMAGES && utils.isImage(data[i])){ + var domChild = fileIconContainer[i].querySelector('.octicon'); + domChild.parentNode.replaceChild(utils.buildImageContainer(data[i].download_url), domChild); } + elems[i].insertAdjacentHTML('afterend', html); } else { elems[i].insertAdjacentHTML('afterend', ''); From 15a916897aa38a56f0a8030b8b1daca92907a6e2 Mon Sep 17 00:00:00 2001 From: manishsaraan Date: Wed, 1 Aug 2018 15:52:57 +0530 Subject: [PATCH 3/3] Npm scripts added and readme updated --- README.md | 11 ++++++----- package.json | 4 +++- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 36774c8f..98685904 100644 --- a/README.md +++ b/README.md @@ -69,11 +69,12 @@ This Chrome extension will automatically pick this valid access token and Bingo! ## Development 1. Clone this repo -2. Run `gulp` for generating packaged folder specifically for extension stuff. -2. Go to chrome extensions [chrome://extensions](chrome://extensions) -3. Enable developer mode -5. Click on load unpacked extension and select the generated folder. -6. [Admin Access Only] - run `gulp zip` for generating zip file to be uploaded on *Chrome Web Store*. +2. Run `npm run build or yarn build` for generating packaged folder specifically for extension stuff. +3. Run `npm run dev or yarn dev` for development. +4. Go to chrome extensions [chrome://extensions](chrome://extensions) +5. Enable developer mode +6. Click on load unpacked extension and select the generated folder. +7. [Admin Access Only] - run `npm run publish or yarn publish` for generating zip file to be uploaded on *Chrome Web Store*. PRs are most welcome :) diff --git a/package.json b/package.json index 0ef49965..878e4a47 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "Github Add-ons - Download File, display size of each file and Copy file contents", "main": "src/inject.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build": "gulp", + "dev": "gulp watch", + "publish": "gulp zip" }, "repository": { "type": "git",