I'm working in a Reveal.js presentation, for future needs I'm wrapping it around an Ionic 2 app.
First approach is working fine, what I've done is a simple sidemenu template with a page that loads the Reveal.js presentation.
At first it seems to work fine, but:
issue: First time I open the Reveal.js page, it loads ok, but If I'm loading another page, and then returning to it, it doesn't load the presentation.
Example:
https://github.com/xanisu/ionic2-reveal.js
reveal.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import * as Reveal from 'reveal.js/js/reveal';
#Component({
selector: 'page-reveal',
templateUrl: 'reveal.html'
})
export class RevealPage {
reveal : any;
loaded : boolean = false;
onstructor(public navCtrl: NavController) {
}
ngOnInit() {
console.log("ngOnInit!");
this.reveal = Reveal;
this.loadSlides();
}
loadSlides() {
//this function is intended to load all dinamic content for slides (json, bbdd, webservice....)
this.revealInit();
}
ionViewDidLeave() {
this.loaded = false;
}
revealInit() {
this.reveal.addEventListener( 'ready', ( event ) => {
this.loaded = true;
});
let revealOptions = {
controls: true,
progress: true,
slideNumber: false,
history: false,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
fragments: true,
embedded: false,
help: true,
showNotes: false,
autoSlide: 0,
autoSlideStoppable: true,
autoSlideMethod: Reveal.navigateNext,
mouseWheel: false,
hideAddressBar: true,
previewLinks: false,
transition: 'slide', // none/fade/slide/convex/concave/zoom
transitionSpeed: 'default', // default/fast/slow
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
viewDistance: 3,
parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null
};
this.reveal.initialize(revealOptions);
}
}
reveal.html
<div class="reveal">
<div class="slides">
<section>Single Horizontal Slide 1</section>
<section>
<section>Vertical Slide 2.1</section>
<section>Vertical Slide 2.2</section>
</section>
<section>Single Horizontal Slide 3</section>
</div>
</div>
As far as I know, in your Reveal.js version (3.5.0) you can only use the Reveal.initialize() once. This github feature request is the only info I could find about it.
In the 4.0.0 Reveal.js version there is a new feature called Multiple Presentations so now you can create multiple instances of the Reveal class and initialize a new one each time you enter the page.
Even though we don't want to have multiple presentations side to side, this solved my problem when revisiting the same page won't load the Reveal slides again.
A brief example of how you can store your <div class="reveal presentation">...</div> in a new instance of Reveal could be something like this:
ngOnInit() {
console.log("ngOnInit!");
let presentation = new Reveal(document.querySelector('.presentation'));
presentation.initialize();
}
Related
Scenario :
When the page is rendering the products are shown and every product has a discover button. On clicking the button I want to display the gallery / slider images below that product.
Currently, when I click the first product, Swiper is showing the images. And, if I slide the images to 3rd or 4th (or any), the new product slider image is starting from that particular index i.e., from 3rd or 4th.
The configuration I used for Swiper is :
public config: SwiperConfigInterface = {
centeredSlides: true,
initialSlide: 0,
slidesPerView: 1,
loop: false,
spaceBetween: 0,
autoplay: false,
direction: 'horizontal',
keyboard: false,
navigation: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
hashNavigation: false,
effect: 'slide'
};
And, the discover button is calling the below method :
discover(locationId) {
this.locationImages = [];
this.destinations.forEach(selectedData => {
if(selectedData._id == locationId){
selectedData.optional_images.forEach(image => {
this.locationImages.push(image)
});
}
});
console.log(this.locationImages);
}
I searched the docs and google, didn't find any reliable solution. Please suggest some answers. Thank you in advance.
Check the documentation at https://swiperjs.com/swiper-api - seems that you can use swiper.slideTo(index, speed, runCallbacks) method to revert to first (or any) slide element whenever you need, like upon changing the active product.
I am trying to use scrollify for my website (Wordpress, woocomerce) www.chame-lemon.com and I'm totally green in programming, so I really need your help guys.
I need to disable the plugin on shop page and product pages, I'm using a class named "hwdp" to all sections on the pages when I want to use plugin. but he is activated on other pages because of the footer (it has a class to turn on scrollify also) but I can't use two separate footers in Wordpress, so I need to use code with using a function
$.scrollify.disable();
The disable method turns off the scroll snap behavior so that the page scroll like normal.
there is documentation for that plugin
https://projects.lukehaas.me/scrollify/#methods-continued
that should look like that:
if there is no class named hwdp on the page
the plugin should be disable
else
he should be enabled
and I tried to fix that by myself, I spend hours and i got no results... and i know that's a very simple thing for someone who knows jquery.
<script>
jQuery(document).ready(function($) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
if (!$('section').hasClass('.hwdp')) {
$.scrollify.enable();
}else{
$.scrollify.disable();
}
});
</script>
In your code, the plugin is being initialized on every page regardless of whether it finds the .hwdp class. It's better to only be initialized when it needs to be.
Here's how you can enable the plugin only when there exists a section on the page with the class .hwdp.
<script>
jQuery(document).ready(function($) {
if($('section.hwdp').length) {
$.scrollify({
section : ".hwdp",
interstitialSection: ".footer",
easing: "easeOutExpo",
scrollSpeed: 1200,
offset: 1,
scrollbars: true,
standardScrollElements: "",
setHeights: true,
overflowScroll: true,
updateHash: true,
touchScroll: false,
before:function() {},
after:function() {},
afterResize:function() {},
afterRender:function() {},
});
}
});
</script>
I am using Angular-Slickgrid in my angular application.
Grid is working fine but I am facing issue with Headermenu.
When I run the application unable to see Headermenu icon on mousehover in any header.
I am using below gridoptions :
this.gridOptions = {
enableAutoResize: true,
enableCellNavigation: true,
autoEdit: false,
enableRowSelection: true,
rowHeight: 30,
editable: true,
enableGrouping: true,
forceFitColumns: true,
enableHeaderButton: true,
enableHeaderMenu: true,
gridMenu: {
hideExportCsvCommand: true,
hideExportTextDelimitedCommand: true,
hideExportExcelCommand: true,
hideClearAllSortingCommand: true,
hideForceFitButton: true,
onBeforeMenuShow: (a, b) => {
}
}
};
As you can see I have set enableHeaderMenu: true, even after this unable to see the header menu.
Below is the image my grid look like:
When I mousehover on any header unable to see header menu icon(on which I need to click to open the header menu)
I have added the reference of required css files also and I think css is working.
Below is code of angular.json file:
"styles": [
"src/styles.scss",
"./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/flatpickr/dist/flatpickr.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"./node_modules/#fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
"src/slickgrid-styles.scss",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.min.js",
"./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
]
code of slickgrid-styles.scss file :
#import './node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';
After investigatng my code finally I found the route cause for the issue.
I am using 12 columns in my grid out of which I want to display only some columns on page load say 9 columns(user can the check the column from grid menu to make visible).For this purpose I am using below code:
setGridDefaultVisibleColumns() {
const visibleColumns = this.columnDefs.filter((c) => {
return c['visible'] !== false;
});
this.angularSilkGrid.slickGrid.setColumns(visibleColumns); }
I am calling this method in angularGridReady
angularGridReady(angularGrid: AngularGridInstance) {
this.dataGrid = angularGrid.slickGrid;
this.angularSilkGrid = angularGrid;
this.setGridDefaultVisibleColumns();
}
After commenting the setGridDefaultVisibleColumns function call my issue is resolved
Below is the workaround for the issue.setColumns method of slick gird is also affecting the headermenu.
I can hide the column like below without affecting the headermenu.See the below code
setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
if (c['visible'] === false) {
this.angularSilkGrid.extensionService.hideColumn(c);
}
}); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);
}
I have a set of data I pull in via Firebase. I want to display the images referenced in the Firebase data in a carousel. I have setup a directive (below) The issue I'm having is with the v-for. The directive runs prior to v-for and thus, no carousel as the items do not exist.
Directive:
directives: {
slick: {
inserted: function (el) {
$(el).slick({
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
speed: 2000,
fade: true,
pauseOnHover: false
})
}
}
}
HTML
<div v-slick>
<div v-for="sponsor in sponsors">
{{sponsor.name}}
</div>
</div>
Wait to instantiate the directive until sponsors contains data.
One quick and dirty way to do this:
<div v-slick v-if="sponsors.length"> ... </div>
I am using the Toastr 2.1 JavaScript library to display transient user input validation error messages. I set preventDuplicates option to true. It is not working -- I still see duplicate messages when users click validate button in rapid succession (clicks are faster than 'timeout').
Here are my toastr defaults:
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
target: 'body',
closeHtml: '<button>×</button>',
newestOnTop: true,
preventDuplicates: true,
progressBar: false
};
}
Do i need to make any other changes to prevent duplicate error messages?
this may help
toastr.options = {
"preventDuplicates": true,
"preventOpenDuplicates": true
};
toastr.error("Your Message","Your Title",{timeOut: 5000});
I believe it's working as expected
preventDuplicates: Prevent duplicates of the **last toast**.
Perhaps this is the property you are looking for?
preventOpenDuplicates: Prevent duplicates of open toasts.
I had the same issue and it turned out that toastr preventDuplicates option does not work for array messages (current version 2.1.1). You need to convert the array to string using join.
I have the same requirements as you. Below is my implementation. See if it can help you.
function hasSameErrorToastr(message){
var hasSameErrorToastr = false;
var $toastContainer = $('#toast-container');
if ($toastContainer.length > 0) {
var $errorToastr = $toastContainer.find('.toast-error');
if ($errorToastr.length > 0) {
var currentText = $errorToastr.find('.toast-message').text();
var areEqual = message.toUpperCase() === currentText.toUpperCase();
if (areEqual) {
hasSameErrorToastr = true;
}
}
}
return hasSameErrorToastr;
}
//Usage
var message = 'Error deleting user';
if (hasSameErrorToastr(message)) {
toastr.error(message, title, errorToastrOptions);
}
The code is to check whether there are existing error toastr which has the same message being displayed. I will only fire the toastr.error if there is no existing instance of the same error on display. Hope this helps. The code can be refactored futher more but I'll leave it like this so that its more easier to understand for others.
imports: [
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
this is also present in npm for ngx-toastr documentation. you can add it in your app module.ts to see the change.
this may help.
var config = {
maxOpened: 1,
timeOut: 100
}
put it in your toastr config.and it should work.opened toastr is made to 1,and timeout set to 100.
Search preventDuplicates in toastr.min.js and change
preventDuplicates:!1
to
preventDuplicates:1
I was facing the same issue ngx-toastr and resolved by adding the below code in my module file.
ToastrModule.forRoot({
maxOpened: 1,
preventDuplicates: true,
autoDismiss: true
})
Also, if lazy loading is implemented, then you need to add the same lines of code to your parent module file also as I've added in my app.module.ts
Add preventDuplicates:1 to
toastr.options = {
maxOpened: 1,
preventDuplicates:1,
autoDismiss: true
};
I added this in the constructor and it worked for me
this.toastr.toastrConfig.preventDuplicates = true;