- Minimap code commented

- Code cleaning
This commit is contained in:
Porras-Bernardez 2024-09-12 16:31:24 +02:00
parent 013d12e7b3
commit fef92c392d
4 changed files with 54 additions and 763 deletions

View File

@ -1,5 +1,4 @@
import { Component, Vue, Watch } from "vue-facing-decorator"; import { Component, Vue, Watch } from "vue-facing-decorator";
// import { RouteLocation } from "vue-router";
import HomeViewComponent from "./views/home-view/home-view-component.vue"; import HomeViewComponent from "./views/home-view/home-view-component.vue";
import HelpViewComponent from "./views/help-view/help-view-component.vue"; import HelpViewComponent from "./views/help-view/help-view-component.vue";
import MapViewComponent from "./views/map-view/map-view.component.vue"; import MapViewComponent from "./views/map-view/map-view.component.vue";
@ -11,27 +10,10 @@ import ContactViewComponent from "./views/contact-view/contact-view-component.vu
import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue"; import SitelinkViewComponent from "./views/sitelink-view/sitelink-view-component.vue";
import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue"; import ImprintViewComponent from "./views/imprint-view/imprint-view-component.vue";
import TermsViewComponent from "./views/terms-view/terms-view-component"; import TermsViewComponent from "./views/terms-view/terms-view-component";
// import { VUE_API } from "./constants";
// import VsInput from "./components/vs-input/vs-input.vue";
// import VsResult from "./components/vs-result/vs-result.vue";
// import FacetCategory from "./components/face-category/facet-category.vue";
// import ActiveFacetCategory from "./components/active-facet-category/active-facet-category.vue";
// import { SolrSettings } from "@/models/solr";
// import { DatasetService } from "./services/dataset.service";
// import { Suggestion } from "./models/dataset";
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
// import { ActiveFilterCategories } from "@/models/solr";
// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
@Component({ @Component({
components: { components: {
// HelloWorld,
HomeViewComponent, HomeViewComponent,
// VsInput,
// VsResult,
// FacetCategory,
// ActiveFacetCategory,
HelpViewComponent, HelpViewComponent,
MapViewComponent, MapViewComponent,
SearchViewComponent, SearchViewComponent,
@ -48,38 +30,40 @@ export default class App extends Vue {
public active = false; public active = false;
public portal = "https://data.tethys.at/login"; // VUE_API + "/login"; public portal = "https://data.tethys.at/login"; // VUE_API + "/login";
/**
* Computed property that returns the current year.
* @returns {number} The current year as a number.
*/
get currentYear() { get currentYear() {
return new Date().getFullYear(); return new Date().getFullYear();
} }
/**
* Lifecycle hook called when the component is mounted.
* Currently empty, but can be used to add setup logic when the component is mounted.
*/
mounted(): void { mounted(): void {
// const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
// // Check if there are any navbar burgers
// if ($navbarBurgers.length > 0) {
// // Add a click event on each of them
// $navbarBurgers.forEach((elNavBurger) => {
// elNavBurger.addEventListener("click", () => {
// // Get the target from the "data-target" attribute
// const targetNavbar = elNavBurger.dataset.target;
// const $target = document.getElementById(targetNavbar);
// // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
// elNavBurger.classList.toggle("is-active");
// $target?.classList.toggle("is-active");
// });
// });
// }
} }
/**
* Toggles the visibility of the mobile menu.
* @param {MouseEvent} event - The mouse event triggered by the user's interaction.
*/
public showMobilemenu(event: MouseEvent): void { public showMobilemenu(event: MouseEvent): void {
// Don't follow the link // Prevent the default behavior of the event (e.g., following a link)
event.preventDefault(); event.preventDefault();
// Toggle the active state of the mobile menu
this.active = !this.active; this.active = !this.active;
} }
/**
* Watcher that triggers when the route changes.
* It deactivates the mobile menu by setting `active` to false.
*/
@Watch("$route") @Watch("$route")
protected oRouteChangedChanged(): void { protected oRouteChangedChanged(): void {
//(to: RouteLocation, from: RouteLocation): void { // Close the mobile menu when the route changes
// console.log("setting " + from.path + " to " + to.path);
this.active = false; this.active = false;
} }
} }

View File

@ -11,36 +11,46 @@ export default class Minimap extends Vue {
// private originalCenter: L.LatLngExpression = [47.71, 13.55]; // Original center // private originalCenter: L.LatLngExpression = [47.71, 13.55]; // Original center
// private originalZoom: number = 6; // Original zoom level // private originalZoom: number = 6; // Original zoom level
/**
* Lifecycle hook called when the component is mounted.
* Initializes the Leaflet map, sets up base layers, and adds either a circle or rectangle
* based on the `bounds` prop passed to the component.
*/
mounted() { mounted() {
// Initialize the map with specific center and zoom
const map = L.map('map', { const map = L.map('map', {
center: [47.71, 13.55], center: [47.71, 13.55], // Initial center coordinates
zoomControl: true, zoomControl: true, // Enable zoom controls
zoom: 6, zoom: 6, // Initial zoom level
minZoom: 5, minZoom: 5, // Minimum zoom level allowed
maxBounds: [ maxBounds: [
[44.0, 9.0], // Southwest corner of the bounds [44.0, 9.0], // Southwest corner of the bounding box
[51.0, 18.0] // Northeast corner of the bounds [51.0, 18.0] // Northeast corner of the bounding box
], ],
maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds maxBoundsViscosity: 1.0 // Prevent map from being dragged outside the defined bounds
}); });
// Remove Leaflet logo and text // Remove Leaflet logo and text
map.attributionControl.setPrefix(false); map.attributionControl.setPrefix(false);
// Add basemap.at tile layer to the map
const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', { const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
attribution: '<a href="https://www.basemap.at">basemap.at</a>', attribution: '<a href="https://www.basemap.at">basemap.at</a>',
noWrap: true, noWrap: true,
subdomains: ['', '1', '2', '3', '4'] subdomains: ['', '1', '2', '3', '4']
}).addTo(map); }).addTo(map);
// Add Esri imagery tile layer
const esriImageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { const esriImageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>' attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>'
}); });
// Add Esri topo map tile layer
const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>' attribution: 'Tiles &copy; <a href="https://www.esri.com/" target="_blank">Esri</a>'
}); });
// Define available base maps for the user to toggle between
const baseMaps = { const baseMaps = {
// "OpenStreetMap": openStreetMapLayer, // "OpenStreetMap": openStreetMapLayer,
"basemap.at": basemapAtLayer, "basemap.at": basemapAtLayer,
@ -48,6 +58,7 @@ export default class Minimap extends Vue {
"ESRI Topo": esriTopoLayer "ESRI Topo": esriTopoLayer
}; };
// Define available base maps for the user to toggle between
L.control.layers(baseMaps).addTo(map); L.control.layers(baseMaps).addTo(map);
const [southWest, northEast] = this.bounds; const [southWest, northEast] = this.bounds;
@ -55,45 +66,45 @@ export default class Minimap extends Vue {
if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) { if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) {
// If y_min and y_max (and x_min and x_max) are equal, generate a circle // If y_min and y_max (and x_min and x_max) are equal, generate a circle
const center = [southWest[0], southWest[1]] as [number, number]; const center = [southWest[0], southWest[1]] as [number, number];
// Using CircleMarker to maintain constant size regardless of zoom level // Add a CircleMarker to the map at the center of the bounds. This kind of marker is used to maintain constant size regardless of zoom level
const circleMarker = L.circleMarker(center, { const circleMarker = L.circleMarker(center, {
color: '#30D5C8', // Outline color color: '#30D5C8', // Outline color
fillColor: '#336699', // Fill color fillColor: '#336699', // Fill color
fillOpacity: 1, // Opacity of the fill fillOpacity: 1, // Opacity of the fill
opacity: 0.5, // Outline opacity opacity: 0.5, // Outline opacity
weight: 10, // Outline weight weight: 10, // Outline weight (thickness)
radius: 10 // Radius in pixels radius: 10 // Radius in pixels
}).addTo(map); }).addTo(map);
// Manually create a small bounding box around the marker's center to fit bounds // Manually create a small bounding box around the marker's center to fit bounds
const buffer = 0.01; // Adjust this value to control the area around the marker const buffer = 0.01; // Buffer size around the marker. Adjust this value to control the area around the marker
const markerBounds = L.latLngBounds( const markerBounds = L.latLngBounds(
[center[0] - buffer, center[1] - buffer], // Southwest corner [center[0] - buffer, center[1] - buffer], // Southwest corner of the bounding box
[center[0] + buffer, center[1] + buffer] // Northeast corner [center[0] + buffer, center[1] + buffer] // Northeast corner of the bounding box
); );
// Add a click event handler to the CircleMarker
// Add a click event to the CircleMarker
circleMarker.on('click', () => { circleMarker.on('click', () => {
map.fitBounds(markerBounds, { padding: [10, 10] }); map.fitBounds(markerBounds, { padding: [10, 10] }); // Adjust map to fit within marker bounds
}); });
// Automatically adjust the map's view to fit the marker's bounds
map.fitBounds(markerBounds, { padding: [10, 10] }); map.fitBounds(markerBounds, { padding: [10, 10] });
} else { } else {
// Otherwise, generate a rectangle // If bounds are not equal, draw a rectangle
const rectangle = L.rectangle(this.bounds, { const rectangle = L.rectangle(this.bounds, {
color: '#30D5C8', color: '#30D5C8', // Rectangle outline color //Alternative color: 336699
weight: 2, weight: 2, // Outline thickness
opacity: 1 opacity: 1 // Opacity of the rectangle outline
}).addTo(map); //336699 }).addTo(map);
// Add a click event to the Rectangle // Add a click event handler to the Rectangle
rectangle.on('click', () => { rectangle.on('click', () => {
map.fitBounds(this.bounds, { padding: [18, 18] }); map.fitBounds(this.bounds, { padding: [18, 18] }); // Adjust map to fit within rectangle bounds
}); });
// Fit the map's view to the rectangle's bounds with padding // Automatically adjust the map's view to fit the rectangle's bounds with padding
map.fitBounds(this.bounds, { padding: [18, 18] }); map.fitBounds(this.bounds, { padding: [18, 18] });
} }
} }

