We Keep Coding

Uncaught TypeError: o.widget is not a function at mouse.min.js Wordpress

I've found an error in Wordpress website after mobile-friendly test.
Uncaught TypeError: o.widget is not a function at domain/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4:11:163
The code in this file is:
!(function (e) {
"function" == typeof define && define.amd ? define(["jquery", "./widget"], e) : e(jQuery);
})(function (o) {
var u = !1;
return (
o(document).mouseup(function () {
u = !1;
}),
o.widget("ui.mouse", {
version: "1.11.4",
options: { cancel: "input,textarea,button,select,option", distance: 1, delay: 0 },
_mouseInit: function () {
var t = this;
this.element
.bind("mousedown." + this.widgetName, function (e) {
return t._mouseDown(e);
})
.bind("click." + this.widgetName, function (e) {
if (!0 === o.data(e.target, t.widgetName + ".preventClickEvent")) return o.removeData(e.target, t.widgetName + ".preventClickEvent"), e.stopImmediatePropagation(), !1;
}),
(this.started = !1);
},
_mouseDestroy: function () {
this.element.unbind("." + this.widgetName), this._mouseMoveDelegate && this.document.unbind("mousemove." + this.widgetName, this._mouseMoveDelegate).unbind("mouseup." + this.widgetName, this._mouseUpDelegate);
},
_mouseDown: function (e) {
if (!u) {
(this._mouseMoved = !1), this._mouseStarted && this._mouseUp(e), (this._mouseDownEvent = e);
var t = this,
s = 1 === e.which,
i = !("string" != typeof this.options.cancel || !e.target.nodeName) && o(e.target).closest(this.options.cancel).length;
return (
!(s && !i && this._mouseCapture(e)) ||
((this.mouseDelayMet = !this.options.delay),
this.mouseDelayMet ||
(this._mouseDelayTimer = setTimeout(function () {
t.mouseDelayMet = !0;
}, this.options.delay)),
this._mouseDistanceMet(e) && this._mouseDelayMet(e) && ((this._mouseStarted = !1 !== this._mouseStart(e)), !this._mouseStarted)
? (e.preventDefault(), !0)
: (!0 === o.data(e.target, this.widgetName + ".preventClickEvent") && o.removeData(e.target, this.widgetName + ".preventClickEvent"),
(this._mouseMoveDelegate = function (e) {
return t._mouseMove(e);
}),
(this._mouseUpDelegate = function (e) {
return t._mouseUp(e);
}),
this.document.bind("mousemove." + this.widgetName, this._mouseMoveDelegate).bind("mouseup." + this.widgetName, this._mouseUpDelegate),
e.preventDefault(),
(u = !0)))
);
}
},
_mouseMove: function (e) {
if (this._mouseMoved) {
if (o.ui.ie && (!document.documentMode || document.documentMode < 9) && !e.button) return this._mouseUp(e);
if (!e.which) return this._mouseUp(e);
}
return (
(e.which || e.button) && (this._mouseMoved = !0),
this._mouseStarted
? (this._mouseDrag(e), e.preventDefault())
: (this._mouseDistanceMet(e) && this._mouseDelayMet(e) && ((this._mouseStarted = !1 !== this._mouseStart(this._mouseDownEvent, e)), this._mouseStarted ? this._mouseDrag(e) : this._mouseUp(e)), !this._mouseStarted)
);
},
_mouseUp: function (e) {
return (
this.document.unbind("mousemove." + this.widgetName, this._mouseMoveDelegate).unbind("mouseup." + this.widgetName, this._mouseUpDelegate),
this._mouseStarted && ((this._mouseStarted = !1), e.target === this._mouseDownEvent.target && o.data(e.target, this.widgetName + ".preventClickEvent", !0), this._mouseStop(e)),
(u = !1)
);
},
_mouseDistanceMet: function (e) {
return Math.max(Math.abs(this._mouseDownEvent.pageX - e.pageX), Math.abs(this._mouseDownEvent.pageY - e.pageY)) >= this.options.distance;
},
_mouseDelayMet: function () {
return this.mouseDelayMet;
},
_mouseStart: function () {},
_mouseDrag: function () {},
_mouseStop: function () {},
_mouseCapture: function () {
return !0;
},
})
);
});
Maybe someone with a better knowledge of js and jquery can see where the problem is and how to fix it?

how to add jquery resize function to WP google map plugin?

