I installed this cool demo http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow/ on this website http://wedding.halocommunication.com
What I try to do, with no success, is to update url (like in this site wild.as) when a slide changes.
This demo use dragdealer plugin skidding.github.io/dragdealer
One of my experiment was to add this line at the end of this function, but generates errors
/**
* DragDealer plugin callback: update current value
*/
DragSlideshow.prototype._navigate = function( x, y ) {
// add class "current" to the current slide / remove that same class from the old current slide
classie.remove( this.slides[ this.current || 0 ], 'current' );
this.current = this.dd.getStep()[0] - 1;
classie.add( this.slides[ this.current ], 'current' );
window.location.href = 'http://test.com/' + this.slides.attr('data-content');
}
Anyone could help me with some hints?
Thank you
Related
I'm trying to include Inspect element right click into my electron app, I found a previous post about this but this is 4 years old and I don't know where to include this. I already managed to get devtools to open automatically but now I want to add right click inspect element. My question is.
How and where do I add inspect element as right click to work globally throughout my app and how do I make dev-tools open with a shortcut. currently I automatically open Devtools in the main.js script but when I click it away I got no way of bringing it back. Thanks for the help in advance.
Add the following code to your window's renderer process code.
Note that you may have to adapt the first two lines, depending on which API elements are already defined...
const { remote, webFrame } = require ('electron');
const { getCurrentWebContents, Menu, MenuItem } = remote;
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
{
label: 'Inspect Element',
click: () =>
{
let factor = webFrame.getZoomFactor ();
let x = Math.round (rightClickPosition.x * factor);
let y = Math.round (rightClickPosition.y * factor);
getCurrentWebContents ().inspectElement (x, y);
}
}
);
contextMenu.append (menuItem);
//
window.addEventListener
(
'contextmenu',
(event) =>
{
event.preventDefault ();
rightClickPosition = { x: event.x, y: event.y };
contextMenu.popup ();
},
false
);
References:
webFrame.getZoomFactor()
contents.inspectElement(x, y)
menu.popup(options)
As for how to have devTools open with a shortcut, this would automatically happen if your menu bar contains a submenu with a menu item whose role is toggledevtools. For instance, in your main process code, adding this to your menu template would provide a Toggle Developer Tools menu item with standard keyboard shortcut:
{
label: "Developer",
submenu:
[
{ role: 'reload' },
{ role: 'toggledevtools' }
]
}
Reference: Menu Item Roles
UPDATE:
It appears there is a more powerful and flexible way of handling a contextual menu at the webContents level, by listening to a 'context-menu' event, documented since Electron 1.0.2.
One important feature is that the zoom factor doesn't need to be taken into account any more, the x and y coordinates returned in params are just always right.
Reference: webContents Event: 'context-menu'
Here is some alternative renderer process code using this method:
const { getCurrentWebContents, Menu, MenuItem } = require ('electron').remote;
//
let webContents = getCurrentWebContents ();
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
{
label: 'Inspect Element',
click: () =>
{
webContents.inspectElement (rightClickPosition.x, rightClickPosition.y);
}
}
);
contextMenu.append (menuItem);
//
webContents.on
(
'context-menu',
(event, params) =>
{
rightClickPosition = { x: params.x, y: params.y };
contextMenu.popup ();
}
);
I have a Shiny app containing a Highcharter graph. The graph is a scatter, and has draggable and clickable points. The action associated with dragging should, in theory, be mutually exclusive with the action associated with clicking.
However, in practice, the click action sometimes fires when a point's dragged. Clicking only (without a drag) and dragging (which should preclude the ability to click until the mouse button's released and the drag action's completed) need to be mutually exclusive in this app. My full code has different JavaScript actions getting passed back to the Shiny server depending on the event's type. Both the events firing together is causing trouble.
I suspect the solution involves adding additional JavaScript actions associated with each event. My JavaScript skills aren't strong enough to know what those tweaks might be, though. Googling several different variants of this question didn't turn any potential solutions. The closest discussion I found is in the Highcharts context, here, but the solution has to do with the master Highchart/draggable-events JS files.
Suggestions?
For a toy example where you can see this behavior in action:
rm(list=ls())
library(highcharter)
library(shiny)
ui <- fluidPage(
highchartOutput("hcontainer")
)
# MUTUAL EXCLUSIVITY:
# if you drag in the plot, you should either drag (and get no alert) OR
# get an alert (and the point shouldn't/won't move), but never both.
server <- function(input, output, session) {
output$hcontainer <- renderHighchart({
hc <- highchart() %>%
hc_chart(animation = FALSE) %>%
hc_title(text = "draggable points demo") %>%
hc_plotOptions(
series = list(
point = list(
events = list(
drop = JS("function(){ /* # do nothing, for demo */
}"
),
click = JS("function(){
alert('You clicked') /* # give alert, for demo */
}"
)
)
),
stickyTracking = FALSE
),
column = list(
stacking = "normal"
),
line = list(
cursor = "ns-resize"
)
) %>%
hc_tooltip(yDecimals = 2) %>%
hc_add_series(
type = "scatter",
data = stars,
draggableY = TRUE,
draggableX = TRUE,
hcaes(x = absmag, y=radiussun)
)
hc
})
}
shinyApp(ui = ui, server = server)
This example may help you: http://jsfiddle.net/kkulig/th37vnv5/
I added a flag in the core function that prevents from firing the click action right after the drag event:
var dragHappened;
(function(H) {
var addEvent = H.addEvent;
H.Pointer.prototype.setDOMEvents = function() {
var pointer = this,
container = pointer.chart.container,
ownerDoc = container.ownerDocument;
container.onmousedown = function(e) {
dragHappened = false;
pointer.onContainerMouseDown(e);
};
container.onmousemove = function(e) {
pointer.onContainerMouseMove(e);
};
container.onclick = function(e) {
if (!dragHappened) {
pointer.onContainerClick(e);
}
};
(...)
}; // setDOMEvents
})(Highcharts);
(...)
plotOptions: {
series: {
point: {
events: {
drag: function() {
console.log('drag');
dragHappened = true;
},
click: function() {
console.log('click');
}
}
}
}
},
I have been using the example code from SmartFace.io to work as follows:
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
However the picker just doesn't want to show in the emulator. I have also tryied putting this code in a sepparate function and call it from a OnPress event of an ImageButton but still nothing.
I am trying this on an iPhone 4S so maybe that is the issue...
Any hint on what I am doing incorrectly would be greatly appreciated.
Thanks
Gerry
I just add a TextButton and Label to Page1 and write these codeLines. and it works; Maybe, some other codes breaks the functions.
var myCars = ["Audi", "Volvo", "Volkswagon"];
var selectedIndex = 0;
/**
* Creates action(s) that are run when the user press the key of the devices.
* #param {KeyCodeEventArguments} e Uses to for key code argument. It returns e.keyCode parameter.
* #this SMF.UI.Page
*/
function Page1_Self_OnKeyPress(e) {
if (e.keyCode === 4) {
Application.exit();
}
}
/**
* Creates action(s) that are run when the page is appeared
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.Page
*/
function Page1_Self_OnShow() {
//Comment following block for removing navigationbar/actionbar sample
//Copy this code block to every page onShow
header.init(this);
header.setTitle("Page1");
header.setRightItem("RItem");
header.setLeftItem();
/**/
}
/**
* Creates action(s) that are run when the object is pressed from device's screen.
* #param {EventArguments} e Returns some attributes about the specified functions
* #this SMF.UI.TextButton
*/
function Page1_TextButton1_OnPressed(e){
pick(
myCars,
selectedIndex,
function(e) {Pages.NewPage.Label1.text = myCars[e.index]; selectedIndex = e.index; },
function() {},
function() {}
);
}
I am using single page AJAX loading of jQMobile. Each page is its own file.
I dynamically create a HOME button on my pages when I need to. Today I just use an <A> tag pointing back to "index.html". Is there any way I can check my web app jQueryMobile history to find the first time in history where my index.html page was loaded and call a window.history.back(-##); to the page instead of just adding to the history and navigation.
The code will be such that if there isn't a index.html in the history, I will just window.location.href to the page.
function
GoHome()
{
/* This is a function I don't know even exists, but it would find the first occurrence of index.html */
var togo = $mobile.urlHistory.find( 'index.html' )
var toback = $mobile.urlHistory.length -1 - togo;
if ( togo >= 0 )
window.history.back( -1 * toback )
else
$.mobile.changePage( '/index.html' )
}
If the history was index.html => profile.html => photos.html
The magic function of $.mobile.urlHistory.find('index.html') would return 0, the history length would be 3, so my calculation would be to window.history.back( -2 ) to get back to the index.html page. if that find function returned -1 then it wasn't found and I would just do a changepage call.
Thanks
/Andy
After reading and reading and reading and not really sure what I was reading anymore, I wrote this function. Not sure its correct or the best solution or even if it can be condensed down.
using this to call
console.log( 'FindHome: ' + FindHome( ["", 'index.html'] ) );
It will search though from the first entry to the current index in the jQueryMobile urlHistory.stack and see if it will find an index page or not. From there I can decide what to do if I want to load a new page or go back -xx to the one already in history. This way the history will be somewhat clean.
function
FindHome( _home )
{
var stk = $.mobile.urlHistory.stack;
var ai = $.mobile.urlHistory.activeIndex;
for ( var idx=0; idx <= ai; idx++ )
{
var obj = $.mobile.path.parseUrl( $.mobile.urlHistory.stack[idx].url );
if(typeof _home == "string")
{
if ( _home == obj.filename )
return( idx - ai );
}
else
{
for(var x in _home)
{
if ( _home[x] == obj.filename )
return( idx - ai );
}
}
}
return ( 0 );
}
As per answer of the question Ember.js draggable and droppable jqueryUI / native Drag and drop mixin.
I have implemented JQUERY UI drag, drop, resize mixins in EmberJS. But my problem is i want the same view to do drag and resize. I tried to implement in different ways. You can check in this jsfiddle http://jsfiddle.net/codejack/TGwxf/1/ The view gets UI behaviour of last called mixin only.
Is there any way to get more than 1 behaviour in drag,drop,resize for same view?
EDIT I found out the reason is the 2nd mixin overrides the uievents,uiOptions,uiType variables. But still dont know how to avoid that... only way i can see is writing own Widgets with own events...any way to solve that?
Though the #user1128571 gave a solution which partly solves the problem, here is how i corrected the issue. I added different mixins for Interactions as that will solve the problem.
https://github.com/thecodejack/jquery-ui-ember/blob/master/js/app.js#L104
check the github pages of the module to know how exactly it works
You might want the JQ.Widget to look like this, warning it's not pretty:
Here, JQ.UiBase is the same thing as JQ.Widget
JQ.UiBase = Ember.Mixin.create({
uiWidgets: {},
uiAttributes: {},
// ----------------------------------------------------------------------------
// setup and teardown
didInsertElement: function(){
this._super();
this._createUiWidgets();
},
willDestroyElement: function(){
this._super();
// implement tear down
},
// ----------------------------------------------------------------------------
// #Private
// #Function: for each $.ui specified in the view, create a $.ui widget
// add ui widgets to uiWidgets hash, ui widget setting to uiAttributes hash
_createUiWidgets: function(){
var widgetTypes = this._gatherWidgetTypes();
uiWidgets = this.get('uiWidgets'),
uiAttributes = this.get('uiAttributes'),
thisView = this;
widgetTypes.forEach( function( widget ){
var options = thisView.get( widget + 'Options' ) || {},
handlers = thisView._registerEventHandlers( widget ),
attributes = $.extend( options, handlers ),
uiWidget = $.ui[widget]( attributes, thisView.$() );
uiWidgets[widget] = uiWidget;
uiAttributes[widget] = attributes;
});
},
// #Function: collects named $.ui events from Widget mixin
// for each event, if there is an associated callback, wrap it in a function and call the view's context
// #Return: a hash map $.ui event to callback function defined in view
_registerEventHandlers: function( widget_name ){
var widgetName = widget_name + 'Events',
events = this.get( widgetName ) || [],
thisView = this,
eventHandlers = {};
if ( events.length === 0 ) return;
// note the iterator is not scoped to the view
events.forEach( function( event ){
var callBack = thisView.get( event );
if ( callBack ){
eventHandlers[ event ] = function ( event, ui ){ callBack.call( thisView, event, ui ); };
};
});
return eventHandlers;
},
// TODO --> find alternate implementation that does not break if structure of ui mixins or namespace change
_gatherWidgetTypes: function() {
var nameSpace = 'JQ',
widgetTypes = [];
Ember.Mixin.mixins(this).forEach( function( mixin ){
// find widget with correct namespace
if ( mixin.toString().substring(0,2) === nameSpace ){
// console.log( 'gather: ', mixin, ' --> ', mixin.mixins[1] )
// access widget mixin and check widget mixin have properties
if ( mixin.mixins && mixin.mixins[1] && mixin.mixins[1].properties ){
if ( mixin.mixins[1].properties.widgetType ) widgetTypes.push( mixin.mixins[1].properties.widgetType)
}
}
});
return widgetTypes;
},
});
And then your resizable mixin would look like this:
JQ.Resizable = Ember.Mixin.create( JQ.UiBase, {
widgetType: 'resizable',
resizableOptions: { 'aspectRatio': 1/1 },
resizableEvents: [ 'resize' ],
resize: function( event, ui ){
// do stuff
},
});
The most important function here is the _gatherWidgetTypes, which gathers all JQ-namespaced mixins in the ember object. In my opinion, it's bit of a hack and I ended up not using the JQ.UiBase after making it, favoring to mix logic to create the widget and specifying the event handlers and options into one mixin, which ended up looking cleaner, but that's just me.