I'm newbie with Aurelia and frontend frameworks generally.
I have page with List
list.html
<template>
<require from="services/list-item"></require>
<div class="container-fluid">
<div class="row row-centered container-top-space">
<div repeat.for="item of items">
<list-item item.bind="item"></list-item>
</div>
</div>
</div>
</template>
list.js
import { inject } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
#inject(HttpClient)
export class ListItem{
constructor(httpClient) {
this.items= [];
httpClient.configure(...);
}
}
and ListItem
list-item.html
<template>
<div class="row">
<div class="list-item">
<div class="form-control-inline" style="width:33%">
<span>${item.name} </span>
</div>
<div class="form-control-inline" style="width:54%">
<span>${item.value}</span>
</div>
<div class="pull-right" style="width:100px">
<button class="btn btn-list-item" type="submit" name="submit" click.delegate="edit($event.target.parentElement)">Edit</button>
</div>
</div>
</div>
</template>
list-item.js
import { bindable } from 'aurelia-framework';
export class ListItem{
#bindable item;
edit(element){
//I'd like to replace view component with update component here
}
}
I'd like to change template of list-item on list-item-edit when edit function will be called, but completely don't know how to make it.
Related
I have three components called blog cards that are rendered with an image and text. Depending on how long the text is the cards are of different heights. I want to render them, then get the tallest one, and sort of re-render them, so they are all the same height.
Here is the Page
import * as React from 'react'
import { SocialIconRow } from '#/components/social-icons'
import BlogPostCard from '#/components/BlogCard'
import Image from 'next/image'
import { useState, useEffect } from 'react'
import { FixedSizeList } from 'react-window'
function BlogPostCardsList({ cards }) {
const tallestCardHeight = useMemo(() => {
return Math.max(...cards.map(card => card.height))
}, [cards])
return (
<FixedSizeList
itemCount={cards.length}
itemSize={tallestCardHeight}
width={'100%'}
height={'100%'}
>
{({ index, style }) => <BlogPostCard style={style} {...cards[index]} />}
</FixedSizeList>
)
}
export default function MyComponent(props) {
const [cardHeight, setCardHeight] = useState(null);
const [maxHeight, setMaxHeight] = useState(0);
useEffect(() => {
const calculateHeight = () => {
const cards = document.querySelectorAll('.blog-post-card');
let heights = [];
cards.forEach(card => {
heights.push(card.clientHeight);
});
setMaxHeight(Math.max(...heights));
}
calculateHeight();
setCardHeight(maxHeight);
}, []);
return (
<>
<div className="container mx-auto flex flex-col">
<div className="container mx-auto flex">
<div className="w-1/2 pr-4">
<div className="text-4xl font-bold">Mike Borman</div>
<div className="text-lg mt-2">Writer, Content Creator and Developer on Cardano</div>
</div>
<div className="w-1/2 flex flex-col justify-center">
<div className="max-h-48 max-w-48 mx-auto my-auto">
<Image
src="/images/myfaceppgray.png"
alt="Picture of the author"
className="max-h-48 max-w-48"
width="150"
height="150"
unoptimized={true}
/>
</div>
<div className="mt-4">
<SocialIconRow className="social-icon-row" />
</div>
</div>
</div>
<div className="mt-8">
<div className="text-3xl font-bold">Featured Blogs</div>
<div className="grid grid-cols-3 gap-4 h-full mt-4 align-items-stretch">
<div style={{height: cardHeight}}>
<BlogPostCard
title="The Hydra Protocol Family — Scaling and Network Optimization for the Cardano Blockchain"
slug="the-hydra-protocol-family-scaling-and-network-optimization-for-the-cardano-blockchain"
imageslug="/images/hydra.png"
className="blog-post-card"
/>
</div>
<div style={{height: cardHeight}}>
<BlogPostCard
title="Ouroboros, A deep dive for non PhDs"
slug="ouroboros-a-deep-dive-for-non-phd"
imageslug="/images/ourobouros.png"
className="blog-post-card"
/>
</div>
<div className="h-full row-auto" style={{height: cardHeight}}>
<BlogPostCard
title="Ouroboros, A deep dive for non PhDs"
slug="ouroboros-a-deep-dive-for-non-phd"
imageslug="/images/ourobouros.png"
className="blog-post-card"
/>
</div>
</div>
</div>
</div>
</>
)
}
Here is the Card component:
import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
function BlogPostCard(props) {
const { title, slug, imageslug } = props
return (
<Link href={`/blog/${slug}`}>
<a className="block flex flex-col justify-between rounded-md border-2 border-teal-400 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg">
<img className="rounded-t-md h-48 w-full object-cover" src={imageslug} alt="blog post cover" />
<span className="text-white text-2xl p-4">{title}</span>
</a>
</Link>
)
}
export default BlogPostCard
I tried dynamically rendering them then setting them, btw I have no idea really what Im doing there.
You actually have all but one class already to do this entirely in CSS. Just add h-full to your a tag inside the BlogPostCard component's Link. Then you can get rid of all of the JS. Optionally, you could also remove the justify-between or change it to justify-stretch so that the titles of the blog posts are directly beneath of the post cover images.
In the demo below, you can see the result by clicking run code snippet. Also, if you're upgrading to NextJS 13, it's worth noting that you no longer need (and in fact can't have) an a tag as a child of Link. I'd suggest using article as I've done below, which will be more semantically correct anyway.
function BlogPage({posts}) {
return (
<main className="container mx-auto my-8">
<div className="flex gap-4">
<div className="w-1/2">
<h1 className="text-4xl font-bold">Mike Borman</h1>
<h2 className="text-lg mt-2">
Writer, Content Creator and Developer on Cardano
</h2>
</div>
<div className="w-1/2 flex flex-col justify-center items-center">
<span className="w-[150px] h-[150px] bg-neutral-300 rounded-full grid place-content-center">author img here</span>
<span>social row here</span>
</div>
</div>
<section className="mt-8">
<header>
<h2 className="text-3xl font-bold">Featured Blogs</h2>
</header>
<div className="grid grid-cols-3 gap-4 h-full mt-4 align-items-stretch">
{posts.map((post) => (
<BlogPostCard key={post.id} {...post} />
))}
</div>
</section>
</main>
)
}
function BlogPostCard({ slug, imageslug, title,}) {
return (
<Link href={`/blog/${slug}`}>
<article className="flex flex-col justify-stretch h-full rounded-md border-2 border-teal-400 bg-neutral-600 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg">
<img
className="rounded-t-md h-48 w-full object-cover"
src={imageslug}
alt="blog post cover"
/>
<span className="text-white text-2xl p-4">{title}</span>
</article>
</Link>
)
}
/* Stubbing out next/link here since I can't run NextJS in code snippets */
function Link({ href, children, className }) {
return (
<a href={href} className={className}>
{children}
</a>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<BlogPage posts={[
{
id: 1,
title: 'The Hydra Protocol Family — Scaling and Network Optimization for the Cardano Blockchain',
slug: 'the-hydra-protocol-family-scaling-and-network-optimization-for-the-cardano-blockchain',
imageslug: 'https://d3lkc3n5th01x7.cloudfront.net/wp-content/uploads/2019/05/15233606/700-X-394.png',
},
{
id: 2,
title: 'Ouroboros, A deep dive for non PhDs',
slug: 'ouroboros-a-deep-dive-for-non-phd',
imageslug: 'https://www.almaviva.it/dam/jcr:6212e8ef-1ed6-40e2-a75f-b6fa7c814662/Blockchain_1280x720.jpg',
},
{
id: 3,
title: 'How Blockchain Is Used',
slug: 'how-blockchain-is-used',
imageslug: 'https://imageio.forbes.com/specials-images/imageserve/5f2a32ee3b52675a453e2881/Fascinating-Examples-Of-How-Blockchain-Is-Used-In-Insurance--Banking-And-Travel/960x0.jpg?format=jpg&width=960',
},
]} />
);
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>
I just try to hit the API when like and dislike button is clicked , but I get unauthorized error after passing the authorization header.
What is the solution of this problem. There is post where all users can like or dislike. There is only unauthorized error, everything is true.
This is the screenshot of where the action is written.
This is the screenshot where the error is displayed.
`JavaScript code
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom';
import { deltePost, addLike, deleteLike } from
class PostItem extends Component {
onDelteClick(postId)
{
this.props.deltePost(postId);
}
onLikeClick(id)
{
this.props.addLike(id);
}
onunLikeClick(id)
{
this.props.deleteLike(id);
}
render() {
const {post,auth,showActions}=this.props;
return (
<section className="container">
<div className="posts">
<div className="post bg-white p-1 my-1">
<div>
<a href="profile.html">
<img
className="round-img"
src="//www.gravatar.com/avatar/05434e5d678bc30625550497804f6d0e?s=200&r=pg&d=mm"
alt=""
/>
<h4>{post.name}</h4>
</a>
</div>
<div>
<p className="my-1">
{post.text}
</p>
<p className="post-date">
{post.date}
</p>
{showActions ?(<span>
<button onClick={this.onLikeClick.bind(this, post._id)} type="button" className="btn btn-light">
<i className="fas fa-thumbs-up"></i>
<span>{post.likes.length}</span>
</button>
<button onClick={this.onunLikeClick.bind(this, post._id)} type="button" className="btn btn-light">
<i className="fas fa-thumbs-down"></i>
</button>
<Link to={`/post/${post._id}`} className="btn btn-primary">
Comments <span className='comment-count'>{post.comments.length}</span>
</Link>
{post.user === auth.user.id ?(
<button
type="button"
onClick={this.onDelteClick.bind(this,post._id)}
className="btn btn-danger"
>
<i className="fas fa-times"></i>
</button>
):null}
</span>) :null}
</div>
</div></div>
</section>
)
}
}
PostItem.defaultProps={
showActions:true
}
PostItem.propTypes={
deltePost:PropTypes.func.isRequired,
deleteLike:PropTypes.func.isRequired,
addLike:PropTypes.func.isRequired,
post:PropTypes.object.isRequired,
auth:PropTypes.object.isRequired
}
const mapStateToProps= state =>({
auth:state.auth
})
export default connect(mapStateToProps,{deltePost,addLike,deleteLike})(PostItem)
`
I'm creating a component with a background being provided as a its attribute, like this:
<overlay-card src="https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg" color="rgba-bluegrey-strong">
My component template:
`<div class="card card-image mb-3" style="background-image: url({{src}});" [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
<div class="text-white d-flex py-5 px-4 {{color}}"
>
<ng-content></ng-content></div>
</div>`
What I get is:
// WARNING: sanitizing unsafe style value background-image: url(https://static.pexels.com/photos/51387/mount-everest-himalayas-nuptse-lhotse-51387.jpeg); (see http://g.co/ng/security#xss).
As it's a <div>, I cannot really count on [ngSrc].
You can use ngStyle for that:
<div [ngStyle]="{'background-image': 'url(' + src + ')'}">...</div>
You should make this url trusted in your component code and a litle bit change you component template like this:
import {DomSanitizer} from '#angular/platform-browser';
...
export class OverlayCard {
#Input() src: string;
constructor(private sanitizer: DomSanitizer) {
this.trustedSrc = sanitizer.bypassSecurityTrustUrl(this.src);
}
<div class="card card-image mb-3" style="background-image: url({{trustedSrc}});" [ngClass]="(alignment==='left')?'text-left':(alignment==='right')?'text-right':'text-center'">
<div class="text-white d-flex py-5 px-4 {{color}}">
<ng-content></ng-content>
</div>
</div>
I am new to Vue.js. Very new so this question might sound a lot like a first graders. Forgive me.
I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue) and let the rendering of the look/feel of the characters be done using Character.vue. The characters are created and added to the array and can be retrieved properly. Only thing is...Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined.
Help me?
Attaching files
App.vue
<template>
<div>
<div class='gameHeader'>
<h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
<div class='gameMessage' v-for="msg in gameMessages">
{{ msg }}
</div>
</div>
<div class='gameMain'>
<button #click="rollNewCharacter">Roll New</button>
<div class="playerParty">
<character v-for="p in playerParty"></character>
</div>
<div class="computerParty">
<character v-for="c in computerParty"></character>
</div>
</div>
<div class='gameFooter'>
{{ gameFooter }}
</div>
</div>
</template>
<script>
import Character from "./assets/components/Character.vue";
export default {
components: { 'character': Character },
data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[], playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
rollNewCharacter() {
var c = Character;
c.name = 'Usman';
c.type = 'Warrior';
c.mana = 100;
c.health = 100;
c.totalHealth = 100;
c.totalMana = 100;
console.log(c.name);
this.playerParty.push(c);
console.log(this.playerParty[0].name);
//this.computerParty.push(chr2);
}
}
}
</script>
Character.vue
<template>
<div class="character">
<span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
<script>
export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
</script>
<style>
</style>
You should pass a prop when using the character component:
<character :character="p" v-for="p in playerParty"></character>
I have updated the character to receive only one prop:
export default {
props: [ 'character' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
And this is the character component template with the new prop:
<template>
<div class="character">
<span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
<div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
<div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
<span class='damage'>{{ character.damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
Hi please need help how to render my multinode tree picker value (http://screencast.com/t/NTu1NqXsTmBz) to show it on its parent node named PORTFOLIO ..
i want the multinode picker value should be placed between the Portfolio and About section (http://screencast.com/t/F0Dnnv9a) but I don't know how yet i tried render it and still not work ..
here is the finish template : screencast.com/t/ar1zeZ43Pf6J
Node tree picker code:
#if (Model.Content.HasValue("mntp_pickContent"))
{
var bannerListValue = Model.Content.GetPropertyValue<string>("mntp_pickContent");
<div id="container" class="container-portfolio">
#foreach (var item in bannerListValue.Split(','))
{
var page = Umbraco.Content(item);
<div class="col-md-4 element branding">
<div class="portfolio-item flip ">
<div class="flip-content">
<div class="front">
<img width="360" height="249" src="#page.Url" class="attachment-project-thumb wp-post-image" alt="background4" />
</div>
<div class="back">
<div class="back-content">
<h4>#page.contentTitle</h4>
<div class="txt-project">
<p>#page.contentsubTitle</p>
</div>
<i class="fa fa-plus"></i> More
</div>
</div>
</div>
</div>
<!-- flip container -->
</div>
}
</div>
}
Parent Node Portfolio.cshtml
#{ if (Model.Content.HasValue("port_backImage"))
{
var bgport = Umbraco.TypedMedia(Model.Content.GetPropertyValue<string>("port_backImage"));
<section class="section-wrap section-portfolio" style="background-image: url(#bgport.Url)" id="portfolio">
<div class="container">
<div class="container-wrap row portfolio">
<div class="container-wrap-title col-md-6">
<h2>#Model.Content.GetPropertyValue("pageTitle")</h2>
<h6>#Model.Content.GetPropertyValue("subTitleText")</h6>
</div>
<div class="container-wrap-subnav col-md-6">
<ul class="subnavigation" id="filters">
<li class="active">show all</li>
#foreach (var portMenu in Model.Content.Children)
{
<li>#portMenu.Name</li>
}
</ul>
</div>
</div>
</div>
</section>
}
}
This all depends on the Templating Engine you are using.
If you are using MVC, then you need to add your MNTP logic to a partial view.
See the following link:
https://our.umbraco.org/documentation/Reference/Templating/Mvc/partial-views
If you are using WebForms, then you will need to add your logic to a Razor file OR alternatively a UserControl (.ascx) file. See the following links:
https://our.umbraco.org/documentation/reference/templating/macros/
https://our.umbraco.org/documentation/reference/templating/macros/Razor/
http://umbraco.com/help-and-support/video-tutorials/introduction-to-umbraco/developer-introduction/using-net-user-controls