fullcalendar and bootstrap visible-print - javascript

I am trying to include two fullcalendars on one page. The first should only be visible on screen and the second should only be visible on print.
<div class="hidden-print">
<h1>This is hidden in print</h1>
<div id="calendar"></div>
</div>
<div class="visible-print">
<h1>This is visible in print</h1>
<div id="calendar2"></div>
</div>
But when I print the page, the second calendar is not visible and if I check the source the contents of the second calendar is not rendered. I created a plunk to demonstrate it: http://run.plnkr.co/plunks/RQx1Up2Y1jbzs9Ixm2aX/
(code: http://plnkr.co/edit/RQx1Up2Y1jbzs9Ixm2aX)
It makes sense since this is expected behaviour according to the fullcalendar docs:
"Notice that this example calls render whenever any tab is shown, not just the tab that the calendar is within. This is okay, because FullCalendar is smart enough to only render calendars that are visible to the user." http://fullcalendar.io/docs/display/render/
Is it somehow possible to override this behaviour and put a fullcalendar within a "visible-print"-class anyway?

This isn't a great answer and I would love to see a better one. But it should work if you have a fairly static fullcalendar.
Essentially, start with the FC outside of the visible-print, render it, then move it in.
$('#calendar2').fullCalendar({});
$('#calendar2').fullCalendar('render');
$('#calendar2').appendTo(".visible-print");
Plunker
Note that every time you make a change to it, it will need to be moved out and rendered again.

Related

Angular Directive not working with *ngIf. Calling directive from component

I have two DIVs - one, that is always visible, and another one, that gets displayed after I click a button (it is toggable):
<div>
<div>
<small>ADDRESS</small>
<p [appQueryHighlight]="query">{{ address}}</p>
</div>
</div>
<div *ngIf="showDetails">
<div>
<small>NAME</small>
<p [appQueryHighlight]="query">{{ name}}</p>
</div>
</div>
My custom directive works well on the first DIV (it changes the color of letters inside the paragraph that match the query entered in an "input"), but does not work on the second DIV.
Here is an example of how "Test address" looks like when query is "addr":
Test addresswhere bold text is for example red-colored text.
But when I have name John, and query is "Joh", it should also be colored once shown with the button, but it is not.
As I understand, I need to re-run the directive after I click and toggle the second div. Also, probably I have to do this with delay, so it has time to be shown. How can I do this?
UPDATE
Problem with my directive is related to *ngFor - both DIV are located withing ngFor. I have to call directive ngOnChanges or ngOnInit only after the new list get propagated based on the query. I have no idea how to do this, and currently, directives get loaded before ngFor fully loads - this cause problems.
Here is my previous answer:
I finally managed to solve this problem, thanks to #iHazCode.
So firstly, this is probably a duplication of problem described here: Angular 4 call directive method from component
Because my directive hightlights the specific letters in paragraph based on input query, each time the query changes, the directive should fire, thus I am using ngOnChanges withing the directive.
This is not working with *ngIf, because when ngOnChanges fires, the second div and paragraph is not visible.
As a workaround, we can access the directive from out component using #ViewChildren:
#ViewChildren(QueryHighlightDirective) dirs;
And then call it's ngOnChanges method, once div is toggled. In my case, the problem was related with last occurence of the directive within the component:
toggleDetails() {
...
this.dirs.last.ngOnChanges();
}
That was exactly what I was looking for, I hope it will help someone.
In my case I also encountered another problem - the defined DIVs are within *ngFor, which is also propagated based on the query, so I have to make sure that the list will get propagated before calling ngOnChanges. I haven't find a solution for this yet.
ngIf does not show/hide elements. ngIf determines if the element exists on the DOM. You can verify this by looking at the source of your rendered page. Change the code to use ngHide/Show instead.

Can I dynamically create / destroy Vue components?

So, I'm creating a fairly complex Vue application that fetches data from our backend API and displays it on the front-end, depending on filters the person selects. Its default is to display everything at once, then once the user selects filters, it will pull out the "card" components that don't have those attributes. Everything has been going great until today, which I tried to add Google Maps into it, via their API (I'm using the vue2-google-maps package to make this easier on myself, since we plan to implement Polylines in the future).
The problem is that I'm utilizing Foundation as my CSS framework and initializing the map within a Reveal modal. The only way I've been able to get the modal working without any warnings in the console is by using an example I found online which utilizes the mounted() property:
mounted() {
$(this.$el).foundation();
},
unmounted() {
$(this.$el).foundation.destroy();
}
This works great, until I try to call a Google Map inside the modal, because instead of creating the map when the modal fires, it creates everything on page load. Not a big deal if I was only creating a few maps... but on-load I'm rendering 92 maps. As you can imagine, this is incredibly slow.
In its simplest form, the structure of my app is:
<app>
<filters-component></filters-component>
<div class="off-canvas-content">
<nav-component></nav-component>
<div class="row card-grid">
<card-component>
<modal-component></modal-component>
</card-component>
</div>
</div>
</app>
Currently, the modal component is the only nested component, mostly just so it's easier to keep track of what modal belongs to which card.
Before, I was using a method to fire each modal, which looked like this, with a #click event on the open modal button, however, this still renders all maps on load and also gives a console error that reads "VM215130:180 Tried to initialize reveal on an element that already has a Foundation plugin." If you click the button more than once.
<a :data-toggle="'modal-' + school.id" #click="openModal(school.id)" class="float-right" tabindex="0" aria-label="Open More window" title="Open More window">
More <icon name="info-circle" label="More information icon"></icon>
</a>
<script>
export default {
methods: {
openModal: function($schoolid) {
$('#modal-' + $schoolid).foundation();
console.log('modal-' + $schoolid + ' launched')
}
}
</script>
Is there a way to only create the modal component when this button is clicked, or somehow lazy load it only when the modal is opened?

AJAX causes inconsistent renderings

I am using Angular2 and have a template which uses ngFor to display a div DIV1 if a flag is true else to display another div DIV2.
This flag is retrieved with AJAX from the server in the ngOnInit() method of the component.
The problem is that if the flag is initialized to true bue retrieved as false then when the page is rendered initially DIV1 is rendered and very fast it disappears and DIV2 is displayed. This is annoying and the user can notice the temporary inconsistent view rendering (especially if the AJAX call is slow).
It is a simple case and therefore I don't provide an example since here I don't want to test if the aforementioned functionality works.
The question is how should I treat this and similar cases so that only the correct divs should be displayed?
You can add another flag that indicates if the value was already retrieved and wrap your content in an *ngIf or use hidden
<div *ngIf="realValueRetrieved">
<!-- <div [hidden]="realValueRetrieved"> -->
<div *ngIf="flag">
</div>
</div>
and set realValueRetrieved to true if it is false, otherwise don't change it.
Actually there are unlimited ways to handle that and it's up to you what you actually want. Display a spinner, display nothing, use an animation when the value arrives and the content is revealed, ....

Hide parent view when displayen nested views

I want to hide a list of users when I to display the nested view users.info .
I wrote this code
HTML
<div ng-hide="hide">
the list of users...
<a ui-sref="users.info"> <button ng-click="hideUsersList()"> </a>
</div>
Controller
$scope.hideList = function hideList()
{$scope.hide=true;};
it works and hide the list when I click on the button, but the problem is when I use the back button in the browser, hide still 'true' and I get a blank page
If you only hide the DOM element, the scope remains and the hide variable is still attached to it with the latest value.
If I understand correctly, what you are looking for is maybe switching the nested views when moving between states, that way each time you move to a new state you'll be instantiating a new controller and a new scope.
Nested States, Nested Views

Joomla Buttons Conflicting Each Other

I have two modules which each contain a button code as follows:
First Button
<div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Button</button>
Second Button
<div onclick="parent.location='second-link'" data-mce-onclick=""><button class="button">Second Button</button>
When I show these buttons in the same template position on at the same time in the article, the First Button loses it’s functionality. What do I need to change in order to have them both be able to function properly within the same page?
try to use 1 module only for your links and
use css place your buttons
check this site for how to it uses 1 module for placing that links
http://soroushabtahi.com

Categories