After trying so many times to show my google maps on popup window in popup maker plugin in WordPress, I found out that the map should be resized again after loading in a popup, now I don't know where to add the resize or re-init the map!
the page I'm working on is this page.
this is my plugin's map.js file. where and how I should add resize or re-init functionality?
! function($, window, document, undefined) {
function Map_Control(e) {
this.options = e
}
function overlay_generator(e, o) {
this.tileSize = e, this.overlay_options = o
}
function GoogleMaps(e, o) {
var t;
console.log(o), this.element = e, this.map_data = $.extend({}, {}, o), t = this.map_data.map_options, this.settings = $.extend({
zoom: "5",
map_type_id: "ROADMAP",
scroll_wheel: !0,
map_visual_refresh: !1,
pan_control: "true",
pan_control_position: "TOP_LEFT",
zoom_control: !0,
zoom_control_style: "SMALL",
zoom_control_position: "TOP_LEFT",
map_type_control: !0,
map_type_control_style: "HORIZONTAL_BAR",
map_type_control_position: "RIGHT_TOP",
scale_control: !0,
street_view_control: !0,
street_view_control_position: "TOP_LEFT",
overview_map_control: !0,
center_lat: "40.6153983",
center_lng: "-74.2535216",
draggable: !0
}, {}, t), this.container = $("div[rel='" + $(this.element).attr("id") + "']"), this.directionsService = new google.maps.DirectionsService, this.directionsDisplay = new google.maps.DirectionsRenderer, this.drawingmanager = new Object, this.geocoder = new google.maps.Geocoder, this.places = new Array, this.show_places = new Array, this.categories = new Object, this.all_shapes = [], this.wpgmp_polylines = [], this.wpgmp_polygons = [], this.wpgmp_circles = [], this.wpgmp_shape_events = [], this.wpgmp_rectangles = [], this.per_page_value, this.current_amenities = new Array, this.route_directions = new Array, this.init()
}
Map_Control.prototype.create_element = function(e, o, t) {
var a = document.createElement("div");
a.style.backgroundColor = "#fff", a.style.border = "2px solid #fff", a.style.borderRadius = "3px", a.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)", a.style.cursor = "pointer", a.style.marginBottom = "22px", a.style.textAlign = "center", a.title = "Click to recenter the map", e.appendChild(a);
var n = document.createElement("div");
n.style.color = "rgb(25,25,25)", n.style.fontFamily = "Roboto,Arial,sans-serif", n.style.fontSize = "16px", n.style.lineHeight = "38px", n.style.paddingLeft = "5px", n.style.paddingRight = "5px", n.innerHTML = t, a.appendChild(n), google.maps.event.addDomListener(a, "click", function() {
o.setCenter(new google.maps.LatLng(41.85, -87.65))
})
}, overlay_generator.prototype.getTile = function(e, o, t) {
var a = t.createElement("div");
return a.innerHTML = e, a.style.width = "200px", a.style.height = "300px", a.style.fontSize = this.overlay_options.font_size + "px", a.style.borderStyle = this.overlay_options.border_style, a.style.borderWidth = this.overlay_options.border_width + "px", a.style.borderColor = this.overlay_options.border_color, a
}, GoogleMaps.prototype = {
init: function() {
var map_obj = this,
center = new google.maps.LatLng(map_obj.settings.center_lat, map_obj.settings.center_lng);
map_obj.map = new google.maps.Map(map_obj.element, {
zoom: parseInt(map_obj.settings.zoom),
center: center,
scrollwheel: "false" != map_obj.settings.scroll_wheel,
panControl: 1 == map_obj.settings.pan_control,
panControlOptions: {
position: eval("google.maps.ControlPosition." + map_obj.settings.pan_control_position)
},
zoomControl: 1 == map_obj.settings.zoom_control,
zoomControlOptions: {
style: eval("google.maps.ZoomControlStyle." + map_obj.settings.zoom_control_style),
position: eval("google.maps.ControlPosition." + map_obj.settings.zoom_control_position)
},
mapTypeControl: 1 == map_obj.settings.map_type_control,
mapTypeControlOptions: {
style: eval("google.maps.MapTypeControlStyle." + map_obj.settings.map_type_control_style),
position: eval("google.maps.ControlPosition." + map_obj.settings.map_type_control_position)
},
scaleControl: 1 == map_obj.settings.scale_control,
streetViewControl: 1 == map_obj.settings.street_view_control,
streetViewControlOptions: {
position: eval("google.maps.ControlPosition." + map_obj.settings.street_view_control_position)
},
overviewMapControl: 1 == map_obj.settings.overview_map_control,
overviewMapControlOptions: {
opened: map_obj.settings.overview_map_control
},
draggable: map_obj.settings.draggable,
mapTypeId: eval("google.maps.MapTypeId." + map_obj.settings.map_type_id),
styles: eval(map_obj.map_data.styles)
}), map_obj.map_loaded(), map_obj.responsive_map(), map_obj.create_markers(), map_obj.display_markers(), "undefined" != typeof map_obj.map_data.street_view && map_obj.set_streetview(center), "undefined" != typeof map_obj.map_data.bicyle_layer && map_obj.set_bicyle_layer(), "undefined" != typeof map_obj.map_data.traffic_layer && map_obj.set_traffic_layer(), "undefined" != typeof map_obj.map_data.transit_layer && map_obj.set_transit_layer(), "45" == typeof map_obj.settings.display_45_imagery && map_obj.set_45_imagery(), typeof map_obj.map_data.map_visual_refresh === !0 && map_obj.set_visual_refresh(), $(map_obj.container).on("click", ".place_title", function() {
map_obj.open_infowindow($(this).data("marker")), $("html, body").animate({
scrollTop: $(map_obj.container).offset().top
}, 500)
}), map_obj.google_auto_suggest($(".wpgmp_auto_suggest")), 1 == map_obj.settings.show_center_circle && map_obj.show_center_circle()
},
createMarker: function(e) {
var o = this,
t = o.map,
a = (e.geometry.location, {
url: e.icon,
size: new google.maps.Size(25, 25),
scaledSize: new google.maps.Size(25, 25)
});
e.marker = new google.maps.Marker({
map: t,
position: e.geometry.location,
icon: a
}), google.maps.event.addListener(e.marker, "click", function() {
o.amenity_infowindow.setContent(e.name), o.amenity_infowindow.open(t, this)
}), o.current_amenities.push(e)
},
get_user_position: function(e, o) {
var t = this;
t.user_lat_lng ? e && e(t.user_lat_lng) : navigator.geolocation.getCurrentPosition(function(o) {
t.user_lat_lng = new google.maps.LatLng(o.coords.latitude, o.coords.longitude), e && e(t.user_lat_lng)
}, function(e) {
o && o(e)
}, {
enableHighAccuracy: !0,
timeout: 5e3,
maximumAge: 0
})
},
marker_bind: function(e) {
map_obj = this, google.maps.event.addListener(e, "drag", function() {
var o = e.getPosition();
map_obj.geocoder.geocode({
latLng: o
}, function(e, o) {
if (o == google.maps.GeocoderStatus.OK && ($("#googlemap_address").val(e[0].formatted_address), $(".google_city").val(map_obj.wpgmp_finddata(e[0], "administrative_area_level_3") || map_obj.wpgmp_finddata(e[0], "locality")), $(".google_state").val(map_obj.wpgmp_finddata(e[0], "administrative_area_level_1")), $(".google_country").val(map_obj.wpgmp_finddata(e[0], "country")), e[0].address_components))
for (var t = 0; t < e[0].address_components.length; t++)
for (var a = 0; a < e[0].address_components[t].types.length; a++) "postal_code" == e[0].address_components[t].types[a] && (wpgmp_zip_code = e[0].address_components[t].long_name, $(".google_postal_code").val(wpgmp_zip_code))
}), $(".google_latitude").val(o.lat()), $(".google_longitude").val(o.lng())
})
},
google_auto_suggest: function(e) {
var o = this;
e.each(function() {
var e = this,
t = new google.maps.places.Autocomplete(this);
if (t.bindTo("bounds", o.map), "location_address" == $(this).attr("name")) {
var a = (new google.maps.InfoWindow, new google.maps.Marker({
map: o.map,
draggable: !0,
anchorPoint: new google.maps.Point(0, -29)
}));
o.marker_bind(a), google.maps.event.addListener(t, "place_changed", function() {
var e = t.getPlace();
if (e.geometry) {
if (e.geometry.viewport ? o.map.fitBounds(e.geometry.viewport) : (o.map.setCenter(e.geometry.location), o.map.setZoom(17)), $(".google_latitude").val(e.geometry.location.lat()), $(".google_longitude").val(e.geometry.location.lng()), $(".google_city").val(o.wpgmp_finddata(e, "administrative_area_level_3") || o.wpgmp_finddata(e, "locality")), $(".google_state").val(o.wpgmp_finddata(e, "administrative_area_level_1")), $(".google_country").val(o.wpgmp_finddata(e, "country")), e.address_components)
for (var n = 0; n < e.address_components.length; n++)
for (var i = 0; i < e.address_components[n].types.length; i++) "postal_code" == e.address_components[n].types[i] && (wpgmp_zip_code = e.address_components[n].long_name, $(".google_postal_code").val(wpgmp_zip_code));
a.setPosition(e.geometry.location), a.setVisible(!0)
}
})
} else google.maps.event.addListener(t, "place_changed", function() {
var o = t.getPlace();
o.geometry && ($().val(o.geometry.location.lat()), $(e).data("longitude", o.geometry.location.lng()), $(e).data("latitude", o.geometry.location.lat()))
})
})
},
wpgmp_finddata: function(e, o) {
var t = "";
for (i = 0; i < e.address_components.length; ++i) {
var a = e.address_components[i];
$.each(a.types, function(e, n) {
n == o && (t = a.long_name)
})
}
return t
},
open_infowindow: function(e) {
var o = this;
$.each(this.map_data.places, function(t, a) {
parseInt(a.id) == parseInt(e) && 1 == a.marker.visible ? (a.infowindow.open(o.map, a.marker), console.log(a)) : a.infowindow.close()
})
},
place_info: function(e) {
var o;
return $.each(this.places, function(t, a) {
parseInt(a.id) == parseInt(e) && (o = a)
}), o
},
event_listener: function(e, o, t) {
google.maps.event.addListener(e, o, t)
},
set_visual_refresh: function() {
google.maps.visualRefresh = !0
},
set_45_imagery: function() {
this.map.setTilt(45)
},
set_bicyle_layer: function() {
var e = new google.maps.BicyclingLayer;
e.setMap(this.map)
},
set_traffic_layer: function() {
var e = new google.maps.TrafficLayer;
e.setMap(this.map)
},
set_transit_layer: function() {
var e = new google.maps.TransitLayer;
e.setMap(this.map)
},
set_streetview: function(e) {
var o = {
position: e,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: this.map_data.street_view.links_control,
panControl: this.map_data.street_view.street_view_pan_control,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: this.map_data.street_view.street_view_close_button
};
"" != this.map_data.street_view.pov_heading && (o.pov = {
heading: parseInt(this.map_data.street_view.pov_heading),
pitch: parseInt(this.map_data.street_view.pov_pitch)
}), new google.maps.StreetViewPanorama(this.element, o)
},
map_loaded: function() {
var e = this,
o = e.map;
google.maps.event.addListenerOnce(o, "idle", function() {
var e = o.getCenter();
google.maps.event.trigger(o, "resize"), o.setCenter(e)
}), "true" == e.settings.center_by_nearest && e.center_by_nearest()
},
responsive_map: function() {
var e = this,
o = e.map;
google.maps.event.addDomListener(window, "resize", function() {
var e = o.getCenter();
google.maps.event.trigger(o, "resize"), o.setCenter(e), o.getBounds()
})
},
create_markers: function() {
var e = this,
o = e.map_data.places;
$.each(o, function(o, t) {
if (t.location.lat && t.location.lng) {
t.marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(t.location.lat), parseFloat(t.location.lng)),
icon: t.location.icon,
url: t.url,
draggable: t.location.draggable,
animation: google.maps.Animation.DROP,
map: e.map
}), 1 == e.settings.infowindow_filter_only && (t.marker.visible = !1, t.marker.setVisible(!1)), "edit_location" == e.map_data.page && e.marker_bind(t.marker);
var a = [];
if ("undefined" != typeof t.categories)
for (var n in t.categories) a.push(t.categories[n].name);
var i = "";
if (e.settings.infowindow_setting) {
var s = {
"{location_id}": t.id,
"{location_title}": t.title,
"{location_address}": t.address,
"{location_latitude}": t.location.lat,
"{location_longitude}": t.location.lng,
"{location_city}": t.location.city,
"{location_state}": t.location.state,
"{location_country}": t.location.country,
"{location_postal_code}": t.location.postal_code,
"{location_zoom}": t.location.zoom,
"{location_icon}": t.location.icon,
"{location_categories}": a.join(","),
"{location_message}": t.content
};
if ("undefined" != typeof t.location.extra_fields)
for (var r in t.location.extra_fields) s["{" + r + "}"] = t.location.extra_fields[r];
var l = e.settings.infowindow_setting.replace(/{[^{}]+}/g, function(e) {
return e in s ? s[e] : ""
});
i = l
}
"" == i && (i = '<div class="wpgmp_infowindow">' + t.content + "</div>"), t.infowindow = new google.maps.InfoWindow({
content: i
}), "true" == t.location.infowindow_default_open ? e.openInfoWindow(t) : "true" == e.settings.default_infowindow_open && e.openInfoWindow(t);
var p = e.settings.infowindow_open_event;
e.event_listener(t.marker, p, function() {
e.openInfoWindow(t)
}), e.places.push(t)
}
})
},
display_markers: function() {
var e = this;
e.show_places = [], e.categories = [];
for (var o = new Object, t = 0; t < e.places.length; t++) e.places[t].marker.setMap(e.map), 1 == e.places[t].marker.visible && e.show_places.push(this.places[t]), "undefined" != typeof e.places[t].categories && $.each(e.places[t].categories, function(e, t) {
"undefined" == typeof o[t.name] && (o[t.name] = t)
});
this.categories = o
},
get_current_location: function(e, o) {
var t = this;
"undefined" == typeof t.user_location ? navigator.geolocation.getCurrentPosition(function(o) {
t.user_location = new google.maps.LatLng(o.coords.latitude, o.coords.longitude), e && e(t.user_location)
}, function(e) {
o && o(e)
}, {
enableHighAccuracy: !0,
timeout: 5e3,
maximumAge: 0
}) : e && e(t.user_location)
},
openInfoWindow: function(e) {
$.each(this.places, function(e, o) {
o.infowindow.close()
}), "custom_link" == e.location.redirect_url ? "yes" == e.location.open_new_tab ? window.open(e.location.redirect_custom_link, "_blank") : window.open(e.location.redirect_custom_link, "_self") : e.infowindow.open(this.map, e.marker)
}
}, $.fn.maps = function(e, o) {
return this.each(function() {
$.data(this, "wpgmp_maps") || $.data(this, "wpgmp_maps", new GoogleMaps(this, e, o))
}), this
}
}(jQuery, window, document);

