I'm looking for a way to find if it is possible to change the position of the checkbox in sweetalert 2 from the center to the upper position? I used this code:
(async () => {
const { value: accept } = await Swal.fire({
title: 'Terms and conditions',
input: 'checkbox',
inputValue: 1,
inputPlaceholder:
'Yes, I agree to receive an email, including educational materials, product and company announcements, and community even information, from T&C. I can unsubscribe at any time. I would like to opt into receiving marketing communications as outlined above.',
confirmButtonText:
'Continue <i class="fa fa-arrow-right"></i>',
inputValidator: (result) => {
return !result && 'You need to agree with T&C'
}
})
if (accept) {
Swal.fire('You agreed with T&C :)')
}
})()
The result of this code is this:
I would like to change the checkbox from the center to the position of the word "Yes".
Use the customClass param to achieve the custom placement for the input:
Swal.fire({
input: 'checkbox',
inputPlaceholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
customClass: {
input: 'top-checkbox'
}
})
.top-checkbox input {
align-self: flex-start;
margin: 3px 10px 0 0 !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Related
Whenever addStory() is called, it displays and animates text, but on the 3rd time it only displays the text and not animate it. I tried changing the text and when I hit Ctrl S it animated it. How do I keep animating them whenever they are shown? I've been trying to solve this problem since yesterday but could not find a solution.
sandbox https://codesandbox.io/s/frosty-smoke-nt0we?file=/src/components/Game.tsx
ps: addStory() displays different text whenever it is called, so it should re-render and animate.
const addStory = (newStory: string) => {
setStory(
<>
{newStory === undefined ? (
<span>{story}</span>
) : (
<>
{newStory.split('\n').map((str, index) => (
<motion.p
key={index}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
{str.length > 1 && '=> '}
{str}
</motion.p>
))}
</>
)}
</>
);
};
the addStory() function is called like this
const whichChoice = () => {
if (choice === 'a1') {
return mainStory.a1;
} else if (choice === 'a2') {
return mainStory.a2;
} else if (choice === 'b1') {
return mainStory.b1;
} else if (choice === 'b2') {
return mainStory.b2;
} else if (choice === 'c1') {
return mainStory.c1;
} etc......
else return;
};
useEffect(() => {
const narrate = whichChoice();
addStory(narrate);
}, [choice]);
the choice is changed using onClick via useState hook
the mainStory.a1 etc, returns a string from an object. It looks like this:
export const mainStory: any = {
a: '=> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
a1: '\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
a2: '\n nisi ut aliquip ex ea commodo consequat',
b1: '\n Duis aute irure dolor in reprehenderit \n in voluptate velit esse cillum dolore eu fugiat nulla pariatur \n Excepteur sint occaecat cupidatat non proident',
b2: '\n sunt in culpa qui officia \n deserunt mollit anim id est laborum. \n Sed ut perspiciatis unde omnis iste natus \n voluptatem accusantium doloremque laudantium'
etc...
}
I think the duration property in motion.p indicates that the animation runs from 0secs to 1secs. You might be looking for transition={{yoyo: 10}}
EDIT
Just understood, that its not triggering on consecutive renders, it seems the react DOM tree gets updated with each state change, for this, Framer needs an AnimatePresence to inform framer that the tree has changed.
Reference : https://www.framer.com/docs/animate-presence/
I am attempting to create an angularjs bootstrap accordion that scrolls the accordion to the top when opened.
These solutions are close to what I would like to do:
AngularJS / ui-bootstrap accordion - scroll to top of active (open) accordion on click
https://www.peterbouda.eu/making-an-angular-ui-bootstrap-accordion-scrolling-to-top-when-opening.html
However, they use a timeout or scope watches. I would like to avoid using these unless absolutely necessary.
Is there a way to accomplish this without using $watch or setTimeout?
Here is a plunk of what i am trying to do, this is using the $watch: https://plnkr.co/edit/XQpUdrdjqaCGom4L9yIJ
app.directive( 'scrollTop', scrollTop );
function scrollTop() {
return {
restrict: 'A',
link: link
};
}
function link( scope, element ) {
scope.collapsing = false;
var jqElement = $( element) ;
scope.$watch( function() {
return jqElement.find( '.panel-collapse' ).hasClass( 'collapsing' );
}, function( status ) {
if ( scope.collapsing && !status ) {
if ( jqElement.hasClass( 'panel-open' ) ) {
$( 'html,body' ).animate({
scrollTop: jqElement.offset().top - 30
}, 500 );
}
}
scope.collapsing = status;
} );
}
The directive can be simplified to:1
app.directive( 'scrollTop', function scrollTop($timeout) {
return {
restrict: 'A',
link: postLink
};
function postLink(scope, elem, attrs) {
elem.on("click", function(e) {
if (scope.status.isOpen) {
$timeout(function() {
$( 'html,body' ).animate({
scrollTop: elem.offset().top - 30
}, 500 );
});
}
});
}
})
<uib-accordion>
<div heading="Section Title" is-open="status.isOpen"
ng-repeat="section in vm.sections"
scroll-top
uib-accordion-group>
<uib-accordion-heading>
<div ng-class="{isOpen: vm.isOpen}">
<h3>{{section.sectionTitle}}</h3>
<p>{{section.sectionSubHeader}}</p>
</div>
</uib-accordion-heading>
<div class="clearfix">
<b>Index+1={{$index+1}}</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</uib-accordion>
The $timeout is necessary because the browser needs to render the DOM with the newly opened and closed elements before it can compute the proper scroll offset.
The DEMO on PLNKR
I have found a way to do this from the controller.
I added a function that is triggered on ng-click to report the is-open status of the accordion.
Using the component lifecycle hook $doCheck I was able to watch for changes to the state of vm.isOpen. $doCheck runs on the end of every digest cycle, so I did not need to set a $scope.watch or $timeOut
The $doCheck runs essentially the same code as the directive in the question
app.controller('homeController', function($state, $element, sections, $transitions) {
var vm = this;
vm.$onInit = function() {
vm.sections = sections.getSections();
};
function updateOpenStatus() {
vm.collapsing = false;
vm.isOpen = vm.sections.some(function(item) {
return item.isOpen;
});
}
vm.$doCheck = function() {
if (vm.isOpen) {
var elem = $element.find('.panel-collapse');
var status = elem.hasClass('collapsing');
if (vm.collapsing && !status) {
var parentElem = elem.closest('.panel-open');
if (elem.parent().hasClass('panel-open')) {
$('html,body')
.stop()
.animate({
scrollTop: parentElem.offset().top - 52
}, 'fast');
}
}
vm.collapsing = status;
}
};
});
I updated the uib-accordion to call the function in the controller
<uib-accordion>
<div heading="Section Title" is-open="section.isOpen" ng-repeat="section in vm.sections" scroll-top uib-accordion-group>
<uib-accordion-heading>
<div ng-class="{isOpen: section.isOpen}" ng-click="vm.toggleOpen()">
<h3>{{section.sectionTitle}}</h3>
</div>
</uib-accordion-heading>
<div class="clearfix">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</uib-accordion>
Updated Plnkr: https://plnkr.co/edit/5EqDfmVOa0hzFfaQqdI0?p=preview
Let me explain the situation. Currently I am doing a project to practice SCSS and React. It is a website dedicated to soccer team. The problem is that I am creating a custom modal window using CSS and HTML. What I want is that whenever I click the button "see pics" a modal window related to this card should open, while in my case all modal windows open at once.
All modal windows open at once stacked one on each other. Like that.
There are four modal windows like that overall, but only the top modal shows.
The HTML structure of these modal windows is the following:
They have got the same classes and ids.
In React part I have a component called PopUp, which gets information from db.json as props.
import React from 'react';
import Button from './button-round-dark';
const generateAdditionalInfo = ({info}) => {
if (info) {
return info.map((item) => {
const addInfo = item.additionalInfo;
console.log(addInfo);
return (
<div className="popup" id="popup">
<div className="popup__content" key={addInfo.id}>
<div className="popup__left">
<img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[0]}`}/>
<img className="popup__img" src={`../../${process.env.PUBLIC_URL}/images/additionalInfoPics/${addInfo.images[1]}`}/>
</div>
<div className="popup__right">
x
<h2 className="heading-secondary u-margin-bottom-small">{addInfo.title}</h2>
<p className="popup__description">{addInfo.description}</p>
</div>
</div>
</div>
)
})
}
}
const PopUp = (props) => {
return (
<div>
{generateAdditionalInfo(props)}
</div>
)
}
export default PopUp;
db.json
"legendaryTeam":[
{
"id":"p1",
"name": "buffon",
"image":"buffon.jpg",
"years":"2001-2018",
"number":"18",
"position":"goalkeeper",
"physicalFeatures":{
"weight":"86",
"height":"194",
"speed":"7",
"power":"250"
},
"additionalInfo":{
"id":"1",
"images":["buffon_1.jpg","buffon_2.jpg"],
"title":"Buffon title",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."
}
},
{
"id":"p2",
"name": "Ravanelli",
"image":"ravanelli.jpg",
"years":"1992-1996",
"number":"10",
"position":"forward",
"physicalFeatures":{
"weight":"75",
"height":"176",
"speed":"9",
"power":"300"
},
"additionalInfo":{
"id":"2",
"images":["ravanelli_1.jpg","ravanelli_2.jpg"],
"title":"Ravanelli title",
"description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam dignissim diam quis enim lobortis scelerisque. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Lorem sed risus ultricies tristique nulla aliquet enim. Ultrices in iaculis nunc sed augue lacus viverra vitae congue."
}
}
Please pay attention to additionalInfo object, it is where information goes to PopUp component.
Custom CSS code for modal window looks like this.
.popup {
height: 100vh;
width:100%;
position:fixed;
top:0;
left:0;
background-color: rgba($color-black,0.8);
z-index:99999;
opacity: 0;
visibility: hidden;
transition:all .3s;
&:target {
opacity: 1;
visibility: visible;
}
&__content {
#include centrify;
width:75%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, .2);
border-radius: 3px;
display: table;
overflow: hidden;
}
&__left {
width:33.33333333%;
display: table-cell;
}
&__right {
width:66.666666666%;
display: table-cell;
vertical-align: middle;
padding: 3rem 5rem;
}
&__img {
display: block;
width:100%;
}
&__description {
font-size: 1.4rem;
margin-bottom: 4rem;
}
}
Modal window open with help of target selector. Now I am scratching head over how to make implement what I want. Please help me out. Do you have any ideas?
By the way other modal windows look like this. But they are lower in stack so they are not shown.
If you want to tinker with my project click here
To run react see picture below
To run db.json you need to install it globally
$ npm install -g json-server
And then run it, see pic below
To run SCSS see pic below
Your problem is not in your description, you bind the ButtonRoundDark to all of the modal. You need to add onClick event to your 'see pics' button. After click, fetch the data, show the modal.
I'm new to Backbone and struggling with what appears to be a basic problem. I have a route set up to take in a parameter, use it to locate a model (hard-coded at this point), and render the model data in a view.
Working with a parameter of "project1", in the render function of my view I can access this.model and project1.attributes and project1.get('name') but I cannot access this.model.attributes or this.model.get('name') or use this.model.toJSON(). (Note: trying to access any of those latter ones causes the app to bomb.)
Is this a "this" bind problem? Any help is appreciated.
var Router = Backbone.Router.extend({
routes: {
"work/:project" : "project"
},
project: function (project) {
$('#content').html(new ProjectView({model:project}).render().el);
}
});
var ProjectView = Backbone.View.extend({
id: "project",
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var Project = Backbone.Model.extend({});
var project1 = new Project({
name: "Project1",
description : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
});
As the comments have already mentioned, your basic problem is that you're passing a string to a View, but that View is expecting a Model. This line:
$('#content').html(new ProjectView({model:project}).render().el);
Is the problem: project needs to be an instance of Backbone.Model, but it's not. That line should instead look something like this:
var project1 = new Project({
name: "Project1",
description : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
});
$('#content').html(new ProjectView({model: project1}).render().el);
How can I add the buttons (tools) in the header of each tab, in a TabControl?
I just could add tools in the TabPanel, but I want to add in the tabs.
Image
I also tried this, but no success:
var lTabPanel = Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Home',
html: 'Home',
itemId: 'home'
}, {
title: 'Users',
html: 'Users',
itemId: 'users',
hidden: true
}, {
title : 'Tickets',
html : 'Tickets',
itemId : 'tickets',
tools:[{
type:'gear',
tooltip: 'Options',
handler: function(event, toolEl, panel){
// Some code.
}
}]
}]
});
Any idea?
Thanks!
Quite tough actually.
If you check their source code, Ext.tab.Panel is in fact using Card Layout and for each tab, they used Ext.tab.Tab to do the tab buttons.
Then if you check the source code of Ext.tab.Tab, it's in fact extending Ext.button.Button, which is just a modified button.
So if you need to add tools, I afraid the best way is to extend Ext.tab.Tab and write your own tab buttons. You might want to check out how they create closeable buttons in line 233 of /src/tab/Tab.js.
(Ext-4.0.2a)
Cheers
EDIT
So we know Ext.tab.Tab is extending Ext.button.Button, we can make use of this fact, and I have came out with this solution, check this out at fiddle: http://jsfiddle.net/uBxqY/4/
Basically, I have extended Ext.tab.Tab, and modified the buttonWrapper class so to have the arrow css added. Nothing fancy, everything work out of the box.
Also I have overrided the onClick function so the menu won't be expanded when the user click on the tab itself. A little bit dirty, but it works (borrowed prototype.onClick from Ext.button.Split.
Working example: http://jsfiddle.net/uBxqY/4/, or source:
Ext.define('Ext.ux.tab.Tab', {
extend: 'Ext.tab.Tab',
alias: 'widget.ux.menutab',
requires: [
//We just need the onClick from Split button
'Ext.button.Split'
],
/**
* Menu align, if you need to hack the menu alignment
*/
menuAlign: 'tl-bl?',
constructor: function() {
this.callParent(arguments);
//Kind of harsh, we need the click action from
//split button instead.
//Or if you preferred, you can always override this
//function and write your own handler.
this.onClick = Ext.button.Split.prototype.onClick;
},
/**
* Hack the default css class and add
* some resonable padding so to make it looks
* great :)
*/
onRender: function() {
this.callParent(arguments);
//We change the button wrap class here! (HACK!)
this.btnWrap.replaceCls('x-tab-arrow x-tab-arrow-right',
'x-btn-split x-btn-split-right')
.setStyle('padding-right', '20px !important');
}
});
Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
style: 'margin:10px;',
defaults: {
bodyStyle: 'padding:10px;'
},
plain: true,
items: [{
title: 'Split Tab',
//tabConfig is taken up during tab formation
tabConfig: {
//We use our own custom tab!
xtype: 'ux.menutab',
menu: [{
text: 'Menu item 1'
},{
text: 'Menu item 2'
}]
},
html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},{
title: 'Normal Tab',
html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]
});
Thank you for sharing solution!
This is my way (based on yours):
Ext.define('CB.view.ux.TabMenu', {
extend: 'Ext.tab.Tab',
alias: 'widget.tabmenu',
requires: [
'Ext.button.Split'
],
menuAlign: 'tl-bl?',
constructor: function() {
this.callParent(arguments);
this.onClick = Ext.button.Split.prototype.onClick;
},
onRender: function() {
this.callParent(arguments);
this.btnWrap.insertSibling({
tag: 'a',
cls: 'arrow-inside-tab',
href: '#'
}, 'after');
this.btnWrap.addCls(['pdr10']); //padding-right: 10px; to make some place for arrow
}
});
CSS:
.arrow-inside-tab {
display: block;
position: absolute;
width: 11px;
height: 11px;
top: 5px;
right: 4px;
background: url("../js/extjs/resources/ext-theme-classic/images/button/arrow.gif") 1px 0 no-repeat;
}