I'm using pagedown on my website right now, and it's awesome so far, the only detail is
it's not a programming-oriented website, so I'd like to remove the 'code' button.
Is there a way I can do it? I tried using CSS to hide the buttons but the html has inline styles "left: xxx" which I can't change using CSS.
Thanks in advance!
If you open up Markdown.Editor.js, and scroll to approximately line 1360 (it varies depending upon which version you're using), you'll see an area with:
group1 = makeGroup(1);
buttons.bold = makeButton("wmd-bold-button", "Bold - Ctrl+B", "icon-bold", bindCommand("doBold"), group1);
buttons.italic = makeButton("wmd-italic-button", "Italic - Ctrl+I", "icon-italic", bindCommand("doItalic"), group1);
group2 = makeGroup(2);
buttons.link = makeButton("wmd-link-button", "Link - Ctrl+L", "icon-link", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, false);
}), group2);
buttons.quote = makeButton("wmd-quote-button", "Blockquote - Ctrl+Q", "icon-blockquote", bindCommand("doBlockquote"), group2);
buttons.code = makeButton("wmd-code-button", "Code Sample - Ctrl+K", "icon-code", bindCommand("doCode"), group2);
buttons.image = makeButton("wmd-image-button", "Image - Ctrl+G", "icon-picture", bindCommand(function (chunk, postProcessing) {
return this.doLinkOrImage(chunk, postProcessing, true);
}), group2);
So on and so forth. Simply quote out the buttons you don't want.
Alternatively, you can simply leave out the entire wmd-buttons div and only use the editor and preview components.
Search for doClick(buttons.code)in the code and comment it out
If you look at the makeButton function:
var makeButton = function (id, title, XShift, textOp) {
var button = document.createElement("li");
button.className = "wmd-button";
button.style.left = xPosition + "px";
xPosition += 25;
var buttonImage = document.createElement("span");
button.id = id + postfix;
button.appendChild(buttonImage);
button.title = title;
button.XShift = XShift;
if (textOp)
button.textOp = textOp;
setupButton(button, true); // <--- LOOK HERE
buttonRow.appendChild(button);
return button;
};
The true that is being passed in the call of the setupButton function is the isEnabled flag. What I did was just created another makeButton function and put it right under the first one. The only thing that I changed was that isEnabled flag to false. Then I changed to button.code = makeButton(...) to button.code = makeButton2(...).
buttons.code = makeButton2("wmd-code-button", getString("code"), "-80px", bindCommand("doCode"));
Related
I am using Tabulator 5.x. I have a table with header filtering. The column in question is the last column "Transcribed". Is there a way to have the typical down arrow on the right side of the select box that shows the end user it is a drop down list similar to if you were using option in html? Rather than having to click on it filter field to see the choices.
I looked in documentation but do not see any examples using a down arrow. I also looked in the CSS, but did not anything if indeed it was there.
var table = new Tabulator("#transcription-table", {
height:"640px",
layout:"fitDataStretch",
ajaxURL:"get_transcriptions.php",
columns:[
{title:"ID", field:"id", headerSort:false, visible:false},
{title:"Song Title", field:"songtitle", width:350, sorter:"string", headerFilter:"input"},
{title:"Artist / Group", field:"artistgroup", widthGrow:1.5 ,sorter:"string", headerFilter:"input"},
{title:"Transcribed", field:"transcribed", widthGrow:1.2, sorter:"string", headerTooltip:"Transcribed into music notation", editor:"select", editorParams:{values:{"Yes":"Yes", "No":"No"}}, headerFilter:true, headerFilterParams:{values:{"Yes":"Yes", "No":"No", "":""}}},
]
});
Thank you.
You can create your own editor by extending editor module as
Tabulator.extendModule("edit", "editors", {
selectwithdrop: function (cell, onRendered, success, cancel, editorParams) {
var cellValue = cell.getValue().toUpperCase(),
input = document.createElement("select");
Object.keys(editorParams.values).forEach((key) => {
let option = document.createElement("option");
option.text = editorParams.values[key];
option.value = key;
input.add(option);
});
input.style.padding = "10px";
input.style.width = "100%";
input.style.boxSizing = "border-box";
input.style.border = "1px solid #4b4b4b";
input.style.borderRadius = "5px";
input.style.outline = "none";
input.value = cellValue;
// onRendered(function () {
// input.focus();
// input.style.height = "100%";
// });
function onChange(e) {
success(input.value);
}
//submit new value on blur or change
input.addEventListener("change", onChange);
// input.addEventListener("blur", onChange);
//submit new value on enter
return input;
},
});
Working Demo CodeSandBox
I need to implement this feature for users and I was wondering if the tabulator allows this behaviour.
Here is an example of what I mean: https://bryntum.com/examples/grid/bigdataset/ (right mouse click on any column to hide column)
Thanks in advance
This can be done using the HeaderMenu and rowContextMenu.
var headerMenu = function(){
var menu = [];
var columns = this.getColumns();
for(let column of columns){
let icon = document.createElement("i");
icon.classList.add("fas");
icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
let label = document.createElement("span");
let title = document.createElement("span");
title.textContent = " " + column.getDefinition().title;
label.appendChild(icon);
label.appendChild(title);
menu.push({
label:label,
action:function(e){
e.stopPropagation();
column.toggle();
if(column.isVisible()){
icon.classList.remove("fa-square");
icon.classList.add("fa-check-square");
}else{
icon.classList.remove("fa-check-square");
icon.classList.add("fa-square");
}
}
});
}
return menu;
};
Examples Here Tabulator
and here: jsfiddle
Text(
text = "Resend OTP",
fontSize = 20.sp,
color = Textfieldcolor,
style = TextStyle(textDecoration = TextDecoration.Underline)
)
//This is my code this text should be selectable once and then be disabled .
You can add the clickable modifier or can use the ClickableText:
var enabled by remember { mutableStateOf(true)}
ClickableText(
text = AnnotatedString(text) ,
onClick = {
if (enabled) {
enabled = false
text = "Disabled"
}
})
Like #Arpit mentioned it would be better to use a TextButton for this purpose.
But if you absolutely want to use Text, You can use following snippet.
#Composable
fun OneTimeClickableText(text : String, onClick : () -> Unit){
var enabled by rememberSaveable{ mutableStateOf(true)}
Text(
modifier = Modifier
.clickable(enabled = enabled) {
enabled = false
onClick()
},
text = text
)
}
That said I this code is strictly for one-time clickable text. I won't recommend using it for something like OTP button; as user won't be able to click it unless they restart your app. You can pull the enabled variable and manage it from outside(e.g. keeping it disabled for certain amount of time rather than permanently).
Just checking to see if there is a very simple way to make the view header fixed so that as you page down in the view in XPages, the header stays where it is. position=Fixed is not a property of xp:viewColumnHeader.
If you want to add the attribute of position to xp:viewColumnHeader you can use the attrs property to do that (works on 8.5.3). You code would look something like this:
<xp:viewColumnHeader ......>
<xp:this.attrs>
<xp:attr name="position" value="fixed"></xp:attr>
</xp:this.attrs>
</xp:viewColumnHeader>
But I don't think that alone would do the trick. Some time back I created a CSS snippet to make floating Banner, Title Bar and Place Bar in Application Layout control of Extension Library. You can get some ideas from that.
yes, it is possible, but requires some JavaScript coding.
I solved it for a customer recently using with the following code. The basic idea is to geht the width of the columns out of the first line of TDs, then apply this with to the THs ad set the THs to fixed afterwards.
You need to run this function after a partial update, too. Good luck.
var fixTableHeaders = function() {
var thead = dojo.query("thead")[0];
if (!thead) return;
thead.style.position = "static";
var THs = dojo.query('.xspDataTable th');
var firstTDs = dojo.query('.xspDataTable tr:first-child td');
var secondTDs = null;
if (firstTDs.length < 2) {
// categorized view, first line is a category with only one cell
// -> we need the second line
secondTDs = dojo.query('.xspDataTable tr:nth-child(2) td');
}
var w = 0;
for (var i = 0; i < THs.length; i++) {
w = dojo.coords(THs[i], true).w;
// console.log(i+" w="+w);
THs[i].style.width = (w)+"px";
if (firstTDs[i]) {
//if (secondTDs && secondTDs[i]) secondTDs[i].style.width = w+"px";
//else firstTDs[i].style.width = w+"px";
firstTDs[i].style.paddingTop = "3em";
}
}
thead.style.position = "fixed";
}
dojo.addOnLoad(fixTableHeaders);
I saw some jQuery code the other day that could make a Table Header fixed. Don't remember where it was but something that can help you should be out there.
My extension adds a context menu whenever a user selects some text on the page.
Then, using info.selectionText, I use the selected text on a function executed whenever the user selects one of the items from my context menu. (from http://code.google.com/chrome/extensions/contextMenus.html)
So far, all works ok.
Now, I got this cool request from one of the extension users, to execute that same function once per line of the selected text.
A user would select, for example, 3 lines of text, and my function would be called 3 times, once per line, with the corresponding line of text.
I haven't been able to split the info.selectionText so far, in order to recognize each line...
info.selectionText returns a single line of text, and could not find a way to split it.
Anyone knows if there's a way to do so? is there any "hidden" character to use for the split?
Thanks in advance... in case you're interested, here's the link to the extension
https://chrome.google.com/webstore/detail/aagminaekdpcfimcbhknlgjmpnnnmooo
Ok, as OnClickData's selectionText is only ever going to be text you'll never be able to do it using this approach.
What I would do then is inject a content script into each page and use something similar to the below example (as inspired by reading this SO post - get selected text's html in div)
You could still use the context menu OnClickData hook like you do now but when you receive it instead of reading selectionText you use the event notification to then trigger your context script to read the selection using x.Selector.getSelected() instead. That should give you what you want. The text stays selected in your extension after using the context menu so you should have no problem reading the selected text.
if (!window.x) {
x = {};
}
// https://stackoverflow.com/questions/5669448/get-selected-texts-html-in-div
x.Selector = {};
x.Selector.getSelected = function() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
$(document).ready(function() {
$(document).bind("mouseup", function() {
var mytext = x.Selector.getSelected();
alert(mytext);
console.log(mytext);
});
});
http://jsfiddle.net/richhollis/vfBGJ/4/
See also: Chrome Extension: how to capture selected text and send to a web service