I’ve got this code working on the console, and should be added to template custom js file. "map4" is my map id and "#pum-5425" is my popup id, so they should be different for others.
jQuery('#pum-5425').on('pumAfterOpen', function () {
if(typeof google !== 'undefined' && typeof map4 !== 'undefined'){ // Make sure Google Maps API is loaded and WP Google Maps has been initiated
google.maps.event.trigger(map4,'resize'); // Update Google Map Size
}
});

Jwplayer 7 lightsout and iframe

I just included lightsout olugin in jwplayer, so its work fine when I add jwplayer code in my page but when I call jwplayer with an iframe lightsout plugin works inside the iframe and does no effect to the page any more.
Below I have the javascript
(function(e) {
function t(t, n, i) {
function a() {
for (var e in g) n[e] === void 0 && (n[e] = g[e]);
if (y = document.createElement("div"), y.className += " BSlightsout_shade", y.style.display = "none", y.style.backgroundColor = "#" + n.backgroundcolor, y.style.zIndex = 0, y.style.opacity = 0, y.style.filter = "alpha(opacity=0)", y.style.top = 0, y.style.left = 0, y.style.bottom = 0, y.style.right = 0, n.parentid ? (y.style.position = "absolute", document.getElementById(n.parentid).style.position = "relative", document.getElementById(n.parentid).appendChild(y)) : (y.style.position = "fixed", document.body.appendChild(y)), y.onclick = r, p = new o(y, n.time, n.opacity, s), u.on = p.on, u.off = p.off, u.toggle = p.toggle, n.dockicon === !0 && typeof t.addButton == "function") {
var i = l + "BSlightsout.png";
t.addButton(i, "Cinema Mode", p.toggle, "BSlightsout")
}
t.onIdle(d), t.onPlay(d), t.onPause(d), t.onComplete(f)
}
function s() {
var o, n = 0;
while ((o = e(n++)) && o.hasOwnProperty("id") && 100 > n) c(o, "auto");
c(t, 301)
}
function c(e, t) {
e.getRenderingMode() === "html5" ? e.getContainer().style.zIndex = t : e.getContainer().parentNode.style.zIndex = t
}
function r() {
t.pause(!0), p.on()
}
function f() {
n.oncomplete == "off" ? p.off() : p.on()
}
function d() {
switch (t.getState()) {
case "IDLE":
n.onidle == "off" ? p.off() : p.on();
break;
case "PLAYING":
n.onplay == "off" ? p.off() : p.on();
break;
case "PAUSED":
n.onpause == "off" ? p.off() : p.on()
}
}
var y, p, u = this,
g = {
backgroundcolor: "000000",
dockicon: !0,
opacity: 1,
time: 800,
onidle: "on",
onplay: "off",
onpause: "on",
oncomplete: "on",
parentid: null
};
t.onReady(a), this.getDisplayElement = function() {
return i
}, this.resize = function() {}
}
function o(e, t, o, n) {
function i(e) {
l.element.style.opacity = "" + e, l.element.style.filter = "alpha(opacity=" + Math.round(e * 100) + ")", l.opacity = e
}
this.element = e, this.time = t || 1e3, this.dark = o || .8, this.opacity = 0;
var a, l = this,
s = "opacity" in this.element.style;
s || (this.element.style.zoom = 1), this.off = function() {
typeof n == "function" && n(), l.element.style.display = "block", clearInterval(a);
var e = (new Date).getTime(),
t = l.opacity;
a = setInterval(function() {
var o = ((new Date).getTime() - e) / l.time;
1 > o || (o = 1, clearInterval(a)), i(l.dark * o + t * (1 - o))
}, 1e3 / 60)
}, this.on = function() {
clearInterval(a);
var e = (new Date).getTime(),
t = l.opacity;
a = setInterval(function() {
var o = ((new Date).getTime() - e) / l.time;
1 > o || (o = 1, clearInterval(a), l.element.style.display = "none"), i(0 * o + t * (1 - o))
}, 1e3 / 60)
}, this.toggle = function() {
.5 > l.opacity ? l.off() : l.on()
}
}
for (var n = document.getElementsByTagName("head")[0].getElementsByTagName("script"), i = 0; n.length > i; i++) {
var a = n[i].src.match(/(.*?)BSlightsout-?\d?\.js/);
if (a) {
var l = a[1];
break
}
}
e().registerPlugin("BSlightsout", "6.0", t)
})(jwplayer)
as I told you before when I load jwplayer code in page its working and turning lights off but when in the same page I call jwplayer with an iframe code its turning lights off inside the iframe and does no any effect in my page.
Is there anyway to turn off lights using external jwplayer via iframe code?
plugins: { 'jwplayer/plugins/BSlightsout.js': {}, },

