In order to create image carousel, I thought creating nested blocks as following
image_carousels
image
image
image
Then I found draft.js doesn't support nested blocks. (https://github.com/facebook/draft-js/issues/143 they say draft.js is flat)
But on the other hand, there's UL/OL and LI , that's like group and element structure.
Is there a way to group elements/components/blocks so that we can render the whole + individual (such as we render carousel with individual images)
Draft.js doesn’t actually support ul/ol and li as separate blocks – these are just implemented as ordered-list-item and unordered-list-item blocks, stored as a flat list in the editor.
The nesting is "faked" by having those blocks’ depth set to values above 0, and using wrappers to wrap sequences of those blocks into a parent element. See the docs: Advanced topics – Custom block wrappers
.
If it works for you, you could follow a similar model and have a single block type image-carousel-item, that contains the contents of each "slide", then use a wrapper to render carousels with multiple items however you want, both in the editor and when exporting HTML.
Related
I have a directive w/ a template that will work in 90% of scenarios. However there are some scenarios where I'll need additional fields be added to the template. Is there a way to extend or modify an existing html template so that adding additional fields is a possibility without rebuilding 90% of an existing template?
I know that you can compose a new directive w/ a base directive. However this only serves to add functionality and content around the base directive and doesn't allow for the ability, from what I know, to insert additional html into or around the base template in a way that allows for the additional html to be recognized in the context of the base html.
In my case I have 5 standard input fields. However in some cases I need to insert additional input fields, not before or after the base 5 but literally intersperse them between the base inputs. Using bootstrap, I can apply an order to the various input fields and theoretically i can take the the additional inputs into account and supply orders accordingly. However, bootstrap cannot recognize the inputs as being part of the same row-cols ordering logic if the base content is separated into a containing div separating its content from that of any directive which composes off of it.
It seems like angularjs's directives are specifically designed to group base directive content into a single and separate container object. This is the error if you try and use the directives replace functionality w/o having a single template container: https://code.angularjs.org/1.4.7/docs/error/$compile/tplrt
Is this simply a short coming of angularjs's abilities for composition or is there some other piece to this puzzle that I'm missing?
Can't you simply do this on the front end with ... So that the input fields in question would only show up if your edge case is true. Save your condition variable in scope and based on that display/hide the fields. Unless I'm not understanding the question.
I wish to make stacked responsive tables with React. To avoid horizontal scrolling in a small screen, each row is displayed as mini-tables; please see included images.
For my use case, content in td (and maybe th) tags may be string, number or rich nodes.
I want to implement the same in React, since no library exists yet for this. What is a good approach?
I have examined two approaches.
First one is Javascript-based, like jQuery-based StackTable, from where I included the images. It turns the table into a table+card tables combination, and then uses provided media query to show either the table or card table. The cardtable function traverses the table and generates two-column key value tables from each row.
This seems easy in react: render the table and card table and use media query to show either one. But is rendering same node (as opposed to strings) at multiple places safe? A Every th element will be rendered for actual table header and for every single row.
Second one uses pure CSS, such as this one from CSS Tricks.
/* if media query */
table, thead, tbody, th, td, tr {
display: block;
}
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
The "content" thing seems iffy though, we have to maintain a copy-paste atrocity of contents in an otherwise DRY codebase. But I hope this will be easier with React.
Example of a stacked responsive table:
Full table:
Responsive:
The only React-specific thing I can think of here is that if you want separate some part of code (several elements in JSX) to another component, you also have to wrap it in a separate DOM element, which is especially problematic in environments like tables. (You can see my approach to this problem here.)
Note that when creating a React library, you have one more decision to make: how do you handle your CSS. Some people like having CSS directly in JS, some others don't. (My experience is that it's better to still separate these two, because if you have CSS in JS, you can't use, for example, media queries!).
Other than that, I think, your task is just like implementing responsiveness in any other scenario, with any other framework or library. You'll get the same advantages and drawbacks from these approaches as you would get anywhere else. In general, media queries are handled by browser, which means that your stuff will automatically change layout when you resize the browser (or rotate the phone). On the other hand, in JS you can look at the space available for the component (note that in CSS, you have only the viewport size) and this can give you the opportunity to easily embed these tables also in narrow columns of desktop sites.
I'm primarily a UI and graphic designer and, eventhough I have some experience with Typo3, I'm completely stuck at the following problem:
I have a large page tree with single pages for items from a catalogue (one item per page), the layouts for these items are built with Armin Vieweg's beautiful "Dynamic Content Elements" extension (DCE).
Now I want to create an overview page where I reference some of those items automatically - ideally I want to check a box in each element I want to display there (I would add a field catalogueItemPreview to the item DCE which authors can check or uncheck).
Unfortunately, I have no concrete idea of how the database is structured and how I could build a query (where would I even do that? in a custom-made plugin?).
This is how I imagine it could work: On the overview page I use a plugin/an extension in a Content Element that does the following:
search Typo3 DB for content elements with a field called "catalogueItemPreview"
return fields "catalogueItemTitle", "catalogueItemShortDescription", "cataloguePreviewImage"
use a template to render previews of all those elements on the overview page
I'm happy for ANY pointers towards a solution as currently I'm completely in the dark about where even to begin ...
Schematic screenshot from the Typo3 backend
thanks for using my DCE extension :)
Well the fields you have defined and their values in content elements are stored as XML, because the current version of DCE is based on Flexforms.
This makes it very very difficult to do MySQL queries using one of the field properties in WHERE clause. You could check for a xml string in the field pi_flexform but this is not recommended.
Instead I would use another property of content elements (tt_content) to mark the items as "Show on frontpage". For example you could create a new layout or section_frame value for that. Then it is very easy to just output the elements you want, using TypoScript.
I have a number of small "template" style TXTextControl documents which I combine to build a large document.
The templates are created in my app using a TXTextControl and the content is stored as a byte array in the database uisng the TXTextControl InternalFormat.
I retrieve each template document and build a new document using the Selection class to load the content of each one as follows;
tx.Selection.Load(myContent, BinaryStreamType.InternalFormat);
myContent is a Byte array read from the database.
Most of the template documents are just one line, but have some tabs altered in them, and may be centered, right justified etc.
What I've noticed is, if each small document ends with a linefeed (i.e. the user hits enter in the document before saving) the template document inserts correctly.
If there is no linefeed, the tabs and justification are lost. If the "template document"is more than one line, the formatting is lost for just the last line.
Worse still, if there is a TextField in the last position of the template document, then everything inserted into my new document after this template document, is inserted as if it is text within the TextField, making the new document look awful.
Is it possible to insert small amounts to TXTextControl InternalFormat style text from a byte array, and ensure it inserts exactly as it was created?
Alternatively, can I force the byte array I'm using to be terminated correctly - with a CR.LF or something to force it to be inserted correctly.
The only "workaround" I've managed to find for this is to append a new line after the inserted document.
This only works though when building the text using a TXTextControl.TextControl object directly, NOT a reference to a selection object belong to a TextControl object.
This works;
TXTextControl.TextControl tx = new TXTextControl.TextControl();
tx.CreateControl();
tx.Selection.Start = -1;
tx.Selection.Text = System.Enviornment.NewLine;
But, passing a selection object into the process and passing that around to build the docoument within it's selection object, doesn't work. The formatting of the original control (and it's selection) is maintained, which probably makes sense I guess.
I am looking at a different way of doing my application.
Actually It's kind of static. My Projects have Categories. Each Category has Subcategories. Categories are containers and Subcategories are element which have values that can be edited.
After analysis of the data , we saw that it was not enough general for it. We are now looking at a Tree Structure. Doing so, we would have Projects filled with Folders/Categories) and those Folders would be filled with other Category/Folders or with SubCategories/Items/Files. That way we can go has deep has we want in complexity.
That is doable, I know it. What I need to know is how hard it will be to implement it in the app.views...
Is it possible to have a single Ext.DataView.dataview display different Ext.DataView.component.DataItem side by side.
Exemple : Having a row in my List that shows a slider and update itself according to it, but that on the 2nd row it is an arrow that on click would open the next level of my Tree.
Visual:
DataView_List
Small Car---------------------------Label------------------------SLIDER
Fuel----------------------------------Label------------------------------ >
SUV----------------------------------Label------------------------TxtField
Small Car and SUV are leaves with different template and Fuel is a category/folder that need to open on click.
So I already have 3 differents templates that would need to show in the same dataview list.
How should I proceed to achieve such results? Is Dataview List the way to good or should I implement my own kind of list inside a container?
If you want to present different kinds of data inside one list or dataview - you can achieve by following strategy:
You still need to use one store to keep it all
In the model class include something like 'record_type' field indicating what kind of data you have
Combine all data you need into one model
Create a template that based on the 'record_type' would render different content
Here is how your template would look like:
<tpl switch="record_type">
<tpl case="car">
<div>CAR + SLIDER</div>
<tpl case="fuel">
<div>FUEL + LABEL</div>
<tpl default">
</tpl>
This is screenshot from my list which contains multiple record types and uses this approach: