how to close Liferay.Util.openModal popup window - liferay

i try use Liferay.Util.openModal to open a popup window,
but after submit, the window still there, how do i close it after click submit?
i try follow another thread Liferay: Close popup on submit?
in my main jsp:
<portlet:renderURL var="modifyPrefixURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/popup/modifyPrefix.jsp"/>
</portlet:renderURL>
<aui:script position="inline" use="aui-base">
window.showEditSnmPrefixDialog2 = function(id) {
Liferay.Util.openModal(
{
title: '<%=descriptionPrefixInfoEdit%>',
centered: true,
modal: true,
height: 650,
url: '<%=modifyPrefixURL.toString()%>&<portlet:namespace />targetPart='+id,
size: 'md',
close: true,
id: '<portlet:namespace/>dialog'
}
);
}
</aui:script>
<aui:script>
Liferay.provide(
window,
'<portlet:namespace/>closePopup',
function(data, dialogId) {
var A = AUI();
var dialog = Liferay.Util.Window.getById(dialogId);
dialog.destroy();
},
['liferay-util-window']
);
</aui:script>
in my modifyPrefix.jsp
<aui:script use="aui-base">
A.one('#<portlet:namespace/>closeDialog').on('click', function(event) {
Liferay.Util.getOpener().<portlet:namespace/>closePopup(data, '<portlet:namespace/>dialog');
});
</aui:script>
<aui:button name="closeDialog" type="submit" value="<%=descriptionButtonEdit%>" />
but it doesn't work.

Related

Can't manipulate grouped objects in fabric.js after loading from JSON

I'm trying to implement load/save functionality in a fabric.js project (using fabric.js 5.2.1). The canvas reloads correctly, but I can no longer interact with objects in groups. Non-grouped objects are fine, but pretty much everything in my project is in a group.
<input type="button" id="loadJSON" value="Load JSON" />
<input type="button" id="colorize2" value="Background" />
<input type="button" id="colorize3" value="Square" />
<input type="button" id="colorize" value="Line" />
<canvas id="below" width="960" height="448" style="position:absolute; top:10; left:10;"></canvas>
var jsonString = '{"version":"5.2.1","objects":[{"type":"rect","version":"5.2.1","originX":"left","originY":"top","left":100,"top":100,"width":100,"height":100,"fill":"orange","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"square","rx":0,"ry":0,"selectable":true,"perPixelTargetFind":false,"centeredScaling":false,"centeredRotation":true,"borderColor":"rgb(178,204,255)","cornerColor":"rgb(178,204,255)","cornerSize":13,"transparentCorners":true},{"type":"group","version":"5.2.1","originX":"left","originY":"top","left":477.7,"top":25.62,"width":5.25,"height":396.17,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"ElementGroup","selectable":false,"perPixelTargetFind":false,"centeredScaling":false,"centeredRotation":true,"borderColor":"rgb(178,204,255)","cornerColor":"rgb(178,204,255)","cornerSize":13,"transparentCorners":true,"objects":[{"type":"path","version":"5.2.1","originX":"left","originY":"top","left":-2.63,"top":-198.09,"width":4.25,"height":395.17,"fill":"yellow","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"centerLine01","selectable":false,"perPixelTargetFind":false,"centeredScaling":false,"centeredRotation":true,"borderColor":"rgb(178,204,255)","cornerColor":"rgb(178,204,255)","cornerSize":13,"transparentCorners":true,"path":[["M",478.19727,26.119141],["L",478.19727,421.29297],["L",482.45117,421.29297],["L",482.45117,26.119141],["L",478.19727,26.119141],["z"]]}]}],"background":"green","perPixelTargetFind":false,"centeredScaling":false,"centeredRotation":false,"backgroundColor":"blue"}'
var below = new fabric.Canvas('below', {
enableRetinaScaling: false,
preserveObjectStacking: true,
backgroundColor: 'green'
});
rect = new fabric.Rect({
top: 100,
left: 100,
width: 100,
height: 100,
fill: 'blue',
id: 'square'
})
centerLine01 = new fabric.Path("M 478.19727 26.119141 L 478.19727 421.29297 L 482.45117 421.29297 L 482.45117 26.119141 L 478.19727 26.119141 z", {
fill: 'red',
id: 'centerLine01',
visible: true,
selectable: false,
evented: false
});
ElementGroup = new fabric.Group([centerLine01], {
id: 'ElementGroup',
visible: true,
selectable: false,
evented: false
})
below.add(rect)
below.add(ElementGroup)
below.renderAll()
$("#loadJSON").on("click", function(e) {
below.loadFromJSON(jsonString, below.renderAll.bind(below), function(o, object) {
below.add(object)
});
below.renderAll.bind(below)
console.log("JSON loaded!")
})
$("#colorize").on("click", function(e) {
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
ElementGroup.getObjects().forEach(function(o) {
if (o.id == "centerLine01") {
o.set("fill", randomColor)
below.renderAll()
}
})
})
$("#colorize2").on("click", function(e) {
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
below.setBackgroundColor(randomColor, below.renderAll.bind(below))
})
$("#colorize3").on("click", function(e) {
const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16)
below.getObjects().forEach(function(o) {
if (o.id == "square") {
o.set("fill", randomColor)
below.renderAll()
}
})
})
In this sample, the Background, Square and Line buttons all work out of the gate, but as soon as you reload the canvas from JSON the Line button no longer does anything, even though the object is still getting found (a simple console.log() verifies that). Not quite sure what the issue is, though.
jsfiddle here: https://jsfiddle.net/eriqjaffe/jo25d8qs/8/

