Test for missing region element in a marionette layout view - javascript

Is there an elegant way in Marionette to test if a region's (el)ement exists in the DOM after the view is rendered? Preferably without rewriting the region selector and using jQuery to search the DOM.
For example - this layout view:
var view = new Marionette.LayoutView({
regions : {
'header' : '.header',
'footer' : '.footer'
},
onRender : function() {
if ( /* test for the existance of 'header' in the dom */ ) {
// do something
}
}
});

Elegant? No. But Marionette's view.getRegion()._ensureElement() returns true when the element exists and will throw an error if the element does not exist. So you could try...
onRender : function() {
try {
view.getRegion("header")._ensureElement()
// element exists
} catch {
//element does not exist
}
The annotated marionette source also suggests that there is a allowMissingEl option that you could set to have _ensureElement() return false when the element does not exist, but this might have negative repercussions for the rest of your project, and could potentially make debugging more difficult.

Looking at the source, it looks like Morslamina's answer is correct - however we can extend Marionette's region class and implement the testing behavior ourselves. For example:
var BaseRegion = Marionette.Region.extend({
// tests if the element exists for this region or not
hasEl : function() {
if ( _.isUndefined(this.getEl(this.el)[0]) ) {
return false;
}
return true;
}
});
and then in the layout view go
var Layout = Marionette.Layout.extend({
regionClass: BaseRegion,
regions : {
'header' : '.header',
'footer' : '.footer'
},
onRender : function() {
if ( this.getRegion('header').hasEl() ) {
// do something, e.g. show the region
}
}
});

Related

Kendo Toolbar event after render

I have a Kendo UI Toolbar:
$("#toolbar").kendoToolBar({
items : [ {
type : "button",
text : "List"
} ]
})
and I have a script in my app that will translate strings according to the chosen language; i.e. it will find the word 'List' and change it to 'Liste'.
The problem is with timing. There is a finite time that the Toolbar takes to render, so calling my translation function inside
$(document).ready(function() { })
Is too early.
The Kendo Toolbar component doesn't have an onRendered event handler. Otherwise I could use that.
Is there any way to define an event that occurs after all Kendo components, including Toolbar have been rendered?
First of all: Ain't there a better way to localize your page?
Besides that: I've created a small JavaScript function which waits until a given list of elements exist. Just call it as shown in the comment in $(document).ready(function() { }).
// E.g. waitUntilKendoWidgetsLoaded({ "toolbar": "kendoToolBar" }, doTranslation);
function waitUntilKendoWidgetsLoaded(widgets, action) {
var allLoaded = true;
for (var key in widgets) {
if (widgets.hasOwnProperty(key)) {
allLoaded = allLoaded && $("#" + key).data(widgets[key]) !== undefined;
}
}
if (allLoaded) {
action();
}
else {
setTimeout(waitUntilKendoWidgetsLoaded, 500, widgets, action);
}
}
But be aware: The only thing you know for sure is that the element exists. It does not ensure that the element has finished loading. Especially with Kendo widgets which use a datasource you should use the existing events to trigger your function at the right moment.

Generate HTML using jQuery

i'm trying to generate some HTML using jQuery, I want to just create the elements with the required classes etc, and then append them to each other if that makes sense. I have written the below code, it doesn't produce any errors but also isn't adding the HTML to container at all.
What's wrong?
(function($) {
$.fn.twitter_plugin = function( options ) {
var container = this[0];
console.log('Started');
// Make aJax call
// Generate HTML
$con = $("<div>", { "class" : "tweet" });
$(container).append($con);
$col1 = $("<div>", { "class" : "twocol" });
$con.append($col1);
$col2 = $("<div>", { "class" : "tencol last" });
$con.append($col2);
// Profile Image
$tweet_profile_div = $("<div>", { "class" : "tweet-profile-photo" });
$col1.append($tweet_profile_div);
$profile_img = $("img", { "src" : '', "class" : "responsive-img" });
$tweet_profile_div.append($profile_img);
// END Profile Image
// Tweet
$tweet_head = $("div", { "class" : "tweet-head" });
// END Tweet
};
}(jQuery));
Executing this like so:
<script src="js-src/themev2/twitter_plugin.js"></script>
<script>
$( document ).ready(function() {
$("#map_canvas").twitter_plugin({ });
});
</script>
Edit 1
#Sean Reimer, my twitter_plugin function is being executed without that change you suggested, as the console.log is displayed, so this isn't the issue
The problem is that you have an IIFE for jquery, but within you have your '$.fn.twitter_plugin function' defined but not called.
At the end of your function definition you should add () to invoke it as well.
so
$tweet_head = $("div", { "class" : "tweet-head" });
// END Tweet
};
should be
$tweet_head = $("div", { "class" : "tweet-head" });
// END Tweet
}();
I also am not sure if this[0] is entirely reliable it might be better to just save the body as your container element. This is just a window object, so it doesn't have a 0 index element
var container = $('body')
would solve your problems.
Silly mistake I made, code works fine, I simply misspelt the ID for the target element, this works now.

ReactJS remove component

