In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
Related
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
I've built out a react data grid. I've added the sortable optional feature and on my system is working with the sort icon(s) rendering to the right of the header text, which is how I'd prefer it.
Others in my group have pulled my code when they run it the sort icon is rendered to the left of the header text (I'm assuming somehow inserting the pull-left style to the icon span).
I can find no information that outlines how exactly this can be controlled, or why it would work differently from one system another.
Hopefully someone is still using this component that can shed some light on this.
You should be able to target the icon and override with CSS. If you inspect the element in Dev tools, it will tell you the classname of the icon. Use CSS to move its position.
Steps to reproduce the issue::
Open the froala editor on https://www.froala.com/wysiwyg-editor.
Remove everything in the editor.
Insert an image.
Add a caption to the image.
Click outside the image and try to type.
Issue: After adding image caption, If write any text then it always written inside the image area[blue color]
Video:
In Froala: https://github.com/froala/wysiwyg-editor/issues/2597#issuecomment-386163085
Can anyone help me?
If you look at your browser's dom inspector you will see that erasing the content and adding the image leaves you with one element wrapping the image and caption, and therefore no-where else to set focus to continue typing. The quickinsert feature also fails to show as there are no block boundaries to trigger it.
Froala Editor offers a decent events API, and there is a workaround via the 'image.inserted' event which fires when an image element is added into the editor. The code below listens for this event and inserts a new para element immediately after Froala's wrapping elements around the image. When typed, your caption text is part of Froala's wrapper around the image, leaving this new para ready to accept focus and let you type into it.
$('#yourselector').on('froalaEditor.image.inserted', function (e, editor, $img, response) {
$img.after("<p>Type something here</p>"); // insert a new para or div here
});
Note the downside of the simple workaround is that you get extra content injected, but the benefit hopefully outweighs that for your use-case.
This is a plain JS solution which hopefully you can adapt for your environment.
I have previously failed to add JS snippets for Froala to SO so provide this codepen working example.
Is this what you are looking for? The text is after the image caption and not inside the image area [blue bordered].
I am setting up protractor tests for my angularJs 1.14 app.
We have a video player that displays subtitles. Each subtitle is in a div. When the player is playing, our code sets the class of the current subtitle to "currentSubtitle" This way, we can highlight the subtitle. In addition, we have code that causes the current subtitles's div to be scrolled to. How can I create a test that tests if the subtitle scroll is working?
I think you can do 2 things, depending on how fast the automation and the page self is.
Have you tried validating which text is visible with element(by.css('. currentSubtitle').getText(). getText() will give you the visible text, see here
Use browser.driver.executeScript('//some JS code') to determine if it scrolled, take for example this post. Then you can calculate with JS if the subtitle scroll is working
Hope it helps finding your answer
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.