Get path to Screen from its name, to use with useLinkProps - react-navigation

I have a mobile app with Expo.
To move from one screen to the other, I use react-navigation's navigation.navigate(SCREEN_NAME)
I am building the web version of this app and would like my buttons to be links, instead of using navigate. This way, users will be able to open links in another tab.
I found out about useLinkProps, which works great but doesn't work with screen names.
I do not want to hardcode the urls in my code and would like to somehow compute them from the screen names.
For example, navigate("AddMessageScreen") might open the url /message/add or /profile/598/message/add based on your current route. I want to keep this automatic selection of the proper URL with useLinkProps.
Any idea how to achieve that?

To achieve this your will have first to configure links in react-navigation.
Not a trivial thing but it's well documented: configuring-links
Then you will have a url-like structure for all your routes that suites well for browser integration.

Related

Ionic 4: How to set navigation direction (backward/forward) using routerLink?

Ionic 4 now uses Angular router. Altough it still has its own NavControler, which helps to simulate push / pop navigation style though the navigateBackward and navigateForward methods.
So that ion-back-button is shown it is necessary to use navigateForward and navigateBackward, I think.
In my application I prefer to use routerLinks to navigate (so that the user can open the page in another tab) instead of navController.
But with routerLinks the ion-back-button does not appears. There must be an way to make routerLinks act like push/pop navigation.
How could I simulate an event like navigateForward and navigateBackward using routerLinks?
You can use the attribute routerDirection on your view element.
For example
<ion-button [routerLink]="['/details']" routerDirection="forward" >
Go forward
</ion-button>
For a full detailed description of how to manage navigation in Ionic 4 including routerLink you should read Josh's very detailed blog post
Moving from Ionic 3 to Ionic 4 with navigating has changed up quite a bit, but the changes aren't too bad. The Ionic Docs recommend to switch to Angular Routing instead of the traditional Ionic pop and push. There are a couple of way to route your pages, but I think the easiest to understand is using the navigateForward() and navigateBack() functions in the .ts file.
Ex.
navigateForward(){
this.navCtrl.navigateForward('/route of the page you want to navigate to');
}
<ion-button large block (click)="navigateForward()">
Navigate Forward
</ion-button>
Of course navigating forward and backward has to do with the structure of how your app is build from the stack.
The app-routing.module.ts file will automatically create the routes for your generated pages, but you can manually change the routes there as well as set a root page.
A good reference to routing tutorials here. Also shows different ways to navigate using routes throughout your app.
use routerDirection="back"
this will change the page transition like going back with your routerLink
#transition #ionic

Populate file list with previously uploaded files

Using the jQuery wrapped version of Fineuploader v3.3.
Is it possible to populate the file list with files already in the upload folder?
I think "_addToList(id, name)" should do the trick, but I can't get it to work. Any ideas?
Seems that they are currently working on this feature:
https://github.com/Widen/fine-uploader/issues/784
So, this will be available soon.
This is not a behavior that Fine Uploader currently supports. Fine Uploader only displays files that users have submitted to the uploader since the current uploader instance was created. It doesn't try to be an all-in-one web application. You could probably add your own item to the list/UI via javascript. That probably wouldn't be terribly difficult, but seems like an odd thing to do.
If you'd like to discuss your specific use case more, please open up a feature request in the Github issue tracker.
Generally, client side code cannot add stored or hard-coded path based file names for use in any type of POST or upload operation. Obviously this is a security measure, you can imagine if a malicious web page could add to a generic POST operation some type of baked in file name. So from what I understand, only the user can specify path based file names, via a file browser for the session that it is included in. This applies to HTML/JavaScript/jQuery but am unsure if Flash/Silverlight based solutions would also be limited. I think a Java based uploader would be free of this. But you are just moving closer and closer to installed software.

IE history push state

