I am trying to learn how to use the interact.js library and I cant get the resizing example to be draggable. I can resize the div ".resize-drag" but I don´t know how to get it draggable. Can anyone tell me is wrong with my code?
This code is only so that I can learn to implement the resize example provided at http://interactjs.io/ So far I´ve tried using npm instead of the script tag. When I copied the example below from the top of the interact.js website and renamed the element ".item" in the interact claus but that did not work
interact('.item').draggable({
onmove(event) {
console.log(event.pageX,
event.pageY)
}
})
I suspected it might be a syntax error so I also tried adding semicolon behind the function but that didn´t seem to be the problem. Please have a look at my entire code below to see what I have done wrong.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.resize-drag {
background-color: #29e;
color: white;
font-size: 20px;
font-family: sans-serif;
border-radius: 8px;
padding: 20px;
margin: 30px 20px;
width: 120px;
/* This makes things *much* easier */
box-sizing: border-box;
}
.resize-container {
display: inline-block;
width: 100%;
height: 240px;
background-color: lightblue;
}
</style>
<script
src="https://unpkg.com/interactjs#1.3.4/dist/interact.min.js"></script>
<script type="text/javascript">
interact('.resize-drag').draggable({
onmove(event) {
console.log(event.pageX,
event.pageY)
}
})
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener,
restrict: {
restriction: 'parent',
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
})
.resizable({
// resize from all edges and corners
edges: { left: true, right: true, bottom: true, top: true },
// keep the edges inside the parent
restrictEdges: {
outer: 'parent',
endOnly: true,
},
// minimum size
restrictSize: {
min: { width: 100, height: 50 },
},
inertia: true,
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '\u00D7' +
Math.round(event.rect.height);
});
</script>
</head>
<body>
<div class="resize-container">
<div class="resize-drag">
Resize from any edge or corner
</div>
</div>
</body>
</html>
I want to be able to drag the div and not just resize it.
I recently struggled with that as well, and it turned out that the 'resizing' code blurbs don't have all the code. The js is missing window.dragMoveListener and dragMoveListener, which is found in the 'dragging' section.
Specifically you need to add this
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
Related
I want the users of my app to be able to select text (words, but also whole sentences) in a WebViewWidget, and have an audio of that text played to them (via tts). I only want this to work with u̲n̲d̲e̲r̲l̲i̲n̲e̲d̲ text (or text visually highlighted and set apart from the rest in any other way).
This is part of my Widget tree, where I have tested a few gestureRecognizers (please read the comments):
child: GestureDetector(
//gestureRecognizers of WebViewWidget don't do anything without this GestureDetector,
//see: https://stackoverflow.com/questions/58811375/tapgesturerecognizer-not-working-in-flutter-webview#answer-59298134
onTap: () => print('this line doesnt get printed'),
child: WebViewWidget(
controller: _controller,
gestureRecognizers: {
Factory<LongPressGestureRecognizer>(() => LongPressGestureRecognizer()
..onLongPress = () {
print('onLongPress');
}
..onLongPressStart = (LongPressStartDetails details) {
print('onLongPressStart, ${details.globalPosition}, ${details.localPosition}');
}),
Factory<TapGestureRecognizer>(() => TapGestureRecognizer()
..onTap = () {
print('onTap'); //this doesn't get printed at all
}
..onTapDown = (TapDownDetails details) {
//comment: this doesn't get printed unless I tap for a little long time (not as long as longPress)
print('onTapDown, details: $details');
/*TODO: I want to get a text selection and play audio (with tts)
String selectedText = ...?
TTSHelper.speak(text: selectedText);
*/
}),
},
),
),
Another approach to a possible solution for what I want
I have an initialization function, where I take html (without the html, body & head tags...) from firestore and wrap it in the html, body & head tags along with some custom CSS.
If there is no way to achieve my goal with Dart code, maybe there is a way for me to add JavaScript to the html, so that underlined words/sentences can be tapped to play audio via tts, or at least send that text over to my Dart code somehow?
String _prepareHTML(String content) {
return """<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: ${getCSSColor(context, CustomColors.mainAppBG)};}
h1, h2, h3, h4, h5, h6 {color: ${getCSSColor(context, CustomColors.blueWhiteText)};}
p {color: ${getCSSColor(context, CustomColors.text)};}
table {
width: 100%;
table-layout: fixed;
word-wrap: break-word;
}
table, tr, th, td {
color: ${getCSSColor(context, CustomColors.text)};
border: 1px solid ${getCSSColor(context, CustomColors.text)};
border-collapse: collapse;
}
th, td {
padding: 6px 12px;
font-weight: bold;
font-size: 1.25em;
}
</style>
</head>
<body>
$content
</body>
</html>""";
}
I think you might be able to achieve what you want by using some javascript and a javascriptChannel on the WebViewWidget. General idea below:
var controller = WebViewController();
controller.addJavascriptChannel(
JavascriptChannel(
name: 'underlinedTextSelectChannel',
onMessageReceived: (message) {
var data = json.decode(message.message);
var text = data.text as String;
TTSHelper.speak(text: selectedText);
}
)
)
...
var html = """
<html>
...
<body>
$content
# Within content:
This is some text <p class="underlined-text">Say this!</p> Don't say this.
<script>
var underlinedTexts = document.querySelectorAll('.underlined-text');
for(var t of underlinedTexts) {
t.addEventListener('onClick', (e) => {
underlinedTextSelectChannel.postMessage(JSON.stringify({
text: e.target.innerText
}))
})
}
</script>
</body>
</html>
"""
For example:
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
to
one two three
four five six
seven eight nine
ten eleven twelve
I couldn't figure out how to do this and was only able to do vice versa on vscode.
Not a shortcut, but you can easily do such job with find ans replace.
Ctrl+H
Find what: (\w+)\R(\w+)\R(\w+)
Replace with: $1 $2 $3
CHECK Wrap around
CHECK Regular expression
Replace all
Explanation:
(\w+) # group 1, 1 or more word characters
\R # any kind of linebreak
(\w+) # group 2, 1 or more word characters
\R
\R # any kind of linebreak
Screenshot (before):
Screenshot (after):
Not VS Code, but you can do that using this snippet:
Just bookmark this answer if you need it again (or copy and paste the snippet info into an HTML file on your device). Also, I think the "Copy to clipboard" button doesn't work because the snippet runs in a cross-origin iframe, but it should work in a same-origin context.
function splitWordsPerLine (text, wpl = 1) {
let result = '';
wpl = wpl < 1 ? 1 : wpl;
let count = wpl;
for (const word of text.split(/\s+/)) {
count -= 1;
let line = word;
if (count === 0) {
line += '\n';
count = wpl;
}
else line += ' ';
result += line;
}
return result.trim();
}
function getWPL (numberInput) {
if (!numberInput) return 1;
const wpl = parseInt(numberInput.value, 10);
return Number.isNaN(wpl) ? 1 : wpl;
}
function handleInput (event) {
const wpl = getWPL(event.target);
const textInput = document.getElementById('text');
if (!textInput) return;
textInput.value = splitWordsPerLine(textInput.value, wpl);
}
async function handleClick (event) {
let message = 'Copying failed 😭';
const textInput = document.getElementById('text');
try {
if (!textInput) throw new Error('No input found');
await navigator.clipboard.writeText(textInput.value);
message = 'Text copied ✅';
}
catch {}
textInput?.select();
const setText = str => event.target.textContent = str;
setText(message);
setTimeout(() => setText('Copy to clipboard'), 1500);
}
function handlePaste (event) {
const text = event.clipboardData?.getData('text');
if (!text) return;
const wpl = getWPL(document.getElementById('wpl'));
event.target.value = splitWordsPerLine(text, wpl);
event.preventDefault();
}
document.getElementById('wpl')?.addEventListener('input', handleInput);
document.getElementById('copy')?.addEventListener('click', handleClick);
document.getElementById('text')?.addEventListener('paste', handlePaste);
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
height: 100%;
margin: 0;
padding: 1rem;
}
.container {
display: flex;
gap: 0.5rem;
}
.container.vertical {
flex-direction: column;
height: 100%;
}
#copy {
background-color: black;
border: 0;
color: white;
display: inline-flex;
align-items: center;
font-size: 1rem;
padding: 0.5rem;
}
#wpl, #text {
border: 1px solid;
font-family: monospace;
padding: 0.5rem;
}
#wpl {
font-size: 1.5rem;
width: 5rem;
}
#text {
font-size: 1rem;
height: 100%;
width: 100%;
resize: none;
white-space: pre;
}
<div class="container vertical">
<div class="container">
<input id="wpl" type="number" min="1" step="1" value="1" />
<button id="copy">Copy to clipboard</button>
</div>
<textarea id="text" rows="0" cols="0" placeholder="Select number of words per line, then paste your text here"></textarea>
</div>
You can use extension Select By and the command selectby.lineNr
Place the cursor on the first line
execute command: Place cursor based on line number, uses boolean expression
enter expression: c+3k to place a cursor every 3 lines
maybe expression: c+3k && n<50 to limit the end line to use
now use End Space Delete as often as needed
press Esc to exit Multi Cursor Mode
I'm working on MapBoxgl and I want to add several markers.
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href=" /assets/css/bootstrap.min.css " rel="stylesheet" />
<link href=" /assets/css/mapbox-gl.css " rel="stylesheet" />
<link href=" /assets/css/main.css " rel="stylesheet" />
</head>
<body>
<div id="map"></div>
<script src="/assets/js/mapbox-gl.js"></script>
<script src="/assets/js/map-style.js"></script>
</body>
</html>
This is map-style.js:
var map = new mapboxgl.Map({
container: 'map',
center: [57.3221, 33.5928],
zoom: 5,
style: style
});
var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.61, 46.28]
},
properties: {
title: 'point 1',
description: 'point 1 Description',
message: 'point1',
iconSize: [25, 25]
}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [30.62, 46.2845]
},
properties: {
title: 'point 2',
description: 'point 2 Description',
message: 'point 2',
iconSize: [25, 25]
}
}]
};
map.on('load', function () {
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'markers';
el.style.backgroundImage = 'url(assets/marker-azure.png)';
//el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
});
And following is main.css portion related to map and marker:
#map { position:absolute; top:0; bottom:0; width:100% }
.markers {
display: absolute;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
So, my problem is that when I add width property to markers, their icon be displayed correctly (with a bit stretch) but they are in wrong coordinate and move on zoom, like picture below:
On the other hand, if width property is eliminated, they are in right place and does not move on zooming, but they are very stretched and in fact as wide as screen (following image):
It's noteworthy that I've used bootstrap. Can it be the reason of this? If not, what's the problem?
Thanks
import 'mapbox-gl/dist/mapbox-gl.css';
Adding import css works for me.
I found the solution and share it here with others who will encounter this problem. The problem caused because of using a not-most-recent version of the library. After upgrading to the latest release, I could get rid of that problem.
Note that these kinds of problems sometimes occur, when you use npm. Make sure that the library is downloaded completely and It's the latest release.
Latest releases of MapBox can be found at here.
had similar issue, the marker seemed to change position on zoom in/out, fixed it by setting offset, thought to share if it can help others, here is the fiddle
// add marker to map
var m = new mapboxgl.Marker(el, {offset: [0, -50/2]});
m.setLngLat(coordinates);
m.addTo(map);
(Using mapbox 1.13.0)
I had a similar issue where the popups weren't displaying and would change position based on zoom.
Mapbox officially states that you need to include the css file to have markers and popups work as expected.
https://docs.mapbox.com/mapbox-gl-js/guides/install/
HOWEVER, you can also copy that css directly into a component and use that as an element. For example:
export default function MarkerMapTest(props) {
const mapContainer = React.useRef(null)
const map = React.useRef(null)
const elemRef = React.useRef(null)
React.useEffect(() => {
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/dark-v10",
center: [151.242, -33.9132],
zoom: 14,
})
const marker = new mapboxgl.Marker({
element: elemRef.current,
})
.setLngLat([151.242, -33.9132])
.addTo(map.current)
}, [])
return (
<div
style={{ width: 600, height: 600, backgroundColor: "gray" }}
ref={mapContainer}
>
<div
style={{
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: "red",
position: "absolute", // !
top: 0, // !
left: 0, // !
}}
ref={elemRef}
/>
</div>
In my case the svg I used had some space around the real content. That way it seemed for me that the marker was moving. A simple fix was to remove the space around the content (e.g. with the "Resize page to drawing or selection" option of inkscape: https://graphicdesign.stackexchange.com/a/21638)
Also it is important to set display: block on the svg-marker. See: https://stackoverflow.com/a/39716426/11603006
I have a Google chart: bubble chart.
I want to add a custom HTML tooltip, with the specified value relative to the point:
<div class="clearfix>
<h3>Metric: []</h3>
<h4>ID comes here: []</h4>
<h4>X Axis Value comes here: []</h4>
<h4>Y Axis Value comes here: []</h4>
<h4>Volume comes here: []</h4>
</div>
Currently it shows a default tooltip, which is not arranged in the way i want. And I cannot edit the fields also.
I want to use Custom HTML tooltip, but sadly it is not supported by Google charts in bubble chart as of yet.
Any way to achieve the same.
MY CODE
JSFIDDLE Demo
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["ID", "X Axis Value", "Y Axis Value", "Metric", "Volume"],
["Range: 2-5", 3, 2.5, "Value Provider", 300],
["Range: 2-5", 4, 2.5, "Third Provider", 239],
["Range: 3-8", 3, 7.4, "Second Provider", 344],
["Range: 5-8", 5, 7.3, "Value Provider", 324],
["Range: 2-10", 9, 2.32, "Third Provider", 765],
["Range: 2-5", 5, 3, "Value Provider", 342],
]);
var options = {
title: 'Range Volume',
hAxis: {
title: 'X Axis'
},
vAxis: {
title: 'Y Axis'
},
bubble: {
textStyle: {
fontSize: 11,
color:'transparent'
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 90vh;"></div>
</body>
Basically you need some kind of mousetracker to know where tooltip should be shown and you need two listeners like this:
google.visualization.events.addListener chart, 'onmouseover', mouseoverHandler
google.visualization.events.addListener chart, 'onmouseout', mouseoutHandler
and you should add id='tooltip' to your tooltip with css like:
#tooltip {
display: none;
position: absolute;
padding: 10px;
border: 1px solid #ddd;
background: white;
width: 350px;
-webkit-box-shadow: 0 0 5px #ddd;
-moz-box-shadow: 0 0 5px #ddd;
box-shadow: 0 0 5px #ddd;
z-index: 1;
}
javascript:
var $tooltip = $('#tooltip')
mouseoverHandler = function(event) {
metric = data.getValue(event.row, 3);
id = data.getValue(event.row, 0);
xAxis = data.getValue(event.row, 1);
yAxis = data.getValue(event.row, 2);
volume = data.getValue(event.row, 4);
$tooltip.find('h3').append(metric);
$tooltip.css({
top: y,
left: x
}).show();
};
mouseoutHandler = function() {
$tooltip.hide();
};
x and y are your mouse cords taken from some kind of mouse tracker like: Javascript - Track mouse position.
title = data.getValue(event.row, 3); is line where you take data from your data from your chart and you have to insert this data into your tooltip the way you want it to be inserted. I hope it will help.
I've tried creating pages using the 'standard layout' and 'custom layout' but neither allows the use of the {block:Posts} variable(s). I need to re-create essentially the archive page but with some custom css. Is there any way to accomplish this?
If I try $("#someDiv").load("/archive", "#content"); the whole page formatting gets screwed up. Is there a way to load just the <a> tags into a div on my custom page?
Or would it be possible to use the API entirely client side to accomplish this?
Any ideas on this would be appreciated.
I came up with two possible solutions if anyone else finds themselves stuck on this. I abandoned this first one before finalizing it, so it's a bit rough but a good start. It uses the API to load photos (that was all I needed) as you scroll down the page.
<script>
function getPhotos(offset){
$.ajax({
url: "http://api.tumblr.com/v2/blog/[tumblr].tumblr.com/posts?api_key=[key]&offset="+offset,
dataType: 'jsonp',
success: function(results){
loaded += 20;
total = results.response.blog.posts;
if(total > loaded){
results.response.posts.forEach(function(post){
post.photos.forEach(function(photo){
$("#photos ul").append("<li class='"+post.tags.join(" ")+"'><img src='"+photo.alt_sizes[0].url+"'></li>");
$("#photos").imagesLoaded(function(){
$("#photos").masonry({
itemSelector: 'li'
});
});
});
});
if($("#photos ul").height() < $(window).height()){
getPhotos(loaded);
}
}
}
});
}
loaded = 0;
getPhotos(loaded);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
getPhotos(loaded);
}
});
</script>
What I've ended up doing is just using an iframe with a custom stylesheet appended to the head.
html:
<head>
<script src="http://[remote location]/frame.js"></script>
</head>
<body>
<div id="photos">
<iframe name="frame1" id="frame1" src="http://[tumblr]/archive" frameBorder="0"></iframe>
</div>
</body>
frame.js:
$(function(){
function insertCSS(){
var frm = frames['frame1'].document;
var otherhead = frm.getElementsByTagName("head")[0];
if(otherhead.length != 0){
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "http://[remote location]/frame.css");
otherhead.appendChild(link);
setTimeout(function(){$("#frame1").show();}, 200);
clearInterval(cssInsertion);
}
}
cssInsertion = setInterval(insertCSS, 500);
//setTimeout(insertCSS, 1000);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && $("#frame1").height() < 50000) {
$("#frame1").css("height", "+=1000px");
}
});
});
frame.css (stylesheet appended into iframe)
body{
overflow: hidden;
}
#nav_archive{
display: none;
}
.heading{
display: block !important;
}
.old_archive #content{
margin: 0 auto 0;
}
style.css (stylesheet on page where iframe is located)
#frame1{
border: none;
width: 100%;
height: 3000px;
overflow: hidden;
display: none;
}