I am programming a CMS that allows creating and editing elements (content blocks) on the site in a WYSIWYG manner. basically, when logged in, you see visually the same website, but hovering and clicking on elements brings up either editors (like Aloha) or additional controls.
For instance:
hovering a paragraph would display a
small menu on its side which allows
selecting between left, center and
right alignment
clicking on a paragraph would make it editable
hovering over an image would display a dot on the right side of the image, which can be dragged thus changing the width of the image (height would update proportionally)
hovering any of the blocks in the website would bring up a "+" button that allows to create another block before the hovered block.
etc.
My current strategy is to use a similar technique that i saw used on Nike Better World and have been using ever since: there's an instantiating javascript that invokes jquery plugin on each html element that has a data-controller attribute, the name of the plugin being specified by the data-controller attribute.
Slightly extending this concept i would use it to attach all kinds of controls to the content blocks.
But, being a noob, only recently i came across javascript mvc frameworks like backbone.js. I've been working with MVC on the server side (in Kohana), but never yet in javascript. It seems that i can use it, but it's unclear to me, what would be the strategy. The CMS i'm working on is a kind of a hybrid between a proper javascript application, and an old-school html website. I don't understand, how can i use, e.g., backbone.js's collection object for content blocks, if they are already loaded in the page html (that doesn't make sense to me to load them with javascript).
does anybody have any suggestions?
Quick answer:
ContentModel: It's the data item you want to edit. The actual content. e.g.: $(#mydiv).text();
DisplayView: The view that will display this data (This is where ContentModel is first instantiated and initialized with $('#mydiv).text()
EditView: The view of "editing" this data (a text area perhaps) - When created, initialized with the ContentModel (same model object)
EditTemplate: The corresponding html of "how" the edit box should look like (can populate and create using _.template(...) i.e, a textarea/box etc.,
Now DisplayView holds the current value of the text (in it's model) at initialization itself. If you have an 'edit' button/link on this view (a div block for example), clicking it creates a new EditView and just "hides" the current div (#mydiv) that is showing the text and shows the EditView loaded with the model data in it's place ($.append() is your best friend here).
You click cancel, just hide/remove EditView and show the underlying div back. If you update, on success (from server) just hide the EditView and show the data on DisplayView! DisplayView can subscribe to the "change" event of the model! So once the model changes, the view knows what to do!!
Hope this helps!
Related
CONTEXT
I am building an app that loads a third party website within an iframe, through a proxy in order to allow changes to be made to the website. Because of the proxy, I am able to inject JS code into the website, allowing an element selector to be present within it (i.e. something like this: http://jsfiddle.net/rFc8E/)
PROBLEM
My next step is to enable the user to not only select components but to be able to edit them. So, for example, I would be able to select text, type in new text, click save, and then have the selector -> content change values be stored somewhere on my app. This has been accomplished by others, as described here: How does Optimizely & Visual Website Optimizer handle visual DOM editing?.
However, I'm not sure how step 3 is accomplished:
Our user at this point can make changes to the page, like modifying text, swapping out images, or moving elements around. Each change that is made with the editor is encoded as a line of JavaScript that looks something like the following:
$j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|
Could someone point me in the right direction?
I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.
I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.
Considerations on my part:
Each window instance has it's own
div with a unique ID (display:
none).
On-load, the application should
already have necessary html, css,
and javascript loaded into dom. The
html should be inside each unique
div pertaining to its instance
window.
Each menu button should modify its divs
display: to block, bringing the
instance window for that button to
front, but hiding all others.
Each instance window has to be
flexible enough to run javascript
within it, so I must be able to
create additional mvc's within each
unique div.
Okay, last comment. Should my user
interface utilize mvc or is
it not neccessary. Also, If it did use mvc
whats the best way to acomplish
this. There many different concepts
with mvc, like creating a view for
each instance window and listening
for clicks. It just gets confusing.
You think any of my considerations will effectively get the job done, and can you offer suggestions?
If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC...
I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You'll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)...
Hope some of that made sense...
EDIT:
To answer your last point, I would have a model, view and controller for each window... but I am fairly new to the MVC pattern...
Although Sencha's ExtJS may not be for you, they have a very detailed tutorial of how they've structured the framework for MVC.
I'd recommend taking a look at this for some ideas: http://dev.sencha.com/deploy/ext-4.0-beta3/docs/guide/application_architecture.html
Cheers!
I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.
What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page becomes way too big to fit the table and the form on... Any ideas???
If you are willing to use jQuery then you have some options:
For a dialog box / pop-up scenario, simple-modal dialog is quite nice. You can integrate it via div elements on your main page and this way you can avoid having to manage additional windows in javascript.
If you wish to add paging, filtering and search to your large table DataTables is top notch. It can be applied to a standard html table and is very versatile. It will allow you to hide columns as well, so I would think you could store your identity keys in those columns and use the dialog box easily.
JD-Daz -
I wouldn't use a pop-up. Nobody likes pop-ups, because they are not connected to the original window, and they are reliant on the windowing system of the host operating system. Also, this is useless in tabbed browsers. Instead, you should use a free-floating DIV element as the container of the table. You can allow the table to be scrolled inside the DIV element as appropriate.
--
Mark
Is it possible to use dynamic variables in tinyMCE?
Here's the use case I have in mind:
User adds an image in source view like this <img src="{imagepath}/logo.gif" /> or one is added programmatically using setContent().
User switches to design view - {imagepath} is expanded to http://someserver.com/ and the image is correctly shown with the expanded url.
User opens image properties - The url is shown as {imagepath}/logo.gif
User switches back to source view and the {imagepath} variable is still shown.
getContent() returns the source with variables intact.
Yes, refer to the TinyMCE template plugin for a javascript solution - it already does it:
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template
For a server side solution, just do a search and replace on the strings you want. This can be in a for loop or via a regular expression. If you decide to use the server side solution, the TinyMCE non-editable stuff can come in handy too.