Knockout two way binding not working with Sharepoint modal dialog

I'm trying two way binding (knockout observables) with sharepoint modal dialog
var ViewModel = function () {
var self = this;
self.firstName = "Irfanullah";
self.lastName = ko.observable('M.');
self.fullName = ko.computed(function () {
return self.firstName + ' ' + self.lastName();
});
};
ko.applyBindings(new ViewModel());
<button type=button onclick="openDialog2()">click me</button>
<div id="wrap" style="display:none">
<div id="d10" class="dialogHolder">
<div id="kobasic">
<h4>Editable data</h4>
<p><input type="text" data-bind="value: firstName" /></p>
<p><input type="text" data-bind="value: lastName" /></p>
<p>Full Name: <span data-bind="text: fullName"></span></p>
</div>
</div>
When i test this code on sharepoint wiki page its working good, but when i use same code on sharepoint dialog it shows values (one way binding)but two way binding/ko.observable() does not work (when i type something in lastname text box it does not update fullname)
function openDialog2() {
var e = document.getElementById('d10');
var options = {
title: "Test Knockout",
width: 700,
height: 800,
html: e.cloneNode(true)
};
mydialog = SP.UI.ModalDialog.showModalDialog(options);
}
I believe that is alll becase e.cloneNode(true) but i could not figureout alternat solution
For SharePoint dialogs I am using this approach:
(note: jQuery needed)
// create dom element
var element = document.createElement('div');
// apply my custom view
$(element).append('<!--my HTML -->');
// apply knockout bindings
ko.applyBindings(myViewModel, element);
// show sharepoint modal dialog
var options = {
allowMaximize: false,
html: element,
title: "My title",
autoSize: true,
showClose: true,
dialogReturnValueCallback: myCallback
};
SP.UI.ModalDialog.showModalDialog(options);
So in your case:
var element = document.createElement('div');
$(element).append('<div id="d10" class="dialogHolder"><div id="kobasic"><h4>Editable data</h4><p><input type="text" data-bind="value: firstName" /></p><p><input type="text" data-bind="value: lastName" /></p><p>Full Name: <span data-bind="text: fullName"></span></p></div></div>');
ko.applyBindings(new ViewModel(), element);
var options = {
allowMaximize: false,
html: element,
title: "My title",
autoSize: true,
showClose: true,
dialogReturnValueCallback: myCallback
};
SP.UI.ModalDialog.showModalDialog(options);

kentico youtube webpart used within slick.js