I'm trying to learn the basics of facebook's react.js library and I've been lately thinking about a few stuff I can do with it just to get used to the way it works . I'm trying to make a div that contains 2 buttons one is OPEN and the other is CLOSE, when you click the OPEN the react will render a div containing anything (Like a msg saying "You clicked"), this is fine up to now but I cannot figure out how to make it disappear once clicked on the CLOSE button, does anyone know how to do that ? Thanks ^^
There are at least four ways, that depends on the real problem you need to solve:
1) Add #your-div-id.hidden { display:none } styles and add/remove hidden class on click (maybe not React way)
2) Change view state (i.e. opened flag). That's a React way and maybe the simplest choice
onOpen() {
this.setState({ opened: true });
}
onClose() {
this.setState({ opened: false });
}
render() {
var div = (this.state.opened) ? (<div>Your Div Content</div>) : undefined;
return (
//some your view content besides div
{div}
);
}
3) If you use Flux. Move state to Store and subscribe to changes. That maybe useful if you gonna show your div at many parts of your app (i.e. implement error popups which may be shown at any part of an application).
So, first of all let's keep warnings at the store:
var CHANGE_EVENT = 'change';
const warnings = [];
var WarningsStore = assign({}, EventEmitter.prototype, {
getWarnings: () => return warnings,
emitChange: () => this.emit(CHANGE_EVENT),
addChangeListener: callback => this.on(CHANGE_EVENT, callback),
removeChangeListener: callback => this.removeListener(CHANGE_EVENT, callback)
});
WarningsStore.dispatchToken = AppDispatcher.register(action => {
switch(action.type) {
case ActionTypes.ADD_WARNING:
warnings.push(action.warning);
WarningsStore.emitChange();
break;
case ActionTypes.DISMISS_WARNING:
_.remove(warnings, {type: action.warningType}); //that's lodash or underscore method
WarningsStore.emitChange();
break;
}
});
After we have a warnings store, you may subscribe to it from YourView and show popup on each AppDispatcher.dispatch({type: ADD_WARNING, warningType: 'Error'});
var YourView = React.createClass({
componentDidMount: function() {
WarningsStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
WarningsStore.removeChangeListener(this._onChange);
},
_onChange() {
this.setState({ warnings: WarningsStore.getWarnings() });
},
render() {
//if we have warnigns - show popup
const warnings = this.state.warnings,
onCloseCallback = () => AppDispatcher.dispatch({type: DISSMISS_WARNING, warningType: warnings[0].warningType});
popup = (warnings.length) ? <YourPopupComponent warning={warnings[0]} onClose={onCloseCallback}> : undefined;
return (
//here the main content of your view
{popup}
);
}
})
4) If you simplified your example, but actually instead of div you need to show/hide another page - you should use react-router
Here's how I would do this:
var foo = React.CreateClass({
getInitialState: function() {
return {
showDiv: false, //Or true if you need it displayed immediately on open
}
},
showIt: function() {
this.setState({showDiv: true});
},
hideIt: function() {
this.setState({showDiv: false});
},
render: function() {
return (<div style={{display: this.state.showDiv ? 'block' : 'none'}}>Your content here</div>);
}
});
What this will do is on state change, the style block of the div will be re-evaluated. If the showDiv state variable is true, it'll display as a block element. Otherwise it'll display none. You could, in theory, do this with CSS as well.
Here's a jsFiddle showing this being done with both CSS classes AND the style attribute on the div element.

How to add class or attribute automatically to img tags in CKEditor?

I'm using CKEditor version 3.6
I want to automatically add class="newsleft" to any image tag added through the WYSIWYG.
I've seen a few posts that mention dataProcessor but have no idea which file this should be added or how to do it.
Can someone tell me where I would place the following code?
editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
img: function( element )
{
if ( !element.attributes.alt )
element.attributes.alt = 'An image';
}
}
} );
Basically put it in instanceReady listener and it will be fine (3.x and 4.x) (fiddle):
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,toolbar,sourcearea,image,basicstyles',
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
// Add an attribute.
if ( !el.attributes.alt )
el.attributes.alt = 'An image';
// Add some class.
el.addClass( 'newsleft' );
}
}
} );
}
}
} );
CKEDITOR.htmlParser.element.addClass is available since CKEditor 4.4. You can use this.attributes[ 'class' ] prior to that version.
Here's another approach:
CKEDITOR.on( 'instanceReady', function( evt ) {
evt.editor.dataProcessor.htmlFilter.addRules( {
elements: {
img: function(el) {
el.addClass('img-responsive');
}
}
});
});
this worked for me in 3.6
add the following code to config.js
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is image dialog window
if (dialogName == 'image') {
// Get a reference to the "Advanced" tab.
var advanced = dialogDefinition.getContents('advanced');
// Set the default value CSS class
var styles = advanced.get('txtGenClass');
styles['default'] = 'newsleft';
}
});
Because of this topic is being found in Google very high, I might help people by answering the question: how to add a default class when inserting an image in CKeditor. This answer is for CKeditor 4.5.1. as this is the latest version right now.
Look up image.js in /ckeditor/plugins/image/dialogs/image.js
Search for d.lang.common.cssClass
You will find: d.lang.common.cssClass,"default":""
Edit it with your class name(s) such as: d.lang.common.cssClass,"default":"img-responsive"
I've tried this and it works!
in Version: 4.5.3
Look up image.js in /ckeditor/plugins/image/dialogs/image.js
Search for editor.lang.common.cssClass
You will find: editor.lang.common.cssClass,"default":""
Edit it with your class name(s) such as: editor.lang.common.cssClass,"default":"your-class-name"

