SAPUI5 make the whole row clickable for sap.m.Panel - javascript

In an XML view I have an expandable Panel. Here, I can expand the panel only with clicking the arrow icon.
Is there a way to make the icon AND the whole Panel clickable?
Here's a snippet for a simple Panel:
http://jsbin.com/wamutodubu/1/

You can just add a delegate. Add the id "panel" to your panel and this to your controller:
onInit: function() {
var panel = this.byId("panel");
panel.addDelegate({
onclick: function(oEvent) {
if (oEvent.target === panel.$().find(".sapMPanelHdr").get(0)) {
panel.setExpanded(!panel.getExpanded());
}
}
});
I changed your JSBin: http://jsbin.com/qetaxexoli/1/edit?html,js,output

Related

How to add and remove gifs on click?

I am using materialize to create an accordion collapsible on my page. I want to add gifs/images to my page when the collapsible header is clicked and want to remove them when that collapsible header is clicked again or another header is clicked.
I am able to add the gifs on click but have not been able to figure out how to remove them. I am using javascript and jquery.
Below is my code:
contentTitles = ["Test1", "Test2", "Test3"];
contentLinks = ["test1.gif", "test2.gif", "test3.gif"];
$(document).ready(function(){
$('.collapsible').collapsible();
$('main').append('<ul data-collapsible="accordion"></ul>');
$('ul').addClass('collapsible popout');
for (var j = 0; j < contentTitles.length; j++) {
$('ul').append('<li></li>');
// start the creation of the collapsible
$('.collapsible').collapsible({
accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
};
// create the collapsible
$('li').append('<div><i></i></div>');
$('li').append('<div><span></span></div>');
$('i').addClass('material-icons');
$('i').parent().addClass("collapsible-header hoverable");
$('span').parent().addClass("collapsible-body");
// adds the titles to each collapsible header
$('.collapsible-header').each(function(index) {
$(this).html(contentTitles[index]);
})
// adds the gif urls to each collapsible body
$('.collapsible-header').on('click', function() {
$('.collapsible-body').each(function(index) {
$(this).html('<iframe class="gif" src=' + contentLinks[index] + '>');
})
})
$('.collapsible-header').on('click', function() {
$('.collapsible-body').html();
})
})
});
Thank you.
The .html() call just returns the html content of the element - it doesn't change it. If you want to empty the element, do this:
$('.collapsible-header').on('click', function() {
$('.collapsible-body').html(""); //set HTML to be an empty string
})

Can Bootstrap popovers not be destroyed?

Is it possible to have a bootstrap (v3) popovers to have it's div loaded right at the start of pageload and not be destroyed when it is being toggled?
I have a popover content in a div:
<div id="popoverContent">
<h1>Stuff</h1>
<p>I'm in a popover!</p>
</div>
And a button that toggles the popover:
<a id="floating_tab" data-toggle="popover" data-placement="left">Button</a>
Here is my Javascript code that handles the button pushes:
<script>
var x = false;
$('[data-toggle=popover]').popover({
content: $('#popoverContent').html(),
html: true
}).click(function() {
if (x) {
$(this).popover('hide');
x = false;
}
else {
$(this).popover('show');
x = true;
}
});
</script>
The thing is, that when $(this).popover('show'); is called, a div is created. Something like this shows up in the inspect element (chrome):
<div class="popover fade left in" role="tooltip" id="popover460185" style="top: 430.5px; left: 2234px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">
<h1>Stuff</h1>
<p>I'm in a popover!</p>
</div></div>
But when the button is clicked again, the whole div itself is removed and obliterated from the page.
Is it possible to have the popover div to be created during pageload (hidden though) and can be toggleable without having the div to be deleted?
As stated in the comments, it is not presently possible with Bootstrap 3. The Popover (which is an extension of the Tooltip) is dynamically created on show and detached (using jQuery.detach) from the DOM on hide.
It is probably best to roll your own JavaScript and simply utilize Bootstrap's CSS. However, you could easily patch the functionality using the Popover's event API -the following can be used as a starting place:
$(function () {
var content = $('#popover-content'), // Pre defined popover content.
popover = $('#popover-anchor').popover();
popover.on('inserted.bs.popover', function () {
var instance = $(this).data('bs.popover');
// Replace the popover's content element with the 'content' element
instance.$tip = content;
});
popover.on('shown.bs.popover', function () {
var instance = $(this).data('bs.popover');
// Remove the reference to 'content', so that it is not detached on hide
instance.$tip = null;
});
popover.on('hide.bs.popover', function () {
// Manually hide the popover, since we removed the reference to 'content'
content.removeClass('in');
content.addClass('out');
});
});
Codepen

How to add multiple items to context menu in Kendo Scheduler?

"kendoContextMenu" is one of control from Telerik suit. I am trying to attach it with Kendo Scheduler control.
Below is the code to render scheduler and menu
Part of it taken from Kendo sample site
<div id="example">
<div id="scheduler"></div>
<ul id="contextMenu"></ul>
</div>
Here is Context Menu Initialization
$("#contextMenu").kendoContextMenu({
filter: ".k-event, .k-scheduler-table td",
target: "#scheduler",
select: function(e) {
var target = $(e.target);
if (target.hasClass("k-event")) {
var occurrenceByUid = scheduler.occurrenceByUid(target.data("uid"));
} else {
var slot = scheduler.slotByElement(target);
}
},
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit Title" : "Block";
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
});
});
The above code adds only ONE item in context menu and click event directly fires up. I would like to have multiple items in a context menu and each should have its own event so that I can use them as it clicked.
Below image shows right click behavior, where it shows only Block in a menu
I am trying to get menu as below- which has multiple items and have its own click events
I am trying like below by appending text but it's seems to be wrong way to do and it can not have separate click event.
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit event" : "Add Event";
text = text + "|" + "Cancel"
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
Kindly help
I'm afraid you're appending it wrong. By concatenating "| Cancel" you're not adding a new item, but adding text to the existing one.
Try creating a new object and append it with append():
menu.append([{text: "Cancel", cssClass: "cancel-opt" }]);
Then you check by the class inside the select event:
if (target.hasClass("cancel-opt"))

