针对已编辑的文本显示Pop [英] Display Pop with respect to edited Text
本文介绍了针对已编辑的文本显示Pop的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Onclick文本，我们在文本中的最后一个单词之后显示弹出窗口.
我们正在使用以下逻辑:left = layer.width + layer.x
代码:
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
用户可以从侧面编辑文本....
问题:
用户编辑文本后，弹出窗口将固定在 Link1 ....
要求:
弹出式窗口应该在已编辑文本的最后一个单词之后显示为 Link2 ....
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// json file
let jsonData = {
"layers": [{
"x": 0,
"height": 450,
"layers": [{
"x": 0,
"layers": [{
"x": 57,
"y": 33,
"src": "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf",
"type": "text",
"size": 67,
"text": "First Line",
"name": "edit_good"
},
{
"x": 121,
"y": 99,
"src": "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf",
"type": "text",
"size": 67,
"text": "Second line",
"name": "edit_good_1"
}
],
}, ],
"width": 500,
"name": "L1"
}]
};
$(document).ready(function() {
// get the text from json - ignore it
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y,
name: layer.name
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y,
name
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y),
name: (name)
});
});
}
}
});
return arr;
}
function json(data)
{
var width = 0;
var height = 0;
let arr = getAllSrc(data.layers);
let layer1 = data.layers;
width = layer1[0].width;
height = layer1[0].height;
let counter = 0;
let table = [];
for (let {
src,
x,
y,
name
} of arr) {
$(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
if (name.indexOf('mask_') !== -1) {
var imageUrl1 = imageUrl;
} else {
var imageUrl1 = '';
}
var mask = $(".container").mask({
imageUrl: imageUrl1,
maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src,
onMaskImageCreate: function(img) {
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[target];
mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
};
counter++;
// get the text end
}
drawText(data);
}
json(jsonData);
}); // end of document ready
const fonts = []; // caching duplicate fonts
function drawText(layer) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {\n" +
"\tfont-family: \"" + layer.font + "\";\n" +
"\tsrc: url(" + url + ") format('truetype');\n" +
"}");
}
// Below is POP UP Code
const lightId = 'light' + layer.name
const lightIdString = '#' + lightId
// Fetch the text and display in page
$('.container').append(
'<a id ="' + layer.name + '" onclick="document.getElementById(\'' + lightId + '\').style.display=\'block\';document.querySelector(\'.white_content:not(' + lightIdString + ')\').style.display=\'none\';" ' +
'<div class="textcontainer" contenteditable="true" ' +
'style="' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'font-size: ' + layer.size + 'px; ' +
'">' + layer.text + '</div></a>' +
'<div id="light' + layer.name + '" class="white_content" style="' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" onclick="document.getElementById(\'light' + layer.name + '\').style.display=\'none\';">Close</a></div> <div>'
);
// pop up left position :
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
}
}
// extempl code end
// ignore below code
(function($) {
var JQmasks = [];
$.fn.mask = function(options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
maskImageUrl: undefined,
imageUrl: undefined,
scale: 1,
id: new Date().getUTCMilliseconds().toString(),
x: 0, // image start position
y: 0, // image start position
onMaskImageCreate: function(div) {},
}, options);
var container = $(this);
let prevX = 0,
prevY = 0,
draggable = false,
img,
canvas,
context,
image,
timeout,
initImage = false,
startX = settings.x,
startY = settings.y,
div;
container.updateStyle = function() {
return new Promise((resolve, reject) => {
context.beginPath();
context.globalCompositeOperation = "source-over";
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
div.css({
"width": image.width,
"height": image.height
});
resolve();
};
});
};
};
}(jQuery));
.container {
background: gold;
position: relative;
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
.masked-img {
overflow: hidden;
position: relative;
}
.textcontainer {
position: absolute;
text-align: center;
color: #FFF
}
.textcontainer:hover {
background: red;
padding: 1px;
border-style: dotted;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none">
<div class="container">
</div>
笔: https://codepen.io/kidsdial/pen/wZjqyv
小提琴: https://jsfiddle.net/kidsdial1/na7w83dc/1/
解决方案
无需执行任何操作，只需在代码上添加timeInterval，以便在更改文本时始终进行检查
删除此代码
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
并添加此代码
setInterval(function() {
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
}, 100);
您的问题已解决，现在您的方框分别遵循您的代码
Onclick Text, we are displaying Pop Up after the last word in a Text....
We are using this logic : left = layer.width + layer.x
Code :
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
User can edit the text from their side....
Issue :
Once user edit text , Pop up is fixed in same place as in Link1....
Requirement :
Pop up should display after the last word of edited text as Link2....
var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";
// json file
let jsonData = {
"layers": [{
"x": 0,
"height": 450,
"layers": [{
"x": 0,
"layers": [{
"x": 57,
"y": 33,
"src": "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf",
"type": "text",
"size": 67,
"text": "First Line",
"name": "edit_good"
},
{
"x": 121,
"y": 99,
"src": "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf",
"type": "text",
"size": 67,
"text": "Second line",
"name": "edit_good_1"
}
],
}, ],
"width": 500,
"name": "L1"
}]
};
$(document).ready(function() {
// get the text from json - ignore it
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y,
name: layer.name
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y,
name
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y),
name: (name)
});
});
}
}
});
return arr;
}
function json(data)
{
var width = 0;
var height = 0;
let arr = getAllSrc(data.layers);
let layer1 = data.layers;
width = layer1[0].width;
height = layer1[0].height;
let counter = 0;
let table = [];
for (let {
src,
x,
y,
name
} of arr) {
$(".container").css('width', width + "px").css('height', height + "px").addClass('temp');
if (name.indexOf('mask_') !== -1) {
var imageUrl1 = imageUrl;
} else {
var imageUrl1 = '';
}
var mask = $(".container").mask({
imageUrl: imageUrl1,
maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src,
onMaskImageCreate: function(img) {
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[target];
mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
};
counter++;
// get the text end
}
drawText(data);
}
json(jsonData);
}); // end of document ready
const fonts = []; // caching duplicate fonts
function drawText(layer) {
if (layer.type === 'image') return;
if (!layer.type || layer.type === 'group') {
return layer.layers.forEach(drawText)
}
if (layer.type === 'text') {
const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src;
if (!fonts.includes(url)) {
fonts.push(url);
$("style").prepend("@font-face {\n" +
"\tfont-family: \"" + layer.font + "\";\n" +
"\tsrc: url(" + url + ") format('truetype');\n" +
"}");
}
// Below is POP UP Code
const lightId = 'light' + layer.name
const lightIdString = '#' + lightId
// Fetch the text and display in page
$('.container').append(
'<a id ="' + layer.name + '" onclick="document.getElementById(\'' + lightId + '\').style.display=\'block\';document.querySelector(\'.white_content:not(' + lightIdString + ')\').style.display=\'none\';" ' +
'<div class="textcontainer" contenteditable="true" ' +
'style="' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' +
'font-size: ' + layer.size + 'px; ' +
'">' + layer.text + '</div></a>' +
'<div id="light' + layer.name + '" class="white_content" style="' +
'left: ' + layer.x + 'px; ' +
'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" onclick="document.getElementById(\'light' + layer.name + '\').style.display=\'none\';">Close</a></div> <div>'
);
// pop up left position :
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
}
}
// extempl code end
// ignore below code
(function($) {
var JQmasks = [];
$.fn.mask = function(options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
maskImageUrl: undefined,
imageUrl: undefined,
scale: 1,
id: new Date().getUTCMilliseconds().toString(),
x: 0, // image start position
y: 0, // image start position
onMaskImageCreate: function(div) {},
}, options);
var container = $(this);
let prevX = 0,
prevY = 0,
draggable = false,
img,
canvas,
context,
image,
timeout,
initImage = false,
startX = settings.x,
startY = settings.y,
div;
container.updateStyle = function() {
return new Promise((resolve, reject) => {
context.beginPath();
context.globalCompositeOperation = "source-over";
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
div.css({
"width": image.width,
"height": image.height
});
resolve();
};
});
};
};
}(jQuery));
.container {
background: gold;
position: relative;
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
.masked-img {
overflow: hidden;
position: relative;
}
.textcontainer {
position: absolute;
text-align: center;
color: #FFF
}
.textcontainer:hover {
background: red;
padding: 1px;
border-style: dotted;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none">
<div class="container">
</div>
Pen : https://codepen.io/kidsdial/pen/wZjqyv
Fiddle : https://jsfiddle.net/kidsdial1/na7w83dc/1/
解决方案
Nothing to do, simply add timeInterval on your code, so it check always when you change text
Remove this code
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
and add this code
setInterval(function() {
document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 9 + 'px'
}, 100);
your problem solved, now your box respectively follow your code
这篇关于针对已编辑的文本显示Pop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
