how to stop tinymce to replace path starting with /public/assets... with ../../../../public/assets...? - laravel-8

I am using alexusmai laravel file manager together with tinyMCE. When LFM returns the path of a selected file in the insert/edit image window it is correct. It must include the public folder as I am on shared hosting /public/assets....
As soon as the insert/edit image window is closed, the url inserted in tinyMCE displays the logo/image correctly. When I look in the code editor the url is converted to ../../../../public/assets....
Even if I edited the path in the code editor and save, tinyMCE changes it back as soon as I return to the wysiwyg editor. In a way it's ok as it works but I would prefer that the path is kept as given by the user or LFM.
Is there anyway to stop tinyMCE to do that?
Here is the js code I use to initialise the editor:
window.onload = function () {
tinymce.init({
selector: '#{{ $field->name }}',
height: 600,
plugins: [
'image paste importcss searchreplace autolink preview',
'code visualblocks visualchars fullscreen image link media template',
'table charmap hr insertdatetime lists wordcount textpattern charmap quickbars emoticons help',
],
menubar: 'file edit view insert format tools table help',
toolbar: [
'code fullscreen preview | bold italic underline | image media template link | formatselect fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor | charmap emoticons | removeformat undo redo'
],
templates: [
{ title: 'Row Ani Img L', description: 'Row with animnated image on left', content: rowL },
{ title: 'Row Ani Img R', description: 'Row with animnated image on right', content: rowR }
],
content_css: '{{ makeURLabsolute(config('path')['public'].'custom/'.config('site.array_names')['file'].'.css',config('is_web')) }}',
branding: false,
toolbar_sticky: true,
toolbar_mode: 'sliding',
file_picker_callback (callback, value, meta) {
let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth
let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight
tinymce.activeEditor.windowManager.openUrl({
url : '/file-manager/tinymce5',
title : 'Asset Manager',
width : x * 0.8,
height : y * 0.8,
onMessage: (api, message) => {
callback(message.content, { text: message.text })
}
})
}
});
};

Related

trying to get an objects key which is a 'letters + counter number' variable but it won't work

I know tis might be a silly problem but I'm not sure how to frame this line of code to do what I need. I'm using Vue CLI and I have a some objects within an array in my data. one of those objects have several image links with key that goes -> img1 : ./link, img2: ./link2. In my function i need to change the target elements source to the next image i.e from img1 to img2 where I have a counter that stores the number that i want img to change to. however the results only show NaN.
here is my some HTML:
<img #click="storyboard" v-else :src="slide.img1" />
<div class="counter hide">
<p>{{ counter }} / 5</p>
</div>
here is some JS
data() {
return {
slides: [
{ title: 'Landing Page', img1: require("../assets/wadah/proposal.mp4"), info: "Wadah Archive is an alternative museum where everyday artefacts are given meaning through crowdsourced nostalgia. The online archive stresses on the idea that the stories and conversations about the artefact by people visiting the archive should be a part of the artefact itself. It is a reflection on traditional methods of preserving and displaying objects through proposing an alternative navigation system by translating physical artefacts into a digital space.", makeSmall: false
}, {
title: "Interacting with 3D objects", img1: require("../assets/wadah/pinStill.jpg"), info: "dummydata", makeSmall: false
}, {
title: "Designing Pins and Signage", img1: require("../assets/wadah/pins.png"), info: "dummydata", makeSmall: true
},{
title: "Home and Index Navigation", img1: require("../assets/wadah/home1.jpg"), img2: require("../assets/wadah/home3.jpg"), img3: require("../assets/wadah/home2.jpg"), img4: require("../assets/wadah/index.jpg"), img5: require("../assets/wadah/index2.jpg"), info: "dummydata", makeSmall: false
},{
title: "User Flow", img1: require("../assets/wadah/wireflow.png"), info: "dummydata", makeSmall: false
},
],
visibleSlide: 0,
counter: 1
}
}
methods: {
storyboard(event) {
if (this.visibleSlide === 3) {
let ele = event.target
this.counter++
ele.src = this.slides[3].img + this.counter
// console.log(this.slides[3].img + 2)
// console.log(ele.src, this.counter)
}
}
}
const obj = {
title: "Home and Index Navigation",
img1: "../assets/wadah/home1.jpg",
img2: "../assets/wadah/home3.jpg",
img3: "../assets/wadah/home2.jpg",
img4: "../assets/wadah/index.jpg",
}
let counter = 2
console.log("Incorrect:", obj.img + counter) // obj.img does not exists = undefined
console.log("Correct:", obj["img"+counter])