Close accordion alike div using jQuery?

I have this simple code which shows 3 items
When I press the header ($(".fileHeader")) , it should open then next element which is the next element (hidden div) ($(".LST_Documents"))
sketch :
JSBIN : it does work.
Most important :
When I press on a $(".fileHeader")- i need to close all other $(".LST_Documents") and then ( that why i used promise) open the relevant $(".LST_Documents").
The problem is (look at the pic) if i press again on the first $(".fileHeader").
what is happening is that it closing and then re opening. and I want it to stay CLOSED.
P.S.
I could solve it with class ( .rowOpen or something like that) but I want to do it via JS/JQ only.
How can I enhance my code to work as expected ?
Just hold the header's content visibility state before sliding it up. And slide down the content only when it was not visible.
Here is the fiddle.
$(".fileHeader").on('click', function () {
var content$ = $(this).next(),
isContentVisible = content$.is(':visible');
$(".LST_Documents:visible").slideUp().promise().done(function () {
if ( ! isContentVisible ) {
content$.slideDown();
}
});
});
How 'bout a simple condition:
$(".fileheader").on('click', function() {
var next = $(this).next();
if(next.is(':visible'))
{
next.slideUp();
}
else
{
$(".LST_Documents:visible").slideUp().promise().done(function() {
next.slideDown();
});
}
});

ExtJS: Adding a button to dynamic content odd behavior

I'm using OpenLayers and ExtJS together. In a map, I have popups that appear when you interact with the map. The HTML for the these popups contains a container that I use to create an extjs button with a menu.
When you close the popup or click out of the menu/button, the menus don't disappear. Once the button is clicked to show the menu, it remains visible! To resolve, I can write some code to manually destroy it - but I'm only firing this code on the popup close. Does anyone know why the button w/ menu is acting this way?
I init the button and menu when a popup is created on the map:
Map.popupMenu = new Ext.menu.Menu({
id: "ChangesGridContextMenu",
items: [{ .... }]
});
Map.popupButton = new Ext.Button({
id: "popupActions",
text: "Actions..",
menu: Map.popupMenu
});
When the popup is closed I destroy the extjs components:
if (Map.popupMenu !== null) {
Map.popupMenu.destroy();
Map.popupMenu = null;
}
if (Map.popupButton !== null) {
Map.popupButton.destroy();
Map.popupButton = null;
}

Categories

Resources