Javascript Drag and Drop Grid Editor

CANCELLED
Bids
1
Avg Bid (USD)
$213
Project Budget (USD)
$100 - $250

Project Description:

I need something similar to this: http://www.3x4grid.com/
But using this CSS: http://cssgrid.net/
So it would allow adding any number of rows in the CSS Grid Style.
But having one distinct feature, I need it to be able to load a existing html and modify it, you can use http://simplehtmldom.sourceforge.net/ for loading html and easy traversal/manipulation.
Another thing which I need in this is that I want it also to insert snippets of php code based on a list I specify in a text box. But that snippet would only be inserted in the final output and would not be displayed in the preview but simply would be displayed as a text description eg:
http://screencast.com/t/i6yb3oAVBJ


## Deliverables

Example workflow:


1. I open the page where the javascript application is installed and I can either create a new document or load a existing one.
2. If I load a existing I will be asked for the full filesystem path so the webserver can open it directly (so I don't want uploading but working directly on the server), of course it's the user's responsibility to make sure the file is available and has permissions to access it.
3. For the sake of a example we load the file EditDriver.tpl.php (which is attached to this specification), if you open it you will see 4x <?php snippets, and the cssgrid layout used there. You are basically only interested in the CSS grid and will load it as 3 rows and display it so. You will notice there is no container class which is necessary for cssgrid, but in case of loading a existing file you will detect and ignore that (also not add it to the document when saved). What we have is 12 12 and 6+6 collumns grid where the first contains some html, 2 of them contain some php and one is empty so you will display it something like:
----custom php----
row ------h1------
row ------pnlEditDriver------
row ---- pnlDriver---- empty -----
----custom php---

as you can see we have 3 possible things which can happen, one thing can be a unrecognized php where we will just say "custom php", we have custom html where you can display just the html tags as text or any other way you like as long as it's condensed and shortened, you can even say "custom html" I don't care, it's just important the user can see it's something there. and lastly we have these $this->variable->Render() php commands, these will be common and need to be filtered out with a regex so you can say the name of the variable in the html output (as in the screenshot in the first description). Each of these php commands with Render should contain a X icon beside them which when clicked should remove the php from that grid column and put it into a multiline text box which will contain all unused Renders. Also if I go in and manually add variables to the text box they should be available for adding in any column the user wants by simply dragging and dropping to the correct column.
I guess the simplest way is to have a multiline text box and a dynamically generated list of html divs somwhere near it which can be dragged into place, when done so it would remove the element from the text box.

And finally a Save button which would write the template back into it's place.

A few notes, the Render can look like any of the following:
$_CONTROL->lblCreated->RenderWithName();
$this->pnlDriver->Render();
$this->objDefaultWaitIcon->Render('CssClass="spinner_icon"');

or any variation of it and you should be able to store and reproduce it when moved between fields. I would say a regex with something like $\w->\w->Render[^;]+ should do the trick.
Maybe it would be even best in the multiline text box to keep them fully listed, the complete line, so it's more easy to remember them, you can even display them so in the columns if you think it's more easy for you.
For me it's important that I can quickly draft a template and throw these Render's all over the place quickly or rearrange them quickly with simple drag and drop.

If you do a good job here it's possible that there will be many enhancements to this script with a one on one project.

Skills required:
Javascript, MySQL, PHP, Software Architecture, Software Testing, Web Hosting, Website Management, Website Testing
Additional Files: vw_2012___07___09___edit_RAC_NameCryptedToProtectYourPrivacy_X20127945156892656120218443326326011224.zip
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 212.5
in 14 days