Creating shape or marks in custom indicator, (tradingview charting library (pinejs))

is there any way to create shape or create marks on chart in custom indicator using tradingview charting library. I am using this way to create custom indicators. Thanks in advance.
Yes you can. Here is the guide.
For the callouts/Markers on chart you can follow this guide in the JS API.
https://github.com/tradingview/charting_library/wiki/JS-Api#gettimescalemarkssymbolinfo-from-to-ondatacallback-resolution
For getmarks you can do this
getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
var Arr = [
{
id: 1,
time: 1551448800000 / 1000,
color: 'blue',
text: 'Hello world',
label: 'B',
labelFontColor: 'yellow',
minSize: 20
},
]
onDataCallback(Arr);
console.log("=====getMarks running");
},
It will plot the marks above the bars as shown in the below image.
For Timescalemarks.
getTimescaleMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
onDataCallback([
{
id: 1,
time: / 1000,
color: 'Turquoise',
label: 'The test you want to show on marker',
minSize: 20,
tooltip:[
"Information you want to print",
]
},
]);
})
The Time scale marks will look like this. And they will be plotted below the bars.
And for the shapes like circles and arrows you can follow this documentation. And use the createMultipointShape(points, options) methos to plot your shapes.
https://github.com/tradingview/charting_library/wiki/Chart-Methods#createmultipointshapepoints-options

How to make a searchable droplist in react native to open an specific screen?

I'm trying to make a search bar with a list,dropdown list,
how to make a search list lik this code:
onPress={() =>this.props.navigation.navigate('LinhaDiurno03')
when an item is pressed?
....I want that each item in the list open a different screen in the application....
How can i to it?
here is the my teste:
Code to dropDown List
here some code:
var items = [
//name key is must.It is to show the text in front
{id: 1, name: 'ANA RECH', prestadora: 'UNIDOS', pos: 'P01'},
{id: 2, name: 'ARROIO DAS MARRECAS', prestadora: 'UNIDOS', pos: 'P01'},
{id: 3, name: 'VILA SECA', prestadora: 'UNIDOS', pos: 'P01'},];
onItemSelect={item => Alert.alert(" ", JSON.stringify(item.prestadora + ", LINHA: " + item.pos), [{ text: "open the especifc screen", onPress: () =>('some code here')},{ text: "bacvk", onPress: () => console.log("OK Pressed")}],{ cancelable: true })}
//onItemSelect called after the selection from the dropdown
I read the library API, you can set the navigation keys in the item, then in the onItemSelect to go to the special screen. the example code is below.
// in the item every element add a router key
const item = [
...
{
id: 8,
name: 'Swift',
key:"the navigation params" //like the example LinhaDiurno03
},
...
]
<SearchableDropdown
multi={true}
selectedItems={this.state.selectedItems}
onItemSelect={(item) => {
his.props.navigation.navigate(item.key)
}}
/>
Here is the final code, you just need to make the route before in your app...
the full code

How to add a hover label to morris bar graph? [duplicate]

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
I have setup a JSBIN example for the same here:
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
Piece of cake. Demo and code:
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
1: index: it represents record number i.e. from 0 to n records.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
For flying label, you need to add Morris CSS stylesheet to the code - demo
IMPORTANT NOTE
Flying labels works since version 0.4.3
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});

Sencha Touch chart - How to add label/value in line chart

I am using Sencha Touch charts 1.0.0 for my project. I would like to add values on each point in my line chart (as in image). I tried the same approach in this question for column chart, but it didn't work out.
I had the same problem with you. But i find a solution instead for that. You can add marker at each node of line and when you click on marker a popup will show detail information as you want. This's my code may help you :
-Add marker in cofig of series :
type: 'line',
title: 'Clickeds : ' + total[4] + ' ( ' + Math.round(arrInfo[4]) + '% )',
highlightCfg: { scale : 0.7 },
xField: 'Date', yField: 'Clks',
style : {
stroke: 'rgb(50, 185, 150)',
miterLimit : 3,
lineCap: 'miter',
lineWidth: 2
}
,
marker:{
type: 'image',
src: 'resources/images/square.png',
width: 24,
height: 24,
x: -12,
y: -12,
scale: 0.5,
fx: {
duration: 200
}
}
Handle event when you click on node, you add listeners to config of chart : `listeners: {
itemtap: function( series, item, event, eOpts ){
//handle your code here.
}`
Regards,
(Sorry for bad english.)