I use MVC 4 with this custom displaymodeprovider. Even if I set it as "false" it still on iPhone returns mobile version, though I want to return regular version of the website. Please help
DisplayModeProvider.Instance.Modes.Insert(0, new
DefaultDisplayMode("Mobile")
{
ContextCondition = (context => false)
});
I set the break point inside this this code and it calls, though it still return mobile version.
Eventually I've figured out the problem
MVC 4 already has his own redirection for "Mobile" prefix. so to use custom logic we need to remove that DisplayModeProvider for "Mobile" prefix, like this:
var mobileModel = DisplayModeProvider.Instance.Modes.FirstOrDefault(a => a.DisplayModeId == "Mobile");
if (mobileModel != null)
{
DisplayModeProvider.Instance.Modes.Remove(mobileModel);
}
DisplayModeProvider.Instance.Modes.Insert(0, new
DefaultDisplayMode("Mobile")
{
ContextCondition = (context => <USE ANY YOUR CUSTOM LOGIC>)
});
This answer will be very useful for people who want that their website will be available in both versions for iPad or iPhone or Android and we can for example store in coockie user selection which version of the website we should display in his device.
Related
I'm trying to load up a webpage which uses Stripe.js inside a WKWebView on iOS (using Xamarin.Forms).
Everything works fine (can take card payments), except for Apple Pay: paymentRequest.canMakePayment() always returns null.
The same webpage inside a SFSafariViewController works fine, so the issue seems to be related to restrictions inside WKWebView.
However, according to https://webkit.org/blog/9674/new-webkit-features-in-safari-13/ this should now be supported and indeed the same WKWebView also loads up the official Apple Pay demo page (https://applepaydemo.apple.com/) with no issues.
It would seem that the problem is eventually with how Stripe.js works under the hood (perhaps with regards to script injection).
My custom renderer in Xamarin looks like this:
WKWebView wkWebView;
protected override void OnElementChanged(ElementChangedEventArgs<NativeWebView> e)
{
base.OnElementChanged(e);
if (Control == null)
{
var config = new WKWebViewConfiguration();
wkWebView = new WKWebView(Frame, config);
wkWebView.WeakNavigationDelegate = new WebNavigationDelegate();
SetNativeControl(wkWebView);
}
if (e.NewElement != null)
Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
}
And the JS in the webpage (taken from the Stripe Element samples):
//set up payment request
var paymentRequest = stripe.paymentRequest({
country: 'GB',
currency: 'gbp',
total: {
label: 'sample order',
amount: 100,
},
requestPayerName: true,
requestPayerEmail: true,
});
paymentRequest.canMakePayment().then(function (result) {
// result is always false!
...
});
Are there perhaps additional settings that can be added to the WKWebView to make this work?
This is no longer an issue. It was acknowledged by Stripe as a flaw in their JS wrapper and has been fixed in recent updates to the official library.
Let's say that we have homepage under
http://foo.bar/
and controller that handles it:
class HomepageController extends FooController{
public function homepageAction()
{
(some stuff)
}
}
Homepage was desktop only, then it went RWD. Next step was writing separate views for desktop and mobile and wiring them up like this (simplified).
class HomepageController extends FooController{
public function homepageAction()
{
(some stuff)
if(true === $this->detector->isMobile())
{
return new Response($this->renderView('homepage.mobile.html.twig' [
'some' => $vars',
]
));
}
return new Response($this->renderView('homepage.mobile.html.twig' [
'some' => $vars',
'only' => $for,
'desktop' => $version,
]
));
}
}
Now is the next step - make mobile version of homepage run on different controller. This is because desktop version gets so many data that is not required in mobile, causing current flow to be not optimized.
So, to sum it up, conditions:
mobile detector is already in project declared as a service,
homepage address cannot differ from desktop version,
desktop and mobile versions should run on separate controllers.
So far, only solution that I've found is to:
1. always hit desktop controller,
2. first action to do is to check if request comes from mobile,
3. if yes, then forward internally to mobile homepage controller.
Sounds good, but I believe it can be done better!
I have another two theories about how do to that, but I don't want to propose them right now so noone gets influenced.
anyone using framework7 to create mobile website? I found it was great and tried to learn it by myself, now I meet this problem, after I create my App, I want to do something on the starter page initialization, here, my starter page is index.html, and I set data-page="index", now I write this below:
$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// in my browser console, no "index page" logged
if (page.name === 'index') {
console.log("index page");
});
// but I changed to any other page other than index, it works
// my browser logged "another page"
if(page.name === 'login') {
console.log('another page');
}
});
Anyone can help? Thank you so much.
I have also encountered with the same problem before.
PageInit event doesn't work for initial page, only for pages that you navigate to, it will only work for index page if you navigate to some other page and then go back to index page.
So I see two options here:
Just not use pageInit event for index page - make its initialization just once (just make sure you put this javascript after all its html is ready, or e.g. use jquery's on document ready event)
Leave index page empty initially and load it dynamically via Framework7's mainView.loadContent method, then pageInit event would work for it (that was a good option for me as I had different index page each time, and I already loaded all other pages dynamically from underscore templates)
I am facing same issue and tried all solutions in various forums.. nothing actually worked. But after lot of RnD i stumbled upon following solution ...
var $$ = Dom7;
$$(document).on('page:init', function (e) {
if(e.detail.page.name === "index"){
//do whatever.. remember "page" is now e.detail.page..
$$(e.detail.page.container).find('#latest').html("my html here..");
}
});
var me = new Framework7({material: true});
var mainview = me.addView('.view-main', {});
.... and whatever else JS here..
this works perfectly..
surprisingly you can use "me" before initializing it..
for using for first page u better use document ready event. and for reloading page event you better use Reinit event.
if jquery has used.
$(document).on('ready', function (e) {
// ... mainView.activePage.name = "index"
});
$(document).on('pageReinit', function (e) {
//... this event occur on reloading anypage.
});
Could anyone help me make a new field type for NHP Theme Options Framework based on "upload" type so that it would use the new "Media Manager" that Wordpress uses since 3.5 instead of Media Uploader. This would be very useful for use with sliders.
Maybe this post would be helpful.
you're in luck i needed this same functionality. I managed to do it by looking at the code and applying the same override techniques as the the old media manager.
In fact i've written a tutorial about it here.
Here's the javascript code:
(function($){
var doc = {
ready: function(){
// initialize only if our button is in the page
if($('#btn_browse_files').length > 0){
slider.init();
}
}
},
slider = {
// the following 2 objects would be our backup containers
// as we will be replacing the default media handlers
media_send_attachment: null,
media_close_window: null,
init: function(){
// bind the button's click the browse_clicked handler
$('#btn_browse_files').click(slider.browse_clicked);
},
browse_clicked: function(event){
// cancel the event so we won't be navigated to href="#"
event.preventDefault();
// backup editor objects first
slider.media_send_attachment = wp.media.editor.send.attachment;
slider.media_close_window = wp.media.editor.remove;
// override the objects with our own
wp.media.editor.send.attachment = slider.media_accept;
wp.media.editor.remove = slider.media_close;
// open up the media manager window
wp.media.editor.open();
},
media_accept: function(props, attachment){
// this function is called when the media manager sends in media info
// when the user clicks the "Insert into Post" button
// this may be called multiple times (one for each selected file)
// you might be interested in the following:
// alert(attachment.id); // this stands for the id of the media attachment passed
// alert(attachment.url); // this is the url of the media attachment passed
// for now let's log it the console
// not you can do anything Javascript-ly possible here
console.log(props);
console.log(attachment);
},
media_close: function(id){
// this function is called when the media manager wants to close
// (either close button or after sending the selected items)
// restore editor objects from backup
wp.media.editor.send.attachment = slider.media_send_attachment;
wp.media.editor.remove = slider.media_close_window;
// nullify the backup objects to free up some memory
slider.media_send_attachment= null;
slider.media_close_window= null;
// trigger the actual remove
wp.media.editor.remove(id);
}
};
$(document).ready(doc.ready);
})(jQuery);
fyi...http://reduxframework.com/ is a fork of NHP and has added 3.5 media loader and also fixed other areas of NHP.
I just switched over to and so far not to bad.
See the usage in our vafpress theme framework github code snippet:
media manager with WP < 3.5 fallback
in the code, there is also this variable (vp_wp.use_new_media_upload), that you will need to 'expose' into your JS code via wp_localize_script, that variable needed to state whether the Wordpress you're running is under 3.5 or not, if it's under 3.5 then it's should not use the new media manager, and use the old method using thickbox media-upload.php iframe.
NHP has just merged with Redux Framework and Redux 3.0 has been released. It can be run as a Wordpress Plugin or Embedded within a theme. You should really give the new version a try.
http://wordpress.org/plugins/redux-framework/
It has full Wordpress media 3.5 support, and then some. It not only stores the media URL, but also the ID and full-dimension size.
Seriously, check it out.
I've coded a script for this web page.
That allows me to use the thumbnails on the right hand side in order to switch the 'main video'.
All appears to work fine, however if you play one video and then switch to another, and then switch BACK to the video that was originally playing, then the volume is muted when you continue watching it.
I have noticed that you can get around it by clicking the volume tool inside the player, but the average user most likely won't figure this out.
I've tried using the setVolume() method on something like:
$('#media video')
But FF tells me that the method doesn't exist. Could this be because I'm just trying it from within one of my other js files whereas the media player script itself is setup with Wordpress? I'm using the WP plugin you see.
Has anyone else had this issue?
Here is my .js that switches the videos if that helps:
$(document).ready(function() {
// swap media
$('#media-feed .thumb a').click(function() {
var mediaId = $(this).prev('input').val();
$('#media .content').each(function() {
if($(this).css('display') == 'block') {
$(this).fadeOut(350);
}
});
$('#media-' + mediaId).delay(500).fadeIn(350);
return false;
});
// swap sidebar detail
$('#media-feed .thumb a').mouseenter(function() {
var mediaId = $(this).prev('input').val();
$('#media-feed .detail').each(function() {
if($(this).css('display') == 'block') {
$(this).slideUp(125, function() {
var currentDetail = $('#media-detail-' + mediaId);
currentDetail.slideDown(125, function() {
currentDetail.css('display', 'block');
});
});
}
});
return false;
});
});
Also another problem I'm having is in Internet Explorer (all versions). See above, where I said about switching from one video to another, in other browsers the videos automatically pause when you click on another thumbnail. However in IE the videos continue to play. So basically, you'd have to pause the video and THEN change main video by clicking one of the thumbnails. Again, not very user friendly.
Does anyone know of a way I can get it to function like in other browsers? I can see that even IE doesn't have this problem on this page where the Fancybox plugin is used.
So that makes me think there must be a way to solve it in IE on the home page.
If anyone has any advice on this too that would be great!
Thanks.