Skip to content

Commit

Permalink
Add a link to the remote asset in asset viewer
Browse files Browse the repository at this point in the history 
The link will be present if and only if the content
of the currently viewed asset has been fetched from
a remote location.
  • Loading branch information
@gorhill
gorhill committed May 23, 2019
1 parent ab65d44 commit eef76c4
Show file tree
Hide file tree
Showing 10 changed files with 100 additions and 49 deletions.
2 changes: 2 additions & 0 deletions src/1p-filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/dashboard-common.css">
<link rel="stylesheet" href="css/cloud-ui.css">
<link rel="stylesheet" href="css/1p-filters.css">
Expand Down Expand Up @@ -44,6 +45,7 @@
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/ubo-static-filtering.js"></script>

<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
Expand Down
2 changes: 2 additions & 0 deletions src/asset-viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/codemirror.css">
<link rel="shortcut icon" type="image/png" href="img/icon_32.png"/>
<style>
Expand Down Expand Up @@ -40,6 +41,7 @@
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/ubo-static-filtering.js"></script>

<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>
Expand Down
17 changes: 15 additions & 2 deletions src/css/codemirror.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
direction: ltr;
display: flex;
flex-shrink: 0;
font-size: 110%;
justify-content: center;
padding: 4px 8px;
/* position: absolute; */
Expand All @@ -41,10 +42,13 @@
-webkit-user-select: none;
z-index: 1000;
}
.cm-search-widget .fa {
color: #888;
.cm-search-widget .fa-icon {
fill: #888;
font-size: 140%;
}
.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
fill: #000;
}
.cm-search-widget-input {
border: 1px solid gray;
border-radius: 3px;
Expand All @@ -70,6 +74,15 @@
.cm-search-widget .cm-search-widget-button:hover {
color: #000;
}
.cm-search-widget .sourceURL {
padding-left: 0.5em;
padding-right: 0.5em;
position: absolute;
left: 0;
}
.cm-search-widget .sourceURL[href=""] {
display: none;
}

.CodeMirror-merge-l-deleted {
background-image: none;
Expand Down
13 changes: 8 additions & 5 deletions src/css/fa-icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@
position: absolute;
visibility: visible;
}
.fa-icon.fa-icon-vflipped {
transform: scale(1, -1);
}

.fa-icon > svg {
height: 1em;
Expand All @@ -52,13 +55,15 @@
width: calc(1em * 1794 / 1792);
}
.fa-icon > .fa-icon_clipboard,
.fa-icon > .fa-icon_external-link,
.fa-icon > .fa-icon_eye-dropper,
.fa-icon > .fa-icon_eye-slash,
.fa-icon > .fa-icon_files-o,
.fa-icon > .fa-icon_list-alt {
width: calc(1em * 1792 / 1792);
}
.fa-icon > .fa-icon_font {
.fa-icon > .fa-icon_font,
.fa-icon > .fa-icon_search {
width: calc(1em * 1664 / 1792);
}
.fa-icon > .fa-icon_home {
Expand All @@ -80,13 +85,11 @@
.fa-icon > .fa-icon_times {
width: calc(1em * 1188 / 1792);
}
.fa-icon > .fa-icon_angle-up,
.fa-icon > .fa-icon_double-angle-up,
.fa-icon > .fa-icon_lock {
width: calc(1em * 1152 / 1792);
}
.fa-icon > .fa-icon_angle-up,
.fa-icon > .fa-icon_double-angle-up {
width: calc(1em * 998 / 1792);
}
.fa-icon > .fa-icon_double-angle-left {
width: calc(1em * 966 / 1792);
}
Expand Down
2 changes: 2 additions & 0 deletions src/img/fontawesome/fontawesome-defs.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 10 additions & 6 deletions src/js/asset-viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,28 @@

/******************************************************************************/

(function() {

let params = new URL(document.location).searchParams;
let assetKey = params.get('url');
(( ) => {
const params = new URL(document.location).searchParams;
const assetKey = params.get('url');
if ( assetKey === null ) { return; }

vAPI.messaging.send(
'default',
{
what : 'getAssetContent',
url: assetKey
url: assetKey,
},
details => {
cmEditor.setValue(details && details.content || '');
if ( details.sourceURL ) {
const a = document.querySelector('.cm-search-widget .sourceURL');
a.setAttribute('href', details.sourceURL);
a.setAttribute('title', details.sourceURL);
}
}
);

let cmEditor = new CodeMirror(
const cmEditor = new CodeMirror(
document.getElementById('content'),
{
autofocus: true,
Expand Down
45 changes: 28 additions & 17 deletions src/js/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -712,18 +712,30 @@ api.get = function(assetKey, options, callback) {
contentURLs,
contentURL;

const reportBack = function(content, err) {
const details = { assetKey: assetKey, content: content };
const reportBack = (content, err) => {
const details = { assetKey, content };
if ( err ) {
details.error = assetDetails.lastError = err;
} else {
assetDetails.lastError = undefined;
}
if ( options.needSourceURL ) {
if (
contentURL === undefined &&
assetCacheRegistry instanceof Object &&
assetCacheRegistry[assetKey] instanceof Object
) {
details.sourceURL = assetCacheRegistry[assetKey].remoteURL;
}
if ( reIsExternalPath.test(contentURL) ) {
details.sourceURL = contentURL;
}
}
callback(details);
resolve(details);
};

const onContentNotLoaded = function() {
const onContentNotLoaded = ( ) => {
let isExternal;
while ( (contentURL = contentURLs.shift()) ) {
isExternal = reIsExternalPath.test(contentURL);
Expand All @@ -741,7 +753,7 @@ api.get = function(assetKey, options, callback) {
}
};

const onContentLoaded = function(details) {
const onContentLoaded = details => {
if ( stringIsNotEmpty(details.content) === false ) {
onContentNotLoaded();
return;
Expand All @@ -755,7 +767,7 @@ api.get = function(assetKey, options, callback) {
reportBack(details.content);
};

const onCachedContentLoaded = function(details) {
const onCachedContentLoaded = details => {
if ( details.content !== '' ) {
return reportBack(details.content);
}
Expand Down Expand Up @@ -865,36 +877,35 @@ api.put = function(assetKey, content, callback) {
/******************************************************************************/

api.metadata = function(callback) {
var assetRegistryReady = false,
let assetRegistryReady = false,
cacheRegistryReady = false;

var onReady = function() {
var assetDict = JSON.parse(JSON.stringify(assetSourceRegistry)),
cacheDict = assetCacheRegistry,
assetEntry, cacheEntry,
now = Date.now(), obsoleteAfter;
for ( var assetKey in assetDict ) {
assetEntry = assetDict[assetKey];
cacheEntry = cacheDict[assetKey];
const onReady = function() {
const assetDict = JSON.parse(JSON.stringify(assetSourceRegistry));
const cacheDict = assetCacheRegistry;
const now = Date.now();
for ( const assetKey in assetDict ) {
const assetEntry = assetDict[assetKey];
const cacheEntry = cacheDict[assetKey];
if ( cacheEntry ) {
assetEntry.cached = true;
assetEntry.writeTime = cacheEntry.writeTime;
obsoleteAfter = cacheEntry.writeTime + assetEntry.updateAfter * 86400000;
const obsoleteAfter =
cacheEntry.writeTime + assetEntry.updateAfter * 86400000;
assetEntry.obsolete = obsoleteAfter < now;
assetEntry.remoteURL = cacheEntry.remoteURL;
} else if (
assetEntry.contentURL &&
assetEntry.contentURL.length !== 0
) {
assetEntry.writeTime = 0;
obsoleteAfter = 0;
assetEntry.obsolete = true;
}
}
callback(assetDict);
};

getAssetSourceRegistry(function() {
getAssetSourceRegistry(( ) => {
assetRegistryReady = true;
if ( cacheRegistryReady ) { onReady(); }
});
Expand Down
44 changes: 26 additions & 18 deletions src/js/codemirror/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,19 +51,6 @@
};
}

var searchWidgetHtml =
'<div class="cm-search-widget">' +
'<span class="fa">&#xf002;</span>&ensp;' +
'<span class="cm-search-widget-input">' +
'<input type="text">' +
'<span class="cm-search-widget-count">' +
'<span><!-- future use --></span><span>0</span>' +
'</span>' +
'</span>&ensp;' +
'<span class="cm-search-widget-up cm-search-widget-button fa">&#xf077;</span>&ensp;' +
'<span class="cm-search-widget-down cm-search-widget-button fa">&#xf078;</span>&ensp;' +
'</div>';

function searchWidgetKeydownHandler(cm, ev) {
var keyName = CodeMirror.keyName(ev);
if ( !keyName ) { return; }
Expand Down Expand Up @@ -125,10 +112,9 @@
this.query = null;
this.overlay = null;
this.panel = null;
this.widget = null;
var domParser = new DOMParser();
var doc = domParser.parseFromString(searchWidgetHtml, 'text/html');
this.widget = document.adoptNode(doc.body.firstElementChild);
const widgetParent =
document.querySelector('.cm-search-widget-template').cloneNode(true);
this.widget = widgetParent.children[0];
this.widget.addEventListener('keydown', searchWidgetKeydownHandler.bind(null, cm));
this.widget.addEventListener('input', searchWidgetInputHandler.bind(null, cm));
this.widget.addEventListener('mousedown', searchWidgetClickHandler.bind(null, cm));
Expand All @@ -142,7 +128,7 @@
// We want the search widget to behave as if the focus was on the
// CodeMirror editor.

var reSearchCommands = /^(?:find|findNext|findPrev|newlineAndIndent)$/;
const reSearchCommands = /^(?:find|findNext|findPrev|newlineAndIndent)$/;

function widgetCommandHandler(cm, command) {
if ( reSearchCommands.test(command) === false ) { return false; }
Expand Down Expand Up @@ -314,6 +300,28 @@
if ( state.query ) { return findNext(cm, -1); }
}

{
const searchWidgetTemplate =
'<div class="cm-search-widget-template" style="display:none;">' +
'<div class="cm-search-widget">' +
'<span class="fa-icon fa-icon-ro">search</span>&ensp;' +
'<span class="cm-search-widget-input">' +
'<input type="text">' +
'<span class="cm-search-widget-count">' +
'<span><!-- future use --></span><span>0</span>' +
'</span>' +
'</span>&ensp;' +
'<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&ensp;' +
'<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;' +
'<a class="fa-icon sourceURL" href>external-link</a>' +
'</div>' +
'</div>';
const domParser = new DOMParser();
const doc = domParser.parseFromString(searchWidgetTemplate, 'text/html');
const widgetTemplate = document.adoptNode(doc.body.firstElementChild);
document.body.appendChild(widgetTemplate);
}

CodeMirror.commands.find = findCommand;
CodeMirror.commands.findNext = findNextCommand;
CodeMirror.commands.findPrev = findPrevCommand;
Expand Down
Loading

0 comments on commit eef76c4

Please sign in to comment.