Backbone.js: How to handle selection of a single view only?

I am stuck on the following issue:
I have a model with a property that defines if it is visibly selected or not, which I will call SelectModel for the purpose of this question.
SelectModel = Backbone.Model.extend({
defaults:{
isSelected: false
}
})
Now the first part that I do not really get is how I should handle the selection in general.
If I want to use the observer pattern, my View should listen to the change of the isSelected property. But my view also triggers this in the first place, so I would have.
SelectView = Backbone.View.extend({
initialize: function(){
this.model.bind("change:isSelected", this.toggleSelectionVisually)
},
events: {
"click" : toggleSelection
},
toggleSelection: function(){
this.model.set({"isSelected": !this.model.get("isSelected");
},
toggleSelectionVisually:(){
//some code that shows that the view is now selected
},
})
So this in itself already feels a bit absurd but I guess I just understand something wrong.
But the part which I really fail to implement without making my code horrible is handling the selection for multiple models that only one model is selected at a time.
SelectListView = Backbone.View.extend({
initialize: function(){
this.collection = new SelectList();
},
toggleSelection: function(){
????
}
})
So who should notify whom of the selection change? Which part should trigger it and which part should listen? I am really stuck on this one. For a single View it is doable, for a collection I am sadly lost.
I would have suggested the following simplification for your SelectView until I saw the second part of your question:
SelectView = Backbone.View.extend({
events: {
"click" : toggleSelection
},
toggleSelection: function(){
this.model.set({"isSelected": !this.model.get("isSelected");
//some code that shows whether the view is selected or not
}
});
However, since the isSelected attribute is apparently mutually exclusive, can be toggled off implicitly when another one is toggled on, I think the way you have it is best for your case.
So, using your existing SelectView and, you could have a SelectListView as follows. WARNING: it iterates over your entire collection of models each time one is selected. If you will have a large number of models this will not scale well, and you'll want to cache the previously-selected model rather than iterating over the entire collection.
SelectListView = Backbone.View.extend({
initialize: function(){
this.collection = new SelectList();
this.collection.bind('change:isSelected', this.toggleSelection, this);
},
toggleSelection: function(toggledModel){
//A model was toggled (on or off)
if(toggledModel.get('isSelected') {
//A model was toggled ON, so check if a different model is already selected
var otherSelectedModel = this.collection.find(function(model) {
return toggledModel !== model && model.get('isSelected');
});
if(otherSelectedModel != null) {
//Another model was selected, so toggle it to off
otherSelectedModel.set({'isSelected': false});
}
}
}
});
I would recommend that your model not keep track of this, but rather the view.
In my mind the model has nothing to do with its display, but rather the data that you're tracking. The view should encapsulate all the info about where and how the data is displayed to the user
So I would put isSelected as an attribute on the view. Then it's trivial to write a method to toggle visibility. If you then need to explain the other views that a specific view is selected you can attach a listener $(this.el).on('other_visible', toggle_show) which you can trigger on your toggle_visibility method with $(this.el).trigger('other_visible')
Very close to the solution suggested by #rrr but moving the logic from the View to the Collection where I think it bellows to:
SelectsCollection = Backbone.Collection.extend({
initialize: function() {
this.on( "change:selected", this.changeSelected );
},
changeSelected: function( model, val, opts ){
if( val ){
this.each( function( e ){
if( e != model && e.get( "selected" ) ) e.set( "selected", false );
});
};
},
});
There are different ways you could do it. You could trigger an event on the collection itself and have all the SelectModel instances listen for it and update themselves accordingly. That seems a bit wasteful if you have a lot of SelectModel instances in the collection because most of them won't end up doing any work. What I would probably do is keep track of the last SelectModel in your View:
SelectListView = Backbone.View.extend({
initialize: function(){
this.collection = new SelectList();
this.lastSelectedModel = null;
},
toggleSelection: function(){
// populate newSelectedModel with the SelectedModel that you're toggling
var newSelectedModel = getNewSelectedModel();
if (!newSelectedModel.get('isSelected')) {
// if the SelectModel isn't already selected, we're about to toggle it On
// so we need to notify the previously selected SelectModel
if (this.lastSelectedModel) {
this.lastSelectedModel.set({isSelected: false});
}
this.lastSelectedModel = newSelectedModel;
} else {
// if the newSelectedModel we're about to toggle WAS already selected that means
// nothing is selected now so clear out the lastSelectedModel
this.lastSelectedModel = null;
}
newSelectedModel.set({isSelected: !newSelectedModel.get('isSelected')});
}
})

Categories

Resources