Commit ade21b2f3b22bc064bd35421fd6b66fc0d082457

Fix: JS/CSS plugin getting executed when loading up for editing

  - Currently implemented is a hacky workaround around this problem. See
    models.js > Plugin Model > getCode function.
  - Small fix in editor to not take empty strings as valid tags.
  • Diff rendering mode:
  • inline
  • side by side

mouchak/server.py

113def edit():113def edit():
114 if "logged_in" in flask.session:114 if "logged_in" in flask.session:
115 flask.session['key'] = conf.SECRET_KEY115 flask.session['key'] = conf.SECRET_KEY
116 #print getContent()
117 return flask.render_template('editor.html', content=getContent(),116 return flask.render_template('editor.html', content=getContent(),
118 title=conf.SITE_TITLE)117 title=conf.SITE_TITLE)
119 else:118 else:
140 content = getContent()['content']140 content = getContent()['content']
141 return flask.make_response(json.dumps(content), '200 OK',141 return flask.make_response(json.dumps(content), '200 OK',
142 {'Content-Type': 'application/json'})142 {'Content-Type': 'application/json'})
143
143144
144@app.route('/pages/<_id>', methods=['GET'])145@app.route('/pages/<_id>', methods=['GET'])
145def listPage(_id):146def listPage(_id):

mouchak/static/js/editor.js

204 split('-')[1];204 split('-')[1];
205 var content = this.model.get('content')[idx];205 var content = this.model.get('content')[idx];
206 content = new M.types.model[content.type](content);206 content = new M.types.model[content.type](content);
207 console.log('model inited ', content);
207 //console.log('model inited ', content);
208 this.editing = true;208 this.editing = true;
209 this.edit_idx = idx;209 this.edit_idx = idx;
210 var contentview = new ContentView({model: content});210 var contentview = new ContentView({model: content});
256 this.render();256 this.render();
257 return false;257 return false;
258 },258 },
259 updatePage: function() {
259 updatePage: function(event) {
260 event.preventDefault();
260 var name = $('#name').val();261 var name = $('#name').val();
261 var title = $('#title').val();262 var title = $('#title').val();
262 var children = $('#children').val();
263 children = (children === '') ? [] : children.split(',');
263 var children = [];
264 //var children = $('#children').val();
265 //children = (children === '') ? [] : children.split(',');
264 this.model.set({'name': name, 'title': title, 'children': children});266 this.model.set({'name': name, 'title': title, 'children': children});
265267
266 if($('#showNav').is(':checked')) {268 if($('#showNav').is(':checked')) {
376 if(this.model.get('src')) {376 if(this.model.get('src')) {
377 var plugin_type = this.model.get('plugin_type');377 var plugin_type = this.model.get('plugin_type');
378 plugin_type = (plugin_type === 'js') ? 'javascript' : 'css';378 plugin_type = (plugin_type === 'js') ? 'javascript' : 'css';
379 //console.log('getting code..');
379 this.model.getCode(function(data) {380 this.model.getCode(function(data) {
381 //console.log('got code..');
380 $('#plugin-edit').html(escapeHtml(data));382 $('#plugin-edit').html(escapeHtml(data));
381 M.editor.code.init('plugin-edit', plugin_type);383 M.editor.code.init('plugin-edit', plugin_type);
382 });384 });
421 $('#contentview [m-data-target]').each(function(idx, elem) {421 $('#contentview [m-data-target]').each(function(idx, elem) {
422 prop = $(elem).attr('m-data-target');422 prop = $(elem).attr('m-data-target');
423 if(prop === 'tags') {423 if(prop === 'tags') {
424 val = $(elem).val().split(',');
424 val = ($(elem).val()) ? $(elem).val().split(',') : [];
425 }425 }
426 else {426 else {
427 val = $(elem).val();427 val = $(elem).val();
442 else if(this.$select.val() === 'plugin') {442 else if(this.$select.val() === 'plugin') {
443 var data = M.editor.code.save('plugin-edit');443 var data = M.editor.code.save('plugin-edit');
444 this.model.saveCode(data, function(resp) {444 this.model.saveCode(data, function(resp) {
445 console.log('plugin saved..');
445 //console.log('plugin saved..');
446 });446 });
447 }447 }
448 this.model.set(new_attrs);448 this.model.set(new_attrs);
449 //console.log('content updated');
449 M.editor.pageview.updateContent(this.model.toJSON());450 M.editor.pageview.updateContent(this.model.toJSON());
450 },451 },
451 cleanUp: function() {452 cleanUp: function() {
467 var self = this;467 var self = this;
468 M.editor.showOverlay();468 M.editor.showOverlay();
469 var $form = $('#plugin-upload-form')[0];469 var $form = $('#plugin-upload-form')[0];
470 console.log($form);
470 //console.log($form);
471 var formdata = new FormData($form);471 var formdata = new FormData($form);
472 console.log(formdata);
472 //console.log(formdata);
473 $.ajax({473 $.ajax({
474 type: 'POST',474 type: 'POST',
475 url: M.PluginUploadURL(),475 url: M.PluginUploadURL(),
480 self.model.set({'src': response.path})480 self.model.set({'src': response.path})
481 self.render();481 self.render();
482 M.editor.hideOverlay();482 M.editor.hideOverlay();
483 console.log(self.model.toJSON());
483 //console.log(self.model.toJSON());
484 }484 }
485 });485 });
486 }486 }

mouchak/static/js/models.js

115 // get the source code of the plugin from the src path115 // get the source code of the plugin from the src path
116 getCode: function(cb) {116 getCode: function(cb) {
117 var self = this;117 var self = this;
118 //NOTE: jQuery executes the code(css or js) as soon as it is returned by
119 //the server. Apparently, there is no way to tell jQuery not to execute
120 //the piece of code retrieved.
121 //Hecnce, right now its a HACK to workaround this problem.
122 // We use dataFilter which is called by jQuery to process the raw xhr
123 // response sent, and jQuery expects back a filtered/sanitized data so
124 // that it can call the success callback with that data. We use
125 // dataFilter to do our processing there, and return an empty string;
126 // this apparently prevents jQuery from executing the code.
127 // TODO: find a better way to workaround this.
128 // TODO: find out how cloud-based IDEs load up code files for editing.
118 $.ajax({129 $.ajax({
119 type: 'GET',130 type: 'GET',
120 url: self.get('src'),131 url: self.get('src'),
132 dataFilter: function(data, type) {
133 cb(data);
134 return '';
135 },
121 cache: false,136 cache: false,
122 success: function(data) {137 success: function(data) {
123 cb(data);
138 //cb(data);
124 }139 }
125 });140 });
126 },141 },