I have a widget which is a photo gallery. It's basic functionality means that it only allows the user to click on a thumbnail and then enlarge/de enlarge upon an onclick event.
I need to expand the widget so that there is a button which allows the user to change their profile pictures accordingly (if they select that picture).
Here is how the code looks by default in widget.js:
var topView = Ti.UI.createView({
width:Ti.UI.FILL,
height: Ti.UI.FILL,
zIndex:1200,
visible:false
});
// this gets image , adds it to top view
var imgView = Ti.UI.createImageView({
image: url,
width:Ti.UI.SIZE,
height: Ti.UI.SIZE
});
//add it
topView.add(imgView);
Now to add a button, I can add the following into widget.js:
var button = Titanium.UI.createButton({
title : 'Use Picture',
top : 10,
width : 100,
height : 50
});
button.addEventListener('click', function(e) {
Alloy.Global.Image = url;
});
topView.add(button);
This will close the pop up and return the url of that image by putting it inside a global variable. I can then use this and change my the picture to the new one by calling that in the relevant controller.
The question is, what is the best way expand the widget.js code and is using a global variable this way the best way to do this?
What I often do with custom widgets is adding a callback, so you can return values directly.
widget.xml
<Alloy>
<Button title="Click me!" onTouchend="buttonClicked" />
</Alloy>
widget.js
// This will hold our callback
var onClickCallback;
// The button has been clicked, call callback
function buttonClicked(e) {
if(typeof(onClickCallback) === 'function') {
onClickCallback({ type:'clicked!' }); }
}
}
// Assign our callback
function onClick(callback) {
onClickCallback = callback;
}
// Make the onClick function public
exports.onClick = onClick;
index.xml
<Alloy>
<Window>
<Widget id="myWidget" src="myWidget" />
</Window>
</Alloy>
index.js
// Now we can intercept the click within the widget
// and use the values passed
$.myWidget.onClick(function(e) {
alert(e.type);
});
Related
This is my image uploader:
My Code for adding an image which works perfect:
jQuery(function($){
// Set all variables to be used in scope
var frame, selections, attachment,
metaBox = $('#gallery-meta-box.postbox'), // Your meta box id here
addImgLink = metaBox.find('.upload-custom-img'),
delImgLink = metaBox.find('.delete-custom-img'),
imgContainer = metaBox.find('.custom-img-container'),
imgIdInput = metaBox.find('.custom-img-id' );
// Add image from frame
addImgLink.on( 'click', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: 'Select Images',
button: {
text: 'Add Image'
},
multiple: true
});
// When an image is selected in the media frame
frame.on( 'select', function() {
// Get media attachments details from the frame state
selections = frame.state().get('selection');
selections.map(function(attachment){
attachment = attachment.toJSON();
// Send the attachment URL to our custom image input field
imgContainer.append(
'<li>'
+ '<img data-attachment-id="id-media-1993'+attachment.id+'" src="'+attachment.url+'" class="gallery-thumbnail" alt="'+attachment.title+'" style="max-width:150px; max-height:150px;"/>'
+ '<a class="delete-custom-img" href="#">Remove Image</a>'
+ '</li>');
// Send the attachment id to our hidden input
imgIdInput.val(attachment.id);
console.log(attachment);
});
});
// Finally, open the modal on click
frame.open();
});
// MY DELETE BUTTON :
imgContainer.on( 'click', delImgLink, function(event){
event.preventDefault();
var galleryThumbnail = $(this).find('img');
console.log(galleryThumbnail);
});
});
When you do watch the image uploader you can see the remove links. When I click on the remove and it doesn't matter which one of the remove button it's giving my the id's of both and same for the src.
see result:
When I click on the remove link, I want information about the current image, not all the images inside my div element.
Hopefully someone can explain it.
The issue is that, while you are using event delegation to handle dynamic elements, the delegation is pre-determined, so does not pick up the elements correctly
delImgLink = metaBox.find('.delete-custom-img'),
Change
imgContainer.on( 'click', delImgLink, ...
to
imgContainer.on('click', 'a.delete-custom-img',
then this will be the button and you can find the relevant image either with .closest().find() or .prevAll("img").first() (or other method):
imgContainer.on('click', 'a.delete-custom-img', function(event){
event.preventDefault();
var galleryThumbnail = $(this).closest("li").find('img');
console.log(galleryThumbnail);
});
In your original code, if this was the delete button then
$(this).find('img')
would not find anything as find find child items and there are no child items under your delete anchor, so this must be referring to something else, higher up.
You need jquery closet() to find nearest img and then delete it.
Or you can do it by
$(this).parent().find('img');
To achieve expected reult, use below option of adding event to imageContainer images and $(this) will provide the details of selected image
$(".imgContainer img").on( 'click', function(event){
event.preventDefault();
var galleryThumbnail = $(this);
console.log(galleryThumbnail[0].id);
});
https://codepen.io/nagasai/pen/VQJoZj
I'm trying to figure out the best way to add a function to the existing ng-click function below that will add a class to the element upon execution.
$ctrl.next = function(id) {
$state.go('individual', {id : id}, {reload : true});
ga.track({
action:'Button click',
label:'Navigation Button Right',
category:'Button'
});
}
Basically this function triggers a state change to the next item in an array that comes from a database and tracks the element clicked.
Without a sample, I am not 100% clear on what you have. This plunker demo shows clicking a button, and changing it's class to make it blue.
JS
app.controller('ctrl',function($scope){
$scope.clickFunction = function(evt) {
angular.element(evt.srcElement).addClass('clicked-button');
}
});
HTML
<div ng-controller='ctrl'>
<button ng-click="clickFunction($event)">Click Me</button>
</div>
I have a Photoswipe (http://photoswipe.com) image gallery on my site, and the css class is not resetting/clearing to remove the view after I close a gallery for the second time.
ex.
User opens item 1, AJAX populates the figure(s) into the picture div.
User clicks an image from item 1 and Photoswipe opens the image properly (setting the following class):
class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"
User closes the image from item 1, class resets as normal:
class="pswp"
User closes item 1 and JS/JQuery clears all html in picture div. User opens item 2, AJAX populates the figure into the picture div. User clicks an image from item 2 and Photoswipe opens the image properly setting the same class as before.
class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"
This is where the problem occurs. User closes the image from item 2 and the only thing that changes is:
aria-hidden="true"
but the class does not clear, it remains:
class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible"
when it should change to:
class="pswp"
This disables all interaction on the website since there is an invisible div/class on top of everything. The class needs to be changed back to pswp somehow.
AJAX/JS To Populate picture div (I added an id to the div):
if (i == 0) {
$('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo"></figure>');
} else {
$('#listing_photos_container').append('<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="listing-photo-holder"><img src="' + json[i].image_url + '" height="400" width="600" itemprop="thumbnail" alt="listingPhoto" class="listing-photo-holder"></figure>');
}
JS/JQuery to clear photo div:
$('#listing_photos_container').html('');
EDIT: The click listener function is running twice when a users clicks the photo to bring full screen. This is the code for the listener:
$.ajax({
type: "POST",
url: 'http://example.com/action?action=photos',
data: {id: id},
success: function (data) {
console.log('API Call - Photos');
json = JSON.parse(data);
$('#listing_photos_container').html('');
for (var i = 0; i < json.length; i++) {
// Styling code here
}
$('#list_header').html(
(function($) {
$('.picture').each( function() {
var $pic = $(this),
getItems = function() {
var items = [];
$pic.find('a').each(function() {
var $href = $(this).attr('href'),
$size = $(this).data('size').split('x'),
$width = $size[0],$height = $size[1];
var item = {
src : $href,
w : $width,
h : $height
}
items.push(item);
});
return items;
}
var items = getItems();
console.log('Items for PSWP' + items);
alert('Alert Point 1'); // This is called once, (as it should).
var $pswp = $('.pswp')[0];
$pic.on('click', 'figure', function(event) {
// This block is called twice..
alert('Click Funct');
event.preventDefault();
var $index = $(this).index();
var options = {
index: $index,
bgOpacity: 0.7,
showHideOpacity: true
}
// Initialize PhotoSwipe
alert('Setting new PhotoSwipe');
var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
}); // End $pic.on
});// End .picture each
})(jQuery)
); // End list_header.html
} // End AJAX Success
}); // End AJAX
You may have already fixed this, but in case someone else falls upon this.
This can happen if you trigger opening the gallery more than once without closing it. It may be that you have registered multiple click handlers to open the gallery or for some reason the event is being fired twice.
It happens because in the init function the current class name of the pswp element is retrieved and cached, then on destroy the class name is restored. When the second open occurs without destroy being called _initialClassName will be set to class="pswp pswp--supports-fs pswp--open pswp--animate_opacity pswp--notouch pswp--css_animation pswp--svg pswp--animated-in pswp--visible" as your are seeing
Line 776 of photoswipe.js where initialclass is set
_initalClassName = template.className;
Breakpoint this in your browser to see if it is called multiple times when opening
Line 942 onwards destroy function
destroy: function() {
_shout('destroy');
Breakpoint this in your browser to ensure it is being called for every time open is called
Final Solution
The problem is that when opening the popup and loading the images you are filling #listing_photos_container with your photos, then adding a click handler to open photoswipe. This click handler is added to the top element, so will remain when the popup is closed, then the next time it is opened a new click handler will be added.
To fix this you just need to unbind the click handler when closing the popup, you can do this with $(".picture").off('click'); somewhere inside your closeListing() function
It's quite simple, before every .click(...) you need to write .unbind('click').
Example:
$('a#open-photoswipe').unbind('click').click(function() {
// open photoswipe here
});
Was having similar problem - just define lightBox as global variable. And on destroy define it as null. And in beginning of function where You initialize lightBox just check if lighBox is already defined, then do return.
I am trying to open a fancybox iframe on my page. Pass over some basic information to the iframe. Then I want to make it so that the iframe talks back to it's parent.
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
I just don't know how to execute this all correctly as I am new to Ajax/Javascript and struggling with the logic.
Base.html
JS:
<script type='text/javascript'>
//<![CDATA[
// Popup Function
$(document).ready(function () {
$('a.openinformation').fancybox({
openEffect: 'fade',
openSpeed: 500 //,
});
});
// Update from iFrame
function setInformation(userText) {
$('#displayfield-nameid-1').html(userText);
$('#showhide-nameid-1').show();
}
//]]>
</script>
HTML:
<div>
<a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a>
</div>
<div id ="showhide-nameid-1" style=" display:none; background:#0CF;">
<p>Replacement Name: <span id="displayfield-nameid-1"></span></p>
</div>
iframe.html
JS :
<script type='text/javascript'>
//<![CDATA[
// Start
$(window).load(function () {
// When Loaded get going.
$(document).ready(function () {
$('a.doupdate').click(function () {
parent.setInformation($(this).text());
parent.$.fancybox.close();
});
$('a.closeremove').click(function () {
parent.$('#showhide-nameid-1').hide();
parent.$.fancybox.close();
});
});
});
//]]>
</script>
HTML
<p>The old name: $originalname;</p>
<p>The id for this column is: $nameid</p>
<p>Please select a new name:</p>
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div>
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div>
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div>
Your question can be dived in two parts :
How to pass data (stored in variables) from parent page to an iframe (opened in fancybox)
How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed.
1). Pass data from parent page to (fancybox) iframe
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
... so you can pass a single object to the iframe instead of several variables. Then you can add different properties and values to that object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
... or more if you need so.
You still may want to pass that information statically through (HTML5) data attributes like :
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
... and push the data values into the parentData object within the fancybox beforeLoad callback like :
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
... that would give you much more flexibility IMHO.
Now, the only thing you need to do in the iframed page is to refer to those properties as parent.parentData.nameid and parent.parentData.originalname any time you need them, e.g.
having this html (iframe.html)
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
... so we used <span> tags to write their content via javascript.
2). Pass data from iframed page to parent page.
First thing you need to do is to declare in your parent page, an object to store data from the iframe and a function to process it like :
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
Then in the iframed page, you can write different properties/values to the iframeData object and run the setInformation() function (in the parent page) from the iframe to pass the values to the parent page like :
$(".doupdate").on("click", function (e) {
e.preventDefault();
iframeData.newname = $(this).find("span").text(); // set object property/value
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... notice I wrapped the name I want pass in a span tag. Optionally you could separate it in 2 spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
... and write them in separated values like :
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
For the clear button, I would just reinitialize the variable and close fancybox like
$('a.closeremove').on("click", function (e) {
e.preventDefault();
iframeData = {}; // reset variable
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
... and perform the manipulation of the parent page from the parent page itself using the fancybox afterClose callback like :
afterClose : function () {
if ( objLength(iframeData) > 0 ) {
$('#displayfield-nameid-1').html(iframeData.newname);
$('#showhide-nameid-1').show();
} else {
$("#displayfield-nameid-1").empty();
$('#showhide-nameid-1').hide();
}
}
... notice I will only show the selector #showhide-nameid-1 if the iframeData object's length is bigger than 0. Because that, I need a function to validate the object's length :
Based on this answer, you could do:
function objLength(iframeData) {
// ref https://stackoverflow.com/a/5533226/1055987
var count = 0, i;
for (i in iframeData) {
if (iframeData.hasOwnProperty(i)) {
count++;
}
}
return count;
};
... which will return the object's length.
Last note :
Since the iframed page is referring to the parent page using the prefix parent, it will return js errors if it's opened outside an iframe. You may want to validate first if the iframed page is actually contained inside an iframe before trying to access data back and forth to/from the parent page like :
if (window.self !== window.top) {
// the page is inside an iframe
}
See DEMO and feel free to explore the source code of both pages.
I am trying to open a fancybox iframe on my page. Pass over some basic information to the iframe. Then I want to make it so that the iframe talks back to it's parent.
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
I just don't know how to execute this all correctly as I am new to Ajax/Javascript and struggling with the logic.
Base.html
JS:
<script type='text/javascript'>
//<![CDATA[
// Popup Function
$(document).ready(function () {
$('a.openinformation').fancybox({
openEffect: 'fade',
openSpeed: 500 //,
});
});
// Update from iFrame
function setInformation(userText) {
$('#displayfield-nameid-1').html(userText);
$('#showhide-nameid-1').show();
}
//]]>
</script>
HTML:
<div>
<a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a>
</div>
<div id ="showhide-nameid-1" style=" display:none; background:#0CF;">
<p>Replacement Name: <span id="displayfield-nameid-1"></span></p>
</div>
iframe.html
JS :
<script type='text/javascript'>
//<![CDATA[
// Start
$(window).load(function () {
// When Loaded get going.
$(document).ready(function () {
$('a.doupdate').click(function () {
parent.setInformation($(this).text());
parent.$.fancybox.close();
});
$('a.closeremove').click(function () {
parent.$('#showhide-nameid-1').hide();
parent.$.fancybox.close();
});
});
});
//]]>
</script>
HTML
<p>The old name: $originalname;</p>
<p>The id for this column is: $nameid</p>
<p>Please select a new name:</p>
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div>
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div>
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div>
Your question can be dived in two parts :
How to pass data (stored in variables) from parent page to an iframe (opened in fancybox)
How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed.
1). Pass data from parent page to (fancybox) iframe
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
... so you can pass a single object to the iframe instead of several variables. Then you can add different properties and values to that object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
... or more if you need so.
You still may want to pass that information statically through (HTML5) data attributes like :
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
... and push the data values into the parentData object within the fancybox beforeLoad callback like :
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
... that would give you much more flexibility IMHO.
Now, the only thing you need to do in the iframed page is to refer to those properties as parent.parentData.nameid and parent.parentData.originalname any time you need them, e.g.
having this html (iframe.html)
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
... so we used <span> tags to write their content via javascript.
2). Pass data from iframed page to parent page.
First thing you need to do is to declare in your parent page, an object to store data from the iframe and a function to process it like :
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
Then in the iframed page, you can write different properties/values to the iframeData object and run the setInformation() function (in the parent page) from the iframe to pass the values to the parent page like :
$(".doupdate").on("click", function (e) {
e.preventDefault();
iframeData.newname = $(this).find("span").text(); // set object property/value
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... notice I wrapped the name I want pass in a span tag. Optionally you could separate it in 2 spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
... and write them in separated values like :
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
For the clear button, I would just reinitialize the variable and close fancybox like
$('a.closeremove').on("click", function (e) {
e.preventDefault();
iframeData = {}; // reset variable
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
... and perform the manipulation of the parent page from the parent page itself using the fancybox afterClose callback like :
afterClose : function () {
if ( objLength(iframeData) > 0 ) {
$('#displayfield-nameid-1').html(iframeData.newname);
$('#showhide-nameid-1').show();
} else {
$("#displayfield-nameid-1").empty();
$('#showhide-nameid-1').hide();
}
}
... notice I will only show the selector #showhide-nameid-1 if the iframeData object's length is bigger than 0. Because that, I need a function to validate the object's length :
Based on this answer, you could do:
function objLength(iframeData) {
// ref https://stackoverflow.com/a/5533226/1055987
var count = 0, i;
for (i in iframeData) {
if (iframeData.hasOwnProperty(i)) {
count++;
}
}
return count;
};
... which will return the object's length.
Last note :
Since the iframed page is referring to the parent page using the prefix parent, it will return js errors if it's opened outside an iframe. You may want to validate first if the iframed page is actually contained inside an iframe before trying to access data back and forth to/from the parent page like :
if (window.self !== window.top) {
// the page is inside an iframe
}
See DEMO and feel free to explore the source code of both pages.