what is the event for swal close by another swal. Means if a swal is already present, in the mean time another swal is fired, I want to know the dismissal event of closed swal. what is the procedure for this?
I've tried these
var share = {
showConfirmButton: false,
html: `<div class="card">
<div class="card-header card-header-icon" data-background-color="rose">
<i class="material-icons">screen_share</i>
</div>
<div class="card-content">
<h4 class="card-title">Shared screen</h4>
<div id="view-share">
<div id="test`+ streamId +`"></div>
</div>
</div>
</div>`,
onOpen: () => {
console.log('showing share', streamId);
shareStream.show('test' + streamId, 'Shared');
Shared.openShare.set('stream', shareStream);
},
onClose:() => {
console.log('share window closed');
},
allowOutsideClick: false,
background: 'transparent',
showCloseButton: true,
width: '800px',
// grow: 'fullscreen'
};
swal(share).then(() => { }, (dismiss) => {
console.log(dismiss);
// if (dismiss == 'cancel') {
this.minimize(shareStream);
Shared.openShare.clear();
// }
});
Chaining modals won't work for me. Scenario is I've rendering remote screen shares in swal modal. Sometimes it might happen that another screen share can come to me. When that new share comes, I want to minimize the share to a pane for minimization and open a swal for the new one. Otherwise previous shares will be lost as swal does not fire any event before closing already shown swal.
code from swal2 library
var init = function init(params) {
// Clean up the old modal if it exists
var c = getContainer();
if (c) {
c.parentNode.removeChild(c);
}
I've already implemented it by storing the shown stream information in a variable. whenever showShare method is called, I'm checking if there is any information stored in that variable. If it is there, minimisation code is called, then new swal is displayed.
if (Shared.openShare.size>0) {
this.minimize(Shared.openShare.get('stream'));
}
But if there is any neat and clean way, it would be better.
Related
I Want Make a Progress Bar For My Live Wire Function Progress.
When i Use wire:loading i can just show spinning icon o another text like "uploading ..." , now how can i make progress bar for that ?
I was found it in live wire documentation but not work for show function execution :
<script>
document.addEventListener('livewire:load',() => {
let progressSection = document.querySelector('#progressbar'),
progressBar = progressSection.querySelector('#progress-fill');
document.addEventListener('livewire-upload-start' , () => {});
document.addEventListener('livewire-upload-finish' , () => {});
document.addEventListener('livewire-upload-error' , () => {});
document.addEventListener('livewire-upload-progress' , (event) => {
progressSection.style.display = "block";
console.log(`${event.detail.progress}%`);
progressBar.style.width = `${event.detail.progress}%`;
});
});
</script>
in the live wire component i was upload file to my ftp server and i want show uploading percentage of file in front end , when i run the upload method.
thanks very much
I had to use Alpine as well for show/hide purpose and plus it binds well with livewire.
Below is an example for uploading resume.
<form wire:submit.prevent="uploadResume">
<div x-data="{ isUploading: false, progress: 0 }"
x-on:livewire-upload-start="isUploading = true"
x-on:livewire-upload-finish="isUploading = false"
x-on:livewire-upload-error="isUploading = false"
x-on:livewire-upload-progress="progress = $event.detail.progress">
<input type="file" id="resume" wire:model="resume" aria-label="Resume" />
<div class="mt-2" x-show="isUploading">
<progress max="100" x-bind:value="progress"></progress>
</div>
</div>
</form>
use Livewire\WithFileUploads;
class Upload extends Component
{
use WithFileUploads;
public function uploadResume()
{
// upon form submit, this function till fill your progress bar
}
}
I`am created ionic app that has one state called master {url: /master}. There are two buttons on the state view. Each button shows hidden div with text.
I want to implement history tracking by this rules:
When user clicks on first button then url should be appended with firstOpened=true
When user clicks on second button then url should be appended with secondOpened=true
Controllers should stay the same (no re-initialization needed)
Back button of browser should undo last action, for example: If user opens first div then back button should close this div and restore url without page reload.
If history of master state is empty, then back button should restore previous state if it exsits
If i use $state.go to change url, then ionic will reinitialize state and all controllers. It looks like i move from one view to another (from one state to another), but i dont want to change the state, i want to update url and push history. I want to use same state without re-initialization.
I`am created plunker without history tracking. Can somebody help me with implementig history tracking?
script.js (see ):
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
var controller = 0;
$urlRouterProvider.otherwise("/master");
$stateProvider.state('master', {
url: '/master?firstOpened&secondOpened',
views: {
'default': {
templateUrl: 'content.html',
controller: function($scope, $ionicHistory, $stateParams, $state) {
console.log('Initing controller...');
controller = controller + 1;
$scope.controller = controller;
$scope.firstOpened = $stateParams.firstOpened
$scope.secondOpened = $stateParams.secondOpened
$scope.openFirst = function() {
$scope.firstOpened = true;
};
$scope.openSecond = function() {
$scope.secondOpened = true;
};
}
}
}
})
})
The point is, that you do not change the state on click. You are only changing the scope variables, but that doesn't mean any change to the URL or history.
To get history support, you need to change the state and put a ng-show on your sliders. I did it with ui-sref like this:
<ion-content>
<h1>Controller №{{::controller}}</h1>
<button class="button" ui-sref='master({firstOpened: true, secondOpened: false})'>Open first</button>
<button class="button" ui-sref='master({firstOpened: false, secondOpened: true})'>Open second</button>
<div style="background-color: #FF0000;" ng-show="{{firstOpened}}">
<h1>Slider 1</h1>
</div>
<div style="background-color: #00FF00;" ng-show="{{secondOpened}}">
<h1>Slider 2</h1>
</div>
</ion-content>
And your controller only needs to keep track of the stateParams, like you already did:
controller: function($scope, $ionicHistory, $stateParams, $state) {
console.log('Initing controller...');
controller = controller + 1;
$scope.controller = controller;
$scope.firstOpened = $stateParams.firstOpened;
$scope.secondOpened = $stateParams.secondOpened;
}
I've updated your plunker code here.
As you can see, I had to remove the slide animation, as it did not react properly on firstOpened and secondOpened values. But this is another issue and I am sure it's no big deal to get it to work again.
So here's the catch: I store the user's coordinates using this neat solution. Here is my implementation:
updateLoc = function () {
var position = Geolocation.latLng() || {lat:0,lng:0};
Session.set('lat', position.lat);
Session.set('lon', position.lng);
};
Meteor.startup(function() {
updateLoc(); // set at 0, 0 to begin with
Meteor.setTimeout(updateLoc, 1000); // get first coordinates 1 second in
Meteor.setInterval(updateLoc, 5000); // then, every 5 seconds
});
I have an entitiesList route waiting on entities to be subscribed, according to those two session variables:
this.route('entitiesList', {
path: '/',
waitOn: function() {
if (Meteor.userId())
return Meteor.subscribe('entities', {lat: Session.get('lat'),lon: Session.get('lon')});
},
data: function() {
return {entities: Entities.find()};
}
});
Here is the publication:
Meteor.publish('entities', function (position) {
if (position.lon !== null && position.lat !== null) {
return Entities.find({location: {
$near: {$geometry:{type: "Point", coordinates: [position.lon, position.lat]},$maxDistance:500}}
}});
}
this.ready();
});
Finally, the entitiesList template :
<template name="entitiesList">
<div class="entities">
<h1>Entities list</h1>
{{#each entities}}
{{> entityItem}}
{{else}}
<p>No entity found. Looking up...</p>
{{>spinner}}
{{/each}}
</div>
</template>
Now! This solution works. Entities are listed correctly, updated every 5 seconds according to the user's location.
The only issue lies in rendering: when the reactivity is due to an update of Session variables, the entire set of entities is deleted and redrawn. But when a change occurs in the Entity Collection (say, an entity gets deleted / created) only this change is re-rendered accordingly in the template.
What this produces is a list that flashes very annoyingly every 5 seconds. I thought of removing the #each block and sort of write it myself using this.autorun() in the rendered function of the template, and to redraw the list in a more optimized fashion using jQuery, but it would be an obnoxious hack, with HTML chunks of code outside of the template files... Surely there's gotta be another way!
Each time you change your session variables, your subscription is loading and Iron Router sets his loading template and that's why it's flickering.
Instead of using iron-router you could do:
Template.entitiesList.created=function()
{
var self=this
this.isLoading=new ReactiveVar(false)
this.isFirstLoading=new ReactiveVar(true)
this.autorun(function(){
self.isLoading.set(true)
Meteor.subscribe('entities', {lat: Session.get('lat'),lon: Session.get('lon')},function(err){
self.isLoading.set(false)
self.isFirstLoading.set(false)
});
})
}
Template.entitiesList.helpers({
entities:function(){return Entities.find()}
isLoading:function(){Template.instance().isLoading.get()
isFirstLoading:function(){Template.instance().isFirstLoading.get()
})
<template name="entitiesList">
<div class="entities">
<h1>Entities list</h1>
{{#if isFirstLoading}}
<p>Looking up...<p/>
{{>spinner}}
{{else}}
{{#each entities}}
{{> entityItem}}
{{else}}
<p>No entity found</p>
{{/each}}
{{#if isLoading}}
{{>spinner}}
{{/if}}
{{/if}}
</div>
</template>
Fiddling through with iron-router, I found that there actually is an option to not render the loading template on every new subscription triggered: the subscriptions option. Just had to replace waitOn by subscriptions and I get the desired result.
Scoured a bunch of articles and questions here but can't get to the bottom of this.
I have a page that opens a file manager inside a jqueryUI dialog. This file manager simply displays some thumbnails and a list of sub folders within the main assets folder. The idea is the user clicks a sub folder and gets the thumbs within that folder and a list of sub folders .. I'm sure you get the idea. But, when clicking the folder link the whole page is updated not just the dialog.
In the parent page I am referencing
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
and the jquery functions to prepare and open the dialog:
$("#scopeManagerDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "File Manager",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#openScopeManager").click(function() {
$("#scopeManagerDialog").load("#Url.Action("Index", "ScopeManager")",
function(response, status, xhr) {
$("#scopeManagerDialog").dialog("open");
});
return false;
});
and the div it loads into:
<div id="scopeManagerDialog" title="Scope Manager" style="overflow: hidden">
</div>
the controller action that returns the partial
public ActionResult Index(string path)
{
if (path==null)
{
path = ConfigurationManager.AppSettings["assetRoot"];
}
List<AssetVM> assets = ScopeManager.GetAllAssets(Server.MapPath(path));
List<FolderVM> folders = ScopeManager.GetAllFolders(Server.MapPath(path));
AssetSetVM model = new AssetSetVM()
{
Path = path,
Assets = assets,
Folders = folders
};
return PartialView("ScopeManager", model);
}
and finally the partial itsself. Note that the ActionLink refers to the containing div (I'm wondering if this is the issue .. I hope not and my gut says this should be possible).
<div id="scopeManagerContainer">
<div id="folderList">
<ul>
#foreach (FolderVM folder in Model.Folders)
{
<li>#Ajax.ActionLink(folder.Name,"Index","ScopeManager",new AjaxOptions {UpdateTargetId = "scopeManagerContainer"})</li>
}
</ul>
</div>
<div id="fileList">
#foreach (AssetVM asset in Model.Assets)
{
<img src='#Url.Action("GetThumbnail", new { path = string.Format("{0}/{1}", Model.Path, asset.FileName), width = 100, height = 100 })' />
}
</div>
</div>
Please let me know if anything else is required. As I say the first load works. Everything is appearing correctly, just that when I click the folder link it re-renders at the page level instead of updating the contents of the dialog.
Thanks.
My error .. I should have been setting the target to scopeManagerDialog not scopeManagerContainer. The question really is a bit pointless now but not sure what the policy is on deleting questions. I'll leave it for now for a mod to decide what to do with it.
The jQuery plugin cycle looks for elements of class slideshow. I want to add this class to a <ul> element to make a slideshow out of its <li>s. But when I add the slideshow class to the <ul> element, all <li> disappear and I get no slideshow whatsoever.
The HTML looks like this:
<ul>
<li>
<h3 class="expander">...</h3>
<div class="content">
<p>...</p>
<h4>...</h4>
<ul class="slideshow">
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
...
</ul>
As you see, the slideshow <ul> is included in another list. This parent list consists of headers which reveal the content of each list item on click. I am hiding all the .contents programmatically when the DOM is ready. Then, I add a click listener to the .expanders so they can show the hidden .contents.
It is inside these .contentss that I have .slideshows which use the cycle plugin to cycle through their list items.
The other weird thing about all this is that the slideshow's worked perfectly before I transformed my headers into toggles for their associated content. Indeed, when I added the toggle functionality to the headers, the slides are no longer visible. But then if I take away the slideshow class, they are visible again. Of course, they no longer have slideshow functionnality...
Here is the javascript for all this:
$(document).ready(function()
{
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
});
Any idea what could be causing this problem?
Apparently, I needed to move the cycle code above the toggle code, like this:
$(document).ready(function()
{
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
});
I don't know why this works though, so better answers would be appreciated.