View File

@ -1,19 +1,13 @@
// declare const POINT_URL: string;
// declare const EDGE_URL: string;
declare const APP_URL: string; declare const APP_URL: string;
declare const VUE_API: string; declare const VUE_API: string;
declare const SOLR_HOST: string; declare const SOLR_HOST: string;
declare const SOLR_CORE: string; declare const SOLR_CORE: string;
// const _EDGE_URL = EDGE_URL;
// const _POINT_URL = POINT_URL;
const _APP_URL = APP_URL; const _APP_URL = APP_URL;
const _VUE_API = VUE_API; const _VUE_API = VUE_API;
const _SOLR_HOST = SOLR_HOST; const _SOLR_HOST = SOLR_HOST;
const _SOLR_CORE = SOLR_CORE; const _SOLR_CORE = SOLR_CORE;
// export { _EDGE_URL as EDGE_URL };
// export { _POINT_URL as POINT_URL };
export { _APP_URL as APP_URL }; export { _APP_URL as APP_URL };
export { _VUE_API as VUE_API }; export { _VUE_API as VUE_API };
export { _SOLR_HOST as SOLR_HOST }; export { _SOLR_HOST as SOLR_HOST };

View File

@ -1,698 +0,0 @@
<div class="columns">
<div class="column is-9 results_column" style="padding-top: 1.2rem; padding-right: 0.5rem">
<div class="column" id="loading_bar" style="padding-top: 0px; display: none">
<div class="column" style="padding-top: 0; padding-bottom: 0; margin-bottom: 0"></div>
<div class="card" style="margin-bottom: 0px">
<div class="card-content">
<div class="content">
<noscript>It appears that your Javascript is disabled. To view results on
this page, you will need to enable it. You might want to visit our
<a href="/lite/results">lite results</a>.
</noscript>
<progress class="progress is-large" max="100">60%</progress>
</div>
</div>
</div>
</div>
<div id="results">
<div class="column" style="padding-top: 0">
<div class="card" style="margin-bottom: 0px">
<div class="card-content">
<div class="content">
It looks like you're not logged in right now. you will need to
<a href="/login" target="_self">login to Pro</a> or become a
<a href="https://coil.com/?ref=InfinitySearch2229" target="_self">Coil Member</a>
to access the results.
<div class="block"></div>
<div class="columns" style="text-align: center">
<div class="column is-one-third">
<a class="button" style="width: 100%" href="/login" target="_self">Login</a>
</div>
<div class="column is-one-third">
<a class="button" style="width: 100%" href="/pro" target="_self">Learn more about
Infinity Pro</a>
</div>
<div class="column is-one-third">
<a class="button" style="width: 100%"
href="https://coil.com/?ref=InfinitySearch2229" target="_self">Learn more about
Coil</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div hidden="" id="id-custom-tab-page">
<div class="columns" style="margin-top: 1rem">
<div class="column is-one-quarter is-offset-2">
<p class="heading">Current Tabs</p>
<div id="id-current-tab-list">
<nav class="level is-mobile" id="id-web-tab">
<div class="level-item has-text-centered is-capitalized">web</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-web" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-images-tab">
<div class="level-item has-text-centered is-capitalized">
images
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-images" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-videos-tab">
<div class="level-item has-text-centered is-capitalized">
videos
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-videos" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-homepages-tab">
<div class="level-item has-text-centered is-capitalized">
homepages
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-homepages" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-food-tab">
<div class="level-item has-text-centered is-capitalized">
food
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-food" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-books-tab">
<div class="level-item has-text-centered is-capitalized">
books
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-books" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
<nav class="level is-mobile" id="id-movies-tab">
<div class="level-item has-text-centered is-capitalized">
movies
</div>
<div class="level-item has-text-centered is-one-quarter">
<div style="order: 2; margin-left: auto; margin-right: 0.5rem">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
<img class="handle trash" src="/static/images/fa/trash-alt.svg"
id="id-remove-tab-icon-movies" style="
cursor: pointer;
min-width: 0.5em;
width: 16px;
height: 16px;
margin-left: 0.5rem;
" onclick="removeTab(this);" />
</div>
</div>
</nav>
</div>
</div>
<div class="column is-one-quarter is-offset-1">
<p class="heading">Add New Tabs</p>
<nav class="level">
<div class="level-item">
<div class="select">
<select id="id-add-tab-selector" style="
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
'Droid Sans', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
">
<option id="id-tab-selector-web" value="web" style="display: none">
Web
</option>
<option id="id-tab-selector-images" value="images" style="display: none">
Images
</option>
<option id="id-tab-selector-videos" value="videos" style="display: none">
Videos
</option>
<option id="id-tab-selector-homepages" value="homepages" style="display: none">
Homepages
</option>
<option id="id-tab-selector-general" value="general">
General
</option>
<option id="id-tab-selector-food" value="food" style="display: none">
Food
</option>
<option id="id-tab-selector-books" value="books" style="display: none">
Books
</option>
<option id="id-tab-selector-movies" value="movies" style="display: none">
Movies
</option>
<option id="id-tab-selector-music" value="music">
Music
</option>
<option id="id-tab-selector-infinity" value="infinity">
Infinity
</option>
<option id="id-tab-selector-edu" value="edu">Edu</option>
<option id="id-tab-selector-pdf" value="pdf">Pdf</option>
<option id="id-tab-selector-qa" value="qa">Qa</option>
<option id="id-tab-selector-reddit" value="reddit">
Reddit
</option>
<option id="id-tab-selector-fandom" value="fandom">
Fandom
</option>
<option id="id-tab-selector-coil" value="coil">Coil</option>
<option id="id-tab-selector-no_js" value="no_js">
No Javascript
</option>
<option id="id-tab-selector-decentralized" value="decentralized">
Decentralized
</option>
</select>
</div>
</div>
<div class="level-item">
<button class="button" id="id-add-tab-button" onclick="addTab();" style="
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
Add
</button>
</div>
</nav>
<br />
<nav class="level">
<div class="level-item">
<button class="button" id="id-update-tabs-button" style="
order: 2;
margin-left: auto;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
" onclick="resetTabsToOriginal();">
Reset
</button>
</div>
</nav>
<div id="id-custom-tabs-error"></div>
</div>
</div>
</div>
</div>
<div id="id-side-bar" class="column is-3 sidebar_column" style="padding-top: 1.2rem; padding-right: 1.5rem">
<div id="externals" class="">
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://en.wikipedia.org/w/index.php?search="
href="https://en.wikipedia.org/w/index.php?search=test" name="external_link_0"
style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/wikipedia.ico"
name="external_icon_0'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_0"
style="font-size: 0.95rem; display: inline">
Wikipedia Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://duckduckgo.com/?q=" href="https://duckduckgo.com/?q=test" name="external_link_1"
style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/duckduckgo.ico"
name="external_icon_1'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_1"
style="font-size: 0.95rem; display: inline">
DuckDuckGo Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://www.google.com/search?q=" href="https://www.google.com/search?q=test"
name="external_link_2" style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/google.ico"
name="external_icon_2'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_2"
style="font-size: 0.95rem; display: inline">
Google Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://www.youtube.com/results?search_query="
href="https://www.youtube.com/results?search_query=test" name="external_link_3"
style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/youtube.svg"
name="external_icon_3'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_3"
style="font-size: 0.95rem; display: inline">
Youtube Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://www.amazon.com/s?k=" href="https://www.amazon.com/s?k=test"
name="external_link_4" style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/amazon.ico"
name="external_icon_4'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_4"
style="font-size: 0.95rem; display: inline">
Amazon Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://twitter.com/search?q=" href="https://twitter.com/search?q=test"
name="external_link_5" style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/twitter.png"
name="external_icon_5'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_5"
style="font-size: 0.95rem; display: inline">
Twitter Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://www.reddit.com/search/?q=" href="https://www.reddit.com/search/?q=test"
name="external_link_6" style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/reddit.ico"
name="external_icon_6'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_6"
style="font-size: 0.95rem; display: inline">
Reddit Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://github.com/search?q=" href="https://github.com/search?q=test"
name="external_link_7" style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/github.ico"
name="external_icon_7'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_7"
style="font-size: 0.95rem; display: inline">
GitHub Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
<div class="card" name="external_card" style="margin-bottom: 0px">
<header class="card-header">
<p class="card-header-title" style="font-weight: normal; padding-right: 5px">
<a id="https://www.reuters.com/search/news?blob="
href="https://www.reuters.com/search/news?blob=test" name="external_link_8"
style="display: block" rel="noreferrer noopener" target="_self">
<img onerror="imgError(this)" src="/static/images/favicons/reuters.ico"
name="external_icon_8'" class="external-icon" />
<span hidden="" class="external-text" name="external_text_8"
style="font-size: 0.95rem; display: inline">
Reuters Results
</span>
</a>
</p>
<span class="clickableIcon" onclick="removeExternalClickable(this)" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 6px;
min-width: 0.5em;
">
<img class="handle fa-ellipsis-v" src="/static/images/fa/ellipsis-v.svg" style="
cursor: pointer;
display: block;
margin: auto;
margin-right: 12px;
min-width: 0.5em;
width: 16px;
height: 16px;
" />
</span>
</header>
</div>
</div>
<div id="externals_menu">
<div class="card is-fullwidth" id="plus-minus-info" style="
margin-top: 0.5rem;
margin-bottom: 0px;
height: 2.5rem;
padding: 0.7rem;
">
<div class="columns is-vcentered is-mobile">
<div class="column" style="text-align: center">
<button class="button is-small" id="external_add" style="
border-color: transparent;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
<img src="/static/images/fa/plus.svg" class="cl-external-link-img" />
</button>
</div>
<div class="column is-narrow" style="text-align: center">|</div>
<div class="column" style="text-align: center">
<button class="button is-small" id="external_minus" style="
border-color: transparent;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
<img src="/static/images/fa/minus.svg" class="cl-external-link-img" />
</button>
</div>
<div class="column is-narrow" style="text-align: center">|</div>
<div class="column" style="text-align: center">
<div id="external-info-button" style="text-align: center">
<div style="cursor: pointer" id="externals_layout_button"
onclick="toggleExternalsLayout();">
<img id="id-externals-layout-img" class="cl-external-link-img"
src="/static/images/fa/list.svg" />
</div>
</div>
</div>
</div>
</div>
<div id="external_link_add_box" style="margin: 0.5rem" hidden="">
<div class="box is-fullwidth is" style="margin: 0; padding: 0.5rem">
<input class="input is-small" id="new_external_label" placeholder="Search Label" style="
margin: 0.25rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
" />
<input class="input is-small" id="new_external_link"
placeholder="Search Link (https://is.com/results?q=)" style="
margin: 0.25rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
" />
<input class="input is-small" id="new_external_icon"
placeholder="Icon Link (https://is.com/img.png)" style="
margin: 0.25rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
" />
</div>
<button class="button is-small is-outlined" id="external_input_add" style="
float: right;
margin: 0.5rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
Add
</button>
<button class="button is-small is-outlined is-danger" id="external_input_cancel" style="
float: right;
margin-top: 0.5rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
Cancel
</button>
</div>
<div id="external_input_defaults" hidden="">
<button class="button is-small is-outlined is-danger" id="external_input_defaults_button" style="
float: right;
margin-top: 0.5rem;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
'Helvetica Neue', Helvetica, Arial, sans-serif;
">
Reset
</button>
</div>
</div>
<br />
</div>
</div>