I'm building an Inspector dynamically based in a JSON. However, I can't get when: working. Imagine that: I'm inside a list of object's called list, and I got three objects: type, rule and script.
type is a select-box, which values rule or script.
rule is a text
script is a text-multiline (custom type)
I need to show rule only if type is equals to rule, and show script only if type is equals to script. How can I do that? I tried to add to to rule the following when::
when: {eq: {"type": "rule"}},
And a similar one to script:
when: {eq: {"type": "script"}},
However, the Inspector seems to ignore that, and never show them, nor rule, nor script. How can I make that condition work properly?
I have made it work with a bit of testing. I actually found the inspector pretty good - especially the conditional hiding/showing does work even for large set of different properties.
The problem might be in the way you reference the property. In my case, something like this worked:
text: {
type: 'content-editable',
label: 'Simple text input',
when: {
eq: {
'attrs/type/text': 'SIMPLE_COMPONENT'
}
}
}
I am setting the attribute type at some other place using element.attr() function:
element.attr({type: {
text: 'SIMPLE_COMPONENT'
}});
BTW: Also managed to "configure" the Inspector dynamically from large JSON containing definitions of various elements/components.
JointJS inspector is very limited, and was only giving me problems. I've replaced it with a custom made inspector, made with AngularJS, HTML5 and SASS. In case anyone is having the same trouble, that's my advice: it's much easier to create an inspector from scratch than trying to use JointJS's inspector.
Related
I have a TLDR switch on my blog.
This switch is a javascript that hides any element with the class="tldr" attribute attached to it, or unhides it.
I've created custom block_formats in TinyMCE for Paragraphs that will let me create a Paragraph with the TLDR class attached.
However, when I insert a codesample using that plugin it will generate a pre block that I can not format afterward.
I've already tried to create a custom PRE block with the TLDR class but TinyMCE won't let me apply this format to the code sample block that has been created.
Does anyone have another solution for my problem or can you see if I'm doing anything wrong?
Is there another way in TinyMCE to add attributes to elements that have been added to the code already?
I've tried the code viewer but that doesn't allow me to modify the generated HTML code.
You can use formats and style_formats to customize the styling options available to users and how they operate.
To add a custom pre block with class="tldr", you can add this config to TinyMCE:
style_formats: [
// Adds a pre format to style_formats that applies a 'tldr' class
{ title: 'TLDR', block: 'pre', classes: 'tldr' }
]
See this TinyMCE fiddle: http://fiddle.tinymce.com/Ikhaab
On its own, this will override the default style formats, but you can add them back in and position the new TLDR option within the Blocks submenu as shown here: http://fiddle.tinymce.com/Jkhaab
Resources:
https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats
https://www.tiny.cloud/docs/configure/content-formatting/#formats
https://www.tiny.cloud/docs/demo/format-custom/
specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.
So it seems quite simple (yet I cannot make it work)..
I would like to set a custom property in the options object in Assemble within my Gruntfile and would like to access it from one of my partials context in YML.
So say I have a folder in my project with all my documentation in .md-files.. (app/src/documentation)
In the options object I would like to do something like:
assemble: {
options: {
jsDoc: '<%= yeoman.app %>/src/documentation',
},
And then within one of my partials I would like to do the following:
---
title: Headings
status: In progress
tabs:
- tab: html
- tab: css
- tab: js
- tab: description
- tab: links
jsDoc: filename.md
---
<!-- Show markdown documentation -->
{{md jsDoc}}
Right now I get an error saying :
Warning: Cannot call method 'indexOf' of undefined Use --force to continue.
Can anyone give any hints/ideas on how to get this to work?
Bonus info:
To make things a little more complicated, I would actually like to use {{md jsDoc}} in another partial (using my custom helper), where I have access to my other partials context..
I've made a couple of gists showing the code I have right now.
It's located here:
https://gist.github.com/dgsunesen
"sgComponent helper" - showing how i use my helper
"Gruntfile" - showing my current options for my custom helper.
"Headings" - partial that needs to access jsDoc option and get rendered inside of sgComponent.hbs
"sgComponent.js" - my custom helper that takes the base partial and the partial to be render inside of it
sgComponent.hbs - my base partial where my Headings-partial is rendered within.
Thanks in advance!
Dan
If you're only using the partial matter inside it's own partial, then it's pretty simple...
---
title: Headings
status: In progress
tabs:
- tab: html
- tab: css
- tab: js
- tab: description
- tab: links
jsDoc: "<%= jsDoc %>/filename.md"
---
<!-- Show markdown documentation -->
{{md headings.jsDoc}}
You can use lodash templates to combine the main jsDoc property with the one in the partial. Then reference based on the name of the partial {{headings.jsDoc}}
But from looking at your helper code, it looks like you want jsDoc to be set inside another partial (that's dynamically added), then used inside the sgComponent file.
To do that, I think instead of doing the process content you'll need to actually combine the variables from the main options with the jsDoc in the partial. If you try doing process content with the lodash, it'll get into a loop because of how you're getting the front matter in the helper.
Also, make sure parameters are being passed in properly because that indexof error could be coming from glob or yfm.
Hope this helps some.
First off, a caveat ... I am brand new to Stash. I've heard a lot about it but this is my first time actually playing with it. I get the concept, but am having a hard time figuring this one thing out.
I have a main "wrapper" file and everything within that wrapper stays the same. I would like the option however, to be able to toggle the sidebar on and off if I need to.
I wouldn't think I would need a totally separate layout wrapper would I?
Is there a way to use a boolean variable within stash? (e.g. 2col=TRUE) or am I thinking about it wrong?
Thanks in advance for your help!
Generally what I'd do here is setup multiple Stash gets within the wrapper. Then in your individual templates you can set both the sidebar and the main content area. For parts where you might be repeating content, like the opening and closing divs of a sidebar, you can always drop some snippets inside the stash.
You can also use exp:stash:not_empty [docs] to wrap around the div or container for your sidebar within the wrapper.
I usually use one wrapper for every template. It'll contain an {exp:stash:get name="content"} tag, like yours, which contains the only variable content within.
In my individual templates, I embed the wrapper at the beginning using a regular EE embed ie. {embed="includes/wrapper"}.
Then I stash the content to be inserted into the wrapper using the {exp:stash:set name="content"} tag.
This seems like what you're doing anyway.
If I want to conditionally show a sidebar, I might just pass a variable into the embed.
eg. {embed="includes/wrapper" show_sidebar="yes"}
In my wrapper I would do this:
{if embed:show_sidebar}
Sidebar stuff.
{/if}
I have a page I'd like to embed a news-feed widget into (so that the feed from some remote site will be displayed in my site).
While there are quite a few free news-feed widgets available out there (a partial list is here: http://allwebco-templates.com/support/S_script_newsfeed.htm), They all require insertion of complex code into the html page, while all the parameters are hard-coded into the generated code, which looks something like this:
insertedWidgetText = "<script id=\"scrnewsblock10795953\" type=\"text/javascript\">...script specific parameters go here...</script>"
let feedWidget = toWidgetBody [hamlet|#{preEscapedText insertedWidgetText}|]
This doesn't integrate well with Yesod's approach as it requires specifying to Hamlet that the content is preEscapedText, which in turn disables the ability to use Hamlet's processing to alter parameters of the widget dynamically (So in case I want the widget to use a different source, for example, I need to statically change the quoted text and cannot use Hamlet's variable substitution).
Of course I could do some text manipulation myself, tailor built for the widget I'm using, but that doesn't seem like the "right" solution (especially if I want to have the embedded text in some external file and not in the middle of my code as in the example above).
Can the above mentioned issue have a better solution than the one I thought about?
Is there an implementation of a news-feed widget in Haskell/Yesod that I can use as a plugin?
Note: I'm a very poor javascript programmer, but solutions in that direction are also welcomed.
Thanks,