Skip to content

Commit

Permalink
#494 Dropdown in the topbar for a selected feature’s properties links (…
Browse files Browse the repository at this point in the history 
…#495)
  • Loading branch information
@tariqksoliman
tariqksoliman committed Jan 26, 2024
1 parent c215a0e commit 533028f
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 73 deletions.
23 changes: 23 additions & 0 deletions src/css/mmgis.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -984,3 +984,26 @@ mark {
background: var(--color-c2) !important;
border-radius: 0px;
}


#mainDescPointLinks ul {
width: fit-content;
}
#mainDescPointLinks .dropy__title {
height: 30px;
border: none;
margin-left: 9px;
width: 60px;
background: var(--color-a1);
}
#mainDescPointLinks .dropy__title > span {
padding-top: 2px;
}
#mainDescPointLinks .dropy__title > i {
line-height: 15px;
}

#mainDescPointLinks_global .dropy__content li a {
padding: 0.425rem 1.0375em;
height: 30px;
}
60 changes: 40 additions & 20 deletions src/essence/Ancillary/Description.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import $ from 'jquery'
import * as d3 from 'd3'
import F_ from '../Basics/Formulae_/Formulae_'
import Dropy from '../../external/Dropy/dropy'

import tippy from 'tippy.js'

Expand Down Expand Up @@ -58,6 +59,7 @@ const Description = {
.style('font-weight', 'bold')
.style('cursor', 'pointer')
.style('margin', '0')
.style('overflow', 'hidden')

Description.descPointInner.on('click', function () {
if (typeof Map_.activeLayer.getBounds === 'function')
Expand Down Expand Up @@ -180,34 +182,28 @@ const Description = {
activeLayer.hasOwnProperty('options')
) {
var keyAsName
var links = "<span style='padding-left: 4px;'></span>"
const links = []

if (
this.L_.layers.data[activeLayer.options.layerName] &&
this.L_.layers.data[activeLayer.options.layerName].variables
) {
let v =
this.L_.layers.data[activeLayer.options.layerName].variables

if (v.links) {
links = ''
for (let i = 0; i < v.links.length; i++) {
links +=
"<a href='" +
F_.bracketReplace(
v.links[i].link,
activeLayer.feature.properties,
v.links[i].replace
) +
"' target='" +
F_.cleanString(v.links[i].name) +
"' title='" +
v.links[i].name +
"'>" +
"<span class='mainDescLinkName'>" +
v.links[i].name +
'</span>' +
"<i class='mdi mdi-open-in-new mdi-12px'></i>" +
'</a>'
const link = F_.bracketReplace(
v.links[i].link,
activeLayer.feature.properties,
v.links[i].replace
)
if (link != null && link != '')
links.push({
name: `<span style='display: flex; justify-content: space-between;'>${v.links[i].name}<i class='mdi mdi-open-in-new mdi-14px' style='margin-left: 4px; margin-top: 1px;'></i></span>`,
link: link,
target: F_.cleanString(v.links[i].name),
})
}
}
}
Expand Down Expand Up @@ -246,7 +242,31 @@ const Description = {
': ' +
keyAsName
)
Description.descPointLinks.html(links)

$('#mainDescPointLinks_global').remove()
const globalConstruct = Dropy.construct(
links.map((l) => l.name),
`<i class='mdi mdi-link mdi-18px'></i>`,
null,
{
openUp: false,
dark: true,
}
)
$('#mainDescPointLinks').html(globalConstruct)
Dropy.init(
$('#mainDescPointLinks'),
function (idx) {
if (links[idx] && links[idx].link)
window.open(
links[idx].link,
links[idx].target || '_blank'
)
},
null,
null,
{ dontChange: true, globalConstruct }
)

if (Description.tippyDesc && Description.tippyDesc[0])
Description.tippyDesc[0].setContent(
Expand Down
40 changes: 20 additions & 20 deletions src/essence/Ancillary/QueryURL.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -319,26 +319,26 @@ var QueryURL = {

//globeCamera
const lithoCams = L_.Globe_.litho.getCameras()
if( lithoCams != null ) {
var orbit = lithoCams.orbit
var cam = orbit.camera
var con = orbit.controls

var pos = cam.position
var tar = con.target
var globeCamera =
pos.x +
',' +
pos.y +
',' +
pos.z +
',' +
tar.x +
',' +
tar.y +
',' +
tar.z
urlAppendage += '&globeCamera=' + globeCamera
if (lithoCams != null) {
var orbit = lithoCams.orbit
var cam = orbit.camera
var con = orbit.controls

var pos = cam.position
var tar = con.target
var globeCamera =
pos.x +
',' +
pos.y +
',' +
pos.z +
',' +
tar.x +
',' +
tar.y +
',' +
tar.z
urlAppendage += '&globeCamera=' + globeCamera
}

//panePercents
Expand Down
154 changes: 121 additions & 33 deletions src/external/Dropy/dropy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,56 +31,144 @@ export default {
'</dl>'].join('\n')
},
// onChange(index, value, element)
init: function (dropyElm, onChange, onOpen, onClose) {
init: function (dropyElm, onChange, onOpen, onClose, options) {
options = options || {}
var self = this

const initialDropyElm = dropyElm
dropyElm = dropyElm.find('.dropy')
if (options.globalConstruct != null) {
dropyElm.find('ul').css({ display: 'none' })
dropyElm = $('body').append(
`<div id="${initialDropyElm.attr('id')}_global"></div>`
)
}

// Opening a dropy
dropyElm.find('.dropy__title').click(function () {
initialDropyElm.find('.dropy__title').click(function () {
$('.dropy').removeClass(self.openClass)
$(this).parents('.dropy').addClass(self.openClass)
if (options.globalConstruct != null) {
const elm = $(`#${initialDropyElm.attr('id')}_global`)
elm.empty()
elm.append(options.globalConstruct)
elm.find('.dropy').addClass(self.openClass)
elm.find('.dropy__title').remove()
elm.find('.dropy__header')
.css({ pointerEvents: 'all' })
.click(function () {
$('.dropy').removeClass(self.openClass)
const elm = $(`#${initialDropyElm.attr('id')}_global`)
elm.empty()
})
elm.find('ul').css({ width: 'fit-content' })
const bcr = initialDropyElm.get(0).getBoundingClientRect()
elm.css({
position: 'fixed',
left: bcr.left + 5,
right: bcr.right,
top: bcr.top,
width: bcr.width,
})
const bcr2 = elm.find('ul').get(0).getBoundingClientRect()
if (bcr2.left + bcr2.width > window.innerWidth) {
elm.css({ left: window.innerWidth - bcr2.width - 5 })
}

elm.find('.dropy__content ul li a').click(function () {
var $that = $(this)
var $dropy = $that.parents('.dropy')
var $input = $dropy.find('input')
var $title = $(this)
.parents('.dropy')
.find('.dropy__title span')

if (options.dontChange != true) {
// Remove selected class
$dropy.find('.dropy__content a').each(function () {
$(this).removeClass(self.selectClass)
})

// Update selected value
$title.html($that.html())
$input.val($that.attr('data-value')).trigger('change')

// If back to default, remove selected class else addclass on right element
if ($that.hasClass('dropy__header')) {
$title.removeClass(self.selectClass)
$title.html($title.attr('data-title'))
} else {
$title.addClass(self.selectClass)
$that.addClass(self.selectClass)
}
}

// Close dropdown
$dropy.removeClass(self.openClass)
$('.dropy').removeClass(self.openClass)
const elm = $(`#${initialDropyElm.attr('id')}_global`)
elm.empty()

if (typeof onClose === 'function') {
onClose()
}

if (typeof onChange === 'function') {
onChange(
parseInt($that.attr('idx')),
$that.text(),
$that
)
}
})
}
if (typeof onOpen === 'function') {
onOpen()
}
})

// Click on a dropy list
dropyElm.find('.dropy__content ul li a').click(function () {
var $that = $(this)
var $dropy = $that.parents('.dropy')
var $input = $dropy.find('input')
var $title = $(this).parents('.dropy').find('.dropy__title span')
if (options.globalConstruct == null) {
// Click on a dropy list
dropyElm.find('.dropy__content ul li a').click(function () {
var $that = $(this)
var $dropy = $that.parents('.dropy')
var $input = $dropy.find('input')
var $title = $(this)
.parents('.dropy')
.find('.dropy__title span')

// Remove selected class
$dropy.find('.dropy__content a').each(function () {
$(this).removeClass(self.selectClass)
})
if (options.dontChange != true) {
// Remove selected class
$dropy.find('.dropy__content a').each(function () {
$(this).removeClass(self.selectClass)
})

// Update selected value
$title.html($that.html())
$input.val($that.attr('data-value')).trigger('change')

// If back to default, remove selected class else addclass on right element
if ($that.hasClass('dropy__header')) {
$title.removeClass(self.selectClass)
$title.html($title.attr('data-title'))
} else {
$title.addClass(self.selectClass)
$that.addClass(self.selectClass)
}
// Update selected value
$title.html($that.html())
$input.val($that.attr('data-value')).trigger('change')

// Close dropdown
$dropy.removeClass(self.openClass)
// If back to default, remove selected class else addclass on right element
if ($that.hasClass('dropy__header')) {
$title.removeClass(self.selectClass)
$title.html($title.attr('data-title'))
} else {
$title.addClass(self.selectClass)
$that.addClass(self.selectClass)
}
}

if (typeof onClose === 'function') {
onClose()
}
// Close dropdown
$dropy.removeClass(self.openClass)

if (typeof onChange === 'function') {
onChange(parseInt($that.attr('idx')), $that.text(), $that)
}
})
if (typeof onClose === 'function') {
onClose()
}

if (typeof onChange === 'function') {
onChange(parseInt($that.attr('idx')), $that.text(), $that)
}
})
}

// Close all dropdown onclick on another element
$(document).bind('click', function (e) {
Expand Down

0 comments on commit 533028f

Please sign in to comment.