Load Text Area vizualisation code from library

[Luc Benichou]

We have on multiple pages banner and menus,theyare codedin HTLM/CSS/JS within Text Area vizualisation.

To avoid duplication and simplify maintenance we would like to load them from the library.

 

Would you know a way to loadText Area vizualisation code from the Library

 

Thx

LB

[Jose Leviaguirre]

Depending on the architectural design of your page banner and menus, you can encapsulate all the html, css, js on a single javascript file. You will need a placeholder on the textarea to inject all that good html sauce in it. Your script can be as flexible as you'd like by adding parameters. Attached is a sample script that generates a drawer sliding from the rightbased on this approach.

 

You can only import scripts from the library this way, so I recommend keep the script on a separate dxp file on the library to avoid importing inecesary scripts every time. It would be nice to store javascript files in the library as well. Maybe in a future version of Spotfire, so I encourage everybody to vote up this idea and this other one

 

html

 

 

my drawer contents

You can put here whatever you want, including spotfire controls

 

 

 

 

 

 

open/close Drawerjs

/*

Description: shows a drawer from the right of the screen (working on having it show from top, bottom and left side of the screen)

Usage:

 

your stuff here

 

 

 

 

*/

//usage

 

//script parameters

id="myDrawer"

trigger="toggleDrawer"

 

 

//-----------------------------------------------------------

var Drawer = function(containerSelector){

//constructor

this.container = (containerSelector) $(containerSelector) : $('body');

this.init();

}

 

//methods

Drawer.prototype = {

init: function(){

//fetch template (not need if using requirejs...)

var html = `

replaced by id contents

 

 

 

.close_drawer_button{

float:right;

font-size:17px;

color:rgb(189,191,195);

cursor:pointer;

}

 

.close_drawer_button:hover{

color:rgb(138,142,150);

}

 

.container-drawer{

position: fixed;

z-index:1;

top: 40px;

padding:10px;

right: -100%;

width: 33%;

height: 100%;

 

--background: linear-gradient(45deg, #444 25%, #424242 25%, #424242 50%, #444 50%, #444 75%, #424242 75%, #424242);

background-size:10px 10px;

background: #FFF;

 

box-shadow: -3px 0 10px 1px #898989;

color: #333;

}

.container-drawer.open{

-webkit-animation: openDrawer .5s ease-in-out; /* Chrome, Safari, Opera */

animation: openDrawer .5s ease-in-out;

 

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

.container-drawer.close{

-webkit-animation: closeDrawer .5s ease-in-out; /* Chrome, Safari, Opera */

animation: closeDrawer .5s ease-in-out;

 

-webkit-animation-fill-mode: forwards;

animation-fill-mode: forwards;

}

 

 

 

 

/* Chrome, Safari, Opera */

@-webkit-keyframes openDrawer {

from {right: -100%;}

to {right: 0;}

}

 

/* Standard syntax */

@keyframes openDrawer {

from {right: -100%;}

to {right: 0;}

}

 

/* Chrome, Safari, Opera */

@-webkit-keyframes closeDrawer {

from {right: 0;}

to {right: -100%;}

}

 

/* Standard syntax */

@keyframes closeDrawer {

from {right: 0;}

to {right: -100%;}

}

 

 

 

@media screen and (max-width: 630px) {

.container-drawer{

width: 100%;

}

}

 

 

`;

 

let cont = $("#"+id).contents().wrap('').detach();

$(`#${id}`).html(html)

$(`#${id}_contents`).html(cont)

 

this.cacheReferences();

 

this.drawer.find("#"+id+"_close").on('click', function(that){

$("#"+id+" .container-drawer").toggleClass("open close")

});

 

},

open: function(){

this.drawer.removeClass('close').addClass('open');

},

close: function(){

this.drawer.removeClass('open').addClass('close');

},

toggle: function(){

this.drawer.toggleClass('open close');

},

setTitle: function(text){

this.header.find('h3').text(text);

},

cacheReferences: function(){

this.drawer = this.container.find('.container-drawer');

this.header = this.drawer.find('.drawer-header');

this.footer = this.drawer.find('.drawer-footer');

this.content = this.drawer.find('.drawer-content');

}

};

 

 

//actual usage

var test = new Drawer("#"+id);

 

$("#"+trigger).on('click', function(){

test.toggle();

});

[Luc Benichou]

Hi Jose,

 

Thx for your answer. 

 

You would not have by chance the same dxp saved in version 10. We have not moved yet to version 11 here.

 

AdThanksvance

[Jose Leviaguirre]

That's a good point. I'll update my answer