Can you "end" a reveal.js presentation? - reveal.js

I'm looking for the counterpart/opposite of Reveal.initialize(). A way to programmatically end a reveal.js presentation.

Reveal.js did not implement a method which programmatically ends the presentation. Here is the list of methods available.
If you are looking for destroy the instance of Reveal.js, that is not possible unless Reveal.js team implements it. What you can do is, you can remove the DOM elements on which Reveal event is initialized.
Here is the code using which you can destroy all/any instance(s) of Reveal.js presentation.
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
document.querySelectorAll('.reveal').remove();
//To remove all containers created by Math Plugin
var mathPluginContainers = document.querySelectorAll("[id^='MathJax']");
mathPluginContainers = Array.prototype.slice.call(mathPluginContainers);
var mathPluginParents = mathPluginContainers.map(function(container) {
return container.parentElement;
});
mathPluginParents.forEach(function (container, index) {
if (container.tagName === 'DIV') {
container.remove();
} else {
container.removeChild(mathPluginContainers[index]);
}
});

Before starting the presentation you can create the DOM tree copy (1) and then, when needed, you can restore it (2).
// (1) create DOM copy
window.saved = document.body.cloneNode(true);
Reveal.initialize({
// initialisation parameters
});
// (2) restore DOM to previous state
document.body.parentNode.replaceChild(window.saved, document.body)
It is stopping the presentation and not making any errors. The only problem might be is that something extra has to be done to be able to start the presentation again.

Related

How to wait for routing to finish?

When a user clicks on a link, it uses routing to send the user to another component, you start at home and can click to charts. My problem is that I need to get the queryselector for the charts element, but when code is loaded from the component, it doesn't exist yet. How can I wait for the element to be created to execute the code?
I solved this by adding a MutationObserver inside the constructor.
Element chartsElement;
ChartsComponent() {
MutationObserver observer = MutationObserver(_onMutation);
Element my_app = querySelector('my-app');
observer.observe(my_app, childList: true);
}
_onMutation(List<dynamic> mutations, MutationObserver observer) {
mutations.forEach((value) {
MutationRecord record = value as MutationRecord;
if (record.addedNodes.contains('charts')) {
chartsElement = record.addedNodes[0];
}
});
observer.disconnect();
//Do stuff
}

It's necessary to remove views? In order to cleanup the Alloy controller (memory/performance)

Lets say that I've a ScrollableView with 3 Views (forms), those form views have at least 10 fields, take a look at this exemple.
index.js
$.content.add(Alloy.createController('scrollable').getView());
scrollable.js
$.scrollableView.addView(Alloy.createController('form',{
fields:[
{label:'field 1',type:'text'},
{label:'field 1',type:'date',value:'2016-06-08'},
...
]
}).getView());
$.scrollableView.cleanup = function() {
$.destroy();
$.off();
for(var i = parseInt($.scrollableView.views.length); i > 0; i--) if($.scrollableView.views[i-1]) {
if($.scrollableView.views[i-1].cleanup) $.scrollableView.views[i-1].cleanup();
$.scrollableView.views[i-1] = null;
$.scrollableView.removeView($.scrollableView.views[i-1]);
}
$ = args = null;
};
form.js
for(var i in args.fields) $.form.add(Alloy.createController('field',args.fields[i]).getView());
$.form.cleanup = function() {
$.destroy();
$.off();
for(var i in $.form.children) {
if($.form.children[i].cleanup) $.form.children[i].cleanup();
$.form.children[i] = null;
}
$.form.removeAllChildren();
$ = args = null;
};
When I'm cleaning up all the controllers, I still don't understand what it's necessary to do.
When I want to remove the ScrollableView, I run the cleanup function on every View, and it's children.
Should I run the cleanup function on all the ScrollableView views?
Should I null all the ScrollableView views?
Should I remove all the ScrollableView views?
Should I run the cleanup function on all the View children?
Should I null all the View children?
Should I remove all the View children?
UPDATE
In this case, I still need to cleanup all the fields? or setting the data to null will solve that?
form.js
var args = arguments[0],
data = {
fields:{}
};
for(var i in args.fields) {
data.fields[args.fields[i].label] = Alloy.createController('field',args.fields[i]).getView();
$.form.add(data.fields[args.fields[i].label]);
}
$.form.cleanup = function() {
$.destroy();
$.off();
//this is needed?
for(var i in data.fields) {
if(data.fields[i].cleanup) data.fields[i].cleanup();
data.fields[i] = null;
}
//this is needed?
$ = data = args = null;
};
Anyway, if my fields have an event listener added like 'change' or 'click', I must remove it in cleanup function, right?
There is no need to remove all views, the only thing you need to do to clean up memory is remove the most parent view, and all references to anything within the most parent view & the reference to the parent view.
So in your case, you only have to remove the ScrollableView and within the scrollableview you need to do $.off(). $.destroy() is only needed if you use data-binding (models/collections).
Because your child views never have a reference (variable), there is no need to remove them. It is automatically handled by Appcelerator/JavaScript and will be cleaned up with garbage collection when the time comes.
note: Garbage collection doesn't happen directly after you remove the views, so you might still have increased memory usage. Both JavaScript and the native platform have their own garbage collection.
You can read more about memory management in this article on TiDev which is still very relevant.
In your updated question you set all the sub-views in the data object. nulling the data object will also drop all references to the views, so that should be enough.

