I want to add an additional checkbox next to Crop Image but I can't understand what need to write in javascript for rendering it and handling then. I couldn't find documentation with explaining that. I've tried to write code like that but it didn't work:
function addListBlockClassName (settings, name) {
if (name !== 'core/gallery') {
return settings
}
// new checkbox
settings.attributes.enableVoting = {
default: false,
type: 'boolean',
}
return settings
}
wp.hooks.addFilter(
'blocks.registerBlockType',
'my-plugin/class-names/list-block',
addListBlockClassName
)
You can add the additional checkbox on sidebar by using InspectorControls and Checkbox Control
Have a look at gallery block and learn how the are implementing things on sidebar via using InspectorControls. This can be complex so for easier implementation you can look at other core blocks of Gutenberg.
And this link can help you about how to use CheckboxControl.
In your above code you are just adding a hook which is changing the default class name of block gallery and that is not what you are asking. Please note that as per my knowledge you can't edit default core blocks (apart from very few things) unless you copy whole core block and add additional functionality into it.
Related
We are working on a custom version of the A-Frame inspector. The default inspector exposes all properties of all components of an entity for editing, but we wish to be able to specify at the component level which properties may be displayed to a user and render certain properties using custom widgets.
What is the best way to specify which properties to hide, rename, or use a custom widget (such as button or large-text-field)?
Here are some ideas we came up with:
Write custom logic in the editor that determines which fields to display depending on the component name. For example if component name is street then display custom widgets via custom logic inside of the modified inspector.
Define at the entity level with an attribute such as data-editor-hide-props="prop1, prop2, prop3"
Define at the component level. There are a few options for this:
A. Create a new method on every component that we want to have custom UI for. This method returns an object that indicates which fields should be displayed, hidden, and if certain field should use a custom widget.
B. Use the property name to indicate which custom widget should be rendered. For example, if a boolean field is named buttonFoo_Bar render a button widget (instead of a checkbox) with the display text "Foo Bar"
C. Add extra values to the schema to indicate rendering preference. Such as below:
AFRAME.registerComponent('street', {
schema: {
JSON: { type: 'string', editorWidget: 'large-text-field' },
type: { default: 'streetmixSegmentsFeet' },
left: { default: '', editorDisplay: false },
right: { default: '', editorDisplay: false },
showGround: { default: true },
showStriping: { default: true },
length: { default: 150 },
actionRefresh: { type: 'boolean', editorWidget: 'button', editorDisplayName: 'Refresh Street' }
},
These extra component schema values seem to be ignored by A-Frame and do not throw an error. Is this a safe assumption?
Suggested answer:
3C seems like the "right" answer in the long-term, but it might be easier to start with 1 and then later migrate to 3C.
What do you think?
Hardcoding any logic in the editor will deny any flexibility (though might be simple for some initial prototyping)
I'm also not sure about option 3, You'd have to modify lots of existing components, sometimes it may add some level of complication to already complex components.
I would try going somewhere in the way of the second option -
adding a new component, inspector__<component name>, where you will define which fields of the component should be displayed and how. It can pass all info to a predefined system, which is easily accessible and manageable.
It will work with existing components, and will be an add-on which is bound to the inspector, but won't affect any components (not only from a 'single responsibility' standpoint, even from the aspect of the components readability, and maintainability).
So we currently have Jira in our workplace and no Jira Administrator. I'm feeling up to the task and would like to know if Jira has the functionality I'm looking for.
So when you have comments in Jira or even in the body of a Jira ticket. You can italicize the text from the comment ribbon
As you can see I am interested in being able to have the same functionality as bold or italicize or underline
but I want to be able to highlight some code that i insert in a ticket comment and click a button and make it into a code block. Or add curly brackets and make it a quote... Exactly like how StackOverflow does it.
Anyone know how I can accomplish this?
This is quite old question but it might help someone else looking for an answer later...
If you're familiar with JavaScript, simply inject a button via JS onto the toolbar. I've done this for a couple of custom fields. Such JS can be included in the custom field's description.
Example
In my case, I've added two buttons on two custom fields to copy original content from Summary/Description. You can adjust the code to do a whatever action on any custom field or comment field.
Screenshot
Code
Code to be included in the custom field's description. Adjust your code to place the JS into appropriate elements.
<script>
var cfAltDescription = 14705;
var elAltDescription = AJS.$("#customfield_" + cfAltDescription);
function addDescriptionButton() {
var buttonHTML = ' <button type="button" class="aui-button" style="font-size: 11px;padding: 1px 5px;" title="Paste original description into this field" onclick="copyDescription()">< Description</button>';
AJS.$(".jira-wikifield[field-id=customfield_" + cfAltDescription + "] ~ .wiki-button-bar").append(buttonHTML);
}
function copyDescription() {
var origDescription = AJS.$("#description").attr("value");
elAltDescription.attr("value", origDescription);
// set focus in the input box after copying...
elAltDescription.focus()[0].setSelectionRange(0, 0);
elAltDescription.scrollTop(0);
}
addDescriptionButton();
</script>
For comments, you cannot inject JS into the custom field description (comments are not a custom field). You will need to include your JS either via Announcement Banner (this would be global JS for any Jira page). Alternatively, you can utilize simple yet powerful JsIncluder add-on to inject your own JS code only for certain project/issuetype or globally and/or for edit/transition screens only.
I think you can use plugin for this. jeditor plugin gives you more options in text editors. all information you need is provided in above link.after installing this plugin you can change the text renderer as "JEditor Renderer".
Marketplace: https://marketplace.atlassian.com/plugins/com.jiraeditor.jeditor
or you can use.....
Note:-I guess this is not the exact answer you need but I think you can use macros inside the comment field. ex:if you want to add panel in inside of comment you can simply use
{panel}Some text{panel}
{panel:title=My Title}Some text with a title{panel}
{panel:title=My Title| borderStyle=dashed| borderColor=#ccc| titleBGColor=#F7D6C1| bgColor=#FFFFCE}
a block of text surrounded with a *panel*
yet _another_ line
{panel}
and if you want to add code you can use...
--- Java example ---
{code:title=Bar.java|borderStyle=solid}
// Some comments here
public String getFoo()
{
return foo;
}
{code}
*--- XML example ---*
{code:xml}
<test>
<another tag="attribute"/>
</test>
{code}
here is a example screenshot..
follow this link for more information..
UPDATE
with the plugin you can get something like this..I think this will helps you.
I am currently using CKEditor as my WYSIWYG editor for the text on my site. And I just ran into a problem of using this editor with angular's partial views. The views are hidden with ng-hide and ng-show.
When I am outside of my current partial view the editor works fine. Meaning the tool bar pops up, the buttons on the tool bar work, and the text is editable as well.
However when I am in my partial view the popup still comes up, but the text is not editable, and the buttons are disabled.
This is my current code to bring up the editor
plunker.directive('ckEditor', function($http, $timeout) {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.inline(elm[0]);
if (!ngModel) return;
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
So my question is has anyone gotten CKEditor to work with partial views? If so how did you do it?
You have not provided any example, so it's hard to tell. There may be few reasons,
check if the element type is supported by CKEditor - if not you'll have to hack CKEditor config by copying some settings from div
ensure your element has contenteditable='true'
ensure you are manually instrumenting CKEditor to provide editor for your partials.
you may also want to read this:
Enable CKEditor4 inline on span and other inline tags
http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable
I've been playing around with the new media manager in WordPress and had some fun with it, but have reached the point where I'm banging my head against a wall.
I have a custom meta box that I'd like to store some images in (well it's a hidden input and I'm currently storing their ID's, but could equally be the image objects), then making an AJAX call to show some thumbnails, which I have subsequently made draggable so users can reorder (not necessarily relevant just some background).
My problem is that when I open the media manager, no images are selected, so if a user wants to edit the pictures in their gallery they need to select them all again.
What I'm trying to figure out, is how do I open the media manager with the current images passed through so they are pre-selected.
So, broadly, my code looks like this
jQuery('#myButton').click(function(e) {
e.preventDefault();
frame = wp.media({
title : 'My Gallery Title',
multiple : true,
library : { type : 'image'},
button : { text : 'Insert' },
});
frame.on('close',function() {
// get selections and save to hidden input plus other AJAX stuff etc.
}
frame.open();
});
My thought is that there must be either a parameter to pass into the frame (probably a JSON object of the images, or I need to create an event for
frame.on('open', function() {
// Set selected images
}
But I have tried both ways round and am not getting anywhere.
It would appear possible, as changing the 'Featured Image' takes you to the library with the current one selected - I've just been unable to understand the core code sufficiently yet and hope someone else has !
After studying the core for a bit, the answer here is really quite straightforward.
Listen for the open event of the wp.media object, grab the state, create attachment objects with your id's and add them to the selection.
frame.on('open',function() {
var selection = frame.state().get('selection');
var ids_value = jQuery('#my_field_id').val();
if(ids_value.length > 0) {
var ids = ids_value.split(',');
ids.forEach(function(id) {
attachment = wp.media.attachment(id);
attachment.fetch();
selection.add(attachment ? [attachment] : []);
});
}
});
This works when selecting multiple images as well as single and assumes that using the code above you have stored the values in a single text/hidden field with comma separation.
not a real answer, but somethings that I have noticed
using your code the frame.open( console.log('open') ) does trigger the console.log.
The other frame.on('open', function() { console.log('on->open')}) does not.
When looking at the post edit page. (Where a featured image is already set).
If you open the featured img window a few things happen that are interesting.
WP does 3 ajax calls, the 1st and 3rst contain the featured img id. the 2nd is the same as with your code.
when the popup is loaded the featured image is visible / loaded before the rest of the images. When those show up the featured image is put in the right order.
When looking in firebug at the dom tab I discovered that the var wp.media.model.settings.post.featuredImageId holds (wait for it) the featured image value.
Hopes this helps you in some way.
I think those guy manage to do it :
https://wordpress.stackexchange.com/questions/76125/change-the-default-view-of-media-library-in-3-5/76213#76213
But this doesn't work for me.
I ve got the jquery in the footer of my post/edit, post/new but that just don't work for me :(
I have a reference site for a series of books, and I'd like to make it so that readers can avoid spoilers. The idea I had was to make a setup webpage where they click on a checkbox for each book from which they want to see info. I could then store that (somehow) as a cookie for each time that they visit the site, plus have it work for each page in the site. So, one page might have this:
<li class="teotw">Rand killed a Trolloc</li>
and another page might have
<li class="teotw">Nynaeve tugged her braid</li>
and that information would not show up on the page unless they had checked the box for the "teotw" book. My initial thoughts are to do something like toggling the CSS class value like this:
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:none';
document.styleSheets[0]['cssRules'][0].class['teotw'] = 'display:inherit';
but I'm not sure if this is the best method. Firstly, it would only apply to the current document only so I'd need a way to re-apply it to each page they visit. I'm using YUI as well, if it matters.
Any ideas on the best way of doing this?
There are many ways to implement it. You can use the YUI Stylesheet module (read its User Guide for how to use it) which will do what you're considering with cross-browser support and it's much easier to use than using the DOM directly.
Another way would be to add classes to the body of the page. You can define styles like this:
.teotw {
display: none;
}
.teotw-visible .teotw {
display: block;
}
With the following JS code:
if (someCondition) {
// show the hidden content
Y.one('body').addClass('teotw-visible');
}
For the persistance of the visible state you can use cookies with the YUI Cookie utilty or local storage with CacheOffline. Code using cookies would look something like this:
var body = Y.one('body');
if (Y.Cookie.get('teotwVisible')) {
body.addClass('teotw-visible');
}
// change the cookie
Y.one('#teotw-toggle').on('click', function (e) {
var checked = this.get('checked');
Y.Cookie.set('teotwVisible', checked);
body.toggleClass('teotw-visible', checked);
});
You should probably store the different sections in a JS object and avoid hard-coding class names in every JS line. Or maybe use a convention between checkboxes IDs and section class names.