ionicPopup close on tap - css

I have a working ionicPopup which closes on a time limit. Is it possible to make it close on a single/double tap on anywhere on the screen? I know I can set a close button, but thats not really what I need. I need a simple dismiss method, and a tap on the screen I think is the more practical.
Code:
var errorPopup = $ionicPopup.show({
scope: $scope,
title: 'Unexpected Error',
templateUrl: 'error.html'
});
$timeout(function() {
errorPopup.close();
}, 3000);
}
And another question, I have a bunch of hyperlink tags within my html code. But when I run my app ionic puts a 1px border around each hyperlink. Is it possible to remove somehow the "" tag border. I know it should be a CSS thing, but I don’t want to modify the original ionic style, but would prefer to override that segment with another. Any gurus out there can help?
Solution: (Link)
<div class="col text-center">
<a class="item dash-link" id="link" href="#" onclick="window.open('http://www.example.com', '_blank', 'location=no'); return false;">
<img ng-src="img/icons/example.png" height="80" width="80"></a>
<br>
GMail
</div>
CSS:
#link {
text-decoration:none;
border:0;
outline:none;
}

This is a service to achieve this behavior.
Install
Install it with bower
$ bower install ionic-close-popup
Include the ionic.closePopup module in your app's dependencies:
angular.module('app', ['ionic', 'ionic.closePopup'])
Usage
Register your newly created popup to the closePopupService service :
var alertPopup = $ionicPopup.alert({
title: 'Alert popup',
template: 'Tap outside it to close it'
});
IonicClosePopupService.register(alertPopup);

Related

How can I render contentful images dynamically in my gatsby portfolio website

I have been struggling to render images from contentful in my gatsby site. I have used gatsby-plugin-image to render the image from contentful. I cannot dynamically render the images. please help me.
I import
import { GatsbyImage, getImage } from "gatsby-plugin-image"
my graphQL query is.
const data = useStaticQuery(graphql`
query {
allContentfulBooks(sort: { bookTitle: ASC }) {
edges {
node {
bookTitle
author
date(formatString: "MMMM Do, YYYY")
type
bookCover {
gatsbyImageData(
width: 300
placeholder: NONE
quality: 75
layout: CONSTRAINED
)
}
slug
summary
}
}
}
contentfulBookHeading {
heading
mainText {
raw
}
}
}
`)
I try to render the book Cover here
<ol>
{data.allContentfulBooks.edges.map((edge) => {
const image = getImage(edge.node.bookCover.gatsbyImageData)
return (
<li className={bookStyles.books}>
<div className={bookStyles.bookThumbnail}>
<div className={bookStyles.bookCover}>
<GatsbyImage src={image} alt="Book Cover" />
</div>
<div>
<Link to={`/book/${edge.node.slug}`}>
<h3 className={bookStyles.title}>{edge.node.bookTitle}</h3>
</Link>
<h5 className={bookStyles.author}>
Author: {edge.node.author}
</h5>
<h6 className={bookStyles.type}>Type: {edge.node.type}</h6>
<p className={bookStyles.date}>Date Read: {edge.node.date}</p>
<p className={bookStyles.summary}> {edge.node.summary}</p>
<Link to={`/book/${edge.node.slug}`}>
<p className={bookStyles.fullnotes}>Read full book notes</p>
</Link>
</div>
</div>
<hr />
</li>
)
})}
</ol>
I tried to render the book cover image from contentful. but it's not working
My first thought when reading your ask was that you are looking to load data dynamically, as in at load time, my original answer would work for that. After rereading your question, I believe you are not having difficulty loading data dynamically at load time but, rather you are not seeing the images display using the useStaticQuery and loading the data at build time.
Steps to ensure you should see the media:
open http://localhost:8000/___graphql in a browser and run your query, ensure you see the media you are expecting.
If you do not see the media:
First, check Contentful and ensure that the media is published.
Next, try stopping your app and restarting it, ctrl c should cancel the running command, then start the site back up. This will ensure that you content is pulled in and ready to render.
If you see the media in graphical, my next suggestion is to debug your site and console.log the data. Try putting in console logs
console.log("gatsbyImageData", edge.node.bookCover.gatsbyImageData)
const image = getImage(edge.node.bookCover.gatsbyImageData)
console.log("image", image)
next open up the developer menu in your browser and click on console
reload the page and verify the output of the console logs. This should help you ensure that data is present.
If you are having a dynamic rendering issue the answer is, useStaticQuery, grabs all of your Contentful data at build time. This is by design and is part of why Gatsby is so fast. You will need to use something like Apollo in order to grab dynamic data in Gatsby. Check out this article that provides more details and a possible solution.

How to load a placeholder image then toggle to the real one once HTTP calls are done?

I'm currently working on a project with a particularly large gif file on the page.
I'd like to be able to load something much smaller, like a static image or perhaps even just a colored div, while the gif is loading to improve the performance of the website.
The current tech stack is Nuxt and SASS.
Apparently I need to add some example code. Here is how the image is rendered at the moment.
Also, to add some further clarity, I am looking to prioritize the loading of all other elements on the page before this gif.
<img src="filename.gif" />
Assume we have a big local image tasty.jpg (huge 4k pizza) and a small one with ducks, here is how to make a simple swap between both while using the fetch() hook.
<template>
<div>
<img
:src="require(`~/assets/img/${currentImage}`)"
width="800"
height="800"
/>
</div>
</template>
<script>
export default {
async fetch() {
await this.$axios.$get('https://jsonplaceholder.typicode.com/photos')
console.log('5000 photos loaded!')
},
fetchOnServer: false, // the `fetch` hook will be called only client-side
computed: {
currentImage() {
if (process.server) return 'duck.jpg'
return this.$fetchState.pending ? 'duck.jpg' : 'tasty.jpg'
},
},
}
</script>
you can use this
<style>
.wrapper {
width: 30rem;
height: 30rem;
background-color: orangered;
}
</style>
<div class="wrapper">
<img src="filename.gif" />
</div>