Flipswitch in lightswitch is going in an infinite loop

I got this piece of code for rendering and using Flipswitch as a custom control in lightswitch application.
function createBooleanSwitch(element, contentItem, trueText, falseText, optionalWidth) {
var $defaultWidth = '5.4em';
var $defaultFalseText = 'False';
var $defaultTrueText = 'False';
var $selectElement = $('<select data-role="slider"></select>').appendTo($(element));
if (falseText != null) {
$('<option value="false">' + falseText + '</option>').appendTo($selectElement);
}
else {
$('<option value="false">' + $defaultFalseText + '</option>').appendTo($selectElement);
}
if (trueText != null) {
$('<option value="true">' + trueText + '</option>').appendTo($selectElement);
}
else {
$('<option value="true">' + $defaultTrueText + '</option>').appendTo($selectElement);
}
// Now, after jQueryMobile has had a chance to process the
// new DOM addition, perform our own post-processing:
$(element).one('slideinit', function () {
var $flipSwitch = $('select', $(element));
// Set the initial value (using helper function below):
setFlipSwitchValue(contentItem.value);
// If the content item changes (perhaps due to another control being
// bound to the same content item, or if a change occurs programmatically),
// update the visual representation of the control:
contentItem.dataBind('value', setFlipSwitchValue);
// Conversely, whenver the user adjusts the flip-switch visually,
// update the underlying content item:
$flipSwitch.change(function () {
contentItem.value = ($flipSwitch.val() === 'true');
});
// To set the width of the slider to something different than the default,
// need to adjust the *generated* div that gets created right next to
// the original select element. DOM Explorer (F12 tools) is a big help here.
if (optionalWidth != null) {
$('.ui-slider-switch', $(element)).css('width', optionalWidth);
}
else {
$('.ui-slider-switch', $(element)).css('width', defaultWidth);
}
//===============================================================//
// Helper function to set the value of the flip-switch
// (used both during initialization, and for data-binding)
function setFlipSwitchValue(value) {
$flipSwitch.val((value) ? 'true' : 'false');
// Having updated the DOM value, refresh the visual representation as well
// (required for a slider control, as per jQueryMobile's documentation)
$flipSwitch.slider(); // Initializes the slider
$flipSwitch.slider('refresh');
// Because the flip switch has no concept of a "null" value
// (or anything other than true/false), ensure that the
// contentItem's value is in sync with the visual representation
contentItem.value = ($flipSwitch.val() === 'true');
}
});
}
This piece of code works fine. It renders the flipswitch on the screen. I am showing the data in an Edit screen, which is coming in a popup. Problem arises when I open that popup which contains the flipswitch and without changing any data on UI, I just try to close that popup screen. The IE hangs and it gives error saying that long script is running. When I debug the createBoolenaSwitch function, I came to know that it is going in infinite loop inside the function called setFlipSwitchValue(value){}
Why is this function getting called and this is going in an infinite loop?

