{0}', value) 423 | else: 424 | return ' 425 | 426 | To initialise Javascript, there is a widget mixin called 'WithScript'. See the next section. 427 | 428 | 429 | #### Issues with custom blocks 430 | Streamfield adds form elements dynamically to the form. It will pick up and add Media resources attached to a widget. If you have a plain widget, this is all you need. But if you want a fancy widget, you need to think about the Javascript. 431 | 432 | Javascript that supports widgets used in streamfields is tricky. Javascript designed to run on page load will not trigger. And the script may not have a non-page-load initialisation. Finally, there may be issues with JS dependency resolution. Django provides some help, but you need to know about it. 433 | 434 | The problems start here. Many, many Javascripts auto-run on page initialisation. You can hope that this is disabled or ineffective. But if not, or the script produces side effects in the form, you will need to modify the script, much as you may dislike the idea (I would). 435 | 436 | Then you must hope the author built the script with a hook for initialisation. Again, if such a breakout of functionality is missing. you will need to modify. 437 | 438 | Then you need to initialise. First, ignore the method in blocks called jsinitialiser(). This may seem promising, but it is for setup of block code on page load. The Wagtail solution is to add a script to the block template (the template is written into the page). This will run whenever a block is loaded into the main form. In a typically cute piece of code, Wagtail have a mixin to do this, called WidgetWithScript. WidgetWithScript is ported to this app as 'streamfield.widgets.WithScript'. All the field block widgets use it. 439 | 440 | If initialisation is not targeted and precise, there can be unwanted effects. For example, outside of Streamfields, a few people have wished to reuse Django Admin widgets. Well, if the widget initialisation runs on page load, then is initialised dynamically later, forms can display with, for example, multiple clocks and calenders attached to temporal inputs. And there is no way to namespace this behaviour away. 441 | 442 | Finally, you need to consider Javascript imports. Django does a somewhat unpubicised dependency resolution on JS resources. Mostly this is great, removing duplicates and ensuring, for example, that JQuery scripts run after JQuery is loaded. But, in such a case, you must declare a JQuery dependency in the widget, or the resource may be sorted before the JQuery library. And don't try a simple rename on JS resources, in the hope this will namespace the code. The dependency resolution will not be able to see the code rename, so will write the code in twice, and then you are in trouble. 443 | 444 | All in all, to add Javascripted widgets to a streamfield block, 445 | - Preferably find Javascript that does nothing on pageload, or disable it. Especially avoid Javascript with general searches. You need a function ''do this to element with 'id' XXX' 446 | - Add the widget to a new FieldBlock, using the broken-out definitions above 447 | - Use streamfield.widgets.WithWidget to initialise 448 | - On the Media class of the widget, declare dependencies for the Javascript, including external dependencies like JQuery 449 | - Besides dependencies, beware how the Javascript loads into namespaces. If it is loaded on ''window', will it clash/ produce side-effects? 450 | 451 | This app has default widgets that seemed to suit the overall theme. but the above points were also a consideration. 452 | 453 | 454 | ## Display 455 | Mostly, you only need to print the value, 456 | 457 | {{ page.content }} 458 | 459 | This will template each block used with the default templating. 460 | 461 | 462 | ### The template tag 463 | There is o template tag which allows you to control/supplement the supplied context. 464 | 465 | {% load streamfield_tags %} 466 | 467 | ... 468 |
{% streamfield block %}
479 | {% endfor %} 480 | 481 | And the elements can be controlled by their 'block_type' and 'value' directly, 482 | 483 | {% for block in page.content %} 484 | {% if block.block_type == 'heading' %} 485 |
2 | {% with widget=widget.subwidgets.0 %}{% include widget.template_name %}{% endwith %}
3 | {% with widget=widget.subwidgets.1 %}{% include widget.template_name %}{% endwith %}
4 |