I have a repeater that out puts panels for a slide show plugin, slick.js. So far, things are working as planned.
The user, when creating the custom page, enters in copy, then either and image, video from the media library, or a link to you tube.
What i'm trying to do is write the JS function that will fire when the user clicks play on the youtube video.
The webpart injects the youtube video via the iFrame method.
Here's my transformation:
<section class="slide">
<div class="copy">
<%# Eval("SlideContent") %>
</div>
<asp:PlaceHolder runat='server' id='slideImage' visible='<%# IfEmpty( Eval("SlideImage"), false, true ) %>'>
<div class="img">
<img class="img-responsive" src="<%# Eval(" SlideImage ") %>" alt="<%# Eval(" SlideContent ") %>">
</div>
</asp:PlaceHolder>
<asp:PlaceHolder runat='server' id='slideVideo' visible='<%# IfEmpty( Eval("SlideVideo"), false, true ) %>'>
<div class='videoHolder html5'>
<video id='video' class='html5Video' controls>
<source src='<%# Eval("SlideVideo") %>'>
</video>
</div>
</asp:PlaceHolder>
<asp:PlaceHolder runat='server' id='youTubeVideo' visible='<%# IfEmpty( Eval("YouTubeVideo"), false, true ) %>'>
<%# Register Src="~/CMSWebParts/Media/YouTubeVideo.ascx" TagName="YoutubeVideo" TagPrefix="webPart" %>
<div class='videoHolder yt'>
<webPart:YoutubeVideo runat="server" id="YouTubeVideoWebpart" CssClass="ytVideo" VideoURL='<%# ResolveMacros(Eval("YouTubeVideo").ToString())%>' FullScreen='true' />
</div>
</asp:PlaceHolder>
</section>
And here is my JS (this also includes the code to pause videos if the slider changes)
$(function () {
'use strict';
var $slider = $('.slider'),
$slickJS = '/kffIntranet/ui/bower_components/slick-carousel/slick/slick.min.js';
// we check for a slider on the page
if ($slider.length !== 0) {
// if there is a slider, we load the slick.js plugin
$.getScript($slickJS, function () {
// init the slider
$slider.slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
lazyLoad: 'ondemand',
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 5000,
responsive: [{
breakpoint: 1024,
settings: {}
}, {
breakpoint: 600,
settings: {}
}, {
breakpoint: 480,
settings: {
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
//
// video control. If a slide has video, we need to pause
//bind our event here, it gets the current slide and pauses the video before each slide changes.
$slider.on('beforeChange', function (event, slick) {
var currentSlide, player, command, videoType;
//find the current slide element and decide which player API we need to use.
currentSlide = $(slick.$slider).find('.slick-current');
//determine which type of slide this by looking for the video holder than getting the video type class
if (currentSlide.find('.videoHolder').length) {
videoType = $('.videoHolder', currentSlide).attr('class').split(' ')[1];
//get the iframe inside this slide.
player = currentSlide.find('iframe').get(0);
}
// pause videos
if (videoType === 'yt') {
command = {
'event': 'command',
'func': 'pauseVideo'
};
player.contentWindow.postMessage(JSON.stringify(command), '*');
} else if (videoType === 'html5') {
document.getElementById('video').pause();
}
});
// pause slider if a video is playing
// html 5 video click
$('.html5Video').on('click', function () {
var $video = $(this).get(0);
// control pause play state of video
if ($video.paused) {
$video.play();
} else {
$video.pause();
}
// call slide pause function
pauseSlide();
});
// youtube play
$('.ytVideo iframe').on('click', function () {
// call slide pause function
pauseSlide();
});
}
// puse slider function
function pauseSlide() {
$slider.slick('slickPause');
console.log('pause');
}
});
So i've created a function pauseSlide that will pause the slider, but i'm struggling with capturing the youtube play click.
Check this answer out. It suggests using the YouTube iframe API.
<!DOCTYPE html> <html> <head> <script src="https://www.youtube.com/iframe_api"></script> </head> <body> <div id='vidWrapper'> <!-- The <iframe> (and video player) will replace this <div> tag. --> <div id="ytplayer"></div> </div> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('ytplayer', { height: '390', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onStateChange': function(event) { if (event.data == YT.PlayerState.PLAYING) { pauseAudio(); } } } }); } function pauseAudio() { ... } </script> </body> </html>
Ok, so i took a step back in this. The transformation now looks for a YouTube ID and then i have a jQuery plugin take over.
So the slider auto playes, and if a video (either youtube, or mp4) is started, the slider stops. Also, if either of the slider direction arrows, or one of the pips are clicked, the video will pause.
I still need to refactor and add some logic, but it's working.
Here's the updated transformation:
<section class="slide">
<div class="copy">
<%# Eval("SlideContent") %>
</div>
<asp:PlaceHolder runat='server' id='slideImage' visible='<%# IfEmpty( Eval("SlideImage"), false, true ) %>'>
<div class="img">
<img class="img-responsive" src="<%# Eval(" SlideImage ") %>" alt="<%# Eval(" SlideContent ") %>">
</div>
</asp:PlaceHolder>
<asp:PlaceHolder runat='server' id='slideVideo' visible='<%# IfEmpty( Eval("SlideVideo"), false, true ) %>'>
<div class='videoHolder html5'>
<video id='video' class='html5Video' controls>
<source src='<%# Eval("SlideVideo") %>'>
</video>
</div>
</asp:PlaceHolder>
<asp:PlaceHolder runat='server' id='youTubeVideoID' visible='<%# IfEmpty( Eval("YouTubeVideoID"), false, true ) %>'>
<div class='videoHolder yt' data-vID='<%# Eval("YouTubeVideoID") %>'>
<div class="vh"></div>
</div>
</asp:PlaceHolder>
</section>
my video.js file
$(function () {
'use strict';
var vHolder = $('.videoHolder'),
vtPlugin = '/kffIntranet/ui/scripts/plugins/tubePlayer/jQuery.tubeplayer.min.js',
vID;
// check for a youtube video, and if there is one, load the youtube pluging
if ($('.yt').length) {
// load plugin
$.getScript(vtPlugin, function () {
// once plugin is loaded, loop through each YT and call the plugin
$('.yt').each(function (i, v) {
var $this = $(this);
vID = $this.attr('data-vid');
$('.vh', $this).tubeplayer({
initialVideo: vID,
onPlayerPlaying: function () {
$('.slider').slick('slickPause');
}
});
});
});
} else if ($('.html5').length) {
$('.html5 .html5video').bind('pause', function () {
$('.slider').slick('slickPause');
});
}
});
and my slider js file
$(function () {
'use strict';
var $slider = $('.slider'),
$slickJS = '/kffIntranet/ui/bower_components/slick-carousel/slick/slick.min.js',
videoType;
// we check for a slider on the page
if ($slider.length !== 0) {
// if there is a slider, we load the slick.js plugin
$.getScript($slickJS, function () {
// init the slider
$slider.slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
lazyLoad: 'ondemand',
adaptiveHeight: true,
autoplay: true,
autoplaySpeed: 5000,
responsive: [{
breakpoint: 1024,
settings: {}
}, {
breakpoint: 600,
settings: {}
}, {
breakpoint: 480,
settings: {
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
// on slide change
$slider.on('beforeChange', function (event, slick) {
var currentSlide;
//find the current slide element and decide which player API we need to use.
currentSlide = $(slick.$slider).find('.slick-current');
//determine which type of slide this by looking for the video holder than getting the video type class
if (currentSlide.find('.videoHolder').length) {
videoType = $('.videoHolder', currentSlide).attr('class').split(' ')[1];
}
// pause videos
if (videoType === 'html5') {
document.getElementById('video').pause();
} else if (videoType === 'yt') {
$('.vh', currentSlide).tubeplayer('pause');
}
});
}
});

Dgrid + Selection Issue

Still trying to work with Dgrid (0.4) and dojo (1.10), I have now another issue with the selection.
My web page contain a Dialog opened when you click on a button.
Inside this dialog, we have the following code which display a grid with data coming from a database through a Json HTTP page. This is working fine, even sorting and query filtering.
What I want to do know is to allow the user to double click on a row, get the selected row Id contains in the first column to update the form in the main page. I use the dgrid/selection for this. However, it always return the last row of the grid instead of the one the user selected.
The selection code is based on this :
http://dgrid.io/tutorials/0.4/hello_dgrid/
Any idea?
Thanks
<script language="javascript">
require
(
[
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/OnDemandList",
"dgrid/OnDemandGrid",
"dgrid/Keyboard",
"dgrid/Selection",
"dgrid/Editor",
"dgrid/extensions/ColumnHider",
"dstore/Memory",
"dstore/RequestMemory",
"dojo/_base/lang",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/when",
"dojo/query",
"dojo/store/Observable",
"dstore/Rest",
"dojo/_base/Deferred",
"dojo/store/Cache",
"dojo/domReady!",
],
function(
declare, arrayUtil, OnDemandList, OnDemandGrid, Keyboard, Selection, Editor, ColumnHider, Memory, RequestMemory, lang, ObjectStore, dom, on, when, query, Observable, Rest, Deferred
){
var fform = dom.byId("filterForm");
var ContactColumns = [
{ label: "", field: "contact_id", hidden: true, unhidable: true},
{ label: "Company Name", field: "company_name", unhidable: true },
{ label: "Contact Name", field: "contact_name", unhidable: true },
{ label: "Email", field: "contact_email", unhidable: true }
];
var ContactGrid=declare([OnDemandGrid, Keyboard, Selection,ColumnHider]);
var contactlist = new Observable(new Rest({ target: './ajax.contactsLoader.php' }));
var selection = [];
window.contactgrid = new ContactGrid(
{
className: "dgrid-selectors",
collection: contactlist,
maxRowsPerPage:10,
selectionMode: 'single',
cellNavigation: false,
columns: ContactColumns
}, "contacttable"
);
on(fform, "submit", function (event) {
var cpy_filter = fform.elements.fcompany_name.value;
var ct_filter = fform.elements.fcontact_name.value;
var email_filter = fform.elements.fcontact_email.value;
contactgrid.set('collection',contactlist.filter({contact_name: ct_filter, company_name: cpy_filter, contact_email: email_filter }));
contactgrid.refresh();
event.preventDefault();
});
contactgrid.on('dgrid-select', function (event) {
// Report the item from the selected row to the console.
console.log('Row selected: ', event.rows[0].data);
});
contactgrid.on('dgrid-deselect', function (event) {
console.log('Row de-selected: ', event.rows[0].data);
});
contactgrid.on('.dgrid-row:click', function (event) {
var row = contactgrid.row(event);
console.log('Row clicked:', row.data);
});
}
);
</script>
<div class="dijitDialogPaneContentArea" style="width:96%;margin-left:5px">
<form id="filterForm">
<div class="dijitDialogPaneActionBar" >
<button data-dojo-type="dijit.form.Button" type="submit">Filter</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="submitButton"
type="submit"
>
Select
</button>
<button
data-dojo-type="dijit.form.Button"
data-dojo-attach-point="cancelButton"
>
Close
</button>
</div>
<div data-dojo-attach-point="contentNode" >
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcompany_name" id="fcompany_name" style="width:33%">
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_name" id="fcontact_name" style="width:32%">
<input type="text" data-dojo-type="dijit.form.TextBox" name="fcontact_email" id="fcontact_email" style="width:33%">
<div id="contacttable">
</div>
</div>
</form>
</div>
Just found the reason.
the columns need to have a 'id' column called ID. I just change the 'contact_id' column to 'id' and it works fine.
thanks

How to get render parameter

I want to get render parameter.
I wrote the following aui:script for opening new dialog. In that script I set parameter.
<input type="text" name="<portlet:namespace/>weburl" size="75: id="weburl" label="" inlineField="true" />
<aui:button name="btnPreview" id="btnPreview" value="Preview"/>
<aui:script>
AUI().use('aui-base','aui-io-plugin-deprecated','liferay-util-window','liferay-portlet-url', 'aui-dialog-iframe-deprecated', function(A) {
A.one('#<portlet:namespace />btnPreview').on('click', function(event){
alert(document.getElementById('weburl').value)
var strUrl=document.getElementById('weburl').value;
var renderURL =Liferay.PortletURL.createRenderURL();
renderURL.setParameter("nameUrl",strUrl);
renderURL.setParameter("mvcPath",'/html/view2.jsp');
renderURL.setPortletId("Portlets_WAR");
renderURL .setWindowState("pop_up");
alert(renderURL.toString());
var popUpWindow=Liferay.Util.Window
.getWindow({
dialog: {
centered: true,
constrain2view: true,
modal: true,
resizable: false,
width: 500
}
})
.plug(A.Plugin.DialogIframe, {
autoLoad: true,
iframeCssClass: 'dialog-iframe',
uri:'<%=portletSettingsURL.toString()%>'
})
.render();
popUpWindow.show();
popUpWindow.titleNode.html("Image Preview");
popUpWindow.io.start();
});
});
</aui:script>
Using this script i redirect to my view2.jsp and open that page in dialog succesfully. Here I also set the parameter using :
var strUrl=document.getElementById('weburl').value
var testurl =Liferay.PortletURL.createRenderURL();
testurl.setParameter("name",strUrl);
My portal:renderURL is as follow
<portlet:renderURL var="portletSettingsURL"
windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/html/view2.jsp"/>
</portlet:renderURL>
My view2.jsp file is as follow
<%
String str1=renderRequest.getParameter("nameUrl");
System.out.print("value " +str1);
%>
I want to send my weburl textbox value to view2.jsp file
I just want the value of name in my view2.jsp file
How can I get my value in view2.jsp file?
Have you tired the ParamUtil class?
ParamUtil.get(request, param, defaultValue).
For putting params to the URL you can check this. This is for scriptlet but you can use it in AUI script too.
https://www.liferay.com/community/forums/-/message_boards/message/43775763
Edit:
You can add your parameter to the URL like this:url = url + '&<portlet:namespace/>yourParamName=yourParamValue'
Try with renderRequest.getParameter("name"), it shoud work.

Resources