How to sync model watched by ngRepeat when the repeated DOMs are modified externally?

I have two lists which are rendered by my directive. The requirement is that user can move an item from one list to another. I have a simplified implementation of this below:-
http://jsfiddle.net/yK7Lt/
The above shows a demo of how it should behave. Notice in this I manipulate the model and the DOM auto-syncs with it.
However, the problem is I am using jquery-ui-sortable plugin. So, the user can drag and drop the item from one list to another. Since jQuery is unaware of AngularJs so it modified the DOM. Now in my directive I have placed the code to sync the underlying model with the changed DOM.
The below jsfiddle code is a simplified version of my code.
http://jsfiddle.net/5Xuz2/1/
The relevant code snippet is:-
$('#btn').on('click', function () {
var li = $('#left li').first().detach();
$('#right').prepend(li);
console.log('moved top DOM to right list');
angular.element('#left').scope().$apply(function () {
// The moment this code runs, the DOM related to i is
// marked with $$NG_REMOVED, and is removed from page.
// Also somehow the DOM related to item D too is removed.
i = itemsl.shift(); // i is global variable.
});
angular.element('#right').scope().$apply(function () {
itemsr.unshift(i);
console.log('synced data with DOM');
});
});
The problem I am facing with my implementation is that the right list empties out as soon as I sync my left list model.
What is wrong with my implementation?
Is there a better approach?
the problem here is you are manipulating DOM with both Angular and jQuery... if you remove this piece of code
var li = $('#left li').first().detach();
$('#right').prepend(li);
it is working as expected
btw. I suggest trying angular-UI instead of jQueryUI
edit: OR you can try to refactor your code to something like this
var itemsl, itemsr, i, move;
function Model(name) {
this.name = name;
}
function Ctrl($scope) {
itemsl = $scope.itemsl = [new Model('A'), new Model('B'), new Model('C')];
itemsr = $scope.itemsr = [new Model('D')];
move = function() {
$scope.$apply(function() {
i = itemsl.slice(0,1);
itemsl.splice(0,1);
itemsr.unshift(i[0]);
i = null;
});
}
}
$(function () {
$('#btn').on('click', function () {
console.log('moved top DOM to right list');
move();
});
});

Monotouch.Dialog - How to push a view from an Element

It seems like this should be very easy, but I'm missing something. I have a custom Element:
public class PostSummaryElement:StyledMultilineElement,IElementSizing
When the element's accessory is clicked on, I want to push a view onto the stack. I.e. something like this:
this.AccessoryTapped += () => {
Console.WriteLine ("Tapped");
if (MyParent != null) {
MyParent.PresentViewController(new MyDemoController("Details"),false,null);
}
};
Where MyDemoController's gui is created with monotouch.dialog.
I'm just trying to break up the gui into Views and Controlls, where a control can push a view onto the stack, wiat for something to happen, and then the user navigates back to the previous view wich contains the control.
Any thought?
Thanks.
I'd recommend you not to hardcode behavior in AccessoryTapped method, because the day when you'll want to use that component in another place of your project is very close. And probably in nearest future you'll need some another behavior or for example it will be another project without MyDemoController at all.
So I propose you to create the following property:
public Action accessoryTapped;
in your element and its view, and then modify your AccessoryTapped is that way:
this.AccessoryTapped += () => {
Console.WriteLine ("Tapped");
if (accessoryTapped != null) {
accessoryTapped();
}
};
So you'll need to create PostSummaryElement objects in following way:
var myElement = new PostSummaryElement() {
accessoryTapped = someFunction,
}
...
void someFunction()
{
NavigationController.PushViewController (new MyDemoController("Details"), true);
}

Resources