You don't need to use that bloated plugin. This pen has all the code you need to achieve the desired effect.
function turnOutLights() {
$('.lights-overlay').css('background', 'rgba(1, 1, 1, 1)');
$('.lights-overlay').css({ opacity: 0.9 });
$('.lights-overlay').css('visibility', 'visible');
$('#previewPlayer').addClass('zout');
}
function hideOverlay() {
$('.lights-overlay').css({ opacity: 0.6 });
$('.lights-overlay').css('visibility', 'hidden');
$('#previewPlayer').removeClass('zout');
}
jwplayer("previewPlayer").setup({
playlist: [{
file: "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"
}],
width: 720,
aspectratio: '16:9',
autostart: true
});
http://codepen.io/simsketch/pen/eBwqmV

How to upload multiple files with fileupload.js?

!function ($) {
"use strict"; // jshint ;_
/* FILEUPLOAD PUBLIC CLASS DEFINITION
* ================================= */
var Fileupload = function (element, options) {
this.$element = $(element)
this.type = this.$element.data('uploadtype') || (this.$element.find('.thumbnail').length > 0 ? "image" : "file")
this.$input = this.$element.find(':file')
if (this.$input.length === 0) return
this.name = this.$input.attr('name') || options.name
this.$hidden = this.$element.find('input[type=hidden][name="'+this.name+'"]')
if (this.$hidden.length === 0) {
this.$hidden = $('<input type="hidden" />')
this.$element.prepend(this.$hidden)
}
this.$preview = this.$element.find('.fileupload-preview')
var height = this.$preview.css('height')
if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
this.original = {
'exists': this.$element.hasClass('fileupload-exists'),
'preview': this.$preview.html(),
'hiddenVal': this.$hidden.val()
}
this.$remove = this.$element.find('[data-dismiss="fileupload"]')
this.$element.find('[data-trigger="fileupload"]').on('click.fileupload', $.proxy(this.trigger, this))
this.listen()
}
Fileupload.prototype = {
listen: function() {
this.$input.on('change.fileupload', $.proxy(this.change, this))
$(this.$input[0].form).on('reset.fileupload', $.proxy(this.reset, this))
if (this.$remove) this.$remove.on('click.fileupload', $.proxy(this.clear, this))
},
change: function(e, invoked) {
if (invoked === 'clear') return
var file = e.target.files !== undefined ? e.target.files[0] : (e.target.value ? { name: e.target.value.replace(/^.+\\/, '') } : null)
if (!file) {
this.clear()
return
}
this.$hidden.val('')
this.$hidden.attr('name', '')
this.$input.attr('name', this.name)
if (this.type === "image" && this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
var reader = new FileReader()
var preview = this.$preview
var element = this.$element
reader.onload = function(e) {
preview.html('<img src="' + e.target.result + '" ' + (preview.css('max-height') != 'none' ? 'style="max-height: ' + preview.css('max-height') + ';"' : '') + ' />')
element.addClass('fileupload-exists').removeClass('fileupload-new')
}
reader.readAsDataURL(file)
} else {
this.$preview.text(file.name)
this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
}
},
clear: function(e) {
this.$hidden.val('')
this.$hidden.attr('name', this.name)
this.$input.attr('name', '')
//ie8+ doesn't support changing the value of input with type=file so clone instead
if (navigator.userAgent.match(/msie/i)){
var inputClone = this.$input.clone(true);
this.$input.after(inputClone);
this.$input.remove();
this.$input = inputClone;
}else{
this.$input.val('')
}
this.$preview.html('')
this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
if (e) {
this.$input.trigger('change', [ 'clear' ])
e.preventDefault()
}
},
reset: function(e) {
this.clear()
this.$hidden.val(this.original.hiddenVal)
this.$preview.html(this.original.preview)
if (this.original.exists) this.$element.addClass('fileupload-exists').removeClass('fileupload-new')
else this.$element.addClass('fileupload-new').removeClass('fileupload-exists')
},
trigger: function(e) {
this.$input.trigger('click')
e.preventDefault()
}
}
/* FILEUPLOAD PLUGIN DEFINITION
* =========================== */
$.fn.fileupload = function (options) {
return this.each(function () {
var $this = $(this)
, data = $this.data('fileupload')
if (!data) $this.data('fileupload', (data = new Fileupload(this, options)))
if (typeof options == 'string') data[options]()
})
}
$.fn.fileupload.Constructor = Fileupload
/* FILEUPLOAD DATA-API
* ================== */
$(document).on('click.fileupload.data-api', '[data-provides="fileupload"]', function (e) {
var $this = $(this)
if ($this.data('fileupload')) return
$this.fileupload($this.data())
var $target = $(e.target).closest('[data-dismiss="fileupload"],[data-trigger="fileupload"]');
if ($target.length > 0) {
$target.trigger('click.fileupload')
e.preventDefault()
}
})
}(window.jQuery);
I am using this js for upload file. with it i can upload and preview only one file but i want to upload multiple file with preview anyone can help me to make it for multiple file upload .
i wanna upload multiple file within a time with preview.
see this example.

