I'm using Redactor II as text editor for a CMS I'm developing, the problem is that a little function isn't working and I don't know why, because everything was installed fine and was working on previous website that I used Redactor.
Even the Table plugin, and line button aren not working. This an example of a plugin I'm making.
var grid_items = {};
$.Redactor.prototype.grids = function()
{
return {
init: function()
{
grid_items.grid01 = { title: '20-80', func: this.grids.insertGrid };
grid_items.grid02 = { title: '20-20-60', func: this.grids.insertGrid };
var button = this.button.add('grids', '<i class="fa fa-table"></i>');
this.button.addDropdown(button, grid_items);
$redactor = this;
},
insertGrid: function(button)
{
var grid = grid_items[button].title;
var grids = grid.split('-');
var html = '';
$.each(grids, function(){
html += '<p>123</p>';
});
this.insert.html(html);
}
};
};
The problem is on the last line, this.insert.html() will not work, but this.insert.set() works. They do different things as stated in the api documentation.
This is not my plugin problem, since the official plugins that use this, are not working too...
Anyone faced this before ? What am I missing here?
Related
I have a table with two columns: name and code. I have created a simple custom editor for code column. The idea is, when user double clicks on the cell, the custom dialog with code editor opens. I have implemented it and posted the simplified example here:
Link to plunker
However, I have one issue with copy/paste functionality: if I use my editor, edit some code for the cell, press “Save”, the "code" column value seems to be correctly saved. But when I select this cell and press Ctrl+C, the value is not copied.
The question is: is it a bug in handsontable or I have just missed something, while implementing the custom editor? How should I change my custom editor to make the copy-paste functionality working properly.
The code of editor:
var ScriptEditor = Handsontable.editors.TextEditor.prototype.extend();
ScriptEditor.prototype.getValue = function () {
return this.TEXTAREA.value;
};
ScriptEditor.prototype.setValue = function (value) {
this.TEXTAREA.value = value;
};
ScriptEditor.prototype.open = function () {
var self = this;
this.instance.deselectCell();
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
ScriptEditor.prototype.focus = function () {
Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
};
ScriptEditor.prototype.close = function () {
};
var openEditor = function (codeToEdit) {
var deferred = $q.defer();
var dialog = ngDialog.open({
template: 'editorTemplate.htm',
className: 'ngdialog-theme-default',
controllerAs: "editor",
controller: function () {
var vm = this;
vm.inputCode = codeToEdit;
vm.submitChanges = function () {
dialog.close();
deferred.resolve(vm.inputCode);
};
}
});
return deferred.promise;
};
Specs:
Angular version: 1.6.1
Handsontable version: 0.31.2
Chrome version: Version 58.0.3029.81
I have posted an issue on handsontable github repositiory and received there the answer. Link to issue: here
Solution:
Like the member of handsontable team has suggested, in open function before opening my dialog I call this.instance.deselectCell();. However, with this solution, the problem was, that if I press Enter my code editor dialog, not the new line is inserted, but the next cell in handsontable is selected. Then, I have wrappped the call in setTimeout() and it is worked.
Link to plunker:
here
The working code is:
ScriptEditor.prototype.open = function () {
var self = this;
setTimeout(function () {
self.instance.deselectCell();
});
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
I am trying to change this demo:
http://maxwells.github.io/bootstrap-tags.html
into a responsive version in which I can set it to readOnly and remove it from readOnly as I like. This code:
var alltags = ["new tag", "testtag", "tets", "wawa", "wtf", "wtf2"];
$(document).ready(function() {
var tagbox = $('#my-tag-list').tags({
suggestions: alltags
});
var tagenable = true;
$('#my-tag-list').focusout(function() {
if (tagenable) {
tagbox.readOnly = true;
$('#my-tag-list').empty();
tagbox.init();
tagenable = false;
}
});
$('#my-tag-list').click(function() {
if(!tagenable) {
tagbox.readOnly = false;
$('#my-tag-list').empty();
tagbox.init();
tagenable = true;
}
});
});
seems to work fairly well, it makes everything readonly after focusout and editable when I click it. However, the editing does not work since I cannot insert new tags nor delete them (seems to be like event handling was lost or something like that).
I am guessing that emptying the #my-tag-list div is causing this, but I cannot yet find a way to use for instance "detach" instead that removes everything inside (not the element itself) and putting it back in again.
I tried to make a JS Fiddle, but it isn't really working so well yet:
http://jsfiddle.net/tomzooi/cLxz0L06/
The thing that does work is a save of the entire website, which is here:
https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0
this link has the unminimized JS of the bootstrap-tags stuff I am using:
https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js
So far I managed to do this with some modifications of the bootstrap javascript code. I use two different tagbox which I hide and unhide with some click events.
var tagbox = $('#my-tag-list').tags({
suggestions: alltags,
tagData: tmp_tags,
afterAddingTag: function(tag) { tagboxro.addTag(tag); },
afterDeletingTag: function(tag) {tagboxro.removeTag(tag); }
});
var tagboxro = $('#my-tag-listro').tags({
suggestions: alltags,
tagData: tmp_tags,
readOnly: 'true',
tagSize: 'sm',
tagClass: 'btn-info pull-right'
});
$(document).mouseup(function (e) {
var container = $("#my-tag-list");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) { // ... nor a descendant of the container
if (tagsave) {
$("#my-tag-listro").show();
$("#my-tag-list").hide();
var tags = tagbox.getTags();
$.post("%basedir%/save.php", {
editorID:"new_tags",
tags:tags
}, function(data,status){
//alert("Data: " + data + "\nStatus: " + status);
});
tagsave = false;
}
}
});
$('#my-tag-listro').click(function() {
tagsave = true;
//$(".tag-list").toggle();
$("#my-tag-list").show();
$("#my-tag-listro").hide();
});
I had to modify the code of bootstrap-tags.js to allow for this since it normally deletes all of the usefull functions when it is considered readonly in the init function:
if (this.readOnly) {
this.renderReadOnly();
this.removeTag = function(tag) {
if (_this.tagsArray.indexOf(tag) > -1) {
_this.tagsArray.splice(_this.tagsArray.indexOf(tag), 1);
_this.renderReadOnly();
}
return _this;
};
this.removeTagClicked = function() {};
this.removeLastTag = function() {};
this.addTag = function(tag) {
_this.tagsArray.push(tag);
_this.renderReadOnly();
return _this;
};
this.addTagWithContent = function() {};
this.renameTag = function() {};
return this.setPopover = function() {};
}
would be awesome if this feature was incorporated in a somewhat less hacky way though :)
I know this is a simple question but I have been playing around with no success.
I have the following code
<a id="mute"><i class="icon-volume"></i></a>
I want to be able to toggle the class .icon-volume to .icon-volume-off when clicking.
After anyone who can help!
Thanks
Try
var a = document.getElementById("mute");
a.onclick = function(e){
var cl = a.firstChild.getAttribute('class');
if(cl == "icon-volume"){
a.firstChild.setAttribute('class','icon-volume-off');
}else{
a.firstChild.setAttribute('class','icon-volume');
}
};
See demo here
You could use jQuery
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume')) {
el.removeClass('icon-volume');
el.addClass('icon-volume-off');
} else {
el.removeClass('icon-volume-off');
el.addClass('icon-volume');
}
});
Or you could just add the icon-volume-off class and make sure its css takes precedence over the icon-volume class
$('#mute').on('click', function () {
var el = $(this).find('i');
if (el.hasClass('icon-volume-off')) {
el.removeClass('icon-volume-off');
} else {
el.addClass('icon-volume-off');
}
});
WARNING: This is a (relatively) new attribute. Check the compatibility table from Mozilla's Developer Network before you proceed. If IE 9 (or below) is important to you, then this is not the answer you're looking for.
DOM elements have a property called classList. The 3 methods you should familiarize yourself with are add, remove, and toggle.
In your case:
var el = document.querySelector('i');
el.onclick = function () {
el.classList.toggle('icon-volume');
el.classList.toggle('icon-volume-off');
}
Pretty simple.
Just started with knockout and need to implement page change warning. Following is the code snippet. I just need an alert pop up as warning if any change is made on the page.
function parseViewModel() {
var viewModel = JSON.parse(getState());
viewModel.checking = ko.observable(false);
viewModel.Slider = new ko.observable(100 - viewModel.Slider);
viewModel.CausalsList = buildHierarchy(viewModel.Causals);
viewModel.Causals["-1"] = "Total Marketing Budget";
viewModel.GeographiesList = ko.observableArray(gl);
viewModel.Geographies["0"] = "All Geographies";
viewModel.ProductsList = ko.observableArray(pl);
viewModel.Products["0"] = "All Products";
.
.
.
return viewModel;
}
function bindModel() {
model = parseViewModel();
ko.dirtyFlag = function (root, isInitiallyDirty) {
var result = function () { },
_initialState = ko.observable(ko.toJSON(root)),
_isInitiallyDirty = ko.observable(isInitiallyDirty);
result.isDirty = ko.computed(function () {
return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
});
result.reset = function () {
_initialState(ko.toJSON(root));
_isInitiallyDirty(false);
};
return result;
};
model.dirtyFlag = new ko.dirtyFlag(model);
model.isDirty.subscribe(function () {
alert("Page change warning!");
});
ko.applyBindings(model, $('#const').get(0));
ko.applyBindings(model, $('#buttonDiv').get(0));
}
Referred Ryan Niemeyer's blog. Unfortunately, it's not working anymore. Any insights please?
You would want to subscribe to model.dirtyFlag.isDirty in your case rather than model.isDirty.
One way to do is by using customBinding. I'm not that familiar with KO either but this might be something you're interested on.
Basically you would do is :-
ko.bindingHandlers.myFunction = {
update : function(){
//do something
}
}
http://knockoutjs.com/documentation/custom-bindings.html
And call it on your element using :-
<h1 data-bind="myFunction:{}"></h1>
Also, a jsfiddle to show how it works. (If you change the value of the First Name and focus out of it then the customBinding gets triggered. )
http://jsfiddle.net/3vuTk
Not sure if it's the best practice though.
I am using the Ink.UI.Modal Class to fire up a modal with a form. The problem is that I need to empty the container of the modal once the modal is closed (onDismiss) and I cannot manage to do it. Currently I am doing it like this:
var modal = new Ink.UI.Modal('selector').onDismiss(function()
{
jQuery('.dynamic_container').html('');
});
But it doesn't work (code is not being executed)
I have also tried:
modal.onDismiss = (function() {
jQuery('.dynamic_container').html('');
});
but it doesn't work either.
Can anyone help me? Thank you in advance.
you need to provide a options-object with the dismiss property:
var modal = new Ink.UI.Modal('selector', {
onDismiss: function () {
jQuery('.dynamic_container').html('');
}
});
to make it a little bit more readable, this could also be written like this:
var yourOpts = {
onDismiss: function () {
jQuery('.dynamic_container').html('');
}
};
var modal = new Ink.UI.Modal('selector', yourOpts);