I saw this document about modals.
But there is no guild-line for waking up a modal from button or anything like bootstrap.
Do you guys know how could I do it?
In Salesforce lightning we don't have any built in function to open/close Modals, This one is working for me.
Component
<div aura:id="exampleModal" class="slds-modal slds-fade-in-open hideDiv" aria-hidden="false" role="dialog">
<div class="slds-modal__container" style="max-width:50rem;">
<div class="slds-modal__header">
<button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.hideExampleModal}">
<lightning:icon iconName="utility:close" size="medium" variant="bare"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading--medium">Example Modal</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="modalContent">
<p>Content goes here</p>
</div>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.hideExampleModal}">Close</button>
</div>
</div>
</div>
Controller.js
hideExampleModal : function(component, event, helper) {
helper.hideExampleModal(component);
},
showExampleModal : function(component, event, helper) {
helper.showExampleModal(component);
},
Helper.js
showExampleModal : function(component) {
var modal = component.find("exampleModal");
$A.util.removeClass(modal, 'hideDiv');
},
hideExampleModal : function(component) {
var modal = component.find("exampleModal");
$A.util.addClass(modal, 'hideDiv');
},
In Style
.THIS.hideDiv {
display: none;
}
By default Modal is open. You need to control using aura:if.
Related
here in my code i m toggling a panel on the basis of click event when clicked it will show and when again clicked on the same button it will disappear. but what i want when i will click outside the button anywhere the panel should close, how do i do that?
function Project(props) {
const [rightPanel, setrightPanel] = useState(false);
function projectToggle () {
if(!rightPanel) setrightPanel(true);
else setrightPanel(false);
}
return (
<React.Fragment>
<div className="vh-ce-align pd-b-10 mg-b-5 bo-bottom-grey">
<div className="button-blue" onClick={projectToggle}>Create New Project</div>
</div>
<div className="d-flex">
{rightPanel ? (<div className="right-side-panel">
<div className="mg-b-20">
<div className="fw-bold mg-b-10">Client Id</div>
<input type="text" className="right-side-input"/>
</div>
<div className="mg-b-20">
<div className="fw-bold mg-b-10">Frequency</div>
<div className="wd-pct-100 d-flex pd-b-5 bo-bottom-grey">
<div className="flex-one">Annually</div>
<i className="fas fa-chevron-down mg-r-10"></i>
</div>
</div>
<div className="mg-b-20">
<div className="fw-bold mg-b-10">Year</div>
<div className="wd-pct-100 d-flex pd-b-5 bo-bottom-grey">
<div className="flex-one">Select Year</div>
<i className="fas fa-chevron-down mg-r-10"></i>
</div>
</div>
</div>): null}
</div>
</React.Fragment>
)
}
Try this code below.
const handleClickClosePanelFromOutside = (e) => {
if (e.target.className !== "button-blue") {
setRightPanel(false);
}
}
useEffect(() => {
document.body.addEventListener("click", handleClickClosePanelFromOutside)
return () => {
document.body.removeEventListener("click", handleClickClosePanelFromOutside)
}
})
What you're looking for is an event type to attach an event handler function to ... And, in this case, the not so obvious answer is a blur (opposite of focus) event. When anything in the DOM observes a user interaction after the button is clicked, the button will receive an onblur event.
I'm doing a tutorial over angular 1.5 and I've gotten far into it and one of the sections seems broken concerning matching a current user to the author username. The class injects the User service and I think assumes I can inherit from a parent controller for the author but it comes up undefined. I tried injecting $scope then setting a variable to $scope.$parent.article (article is the object that has the author name in it) but this was still undefined. I checked the parent controller doing a console log on article and it does have the data that I am trying to get. Here is a link to my project if you want to look at the entire thing but I'll try to post just the relevant code below. https://github.com/RawleJuglal/flow_news_app/tree/front_end/src/js
Parent Controller (article.controller.js)
import marked from 'marked';
class ArticleCtrl {
constructor(article, $sce, $rootScope) {
'ngInject';
this.article = article;
console.log(this.article);
//THIS IS CONSOLE LOG
//{title: "Juglal For StackOverflow",
slug: "juglal-for-stackoverflow-ba400n",
body: "<p> Need the goods</p>",
createdAt: "2017-04-25T14:51:42.131Z",
updatedAt: "2017-04-25T14:51:42.131Z",
author:{
bio:"I'm a MEAN stack developer. But if I don't find a job in Oklahoma soon, I'll be learning C++/Sharp."
following:false
image:"https://media.licdn.com/mpr/mpr/shrinknp_200_200/p/6/000/1e9/0e2/3cd7175.jpg"
username:"RawleJuglal",....
}
// Update the title of this page
$rootScope.setPageTitle(this.article.title);
this.article.body = $sce.trustAsHtml(marked(this.article.body, { sanitize: true }));
}
}
export default ArticleCtrl;
Child Controller (article-actions.components.js)
class ArticleActionsCtrl {
constructor(Articles, User, $state) {
'ngInject';
this._Articles = Articles;
this._$state = $state;
//Code that causes the error because this.article.author.username is undefined
if (User.current) {
this.canModify = (User.current.username === this.article.author.username);
} else {
this.canModify = false;
}
}
}
let ArticleActions = {
bindings: {
article: '='
},
controller: ArticleActionsCtrl,
templateUrl: 'article/article-actions.html'
};
export default ArticleActions;
HTML(article.html) //Just in case this the problem
<div class="article-page">
<div class="banner">
<div class="container">
<h1 ng-bind="::$ctrl.article.title"></h1>
<article-actions article="$ctrl.article"></article-actions>
</div>
</div>
<div class="container page">
<div class="row article-content">
<div class="col-xs-12">
<div>
<div ng-bind-html="::$ctrl.article.body"></div>
</div>
<ul class="tag-list">
<li class="tag-default tag-pill tag-outline"
ng-repeat="tag in ::$ctrl.article.tagList">
{{ tag }}
</li>
</ul>
</div>
</div>
<hr />
<div class="article-actions">
<article-actions article="$ctrl.article"></article-actions>
</div>
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2">
<div>
<form class="card comment-form">
<div class="card-block">
<textarea class="form-control"
placeholder="Write a comment..."
rows="3"></textarea>
</div>
<div class="card-footer">
<img class="comment-author-img" />
<button class="btn btn-sm btn-primary" type="submit">
Post Comment
</button>
</div>
</form>
</div>
<div class="card">
<div class="card-block">
<p class="card-text">This is an example comment.</p>
</div>
<div class="card-footer">
<a class="comment-author" href="">
<img class="comment-author-img" />
</a>
<a class="comment-author" href="">
BradGreen
</a>
<span class="date-posted">
Jan 20, 2016
</span>
</div>
</div>
</div>
</div>
</div>
</div>
In fact, your example will work with angular 1.5 but not >1.6.
here is the reason :
Starting with angular 1.6, bindings are not yet set in the constructor. If you need them, move your code to the $onInit function.
Here is your new ArticleActionsCtrl :
class ArticleActionsCtrl {
constructor(Articles, User, $state) {
'ngInject';
this._Articles = Articles;
this._$state = $state;
this.User = User;
}
$onInit() {
if (this.User.current) {
this.canModify = (this.User.current.username === this.article.author.username);
} else {
this.canModify = false;
}
}
}
let ArticleActions = {
bindings: {
article: '='
},
controller: ArticleActionsCtrl,
templateUrl: 'article/article-actions.html'
};
export default ArticleActions;
I did not test it, do not hesitate to tell me if you have any problem with it.
I have a simple Angular code to show and hide a poppin, but every time I use it I am blocked in the function.
In my controller I have this to show the poppin :
$scope.showHidden = function() {
console.log('in')
$scope.showIt = true;
};
And this to hide it :
$scope.hideIt = function() {
console.log('out')
$scope.showIt = false;
};
And in my HTML :
<li class="beer_list_item beer_item" ng-repeat="beer in beers | filter : myFilter" ng-click="showHidden()">
<img ng-src="{{beer.img}} " alt="{{beer.alt}}" />
<div class="beer_list_item_desc" ng-show="showIt">
<h2 class="title1">{{beer.name}}</h2>
<img src="{{beer.img}}" alt="{{beer.alt}}"/>
<p>{{beer.desc}}</p>
<button class="btn" ng-click="hideIt()">Close</button>
</div>
</li>
If I click on the item the poppin appears, and when I click on the close btn, I see 'out' and 'in' in my logs, and the poppin never disappear.
I'm sure it's a stupid mistake, but I don't see it. If anyone have an idea.. thanks by advance !
You need to prevent the event propagation when click on hideIt:
<button class="btn" ng-click="hideIt();$event.stopPropagation();">Close</button>
This could be a refactoring:
function BeersCtrl($scope, beers) {
$scope.beers = beers;
$scope.showBeerList = true;
$scope.toggleBeerList = function(event) {
$scope.showBeerList = !$scope.showBeerList;
};
}
angular
.module('test', [])
.controller('BeersCtrl', BeersCtrl)
.value('beers', [
{ name: 'Peroni' },
{ name: 'Guinnes' }
])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<article ng-controller="BeersCtrl">
<div>
<button
ng-click="toggleBeerList($event)"
type="button">Toggle Beer List</beer>
</div>
<ul ng-show="showBeerList">
<li
ng-repeat="beer in beers">
<span ng-bind="beer.name"></span>
</li>
</ul>
</article>
</section>
I am using Foundation library.
I want to center a div in ReactJS and I am unable to achieve it.
This is a working example in plain vanilla : http://codepen.io/anon/pen/PqdzZR
<div class="vertical grid-block">
<div class="grid-block text-center"><span>Hi there !</span></div>
<div class="grid-block text-center">
<a class="button" href="#">Test Button</a>
</div>
But, this does not work with ReactJS :
var React = require('react');
var Comp = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
module.exports = Comp;
In the above component, the button has the styling indicating that the Foundation css styling is working.But the div is not centered for some reason.
So, the question is how do I center a div in a ReactJS component using the Foundation library ?
return (<div class="grid-frame">
Should be className?
Check my fiddle: https://jsfiddle.net/reactjs/69z2wepo/
Maybe you forgot to add normalize.css?
var Hello = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
Not sure if React is changing the display property for the button?
Display inline-block can be horizontally centered with text align center. Display block works with margin: 0 auto;
I have a set of directives that share a scope
Update:
The code is available as a plunk here http://plnkr.co/edit/JZ77bsZgGrw6N4K718Is?p=preview
todo-item:
app.directive("todoItem",function(DeleteTodo,$log){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/todo.html',
scope:{
todo:'=value'
},
controller:function($scope){},
replace:true
};
return dirDefObj;
});
template:
<div class="ui card">
<todo-formui ng-show="todo.editMode"></todo-formui>
<todo-cardui ng-show="!todo.editMode"></todo-cardui>
</div>
There are two directives that inherit the scope of this directive:
todo-cardui
app.directive('todoCardui',function(){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/display-todo.html',
scope:false,
replace:true,
controller:function($scope)
{
$scope.clickDone = function clickDone(){
//two tasks (1)toggle the done value on the todo (2) toggle the btnText on the todo
$scope.todo.done = !$scope.todo.done;
$scope.todo.btnText = $scope.todo.done?'Reinstate':'Done';
};
$scope.remove = function remove()
{
DeleteTodo.delete($scope.todo);
$scope.$emit('todo:deleted',$scope.todo);
};
$scope.edit = function edit(value)
{
$scope.todo.editMode = true;
$scope.savedState = angular.extend({},$scope.todo);
};
}
};
return dirDefObj;
});
template:
<div>
<div class="content">
<i class="right floated blue pencil icon" ng-click="edit()"></i>
<header class="ui medium header">
<span ng-class="{'done-todo':todo.done,'normal-todo':!todo.done}">{{todo.task}}</span>
</header>
<div class="description">
<p>{{todo.description}}</p>
</div>
</div>
<div class="extra content">
<button class="ui small green toggle button floated left" ng-click="clickDone()">{{todo.btnText}}</button>
<button class="ui small red button floated left" ng-click="remove()">Delete</button>
</div>
</div>
todo-formui:
app.directive("todoFormui",function(EditService){
var dirDefObj = {
restrict:'E',
templateUrl:'app/templates/edit-todo.html',
scope:false,
controller:function($scope){
$scope.display = function display(){
console.log("Inside the edit to preview function");
$scope.editMode = false;
};
$scope.save = function(){
EditService.edit($scope.todo);
};
$scope.discard = function(){
$scope.todo={
task:'',
dscription:'',
btnText:''
};
$scope.todo = $scope.savedState;
};
},
replace:true
};
return dirDefObj;
});
template:
<div ng-class="{description:show_modal,content:!show_modal}">
<i class="right floated blue unhide icon" ng-click="display()"></i>
<form class="ui small form">
<div class="field">
<label>Task</label>
<input type="text" name="task" placeholder="What do you want to do?"ng-model="todo.task">
</div>
<div class="field">
<label>Description</label>
<textarea ng-model="todo.description"></textarea>
</div>
<div class="two fields">
<button class="ui red button floated right">Discard</button>
<button class="ui submit green button floated right" ng-click="save()">Save</button>
</div>
</form>
When executing the code,I found that the display function in todo-formui would not execute,no matter where I put it or what I tried to do.The save function in the same scope runs with no problems.
In your preview function(as mentioned in plunker), you have to update the scope as
$scope.todo.editMode = false;
instead of
$scope.editMode = false;
then the preview will be avaliable
Hope this helps
It's because the icon is under another html element and the click event isn't triggered. Add a clear after the "preview" icon (which is floated) to push the form where it should be. Use some DOM inspector and you will soon realize the problem.