<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
<script>
$(document).ready(function()
{
var settings = {
url: "upload.php",
method: "POST",
allowedTypes:"jpg,png,gif,doc,pdf,zip",
fileName: "myfile",
multiple: true,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload is success</font>");
},
afterUploadAll:function()
{
alert("all images uploaded!!");
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
}
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
//php code
$output_dir = "./uploads/";
if(isset($_FILES["myfile"]))
{
$ret = array();
$error =$_FILES["myfile"]["error"];
{
if(!is_array($_FILES["myfile"]['name'])) //single file
{
$RandomNum = time();
$ImageName = $_FILES['myfile']['name'];
$ImageType = $_FILES['myfile']['type']; //"image/png", image/jpeg etc.
if (is_dir($output_dir) && is_writable($output_dir)) {
move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $ImageName);
//echo "<br> Error: ".$_FILES["myfile"]["error"];
$ret[$ImageName]= $output_dir.$ImageName;
}
else {
echo 'Upload directory is not writable, or does not exist.';
}
}
else
{
$fileCount = count($_FILES["myfile"]['name']);
for($i=0; $i < $fileCount; $i++)
{
$ImageName = $_FILES['myfile']['name'][$i];
$ImageType = $_FILES['myfile']['type'][$i]; //"image/png", image/jpeg etc.
$ret[$ImageName]= $output_dir.$ImageName;
if (is_dir($output_dir) && is_writable($output_dir)) {
move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$ImageName );
}
else {
echo 'Upload directory is multi not writable, or does not exist.';
}
}
}
}
echo json_encode($ret);
}
//js code
/*!
* jQuery Upload File Plugin
* version: 3.1.2
* #requires jQuery v1.5 or later & form plugin
* Copyright (c) 2013 Ravishanker Kusuma
* http://hayageek.com/
*/
(function(b) {
if (b.fn.ajaxForm == undefined) {
b.getScript("http://malsup.github.io/jquery.form.js")
}
var a = {};
a.fileapi = b("<input type='file'/>").get(0).files !== undefined;
a.formdata = window.FormData !== undefined;
b.fn.uploadFile = function(t) {
var r = b.extend({
url: "",
method: "POST",
enctype: "multipart/form-data",
formData: null,
returnType: null,
allowedTypes: "*",
fileName: "file",
formData: {},
dynamicFormData: function() {
return {}
},
maxFileSize: -1,
maxFileCount: -1,
multiple: true,
dragDrop: true,
autoSubmit: true,
showCancel: true,
showAbort: true,
showDone: true,
showDelete: false,
showError: true,
showStatusAfterSuccess: true,
showStatusAfterError: true,
showFileCounter: true,
fileCounterStyle: "). ",
showProgress: false,
onSelect: function(s) {
return true
},
onSubmit: function(s, u) {},
onSuccess: function(u, s, v) {},
onError: function(v, s, u) {},
deleteCallback: false,
afterUploadAll: false,
uploadButtonClass: "upload",
dragDropStr: "<span><b>Drag & Drop Files</b></span>",
abortStr: "Abort",
cancelStr: "Cancel",
deletelStr: "Delete",
doneStr: "Done",
multiDragErrorStr: "Multiple File Drag & Drop is not allowed.",
extErrorStr: "is not allowed. Allowed extensions: ",
sizeErrorStr: "is not allowed. Allowed Max size: ",
uploadErrorStr: "Upload is not allowed",
maxFileCountErrorStr: " is not allowed. Maximum allowed files are:"
}, t);
this.fileCounter = 1;
this.selectedFiles = 0;
this.fCounter = 0;
this.sCounter = 0;
this.tCounter = 0;
var d = "upload-" + (new Date().getTime());
this.formGroup = d;
this.hide();
this.errorLog = b("<div></div>");
this.after(this.errorLog);
this.responses = [];
if (!a.formdata) {
r.dragDrop = false
}
if (!a.formdata) {
r.multiple = false
}
var m = this;
var e = b("<div>" + b(this).html() + "</div>");
b(e).addClass(r.uploadButtonClass);
(function k() {
if (b.fn.ajaxForm) {
if (r.dragDrop) {
var s = b('<div class="ajax-upload-dragdrop" style="vertical-align:top;"></div>');
b(m).before(s);
b(s).append(e);
b(s).append(b(r.dragDropStr));
f(m, r, s)
} else {
b(m).before(e)
}
q(m, d, r, e)
} else {
window.setTimeout(k, 10)
}
})();
this.startUpload = function() {
b("." + this.formGroup).each(function(u, s) {
if (b(this).is("form")) {
b(this).submit()
}
})
};
this.stopUpload = function() {
b(".upload-red").each(function(u, s) {
if (b(this).hasClass(m.formGroup)) {
b(this).click()
}
})
};
this.getResponses = function() {
return this.responses
};
var g = false;
function j() {
if (r.afterUploadAll && !g) {
g = true;
(function s() {
if (m.sCounter != 0 && (m.sCounter + m.fCounter == m.tCounter)) {
r.afterUploadAll(m);
g = false
} else {
window.setTimeout(s, 100)
}
})()
}
}
function f(w, u, v) {
v.on("dragenter", function(s) {
s.stopPropagation();
s.preventDefault();
b(this).css("border", "2px solid #000000")
});
v.on("dragover", function(s) {
s.stopPropagation();
s.preventDefault()
});
v.on("drop", function(x) {
b(this).css("border", "2px solid #000000");
x.preventDefault();
w.errorLog.html("");
var s = x.originalEvent.dataTransfer.files;
if (!u.multiple && s.length > 1) {
if (u.showError) {
b("<div style='color:red;'>" + u.multiDragErrorStr + "</div>").appendTo(w.errorLog)
}
return
}
if (u.onSelect(s) == false) {
return
}
l(u, w, s)
});
b(document).on("dragenter", function(s) {
s.stopPropagation();
s.preventDefault()
});
b(document).on("dragover", function(s) {
s.stopPropagation();
s.preventDefault();
v.css("border", "2px solid #000000")
});
b(document).on("drop", function(s) {
s.stopPropagation();
s.preventDefault();
v.css("border", "2px solid #000000")
})
}
function i(s) {
var v = "";
var u = s / 1024;
if (parseInt(u) > 1024) {
var w = u / 1024;
v = w.toFixed(2) + " MB"
} else {
v = u.toFixed(2) + " KB"
}
return v
}
function o(x) {
var y = [];
if (jQuery.type(x) == "string") {
y = x.split("&")
} else {
y = b.param(x).split("&")
}
var u = y.length;
var s = [];
var w, v;
for (w = 0; w < u; w++) {
y[w] = y[w].replace(/\+/g, " ");
v = y[w].split("=");
s.push([decodeURIComponent(v[0]), decodeURIComponent(v[1])])
}
return s
}
function l(H, B, u) {
for (var C = 0; C < u.length; C++) {
if (!c(B, H, u[C].name)) {
if (H.showError) {
b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.extErrorStr + H.allowedTypes + "</div>").appendTo(B.errorLog)
}
continue
}
if (H.maxFileSize != -1 && u[C].size > H.maxFileSize) {
if (H.showError) {
b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.sizeErrorStr + i(H.maxFileSize) + "</div>").appendTo(B.errorLog)
}
continue
}
if (H.maxFileCount != -1 && B.selectedFiles >= H.maxFileCount) {
if (H.showError) {
b("<div style='color:red;'><b>" + u[C].name + "</b> " + H.maxFileCountErrorStr + H.maxFileCount + "</div>").appendTo(B.errorLog)
}
continue
}
B.selectedFiles++;
var D = H;
var w = new FormData();
var A = H.fileName.replace("[]", "");
w.append(A, u[C]);
var y = H.formData;
if (y) {
var F = o(y);
for (var z = 0; z < F.length; z++) {
if (F[z]) {
w.append(F[z][0], F[z][1])
}
}
}
D.fileData = w;
var E = new p(B, H);
var G = "";
if (H.showFileCounter) {
G = B.fileCounter + H.fileCounterStyle + u[C].name
} else {
G = u[C].name
}
E.filename.html(G);
var v = b("<form style='display:block; position:absolute;left: 150px;' class='" + B.formGroup + "' method='" + H.method + "' action='" + H.url + "' enctype='" + H.enctype + "'></form>");
v.appendTo("body");
var x = [];
x.push(u[C].name);
n(v, D, E, x, B);
B.fileCounter++
}
}
function c(w, v, y) {
var x = v.allowedTypes.toLowerCase().split(",");
var u = y.split(".").pop().toLowerCase();
if (v.allowedTypes != "*" && jQuery.inArray(u, x) < 0) {
return false
}
return true
}
function h(u, w) {
if (u.showFileCounter) {
var v = b(".upload-filename").length;
w.fileCounter = v + 1;
b(".upload-filename").each(function(A, y) {
var s = b(this).html().split(u.fileCounterStyle);
var x = parseInt(s[0]) - 1;
var z = v + u.fileCounterStyle + s[1];
b(this).html(z);
v--
})
}
}
function q(y, B, D, u) {
var A = "ajax-upload-id-" + (new Date().getTime());
var w = b("<form method='" + D.method + "' action='" + D.url + "' enctype='" + D.enctype + "'></form>");
var v = "<input type='file' id='" + A + "' name='" + D.fileName + "'/>";
if (D.multiple) {
if (D.fileName.indexOf("[]") != D.fileName.length - 2) {
D.fileName += "[]"
}
v = "<input type='file' id='" + A + "' name='" + D.fileName + "' multiple/>"
}
var z = b(v).appendTo(w);
z.change(function() {
y.errorLog.html("");
var K = D.allowedTypes.toLowerCase().split(",");
var G = [];
if (this.files) {
for (H = 0; H < this.files.length; H++) {
G.push(this.files[H].name)
}
if (D.onSelect(this.files) == false) {
return
}
} else {
var I = b(this).val();
var F = [];
G.push(I);
if (!c(y, D, I)) {
if (D.showError) {
b("<div style='color:red;'><b>" + I + "</b> " + D.extErrorStr + D.allowedTypes + "</div>").appendTo(y.errorLog)
}
return
}
F.push({
name: I,
size: "NA"
});
if (D.onSelect(F) == false) {
return
}
}
h(D, y);
u.unbind("click");
w.hide();
q(y, B, D, u);
w.addClass(B);
if (a.fileapi && a.formdata) {
w.removeClass(B);
var J = this.files;
l(D, y, J)
} else {
var E = "";
for (var H = 0; H < G.length; H++) {
if (D.showFileCounter) {
E += y.fileCounter + D.fileCounterStyle + G[H] + "<br>"
} else {
E += G[H] + "<br>"
}
y.fileCounter++
}
if (D.maxFileCount != -1 && (y.selectedFiles + G.length) > D.maxFileCount) {
if (D.showError) {
b("<div style='color:red;'><b>" + E + "</b> " + D.maxFileCountErrorStr + D.maxFileCount + "</div>").appendTo(y.errorLog)
}
return
}
y.selectedFiles += G.length;
var s = new p(y, D);
s.filename.html(E);
n(w, D, s, G, y)
}
});
w.css({
margin: 0,
padding: 0
});
var C = b(u).width() + 10;
if (C == 10) {
C = 120
}
var x = u.height() + 10;
if (x == 10) {
x = 35
}
u.css({
position: "relative",
overflow: "hidden",
cursor: "default"
});
z.css({
position: "absolute",
cursor: "pointer",
top: "0px",
width: C,
height: x,
left: "0px",
"z-index": "100",
opacity: "0.0",
filter: "alpha(opacity=0)",
"-ms-filter": "alpha(opacity=0)",
"-khtml-opacity": "0.0",
"-moz-opacity": "0.0"
});
w.appendTo(u)
}
function p(v, u) {
//console.log(this);
this.statusbar = b("<div class='upload-statusbar'></div>");
this.filename = b("<div class='upload-filename'></div>").appendTo(this.statusbar);
this.progressDiv = b("<div class='upload-progress'>").appendTo(this.statusbar).hide();
this.progressbar = b("<div class='upload-bar " + v.formGroup + "'></div>").appendTo(this.progressDiv);
this.abort = b("<div class='upload-red " + v.formGroup + "'>" + u.abortStr + "</div>").appendTo(this.statusbar).hide();
this.cancel = b("<div class='upload-red'>" + u.cancelStr + "</div>").appendTo(this.statusbar).hide();
this.done = b("<div class='upload-green'>" + u.doneStr + "</div>").appendTo(this.statusbar).hide();
this.del = b("<div class='upload-red'>" + u.deletelStr + "</div>").appendTo(this.statusbar).hide();
v.errorLog.after(this.statusbar);
return this
}
function n(z, y, u, w, A) {
var x = null;
var v = {
cache: false,
contentType: false,
processData: false,
forceSync: false,
data: y.formData,
formData: y.fileData,
dataType: y.returnType,
beforeSubmit: function(F, C, E) {
if (y.onSubmit.call(this, w) != false) {
var B = y.dynamicFormData();
if (B) {
var s = o(B);
if (s) {
for (var D = 0; D < s.length; D++) {
if (s[D]) {
if (y.fileData != undefined) {
E.formData.append(s[D][0], s[D][1])
} else {
E.data[s[D][0]] = s[D][1]
}
}
}
}
}
A.tCounter += w.length;
j();
return true
}
u.statusbar.append("<div style='color:red;'>" + y.uploadErrorStr + "</div>");
u.cancel.show();
z.remove();
u.cancel.click(function() {
u.statusbar.remove()
});
return false
},
beforeSend: function(B, s) {
u.progressDiv.show();
u.cancel.hide();
u.done.hide();
if (y.showAbort) {
u.abort.show();
u.abort.click(function() {
B.abort();
A.selectedFiles -= w.length
})
}
if (!a.formdata) {
u.progressbar.width("5%")
} else {
u.progressbar.width("1%")
}
},
uploadProgress: function(E, s, D, C) {
if (C > 98) {
C = 98
}
var B = C + "%";
if (C > 1) {
u.progressbar.width(B)
}
if (y.showProgress) {
u.progressbar.html(B);
u.progressbar.css("text-align", "center")
}
},
success: function(B, s, C) {
A.responses.push(B);
u.progressbar.width("100%");
if (y.showProgress) {
u.progressbar.html("100%");
u.progressbar.css("text-align", "center")
}
u.abort.hide();
y.onSuccess.call(this, w, B, C);
if (y.showStatusAfterSuccess) {
if (y.showDone) {
u.done.show();
u.done.click(function() {
u.statusbar.hide("slow");
u.statusbar.remove()
})
} else {
u.done.hide()
}
if (y.showDelete) {
u.del.show();
u.del.click(function() {
u.statusbar.hide().remove();
if (y.deleteCallback) {
y.deleteCallback.call(this, B, u)
}
A.selectedFiles -= w.length;
h(y, A)
})
} else {
u.del.hide()
}
} else {
u.statusbar.hide("slow");
u.statusbar.remove()
}
z.remove();
A.sCounter += w.length
},
error: function(C, s, B) {
u.abort.hide();
if (C.statusText == "abort") {
u.statusbar.hide("slow").remove();
h(y, A)
} else {
y.onError.call(this, w, s, B);
if (y.showStatusAfterError) {
u.progressDiv.hide();
u.statusbar.append("<span style='color:red;'>ERROR: " + B + "</span>")
} else {
u.statusbar.hide();
u.statusbar.remove()
}
A.selectedFiles -= w.length
}
z.remove();
A.fCounter += w.length
}
};
if (y.autoSubmit) {
z.ajaxSubmit(v)
} else {
if (y.showCancel) {
u.cancel.show();
u.cancel.click(function() {
z.remove();
u.statusbar.remove();
A.selectedFiles -= w.length;
h(y, A)
})
}
z.ajaxForm(v)
}
}
return this
}
}(jQuery));

