How to change URL but not view Angular JS - angularjs

I have a view for which route has been defined. On the view I have a no of images and when I click any of them the Modal Dialog appears with the detail of that image. What I want to do is to change the url only when the modal appears so user can easily share them. And yes, the share url would be another route I will define so when user directly come to that one, the modal pops in. Any suggestion please?

I would not change the URL when a modal appears. A modal is an overlay of your page and actually not a new page with a new URL.
Many image hosters, however, show the URL in a read-only field under the picture so that users can copy it. Maybe this is the way you would like to go.
On the page itself I recommend using $location to determine if there is an imageId in your URL. If so, just invoke the same logic as if a user clicked on that image on the page.

Related

How can i change a component according to url but not change the page? React

For example i have a page /profile on there, the user isshowed his profile picture. When the respected user clicks on it, it changes to /profile/avatar. But, i dont want to change the page but show a component which otherwise will not be shown in /profile. Think of it as when you click on another's avatar in twitter, it changes to /#elonmusk/pfp a modal shows the image but it doesnt unmount the previous page
How can i implement that?

Can a UI be kept rendered even if it does not match its react-router route?

would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery

How should I use route&view

Background:
I am using backbone.js & Twitter Bootstrap in my client-end page.
On clicking the logout button on header, a confirmation dialog should open.
The question is that
should I use router such as /logout to change to logoutView ?
If click No in the dialog, how could I show the main content with data before the dialog is opened.
Thanks!
Yes, you can use a router and you should.
First thing to know, is you have to render application's layout before dispatching any route, because the layout is rendered and needed for every action, so it's independant, right ?
Second you create a "logout" route in your router and give it the "#logout" hash, then in your "logout" action you open the modal.
Don't use router for such thing. Just fire the modal directly because:
On changing the router, you are gonna push that to the History. Hitting the browser's back button shouldn't really open a modal window.
URLs should be crafted in a way to be bookmarked. You don't want a URL that would open a popup or a modal window!
It's much simpler just to start the modal than to create a variable to hold the previous view and to fall back to it when clicking No
I have build client-side apps using different MVC frameworks like AngularJS and Backbone.js. Every time I faced the same situation you are talking about and found that the easiest and most accurate way is to just show the modal.
UPDATE
Please watch this. This is Jeremy Ashkenas the author of backbone.js stating exactly your situation about how should URLs be used and weather if they should be used to open a pop up or not.

how to create a custom splash page in salesforce?

Need to show a popup message in home page only for the first time a user logs into salesforce....
its more like a splash page.
it can be a jquery popup as well..
can i do it using a visualforce page ??? if yes, please give ur suggestions
can we do it using the sidebar component in salesforce ???
I thought of showing it using a sidebar component by keeping a custom field in user object...everytime he logs in i will check the custom field and the show the popup...since this popup will be shown only for the first time is there anyother better solution instead of querying the user object evertime..
thanks.
You can use window.open method of Javascript and for the sidebar provide your scroll option.
If you want to get fancy to have customized look you can just use jquery modal with some style on document ready.
We can use cookie to store if this is the first time or salesforce user object can tell you this is the first time

Joomla create html page with no menu

I have a normal article page with a huge image shown as a small one. What i want to do is, when the user click on the image, a new page is rendered and the image is shown at full size of the page (no menus, header, footer, etc.. just page). If the user click again, he will be redirected to the previous page.
How can i do this with joomla? I mean, i could create an html page, but i don't know how can i access it.
Any help would be appreciated,
RR
All you need to do is add this to any link you want to display without all of the module positions -
?tmpl=component
This tells Joomla to load just the component part of the page without anything else around it.
Not sure that anything specifically in Joomla is going to allow you to do that. The only way you can achieve that directly in Joomla would be using a light box type of plugin. When the user clicks the image, it will open up a full size window of the image. When the user click on the image again, it will exit the light box.
Otherwise, you can just edit the source code of the page, and change it to <img src="http://www.pathroyourimage.com/image.png"> . That way when a user clicks the image, they go directly to the picture.

Resources