With the Kendo UI editor a user can click the "insert image" button and the imagebrowser will popup.
I'd like to have the imagebrowser open when a user clicks a div - external from the editor.
How can I do this? Is it possible?
I've tried searching for ages but can't seem to find any answers.
I forgot to come back to update this post but in the end, I used the Kendo Editor and hid everything. Here's what I did and hopefully this helps someone else one day:
.k-editable-area
{
display: none;
}
.k-editor
{
width: 4% !important;
height: 28px !important;
border: none !important;
background-image: none;
display: none;
margin-left: 10px;
}
.k-window
{
display: none;
}
Javascript:
$(document).ready(function () {
$("#imgBrowser").kendoEditor({
tools: [
"insertImage"
],
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/ImageBrowser/Read",
destroy: {
url: "/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/ImageBrowser/Thumbnail",
uploadUrl: "/ImageBrowser/Upload",
imageUrl: "/ImageBrowser/Image?path={0}"
},
change: function () {
//this.value(); //Selected image URL
},
select: function () {
}
}, execute: function (e) {
},
change: function () {
},
select: function () {
//this.value(); //Selected image URL but each selection is appended... ie:
<img /> <img /> <img /> ... you need to replace all except the last one.
SetSelectedImage(this.value());
}
});
});
Then I added a link which when clicked, triggers the image browser:
<a id="imgBrowser"></a><a id="addImage" style="display: inline; cursor: pointer;
float: left; font-weight: bold">+ Add image</a>
And finally, I added the javascript to do the triggering:
$("#addImage").click(function () {
$(".k-tool-icon").trigger('click');
});
Check this out. On focus of your text box, call below jQuery script.
$('#editor').parent().parent().parent().parent().parent().parent().find('.k-insertImage').click();
you can check on this link: kendo editor.
Just call this script from your browser console.
Related
I'm making a Firefox extension to open sites on a sidebar. It mostly works except for some sites like mastodon.social and github, I keep bumping into the Cross-Origin Resource Sharing (CORS) policies, which restricts other websites from displaying their content in iframes for security reasons.
How can I avoid that? Just to clarify, I'm not trying to circumvent it, I just want the site to open on my sidebar normally. Other extensions like Webpage Sidebar Viewer show the sites without any issue at all. This is my first extension, so I'm struggling to find the issue.
Here is my code:
MANIFEST.JSON
{
"manifest_version": 2,
"name": "Website Viewer",
"version": "1.0",
"description": "A website viewer with a bookmark feature",
"icons": {
"48": "icons/icon48.png"
},
"sidebar_action": {
"default_title": "Website Viewer",
"default_panel": "panel.html",
"default_icon": {
"48": "icons/icon48.png"
}
},
"permissions": [
"activeTab",
"storage",
"<all_urls>"
]
}
PANEL.HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Viewer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sites"><button id="bookmark">+</button></div>
<script src="panel.js"></script>
</body>
</html>
STYLE.CSS
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
#bookmark {
display: block;
border: 1px;
border-radius:5px;
border-color: gray;
}
#sites {
display: flex;
flex-wrap: wrap;
margin: 10px;
overflow-y: auto;
height: auto;
width: 100%;
}
button {
cursor: pointer;
margin: 5px;
padding: 0;
width: 16px;
height: 16px;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
PANEL.JS
let iframe = null;
function showWebsite(url) {
// If the iframe has not been created yet, create it and add it to the page
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'website-iframe');
document.body.appendChild(iframe);
}
// Set the src attribute of the iframe to the URL of the website to display
iframe.src = url;
// Listen for the iframe's load event and set its sandbox attribute to allow scripts and forms
iframe.addEventListener('load', () => {
iframe.setAttribute('sandbox', 'allow-scripts allow-forms');
});
}
function addBookmark() {
browser.tabs.query({currentWindow: true, active: true}).then((tabs) => {
var site = tabs[0].url;
// If the site is not already in the list of bookmarks, add it
if (!document.getElementById(site)) {
var item = document.createElement('button');
item.setAttribute('id', site);
item.style.backgroundImage = `url("https://s2.googleusercontent.com/s2/favicons?domain=${site}")`;
item.addEventListener('click', () => {
showWebsite(site);
});
document.getElementById('sites').appendChild(item);
browser.storage.local.set({
[site]: true
});
}
});
}
function initialize() {
browser.storage.local.get().then((items) => {
Object.keys(items).forEach((key) => {
var item = document.createElement('div');
item.setAttribute('id', key);
item.textContent = key;
item.addEventListener('click', () => {
showWebsite(key);
});
document.getElementById('sites').appendChild(item);
});
});
}
document.addEventListener('DOMContentLoaded', initialize);
document.getElementById('bookmark').addEventListener('click', addBookmark);
My extension should open any website on the sidebar. Instead, I got an error saying that security measures that avoid loading the site altogether.
I'm using Magnific popup to display an upload form where the user can select multiple images to upload and preview them before submitting the form, I let the user preview the images plus add a from inputs underneath the image when he clicks on it to enter the caption and alt for it, here's the code that I have ...
(function() {
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
open: function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
},
beforeClose: function() {
// $("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
Now everything works fine the first time, but when I close the popup and re-open it again, something wrong happens in the image previewer, it duplicates the images I choose and sometimes doesn't even show the image if it were the last image I choose before closing.
I tried to set all the variables before closing the popup and clear the image preview ul element, but that didn't help.
I need your help guys, what am I doing wrong here?
EDIT
I gave the form itself an id of "fileForm" and tried to reset the whole form and empty the ul.imagePreview before closing the popup with this code ...
$("#fileForm")[0].reset();
$("ul.imagePreview").empty();
But still no luck, it still duplicated any image I upload the second time after closing the popup and opening it again !!
need help here.
You are binding more and more listeners to the same event:
Your form always exists in your document even when the popup is closed, you just hide it most of the time (using the class mfp-hide).
Each time you open the popup, the callback "open" is called, which bind a function to the change event of your input, and this callback do the preview stuff.
But if you open the popup twice, it will bind again the same function to the same event on the same input. That's why you have duplicate: the code is called twice.
Move all your binding outside your callback so that they will be done once:
(function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
beforeClose: function() {
///$("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
$("#fileForm")[0].reset();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#" id="fileForm">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
I am doing a jQuery animation of 3 boxes, the effect is like the jsfiddle link below:
Fiddle
Basically when clicked on each color box the corresponding box will enlarge to width 100% taking up all width. And when clicking close (yes, it is not functioning well) the box will shrink back to its original position.
What I encountered now is
When enlarging the pink or the blue box, sometimes the yellow box on RHS will jump to next row (but just a very quick jump, i dunno why). It happens only in Chrome, looks perfect in Firefox.
When clicking the close button, it will trigger the yellow box to
enlarge (supposed it has taken up 0% of width? Why the bind click
still works?
Could someone advise how I should solve these and is there a better way for me to achieve the same results?
HTML
<div class="animateWrap">
<div id="btn_howtojoin" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_judgecriteria" class="btn_group">
<div class="btn_close"></div>
<div class="content">Content</div>
</div>
<div id="btn_prizeinfo" class="btn_group">
<div class="btn_close">Close</div>
<div class="content">Content</div>
</div>
<div class="clear00"></div>
JS
$(function () {
$('#btn_judgecriteria').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_howtojoin').animate({
width: "0%"
});
});
$('#btn_howtojoin').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$(this).find('.content').animate({
top: "40px"
});
$('.btn_close').show();
});
$('#btn_prizeinfo').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('#btn_prizeinfo').bind('click', function () {
$(this).animate({
width: "100%"
}, function () {
$(this).animate({
height: "400px"
});
$('.btn_close').show();
});
$('#btn_howtojoin').animate({
width: "0%"
});
$('#btn_judgecriteria').animate({
width: "0%"
});
});
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
});
});
CSS
.btn_group {
width: 33.3%;
height: 220px;
float: left;
cursor: pointer;
position:relative;
}
#btn_howtojoin {
background: #fcb2b2 ;
width: 33.4%;
}
#btn_judgecriteria {
background: #7acccb ;
}
#btn_prizeinfo {
background: #f1c348;
}
.btn_group .content {
position:absolute;
top:-400px;
left:40px;
}
.btn_close {
position:absolute;
top:20px;
right:20px;
color:#FFF;
width: 40px;
height:62px;
display:none;
}
Problem 1 maybe due to rounding up calculation of 33.333% which make the total width of 3 container slightly larger than 100%. Changing them to pixel might help.
Problem 2 is due to event bubbling, it will trigger click event of .btn_group after .btn_close
Add event.stopPropagation(); will help solving this.
$('.btn_close').bind('click', function () {
$('.btn_group').animate({
width: "33.333%",
height: "220px"
});
$('.btn_group .content').hide();
$('.btn_close').hide();
event.stopPropagation();
});
Below is my KendoUI tree view, I am using templates to show edit link on each node, but I am getting this error: "Uncaught TypeError: Cannot read property 'replace' of undefined "
#section scripts{
<script src="~/scripts/kendo.all.min.js"></script>
<script type="text/javascript">
var territory = new kendo.data.HierarchicalDataSource({
transport: {
read: {
type:'POST',
url: rootURL + "Territory/AllTerritories",
dataType: "json"
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren",
children: territory
}
}
});
$("#treeview").kendoTreeView({
dataSource: territory,
dataTextField: "Name",
dataValueField: "ID",
template: kendo.template($("#treeview-template").html())
});
</script>
}
<script id="treeview-template" type="text/kendo-ui-template">
#
<a class='show-link' href='\#'><image src="/Content/images/select2.png"></a> #
</script>
<style scoped>
#territoryTree {
text-align: center;
}
#treeview .k-sprite {
background-image: url("../content/default/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.demo-section {
display: inline-block;
vertical-align: text-bottom;
min-width: 320px;
min-height: 300px;
text-align: left;
margin: 0 2em;
}
</style>
Any solutions?? Please help
jquery can't find the element with Id #treeview-template when you say
kendo.template($("#treeview-template").html())
then first it will try to find the html element with the Id #treeview-template and then it will move forward. Try the F12 and the console by writing $("#treeview-template").html() in the console see if it can or cannot find the element
This is a newbie question about Kendo UI draggable. I tried to look at their examples but cant really get it.
I want to make a div draggable to another position. When setting this up I can drag the div, but it disappears when released, I want it to stay in the new place. I have tried this but it doesnt work.
$('.draggable').kendoDraggable({
axis: "x",
hint: Hint,
dragstart: DragStart,
drag: Drag,
dragend: DragEnd
});
function Hint (element) {
console.log("hint");
return element;
}
function DragStart(){
console.log("dragstart");
}
function Drag(){
console.log("draging");
}
function DragEnd(event) {
console.log("dragend");
console.log(event.x.location);
$('.draggable').css({'left': event.x.location});
}
I think this is what you want, and I made a Demo for it.
$('.draggable').kendoDraggable({
hint : function (original) {
return original.clone().addClass("ob-clone");
},
dragstart: function (e) {
$(e.target).addClass("ob-hide");
}
});
$('body').kendoDropTarget({
drop: function (e) {
var pos = $(".ob-clone").offset();
$(e.draggable.currentTarget)
.removeClass("ob-hide")
.offset(pos);
}
})
.draggable {
position: absolute;
background: red;
width: 100px;
height: 100px;
vertical-align: middle;
}
.ob-hide {
display: none;
}
.ob-clone {
background: #cccccc;
}
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
<div class="draggable">
Drag 1
</div>
<div class="draggable">
Drag 2
</div>
</div>
jsFiddle: http://jsfiddle.net/Wayou/fjrcw/