JS скрипт для файлового хранилища Getcourse
Что делает скрипт
1. В боковой панели в подменю добавляет к ссылке на файловое хранилище параметры, при которых страница файлового хранилища будет открываться с сортировкой файлов от новым к старым (новые файлы сверху).
2. Добавляет кнопки быстрого переключения "Сначала новые файлы" "Сначала старые файлы"
3. Добавляет превью файлов(в основных популярных форматах):
4. Для некоторых документов с популярным форматом (docx, xlsx, pdf) добавляет иконки
5. Добавляет кнопку копирования ссылки на файл (ссылка берется из страницы файла в поле где рекомендуемая для размещения ссылка)
6. Добавляет иконку при загрузке файла в хранилище. При клике на иконку происходит копирование ссылки на файл
JS-код
/**
* Script Name: JS-скрипт для файлового хранилища Getcourse
* Version: 1.0
* Author: Максим Калмыков
* Url: https://t.me/getcomponent
*/
$(function () {
if (!window.userInfo.isAdmin) return;
(function () {
if (!window.gcAccountUserMenu) return;
const profile = window.gcAccountUserMenu.items.find(menuItem => menuItem.id === 'profile');
if (!profile) return;
const fileService = profile.subitems.find(profileItem => profileItem.id === 'fileserviceAccountStat');
if (fileService) fileService.url += '?sort=-created_at';
})();
if (location.pathname.indexOf("/fileservice/control/account/storage") === -1) return;
$('.standard-page-content > .btn-group').prepend("<p><strong>Показать сначала:</strong></p><a href='/fileservice/control/account/storage?sort=-created_at' class='btn btn-default sort_new'>Новые файлы</a><a href='/fileservice/control/account/storage' class='btn btn-default sort_old'>Старые файлы</a>");
const archiveImage = "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/469/h/389a4619093e40c4ae3576d7b6340425.png";
const docsInfo = {
pdf: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/206/h/d8f3c98573c09bc7e43750dc7ad51d54.png",
exts: ['pdf']
},
sheet: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/163/h/39f56b599f06e954a521c515bf3df8c3.png",
exts: ['xlsx', 'csv']
},
doc: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/245/h/a58bcff963c7d8ad326014b6328bfb64.png",
exts: ['docx', 'doc']
},
js: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/111/h/d1093f7c9ea35d210357795a495e28ee.png",
exts: ['js']
},
css: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/556025/sc/294/h/7d9010eb630eeaf84fd3c88aaa92791e.png",
exts: ['css']
},
eml: {
icon: "https://fs.getcourse.ru/fileservice/file/download/a/602055/sc/204/h/7d037cda84be880d8964cac137f3c663.png",
exts: ['eml']
}
};
$('#files .gc-file-link').each((_, row) => {
const $fileShowContainer = $(row).find('td[data-col-seq="2"]'),
fileNameStr = $fileShowContainer.text().trim(),
fileShowItemLink = $fileShowContainer.find('a').attr('href'),
fileTypeText = $(row).find('td[data-col-seq="3"]').text(),
pageFileLink = $(row).find('td[data-col-seq="1"] > a').attr('href');
if (fileTypeText == 'изображение' || fileTypeText == 'image' || fileTypeText == 'fotografías') {
$fileShowContainer.append(`<div><img height="200" src="${fileShowItemLink}"></div>`);
} else if (fileTypeText == 'видео' || fileTypeText == 'video' || fileTypeText == 'vídeos') {
$fileShowContainer.append(`
<div>
<video width="100%" controls="controls" src="${fileShowItemLink}"></video>
</div>`);
} else if (fileTypeText == 'аудио' || fileTypeText == 'audio' || fileTypeText == 'audios') {
$fileShowContainer.append(`
<div>
<audio src="${fileShowItemLink}" controls="controls"></audio>
</div>`);
} else if (fileTypeText == 'архив' || fileTypeText == 'archive' || fileTypeText == 'archivos') {
insertBadge($fileShowContainer, archiveImage);
} else if (fileTypeText == 'документ' || fileTypeText == 'document' || fileTypeText == 'documentos') {
insertBadge($fileShowContainer, getDocIcon(fileNameStr, docsInfo));
}
getFileLink(pageFileLink, $fileShowContainer);
});
function insertBadge($container, badge) {
if (!badge) return;
$container.prepend(`
<div style="display: inline-block; width: 40px; height: 40px; margin: 0 10px 5px 0;">
<img src="${badge}" width="100%">
</div>`);
}
function getDocIcon(fileName, docsInfo) {
const extension = fileName.match(/\.([^.]+)$|$/)[1];
if (!extension) return false;
for (key in docsInfo) {
if (docsInfo[key]['exts'].includes(extension)) {
return docsInfo[key]['icon'];
}
}
return false;
}
function getFileLink(fileToLink, $container) {
$.get(fileToLink, function (data) {
const htmlPage = $('<div></div>').html(data);
$container.append(htmlPage.find('.col-md-10 > input[type="text"]').css({ "display": "block", "height": 0, "padding": 0, "opacity": 0, "border": 0 }));
$container.append("<button class='btn btn-success btn_copy' style='display:block; margin-top:5px;'><i class='fa fa-copy'></i> Копировать ссылку</button>");
$container.on('click', (e) => {
if (e.target && ($(e.target).hasClass('btn_copy') || $(e.target).hasClass('form-control'))) {
$(e.target).parent().find('input')[0].select();
document.execCommand('copy');
$(e.target).parent().find('.btn_copy').html('<i class="fa fa-check-square" aria-hidden="true"></i> Скопированна').addClass('btn-info');
}
});
});
}
$('.uploadify-container').data('uploadifive').settings.onUploadComplete = function (e, fileHashNameStr) {
const $item = e.queueItem;
const link = `/fileservice/control/account/file-by-hash?hash=${fileHashNameStr}&from=storage`;
$item.find('.fileinfo').html(` <a target="_blank" href="${link}">${fileHashNameStr}</a> `);
$.get(link, (data) => {
const pageHtml = $('<div></div>').html(data),
fileLinkStr = pageHtml.find('input.form-control[type="text"]').val(),
inputEl = document.createElement('input'),
spanEl = document.createElement('span');
$item.find('span.filename').before(spanEl);
$item.find('span.filename').after(inputEl);
$(inputEl).attr('type', 'text').val(fileLinkStr).css({ "display": "block", "height": 0, "padding": 0, "opacity": 0, "border": 0 });
$(spanEl).html('<i class="fa fa-copy"></i> ')
.css({ "cursor": "pointer", "font-size": "20px" }).on('click', function () {
inputEl.select();
document.execCommand('copy');
$(spanEl).css('color', "#45dc4b");
});
});
}
});Как вставить код на геткурс
Способ 1. Через подключение темы в настройках аккаунта
При таком способе скрипт будет выполняться для всех админов в аккаунте
Подключить в настройки аккаунта в скрипты для BODY
<!-- Скрипт для файлового хранилища --> <script src="ССЫЛКА_НА_ТЕМУ"></script>
Способ 2 Подключить файл js из хранилища
Подключить в настройки аккаунта в скрипты для BODY
<!-- Скрипт для файлового хранилища v1.0 --> <script src="https://fs.getcourse.ru/fileservice/file/download/a/608456/sc/251/h/9690e8beee22036e4f2a9eaf95dc7122.js"></script>
Файл закружен в хранилище геткурса, также можно загрузить js файл в свое хранилище на аккаунте и вставить ссылку в атрибут src
https://drive.google.com/file/d/1mRQr8aczrmGEZ_1X8sJSTSjY1U57-m7k/view?usp=share_link
Способ 3. Подключить скрипт локально в своем браузере
При подключении скрипта локально скрипт будет выполняться только у вас в браузере
Например, можно использовать расширение для хрома User JavaScript and CSS
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
Добавляем скрипт в расширение в поле JS
Обновляем страницу и смотрим результат
Телеграм-канал: https://t.me/getcomponent
Youtube: https://www.youtube.com/channel/UCAVwlN_NSAEFR4mJRpzyvCg