I am trying to implement Add Application (portlet) feature in popup and instead not use Dockbar + Add application feature, So I referred add_application.jsp and created similar jsp which I am calling via aui popup, for now I am just displaying a particular portlet cateogry say Wiki.
But there seems to be some AUI issue while using following script,
Please guide me through what am I missing here.
<aui:script use="liferay-dockbar-add-application,liferay-dockbar-portlet-dd">
var searchApplication = A.one('#<portlet:namespace />searchApplication');
var addApplication = new Liferay.Dockbar.AddApplication(
{
focusItem: searchApplication,
inputNode: searchApplication,
namespace: '<portlet:namespace />',
nodeList: A.one('#<portlet:namespace />applicationList'),
nodeSelector: '.drag-content-item',
selected: !A.one('#<portlet:namespace />addApplicationForm').ancestor().hasClass('hide')
}
);
addApplication.plug(
Liferay.Dockbar.PortletDragDrop,
{
on: {
dragEnd: function(event) {
addApplication.addPortlet(
event.portletNode,
{
item: event.appendNode
}
);
}
},
srcNode: '#<portlet:namespace />applicationList'
}
);
</aui:script>
Related
I added this AUI date picker to my JSP:
<aui:input
type="text"
id="myDate"
name="my-date"
value="2017-12-14"
placeholder="yyyy-mm-dd"
onChange="javascript:alert('date changed');"/>
<aui:script>
AUI().use(
'aui-datepicker',
function(A) {
new A.DatePicker(
{
trigger: '#<portlet:namespace/>myDate',
mask: '%Y-%m-%d',
popover: {
zIndex: 1000
}
}
);
}
);
</aui:script>
Problem: Changing the date using the calendar widget that pops up does not display the alert.
If I ignore the widget and change the date manually (using the keyboard), the alert correctly shows up as soon as the input loses focus.
What am I doing wrong?
How to have onChange be called whenever the date is changed, be via mouse or keyboard?
As the guys in the comments mentioned use the js callback definitions. There are a couple of examples in the documentation.
https://alloyui.com/examples/datepicker
If you really want to have the onChange also there, you can trigger the change event from the js callback code.
<button class="btn btn-primary"><i class="icon-calendar icon-white"></i> Select the date</button>
<script>
YUI().use(
'aui-datepicker',
function(Y) {
new Y.DatePicker(
{
trigger: 'button',
popover: {
zIndex: 1
},
on: {
selectionChange: function(event) {
console.log(event.newSelection)
}
}
}
);
}
);
</script>
I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!
zingchart.render({
id: "vsSelfChartDiv",
width: '100%',
height: '100%',
output: 'svg',
data: myChartVsSelf,
events:{
node_click:function(p){
zingchart.exec('vsSelfChartDiv', 'modifyplot', {
graphid : 0,
plotindex : p.plotindex,
nodeindex : p.nodeindex,
data : {
"value-box":{
"visible":true
}
}
});
var indexThis = p.nodeindex;
var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
updateTop(indexDateVal);
}
}
});
You'd probably be better off using a label instead of a value-box. I've put together a demo here.
I'm on the ZingChart team. Feel free to hit me up if you have any more questions.
// Set up your data
var myChart = {
"type":"line",
"title":{
"text":"Average Metric"
},
// The label below will be your 'value-box'
"labels":[
{
// This id allows you to access it via the API
"id":"label1",
"text":"",
// The hook describes where it attaches
"hook":"node:plot=0;index=2",
"border-width":1,
"background-color":"white",
"callout":1,
"offset-y":"-30%",
// Hide it to start
"visible":false,
"font-size":"14px",
"padding":"5px"
}
],
// Tooltips are turned off so we don't have
// hover info boxes and click info boxes
"tooltip":{
"visible":false
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69]
}
]
};
// Render the chart
zingchart.render({
id:"myChart",
data:myChart
});
// Bind your events
// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"text":p.value,
"hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
"visible":true
}
});
});
// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
if (p.target != 'node') {
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"visible":false
}
});
}
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>
I have this code below where I am trying to use Instafeed and Masonry together. Everything works fine until I click the "Load more" button. Then the Masonry layout breaks. It's probably because something is loading before the other or vice versa. I'm new to this so all help would be greatly appreciated.
I got the tip to use imagesLoaded instead of window.load and also to use appended method. But I don't understand how to incorporate that in to my code.
My code is in a script.js doc and outputs in the footer of the page after instafeed.js and masonry.
$(function () {
var loadButton = document.getElementById('load-more');
if(loadButton !== null) {
var userFeed = new Instafeed({
get: 'user',
userId: xxxxxxxxx,
accessToken: 'xxxxxxxxx',
limit: 6,
resolution: 'standard_resolution',
template: '<div class="col30 grid image-top-fill instapic"><img src="{{image}}" alt="Instagram" /> <p class="nomargin">{{caption}}</p></div>',
after: function() {
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
Masonry.start();
}
}
});
loadButton.addEventListener('click', function() {
userFeed.next();
});
userFeed.run();
}
});
$(window).load(function(){
var container = document.querySelector('#instafeed');
var msnry = new Masonry( container, {
itemSelector : '.instapic',
isAnimated : true,
isFitWidth : false
});
});
Thanks in advance for your help! Let me know if there is anything more you need from me.
Cheers / Jeppe
You're correct in that Masonry is trying to work with elements before they're loaded. You can put .masonry('appended', $items) in the after event of Instafeed. Instafeed's developer posted this fix:
https://github.com/stevenschobert/instafeed.js/issues/118#issuecomment-44438003
How to bind a button that open jPlayer in fullscren mode ?
I have a custom user button in my html:
<a onClick="javascript:$('#top_video_player').jPlayer('fullScreen');event.preventDefault();" class="button" href="#">Open in big Screen</a>
But this don't work.
I also try:
$('#top_video_player').jPlayer('option','fullScreen',true)
or
$('#top_video_player').jPlayer('option',{fullScreen:true})
also try to add class .jp-full-screen to my button ( tag ) - no effect too ):
But failed again - nothing happened
In my jPlayer initialization i bind it to "enter" button and it works - but i also need to bind another html button:
keyBindings: {
play: {
key: 32, // space
fn: function(f) {
if(f.status.paused) {
f.play();
} else {
f.pause();
}
}
},
fullScreen: {
key: 13, // enter
fn: function(f) {
if(f.status.video || f.options.audioFullScreen) {
f._setOption("fullScreen", !f.options.fullScreen);
}
}
}
},
Thanks in advance.
I have managed to do it by using:
$('#top_video').data('jPlayer')._setOption('fullScreen', true);
where 'top_video' - jplayer div id
I am facing issue with opening a custom portlet in popup window.
Below is the code of opening popup.
LiferayPortletURL documentLibURL = PortletURLFactoryUtil.create(request, "portlet name with WAR name", themeDisplay.getPlid(), PortletRequest.RENDER_PHASE);
documentLibURL.setWindowState(LiferayWindowState.POP_UP);
documentLibURL.setPortletMode(PortletMode.VIEW);
AUI().use('aui-dialog', 'aui-io', 'event', 'event-custom', function(A) {
var dialog = new A.Dialog({
width: 800,
height: 500,
title: 'Popup Title',
centered: true,
draggable: true,
modal: true
}).plug(A.Plugin.IO, {uri: '<%= documentLibURL.toString() %>'}).render();
dialog.show();
});
When my portlet is not having any call to local services, portlet is being rendered in popup. But after adding some complex code. Portlet is giving permission error.
"You do not have the roles required to access this portlet."
1) I have also added true in liferay-portlet.xml.
2) I have assigned permissions to guest user for view from control panel.
Please let me know if any changes requires.
Thanks in advance
Local service calls will never generate a permission exception (PrincipalException) but remove services will.
Audit your code that this URL will invoke and see if there are any remove service calls. They are easily distinguished. For example, if it is the User service you're working with a call to UserLocalServiceUtil will never throw a PrincipalException but a call to UserServiceUtil will. Check to see what calls you're making to *ServiceUtil and ensure the user performing the operation has sufficient access.
Which version of liferay your using.
The dialog will not work in liferay 6.2 and also maybe in 6.1, refer the below code.
function popup(url){
AUI().ready(function(A) {
AUI().use('aui-base', function(A) {
Liferay.Util.Window.getWindow(
{
title : "Popup Tile",
uri: url,
dialog: {
cache: false,
modal: true
}
}
).on('hide', function() {
console.log("Modal closed")});
});
});
}
if its correct dont forget to mark it as an answer
just add in your portal-ext.properties the following code and restart the server
layout.show.portlet.access.denied=false