popover trigger not working for 'focus' but works for 'hover'

In my project, I use a bootstrap popover to show a table which populates through knockout observableArray. My problem is, it shows popover correctly to 'hover' but not to the 'focus'
This is my anchor link which triggers the popover.
<a style="cursor: pointer; font-weight: 100" data-bind="event: { mousedown: TndTrainingRegisterAdmin.ShowSchedule } , attr: { id: 'schedule' + appId()}" data-toggle="popover" data-trigger="focus" data-placement="right" data-html="true"> View Schedule </a>
I tried removing data-trigger="focus" and adding only one side of the code. it also didn't work out. So it's not due to code repetitions.
This is the knockout model's side code.
var ctrlId = '#schedule' + rs.appId();
$(ctrlId).popover(
{
template: '<div class="popover" role="tooltip" style="width: 100%; max-width:600px"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>',
html: true,
content: function () {
return $('#divViewSchedule').html();
}
});
This is div code which contains the table.
<div id="divViewSchedule" class="hide">
#Html.Partial("~/Views/TrainingRegistration/_CourseSchedule.cshtml")
</div>
This popover works fine when I use data-trigger='hover' or trigger: 'hover' But I want it to work as 'focus' behavior. I tried adding data-trigger='focus' and trigger: 'focus' none of these working neither showing any errors in console.
Can Anyone help me, please? :)

Angular 2 - What's the equivalent of routerLinkActive="active" inside a TypeScript (.ts) file?

I was using routerLinkActive="active" inside the html file with routerLink=[myId] to highlight the active anchor in a ul.
Example:
<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
But when I remove the [routerlink]="[myId]" and replace it with a click listener (that does some calculation and then redirects the route using this.router.navigate(['/someURL', myId]) ) the routerLinkActive="active" no longer works/highlights.
Example:
<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
When inspecting the anchor elements using the routerLink=[myId], the style is set to:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
z-index: 2;
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
Is it possible to set the active anchor style in the .ts file in the onClick() function? Or is there a simpler way around this?
Highlighting a specific link in the navigation is a reflection of the current state of the app: link A is highlighted because the user is looking at page A.
You're asking how to highlight the link as the result of a click. This approach is less than ideal: you could end up highlighting the link before the new route/page is actually activated. Most importantly, if the user reloads the page or navigates to it directly because they bookmarked it, the link will NEVER be highlighted (because no one clicked it).
You need to find a way to highlight the link based on app state, NOT as the result of an action (the typical flow is: action => changes state => updates UI).
Maybe something like this:
#Component({
template: `
<a [class.active]="currentPath == 'home'">HomeComponent</a>
`
})
export class HomeComponent {
currentPath = '';
constructor(route: ActivatedRoute) {
// Retrieve current path.
this.currentPath = snapshot.url.join('');
}
}
The idea is to retrieve the current path and expose it to the template.
Like Günter suggested, you can probably find more robust code for testing the current path in routerLinkActive's source code.

jQuery validate using custom div and css

I have a div that I want login error messages to go into:
<div id="loginMessage" class="blankBox"> </div>
When there are validation errors, I want the class of this div to be 'errorBox'. When there are no validation errors, I want the css to be 'blankBox'.
And I have the following jQuery validation:
<script>
$(function() {
$("#loginForm").validate({
rules: {
username: "required",
password: "required"
},
messages: {
username: "Please enter a username",
password: "Please enter a password",
},
errorLabelContainer: "#loginMessage",
wrapper: "li",
highlight: function(element) {
$(element).addClass('errorBox');
},
unhighlight: function(element) {
$(element).removeClass('errorBox');
},
});
});
</script>
Unfortunately, what's happening is that the errorBox css is being applied to the input fields. ?!? I cannot get this to work.
Any ideas?
Based on your comment from another answer:
"I want the css to be neutral until errors appear in it, and then reset
to neutral when errors leave it."
I have no idea what "neutral" means, but by default when all errors leave the container, the plugin makes the container "hidden". In other words, all that matters is the style of the container when it contains errors since it's only going to be seen when there are errors inside of it. Otherwise, it's simply hidden. To achieve this initial state, set the style to display: none;. You may also set your other properties for when it will be seen with errors. (refer to the jsFiddle example).
Despite the other answers, errorPlacement is no good in this scenario. It's only used for placing the individual messages. It has nothing to do with the messages inside the error container.
I also removed your highlight and unhighlight callback functions as those are fired off on a field-by-field basis and also would have nothing to do with your error container. (You've also broken their default functionality by over-riding them with your own functions.)
DEMO: http://jsfiddle.net/6dCB7/
jQuery:
$(document).ready(function () {
$('#loginForm').validate({ // initialize the plugin
errorLabelContainer: "#loginMessage",
wrapper: "li",
rules: {
// your rules
}
});
});
HTML:
<div id="loginMessage"></div>
<form id="loginForm">
....
</form>
CSS:
#loginMessage {
display: none;
/* also set the properties for when it displays with errors */
}

Resources