Sidebar doesn't works when click [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i made a sidebar for my webapplication, it works well when i slide it, but it doesn't work when i click on the button on the left, can you help me?
with this, in my "eventi.php" file, the bar should opens.
this is the stile.css
#open-left {
background: url(open.png) center center no-repeat;
display: block;
width: 44px;
height: 44px;
}
this is the snap.js
(function(win, doc) {
'use strict';
var Snap = Snap || function(userOpts) {
var settings = {
element: null,
dragger: null,
disable: 'right',
addBodyClasses: true,
hyperextensible: true,
resistance: 0.5,
flickThreshold: 50,
transitionSpeed: 0.3,
easing: 'ease',
maxPosition: 266,
minPosition: -266,
tapToClose: true,
touchToDrag: true,
slideIntent: 40, // degrees
minDragDistance: 5
},
cache = {
simpleStates: {
opening: null,
towards: null,
hyperExtending: null,
halfway: null,
flick: null,
translation: {
absolute: 0,
relative: 0,
sinceDirectionChange: 0,
percentage: 0
}
}
},
eventList = {},
utils = {
hasTouch: ('ontouchstart' in doc.documentElement || win.navigator.msPointerEnabled),
eventType: function(action) {
var eventTypes = {
down: (utils.hasTouch ? 'touchstart' : 'mousedown'),
move: (utils.hasTouch ? 'touchmove' : 'mousemove'),
up: (utils.hasTouch ? 'touchend' : 'mouseup'),
out: (utils.hasTouch ? 'touchcancel' : 'mouseout')
};
return eventTypes[action];
},
page: function(t, e){
return (utils.hasTouch && e.touches.length && e.touches[0]) ? e.touches[0]['page'+t] : e['page'+t];
},
klass: {
has: function(el, name){
return (el.className).indexOf(name) !== -1;
},
add: function(el, name){
if(!utils.klass.has(el, name) && settings.addBodyClasses){
el.className += " "+name;
}
},
remove: function(el, name){
if(settings.addBodyClasses){
el.className = (el.className).replace(name, "").replace(/^\s+|\s+$/g, '');
}
}
},
dispatchEvent: function(type) {
if (typeof eventList[type] === 'function') {
return eventList[type].call();
}
},
vendor: function(){
var tmp = doc.createElement("div"),
prefixes = 'webkit Moz O ms'.split(' '),
i;
for (i in prefixes) {
if (typeof tmp.style[prefixes[i] + 'Transition'] !== 'undefined') {
return prefixes[i];
}
}
},
transitionCallback: function(){
return (cache.vendor==='Moz' || cache.vendor==='ms') ? 'transitionend' : cache.vendor+'TransitionEnd';
},
canTransform: function(){
return typeof settings.element.style[cache.vendor+'Transform'] !== 'undefined';
},
deepExtend: function(destination, source) {
var property;
for (property in source) {
if (source[property] && source[property].constructor && source[property].constructor === Object) {
destination[property] = destination[property] || {};
utils.deepExtend(destination[property], source[property]);
} else {
destination[property] = source[property];
}
}
return destination;
},
angleOfDrag: function(x, y) {
var degrees, theta;
// Calc Theta
theta = Math.atan2(-(cache.startDragY - y), (cache.startDragX - x));
if (theta < 0) {
theta += 2 * Math.PI;
}
// Calc Degrees
degrees = Math.floor(theta * (180 / Math.PI) - 180);
if (degrees < 0 && degrees > -180) {
degrees = 360 - Math.abs(degrees);
}
return Math.abs(degrees);
},
events: {
addEvent: function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
},
removeEvent: function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.removeEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.detachEvent("on" + eventName, func);
}
},
prevent: function(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
},
parentUntil: function(el, attr) {
var isStr = typeof attr === 'string';
while (el.parentNode) {
if (isStr && el.getAttribute && el.getAttribute(attr)){
return el;
} else if(!isStr && el === attr){
return el;
}
el = el.parentNode;
}
return null;
}
},
action = {
translate: {
get: {
matrix: function(index) {
if( !utils.canTransform() ){
return parseInt(settings.element.style.left, 10);
} else {
var matrix = win.getComputedStyle(settings.element)[cache.vendor+'Transform'].match(/\((.*)\)/),
ieOffset = 8;
if (matrix) {
matrix = matrix[1].split(',');
if(matrix.length===16){
index+=ieOffset;
}
return parseInt(matrix[index], 10);
}
return 0;
}
}
},
easeCallback: function(){
settings.element.style[cache.vendor+'Transition'] = '';
cache.translation = action.translate.get.matrix(4);
cache.easing = false;
clearInterval(cache.animatingInterval);
if(cache.easingTo===0){
utils.klass.remove(doc.body, 'snapjs-right');
utils.klass.remove(doc.body, 'snapjs-left');
}
utils.dispatchEvent('animated');
utils.events.removeEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
},
easeTo: function(n) {
if( !utils.canTransform() ){
cache.translation = n;
action.translate.x(n);
} else {
cache.easing = true;
cache.easingTo = n;
settings.element.style[cache.vendor+'Transition'] = 'all ' + settings.transitionSpeed + 's ' + settings.easing;
cache.animatingInterval = setInterval(function() {
utils.dispatchEvent('animating');
}, 1);
utils.events.addEvent(settings.element, utils.transitionCallback(), action.translate.easeCallback);
action.translate.x(n);
}
if(n===0){
settings.element.style[cache.vendor+'Transform'] = '';
}
},
x: function(n) {
if( (settings.disable==='left' && n>0) ||
(settings.disable==='right' && n<0)
){ return; }
if( !settings.hyperextensible ){
if( n===settings.maxPosition || n>settings.maxPosition ){
n=settings.maxPosition;
} else if( n===settings.minPosition || n<settings.minPosition ){
n=settings.minPosition;
}
}
n = parseInt(n, 10);
if(isNaN(n)){
n = 0;
}
if( utils.canTransform() ){
var theTranslate = 'translate3d(' + n + 'px, 0,0)';
settings.element.style[cache.vendor+'Transform'] = theTranslate;
} else {
settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';
settings.element.style.left = n+'px';
settings.element.style.right = '';
}
}
},
drag: {
listen: function() {
cache.translation = 0;
cache.easing = false;
utils.events.addEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
utils.events.addEvent(settings.element, utils.eventType('move'), action.drag.dragging);
utils.events.addEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
},
stopListening: function() {
utils.events.removeEvent(settings.element, utils.eventType('down'), action.drag.startDrag);
utils.events.removeEvent(settings.element, utils.eventType('move'), action.drag.dragging);
utils.events.removeEvent(settings.element, utils.eventType('up'), action.drag.endDrag);
},
startDrag: function(e) {
// No drag on ignored elements
var target = e.target ? e.target : e.srcElement,
ignoreParent = utils.parentUntil(target, 'data-snap-ignore');
if (ignoreParent) {
utils.dispatchEvent('ignore');
return;
}
if(settings.dragger){
var dragParent = utils.parentUntil(target, settings.dragger);
// Only use dragger if we're in a closed state
if( !dragParent &&
(cache.translation !== settings.minPosition &&
cache.translation !== settings.maxPosition
)){
return;
}
}
utils.dispatchEvent('start');
settings.element.style[cache.vendor+'Transition'] = '';
cache.isDragging = true;
cache.hasIntent = null;
cache.intentChecked = false;
cache.startDragX = utils.page('X', e);
cache.startDragY = utils.page('Y', e);
cache.dragWatchers = {
current: 0,
last: 0,
hold: 0,
state: ''
};
cache.simpleStates = {
opening: null,
towards: null,
hyperExtending: null,
halfway: null,
flick: null,
translation: {
absolute: 0,
relative: 0,
sinceDirectionChange: 0,
percentage: 0
}
};
},
dragging: function(e) {
if (cache.isDragging && settings.touchToDrag) {
var thePageX = utils.page('X', e),
thePageY = utils.page('Y', e),
translated = cache.translation,
absoluteTranslation = action.translate.get.matrix(4),
whileDragX = thePageX - cache.startDragX,
openingLeft = absoluteTranslation > 0,
translateTo = whileDragX,
diff;
// Shown no intent already
if((cache.intentChecked && !cache.hasIntent)){
return;
}
if(settings.addBodyClasses){
if((absoluteTranslation)>0){
utils.klass.add(doc.body, 'snapjs-left');
utils.klass.remove(doc.body, 'snapjs-right');
} else if((absoluteTranslation)<0){
utils.klass.add(doc.body, 'snapjs-right');
utils.klass.remove(doc.body, 'snapjs-left');
}
}
if (cache.hasIntent === false || cache.hasIntent === null) {
var deg = utils.angleOfDrag(thePageX, thePageY),
inRightRange = (deg >= 0 && deg <= settings.slideIntent) || (deg <= 360 && deg > (360 - settings.slideIntent)),
inLeftRange = (deg >= 180 && deg <= (180 + settings.slideIntent)) || (deg <= 180 && deg >= (180 - settings.slideIntent));
if (!inLeftRange && !inRightRange) {
cache.hasIntent = false;
} else {
cache.hasIntent = true;
}
cache.intentChecked = true;
}
if (
(settings.minDragDistance>=Math.abs(thePageX-cache.startDragX)) || // Has user met minimum drag distance?
(cache.hasIntent === false)
) {
return;
}
utils.events.prevent(e);
utils.dispatchEvent('drag');
cache.dragWatchers.current = thePageX;
// Determine which direction we are going
if (cache.dragWatchers.last > thePageX) {
if (cache.dragWatchers.state !== 'left') {
cache.dragWatchers.state = 'left';
cache.dragWatchers.hold = thePageX;
}
cache.dragWatchers.last = thePageX;
} else if (cache.dragWatchers.last < thePageX) {
if (cache.dragWatchers.state !== 'right') {
cache.dragWatchers.state = 'right';
cache.dragWatchers.hold = thePageX;
}
cache.dragWatchers.last = thePageX;
}
if (openingLeft) {
// Pulling too far to the right
if (settings.maxPosition < absoluteTranslation) {
diff = (absoluteTranslation - settings.maxPosition) * settings.resistance;
translateTo = whileDragX - diff;
}
cache.simpleStates = {
opening: 'left',
towards: cache.dragWatchers.state,
hyperExtending: settings.maxPosition < absoluteTranslation,
halfway: absoluteTranslation > (settings.maxPosition / 2),
flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
translation: {
absolute: absoluteTranslation,
relative: whileDragX,
sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
percentage: (absoluteTranslation/settings.maxPosition)*100
}
};
} else {
// Pulling too far to the left
if (settings.minPosition > absoluteTranslation) {
diff = (absoluteTranslation - settings.minPosition) * settings.resistance;
translateTo = whileDragX - diff;
}
cache.simpleStates = {
opening: 'right',
towards: cache.dragWatchers.state,
hyperExtending: settings.minPosition > absoluteTranslation,
halfway: absoluteTranslation < (settings.minPosition / 2),
flick: Math.abs(cache.dragWatchers.current - cache.dragWatchers.hold) > settings.flickThreshold,
translation: {
absolute: absoluteTranslation,
relative: whileDragX,
sinceDirectionChange: (cache.dragWatchers.current - cache.dragWatchers.hold),
percentage: (absoluteTranslation/settings.minPosition)*100
}
};
}
action.translate.x(translateTo + translated);
}
},
endDrag: function(e) {
if (cache.isDragging) {
utils.dispatchEvent('end');
var translated = action.translate.get.matrix(4);
// Tap Close
if (cache.dragWatchers.current === 0 && translated !== 0 && settings.tapToClose) {
utils.dispatchEvent('close');
utils.events.prevent(e);
action.translate.easeTo(0);
cache.isDragging = false;
cache.startDragX = 0;
return;
}
// Revealing Left
if (cache.simpleStates.opening === 'left') {
// Halfway, Flicking, or Too Far Out
if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
if (cache.simpleStates.flick && cache.simpleStates.towards === 'left') { // Flicking Closed
action.translate.easeTo(0);
} else if (
(cache.simpleStates.flick && cache.simpleStates.towards === 'right') || // Flicking Open OR
(cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
) {
action.translate.easeTo(settings.maxPosition); // Open Left
}
} else {
action.translate.easeTo(0); // Close Left
}
// Revealing Right
} else if (cache.simpleStates.opening === 'right') {
// Halfway, Flicking, or Too Far Out
if ((cache.simpleStates.halfway || cache.simpleStates.hyperExtending || cache.simpleStates.flick)) {
if (cache.simpleStates.flick && cache.simpleStates.towards === 'right') { // Flicking Closed
action.translate.easeTo(0);
} else if (
(cache.simpleStates.flick && cache.simpleStates.towards === 'left') || // Flicking Open OR
(cache.simpleStates.halfway || cache.simpleStates.hyperExtending) // At least halfway open OR hyperextending
) {
action.translate.easeTo(settings.minPosition); // Open Right
}
} else {
action.translate.easeTo(0); // Close Right
}
}
cache.isDragging = false;
cache.startDragX = utils.page('X', e);
}
}
}
},
init = function(opts) {
if (opts.element) {
utils.deepExtend(settings, opts);
cache.vendor = utils.vendor();
action.drag.listen();
}
};
/*
* Public
*/
this.open = function(side) {
utils.dispatchEvent('open');
utils.klass.remove(doc.body, 'snapjs-expand-left');
utils.klass.remove(doc.body, 'snapjs-expand-right');
if (side === 'left') {
cache.simpleStates.opening = 'left';
cache.simpleStates.towards = 'right';
utils.klass.add(doc.body, 'snapjs-left');
utils.klass.remove(doc.body, 'snapjs-right');
action.translate.easeTo(settings.maxPosition);
} else if (side === 'right') {
cache.simpleStates.opening = 'right';
cache.simpleStates.towards = 'left';
utils.klass.remove(doc.body, 'snapjs-left');
utils.klass.add(doc.body, 'snapjs-right');
action.translate.easeTo(settings.minPosition);
}
};
this.close = function() {
utils.dispatchEvent('close');
action.translate.easeTo(0);
};
this.expand = function(side){
var to = win.innerWidth || doc.documentElement.clientWidth;
if(side==='left'){
utils.dispatchEvent('expandLeft');
utils.klass.add(doc.body, 'snapjs-expand-left');
utils.klass.remove(doc.body, 'snapjs-expand-right');
} else {
utils.dispatchEvent('expandRight');
utils.klass.add(doc.body, 'snapjs-expand-right');
utils.klass.remove(doc.body, 'snapjs-expand-left');
to *= -1;
}
action.translate.easeTo(to);
};
this.on = function(evt, fn) {
eventList[evt] = fn;
return this;
};
this.off = function(evt) {
if (eventList[evt]) {
eventList[evt] = false;
}
};
this.enable = function() {
utils.dispatchEvent('enable');
action.drag.listen();
};
this.disable = function() {
utils.dispatchEvent('disable');
action.drag.stopListening();
};
this.settings = function(opts){
utils.deepExtend(settings, opts);
};
this.state = function() {
var state,
fromLeft = action.translate.get.matrix(4);
if (fromLeft === settings.maxPosition) {
state = 'left';
} else if (fromLeft === settings.minPosition) {
state = 'right';
} else {
state = 'closed';
}
return {
state: state,
info: cache.simpleStates
};
};
init(userOpts);
};
if ((typeof module !== 'undefined') && module.exports) {
module.exports = Snap;
}
if (typeof ender === 'undefined') {
this.Snap = Snap;
}
if ((typeof define === "function") && define.amd) {
define("snap", [], function() {
return Snap;
});
}
}).call(this, window, document);
i found that project on http://github.com/jakiestfu/Snap.js/

Write a toggle function with a click event for open-left: https://github.com/jakiestfu/Snap.js/#faq