System, method and computer program product for editing web pages in-context of a production view
View Patent ↗Systems and methods for in-context editing of web pages in which the production format of a web page is visible while the web page is being edited, and the editable image is not distorted by the editing tools. In one embodiment, a system includes a server computer, a client computer and a transmission channel coupled between them. The server computer receives a request for a web page from the client computer and responsively transmits a web page containing in-context editing tools to the client computer. The client computer operate alternately in a first mode in which the in-context editing tools are superimposed on a web page image, or a second mode in which the web page image is displayed, but the in-context editing tools are hidden. The tools overlay in the first mode does not alter the production format of the web page image as displayed in the second mode.
1. A system for facilitating in-context editing of web pages in a client browser at a client device, the system comprising:
a network interface to connect to a client device over a network;
a processor;
a non-transitory computer readable medium storing a set of computer instructions executable by the processor to:
receive from the client device, via the network, a request for a web page;
determine an in-context editing tool associated with a first component of the web page based on a template associated with the web page, wherein the template specifies settings associated with the first component of the web page;
generate a production view of the web page and generate an overlay of including the in-context editing tool based on the determined in-context editing tool;
transmit page source to the client device corresponding to the production view and the overlay of the in-context editing tool, the page source configured to cause the client browser to operate alternatively in a plurality of modes and to switch between a first mode and a second mode without refreshing the web page, wherein:
in the first mode of the plurality of modes, the in-context editing tool is enabled and the client browser renders the overlay of the in-context editing tool superimposed on the production view of the web page with the in-context editing tool applicable to the first component of the web page displayed near the first component without distorting a size and placement of components of the production view; and
in the second mode of the plurality of modes, the in-context editing tool is disabled and the client browser renders the production view of the web page but hides the overlay of the in-context editing tool; and
receive an edit to the first component in the production view using the in-context editing tool and refresh the first component without refreshing the entire web page.
2. The system of claim 1 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.
3. The system of claim 2 , wherein the first namespace is a production environment namespace and the second namespace is a preview environment namespace.
4. The system of claim 2 , wherein the edited first component is maintained in the second namespace until an occurrence of an event and, at the occurrence of the event, the edited first component is transferred to the first namespace.
5. The system of claim 2 , wherein switching between the first mode and second comprises enabling or disabling all template elements included in the second namespace associated with the in-context editing tools.
6. The system of claim 2 , wherein the in-context editing tool includes a Javascript, CSS or HTML element.
7. The system of claim 6 , wherein the in-context editing tool is provided in association with the DOM or HTML of the page source.
8. A method for facilitating in-context editing of web pages in a client browser at a client device, the method comprising:
receiving from a client device, via a network, a request for a web page;
determining an in-context editing tool associated with a first component of the web page based on a template associated with the web page, wherein the template specifies settings associated with the first component of the web page;
generating a production view of the web page and generate an overlay of including the in-context editing tool based on the determined in-context editing tool;
transmitting page source to the client device corresponding to the production view and the overlay of the in-context editing tool, the page source configured to cause the client browser to operate alternatively in a plurality of modes and to switch between a first mode and a second mode without refreshing the web page, wherein:
in the first mode of the plurality of modes, the in-context editing tool is enabled and the client browser renders the overlay of the in-context editing tool superimposed on the production view of the web page with the in-context editing tool applicable to the first component of the web page displayed near the first component without distorting a size and placement of components of the production view; and
in the second mode of the plurality of modes, the in-context editing tool is disabled and the client browser renders the production view of the web page but hides the overlay of the in-context editing tool; and
receiving an edit to the first component in the production view using the in-context editing tool and refresh the first component without refreshing the entire web page.
9. The method of claim 8 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.
10. The method of claim 9 , wherein the first namespace is a production environment namespace and the second namespace is a preview environment namespace.
11. The method claim 9 , wherein the edited first component is maintained in the second namespace until an occurrence of an event and, at the occurrence of the event, the edited first component is transferred to the first namespace.
12. The method of claim 9 , wherein switching between the first mode and second comprises enabling or disabling all template elements included in the second namespace associated with the in-context editing tools.
13. The method of claim 9 , wherein the in-context editing tool includes a Javascript, CSS or HTML element.
14. The method of claim 13 , wherein the in-context editing tool is provided in association with the DOM or HTML of the page source.
15. A non-transitory computer readable medium comprising instructions for facilitating in-context editing of web pages in a client browser at a client device, the instructions executable for:
receiving from a client device, via a network, a request for a web page;
determining an in-context editing tool associated with a first component of the web page based on a template associated with the web page, wherein the template specifies settings associated with the first component of the web page;
generating a production view of the web page and generate an overlay of including the in-context editing tool based on the determined in-context editing tool;
transmitting page source to the client device corresponding to the production view and the overlay of the in-context editing tool, the page source configured to cause the client browser to operate alternatively in a plurality of modes and to switch between a first mode and a second mode without refreshing the web page, wherein:
in the first mode of the plurality of modes, the in-context editing tool is enabled and the client browser renders the overlay of the in-context editing tool superimposed on the production view of the web page with the in-context editing tool applicable to the first component of the web page displayed near the first component without distorting a size and placement of components of the production view; and
in the second mode of the plurality of modes, the in-context editing tool is disabled and the client browser renders the production view of the web page but hides the overlay of the in-context editing tool; and
receiving an edit to the first component in the production view using the in-context editing tool and refresh the first component without refreshing the entire web page.
16. The non-transitory computer readable medium of claim 15 , wherein the first component is in a first namespace and the in-context editing tool comprises an element in a second namespace such that the client browser switches between the first mode and the second mode by disabling the second namespace.
17. The non-transitory computer readable medium of claim 16 , wherein the first namespace is a production environment namespace and the second namespace is a preview environment namespace.
18. The non-transitory computer readable medium of claim 16 , wherein the edited first component is maintained in the second namespace until an occurrence of an event and, at the occurrence of the event, the edited first component is transferred to the first namespace.
19. The non-transitory computer readable medium of claim 16 , wherein switching between the first mode and second comprises enabling or disabling all template elements included in the second namespace associated with the in-context editing tools.
20. The non-transitory computer readable medium of claim 16 , wherein the in-context editing tool includes a Javascript, CSS or HTML element.
21. The non-transitory computer readable medium of claim 20 , wherein the in-context editing tool is provided in association with the DOM or HTML of the page source.