I have a webpage where the user has the possibility to display the terms and conditions without reloading the page, via AJAX. That, in itself, is no problem, however, I am also trying to push a history state.
That works fine in most browsers, except in IE. For some inexplicable reason, there, the content is loaded via AJAX, but also, a new tab is opened with the previous page. How can I fix this?
You can see the example on this webpage ( http://galaxy-battle.de ), try clicking on "T&Cs" in the "Join"-box.
IE9 and below doesn't support pushState. You have an exception when calling the following line
window.history.pushState(null, null, pathFullPage);
SCRIPT438: Object doesn't support property or method 'pushState'
?terms_and_conditions, line 62 character 21
You may probably be interesting looking on some workarounds discussed at Emulate/polyfill history.pushstate() in IE
Old but still current question. I just want to say I would recommend not to try to emulate pushState on IE.
Instead of that, you can use a feature detection :
if history.pushState is not null (browser supports pushState), you use it and load your content with nifty javascript
if history.pushState is null (browser does not support pushState), you change url / follow the link and make a full page change
Of course, this means IE<=9 users won't have all the cool animations other users have. But the question I want to ask is : do you want to see on the net links to your website containing # ?
Users may think your app is useful and paste links to it on the web. That's cool, because it brings you some google juice. Now, if that user uses IE and you use history.js, user will paste a link containing a hash.
This will defeats proper indexation of public pages of your app, and also will look ugly. My personal opinion is that having a js animation or lightbox for IE users doesn't worth those trade off.

How can I set up custom ImageResizer urls?

I'm just getting started with ImageResizer and I'm stuck on what seem like totally basic questions:
I have an uploader that I use to put images into a directory that's not directly accessible over HTTP. (If I just put a image at, say, /images/myimage.jpg, then anyone could access it by just asking for it, whereas I want to limit access via thumbnails, watermarks, etc.). So I want to put it at /offlimits/myimage.jpg, but be able to serve it up at /public/images/myimage.jpg.
I don't really want to dump all the images in the same offlimits folder, because putting lots of files in one folder makes Windows unhappy. But I don't want to expose the details of that subdirectory structure either, so where do I put the mapping between the public facing url and the actual image location?
Most generally, I don't necessarily want an image extension at all, so I'd like to say /public/image_id?width=100... and have this map to /offlimits/sub1/sub2/sub3/image_id.jpg.
Can anyone advise about how to set this up?
Three part questions are generally frowned upon here at SO, but I'll bite anyhow :)
If you're allowing access to images based on authentication, then you need to use ASP.NET's URL Authorization feature. ImageResizer supports URL Authorization rules. If you just don't want the source files available, and want to force them resized or watermarked, read the docs on how to implement arbitrary rules like this.
You can rewrite image paths to your heart's content with Config.Current.Rewrite, which works just like the PostRewrite event mentioned earlier. Just remember you'll have to keep it all straight in your head later.
Image extensions are good things. Don't fight them. They let the server figure out the right mime-type to send and help errant browsers recover from related bugs. They prevent issues on several platforms and make the Save As dialog work. They significantly improve server efficiency as well, since handling logic doesn't have wait as long. This is particularly relevant because of the design of the IIS/ASP.NET modules system.

Better user agent library for Codeigniter

I am looking for a more advanced user agent detection library for Codeigniter.
I want to add short tags for OS, Browser and Browser version to the body tag so
that I am able to write CSS that is gear towards different browsers and platforms.
Like this:
<body id="Win7 IE9">
Right now the default agent detection library for CI produces this:
<body id="Windows 7 Internet Explorer 9.22.2">
How can I "shorten" the response?
This is want I am looking to achieve: http://www.contao.org/en/blog/forget-about-browser-hacks-in-contao-210.html
Thankful for all input!
I don't think that user agent library is bad. It just do what it is supposed to do.
Maybe you should build a small helper or extend the user agent library, this is really simple task (you should look at agent->browser(), agent->version, agent->platfrom() etc.)
Despite what Contao says, these are browser hacks. Better way is to build your style sheets and/or javascript the right way (without this type of hacks). I don't ever needed different stylesheets (or browser specific classes) for different browsers.
I see what you are trying to do. To get away with this using CodeIgniter you'll have to basically rewrite the user agent library to return your shorter user agent strings (its time consuming but not too difficult)(the four user agent arrays are in: system/libraries/user_agents.php).
Its been more than a year since this question was asked but i am sure it will help someone in future. User agents names are defined in ./application/config/user_agents.php file in an associative array format you can change the value of array with the one you want.
Note: Changing the value in config file will reflect in the entire application. If you want to change in a particular area of application i would suggest to create your own function.
Try this
$this->session->userdata['user_agent'];

Resources