Jump to content

barchiel33

Members
  • Posts

    23
  • Joined

  • Last visited

  • Days Won

    1

Community Answers

  1. barchiel33's post in Javascripting Buttons to Navigate Pages was marked as the answer   
    Hmm, so it looks like the article's script doesn't take into account having nested links (ie. <a><SpotfireControls id=blahblahblah></a> where the Spotfire control is a Link action control). So what's happening is that it's moving the link action control up out of the parent <a>.  So this HTML:
    <div class="iconMenu" style="background:yellow;color:blue;font-size:50px;">     <a><SpotfireControl id="7f4b2b132dc244a8b29b58297d16a13f" /></a>     <a>Action Control Link 2</a>     <a>Action Control Link 3</a>     <a>Action Control Link 4</a>     <a>Action Control Link 5</a>     <a>Action Control Link 6</a>     <a>Action Control Link 7</a>     <a>Action Control Link 8</a>     <a>Action Control Link 9</a>     <a>Action Control Link 10</a>     <a>Menu</a> </div> <img class="icons fa-solid fa-1, fa-solid fa-2,fa-solid fa-3,fa-solid fa-4,fa-solid fa-5,fa-solid fa-6,fa-solid fa-7,fa-solid fa-8,fa-solid fa-9, fa-solid fa-0, fa-solid fa-bars"/> Becomes this:
    <div class="iconMenu" style="background:yellow;color:blue;font-size:50px;">     <a class="fa-solid fa-1"></a>     <a id="7f4b2b132dc244a8b29b58297d16a13f" href="javascript:void(0);" class="fa-solid fa-2" title="Home"> //This is the Spotfire Link action control.     <a class="fa-solid fa-3">Action Control Link 2</a>     <a class="fa-solid fa-4">Action Control Link 3</a>     <a class="fa-solid fa-5">Action Control Link 4</a>     <a class="fa-solid fa-6">Action Control Link 5</a>     <a class="fa-solid fa-7">Action Control Link 6</a>     <a class="fa-solid fa-8">Action Control Link 7</a>     <a class="fa-solid fa-9">Action Control Link 8</a>     <a class="fa-solid fa-0">Action Control Link 9</a>     <a class="fa-solid fa-bars">Action Control Link 10</a>     <a class="undefined">Menu</a> //Since the Spotfire control 'stole' one of the icons, this becomes undefined, since there are 12 elements and only 11 icon classes. </div> The easiest solution is to remove the container <a> around the Spotfire Link action control. However, there is some base styling applied to Link action controls, and, unfortunately, the styles are inline instead of in a style sheet. So you'd need to use !important to override them. The most notable is the font size, but there are a few others. A potential alternative would be to extract the action controls to their own hidden container and just use the icons as facades, but that would take a good bit more work.
    I went through and rewrote the code to implement the overriding the font-size but also to implement some general best practices (such as using var when setting variables, checking that elements exist, etc.):
    var spaceBetweenLayers = 100; var itemsPerLayer = 1; var startingAngle = 0 var endingAngle= 120 var canvasPos = document.querySelector('[class^="sfx_canvas"]').getBoundingClientRect() ; var iconMenu = document.querySelector(".iconMenu"); if (iconMenu) { var iconMenuStyle = iconMenu.style; var backgroundColor= iconMenuStyle.background || "#fff"; var foregroundColor = iconMenuStyle.color || "navy"; var fontSize = iconMenuStyle.fontSize || "20px"; var style = ` <link href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css' rel='stylesheet' ></link> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css' rel='stylesheet'/> <style> .iconMenu { position: fixed; top:${canvasPos.y+15}px; left:${canvasPos.x+15}px; z-index:1; height:0; } .iconMenu a { font-size: ${fontSize} !important; position: fixed; display: flex; justify-content: center; align-items: center; text-decoration:none !important; cursor: pointer; /*animation*/ transition-timing-function: cubic-bezier(0,0,0,1); transition-duration: .25s; /*size and shape*/ width: ${fontSize}; height: ${fontSize}; padding: calc(${fontSize}/3); border-radius: 100%; /*colors*/ color:#747880 !important; background-color: ${backgroundColor}; box-shadow: 0 4px 18px #0000001a,0 4px 5px #0000001a; } .iconMenu a:last-child{ opacity:100% } .iconMenu a:hover{ color: #8498fa !important; } </style> `; iconMenu.insertAdjacentHTML("afterend",style); //script var timeOutPID = 0; var menuLinks = document.querySelectorAll(".iconMenu a") if (menuLinks) { var boxShadow = document.querySelector(".iconMenu a").style.boxShadow; function hover() { let gap = spaceBetweenLayers; let elements = document.querySelectorAll(".iconMenu a"); if (elements) { elements.forEach((e, i) => { if(i==elements.length-1) return; let angle = (endingAngle / itemsPerLayer) * (i%itemsPerLayer) + startingAngle; i%itemsPerLayer||(gap+=spaceBetweenLayers); e.style.transform = `rotate(${angle}deg) translate(${gap}px) rotate(-${angle}deg)`; e.style.boxShadow=boxShadow; e.onmouseover = resetDelayClose; e.onmouseout = delayClose; }); resetDelayClose(); } } function close(){ let elements = document.querySelectorAll(".iconMenu a"); if (elements) { elements.forEach((e, i) => { if (i==elements.length-1) return; e.style.transform = `translate(0px)`; e.style.boxShadow = "unset"; }); } } function delayClose(){ timeOutPID = setTimeout(close,1234); } function resetDelayClose(){ timeOutPID && clearTimeout(timeOutPID); } document.querySelector(".iconMenu a:last-child").onmouseover = hover; document.querySelector(".iconMenu a:last-child").onmouseout = delayClose; //setup icons on links var icons = document.querySelector(".icons").classList.value.split(","); icons[0] = icons[0].replace("icons ",""); menuLinks.forEach((e,i)=>{ e.className = icons[i]; e.title = e.innerText; e.innerText = ""; }); hover(); delayClose(); }; }; The HTML for this method would look like this:
    <div class="iconMenu" style="background:yellow;color:blue;font-size:50px;"> <SpotfireControl id="7f4b2b132dc244a8b29b58297d16a13f" /> <a>Action Control Link 2</a> <a>Action Control Link 3</a> <a>Action Control Link 4</a> <a>Action Control Link 5</a> <a>Action Control Link 6</a> <a>Action Control Link 7</a> <a>Action Control Link 8</a> <a>Action Control Link 9</a> <a>Action Control Link 10</a> <a>Menu</a> </div> <img class="icons fa-solid fa-1, fa-solid fa-2,fa-solid fa-3,fa-solid fa-4,fa-solid fa-5,fa-solid fa-6,fa-solid fa-7,fa-solid fa-8,fa-solid fa-9, fa-solid fa-0, fa-solid fa-bars"/> You'd just replace each <a>Action Control Link #</a> with a Spotfire Link action control with the desired title.
  2. barchiel33's post in Spotfire Page Layout Change using Iron Python was marked as the answer   
    Yep! This is entirely possible! Basically what you do is rebuild the page layout each time a visual is added or removed. Here's a good starting point: 
     you'll use similar code to this. Basically, iterate through the visuals on the page and add them to the layout in different places based on their names.
  3. barchiel33's post in Filter rows with delimiter-separated values based on a "Contains" logic was marked as the answer   
    I'm thinking you'd have an easier time using a Python data function for what you're trying to do. I would think something like:
     li = list(search_list.split(', '))
    output = text_column.apply(lambda row: all(x in row for x in li))
    where search_list is a string document property containing a comma-space separated list of the terms to seach for, text_column is a column from the data table that you want to search for the terms, and output is a column output which will contain true if all terms in search_list are in the corresponding row from the text column and false if any term isn't.
×
×
  • Create New...