tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Append panels arbitrary

pull/202/head
Artur Arseniev 9 years ago
parent
899bd0810a
commit
8a3f99df2c
2 changed files with 113 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 142
      index.html
  2. 17
      src/panels/view/PanelsView.js

142
index.html
View File

@ -10,10 +10,38 @@
</head> </head>
<style> <style>
body, html{ height: 100%; margin: 0;} body, html{ height: 100%; margin: 0;}
.panel-options-c {
background-color: red;
padding: 5px;
}
.panel-block-c {
background-color: blue;
padding: 5px;
}
</style> </style>
<body> <body>
<div id="gjs" style="height:0px; overflow:hidden"> <div class="panel-options">
<div class="title">My options panel</div>
<div class="panel-options-c"></div>
</div>
<div class="panel-options">
<div class="title">My options panel 2</div>
<div class="panel-options-c"></div>
</div>
<div class="panel-block">
<div class="title">My block</div>
<div class="panel-block-c"></div>
</div>
<div id="gjs2" style="height:0px; overflow:hidden;">
</div>
<div id="gjs" style="height:0px; overflow:hidden; display:none;">
<header class="header-banner"> <header class="header-banner">
<div class="container-width"> <div class="container-width">
<div class="logo-container"> <div class="logo-container">
@ -801,8 +829,9 @@
showOffsets: 1, showOffsets: 1,
autorender: 0, autorender: 0,
noticeOnUnload: 0, noticeOnUnload: 0,
container : '#gjs', container : '#gjs2',
height: '100%', height: '200px',
width: '500px',
fromElement: true, fromElement: true,
clearOnRender: 0, clearOnRender: 0,
@ -870,33 +899,33 @@
*/ */
commands: { commands: {
defaults : [{ defaults: [{
id: 'open-github', id: 'open-github',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
window.open('https://github.com/artf/grapesjs','_blank'); window.open('https://github.com/artf/grapesjs','_blank');
} }
},{ },{
id: 'undo', id: 'undo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.undo(true); editor.UndoManager.undo(true);
} }
},{ },{
id: 'redo', id: 'redo',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
editor.UndoManager.redo(true); editor.UndoManager.redo(true);
} }
},{ },{
id: 'clean-all', id: 'clean-all',
run: function(editor, sender){ run: function(editor, sender){
sender.set('active',false); sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){ if(confirm('Are you sure to clean the canvas?')){
var comps = editor.DomComponents.clear(); var comps = editor.DomComponents.clear();
} }
} }
}], }],
}, },
assetManager: { assetManager: {
@ -904,17 +933,17 @@
storeOnChange : true, storeOnChange : true,
storeAfterUpload : true, storeAfterUpload : true,
assets : [ assets : [
{ type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/78c5d6/fff/image1.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/459ba8/fff/image2.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/79c267/fff/image3.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/c5d647/fff/image4.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/f28c33/fff/image5.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/e868a2/fff/image6.jpg', height:350, width:250},
{ type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250}, { type: 'image', src : 'http://placehold.it/350x250/cc4360/fff/image7.jpg', height:350, width:250},
{ type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728}, { type: 'image', src : './img/work-desk.jpg', date: '2015-02-01',height:1080, width:1728},
{ type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320}, { type: 'image', src : './img/phone-app.png', date: '2015-02-01',height:650, width:320},
{ type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728}, { type: 'image', src : './img/bg-gr-v.png', date: '2015-02-01',height:1, width:1728},
] ]
}, },
@ -1156,6 +1185,37 @@
attributes: { title: 'Empty canvas' } attributes: { title: 'Empty canvas' }
}]); }]);
pnm.getPanels().reset();
pnm.addPanel({
id: 'options',
appendTo: '.panel-options-c',
buttons: [{
id: 'sw-visibility',
active: true,
className: 'fa fa-square-o',
command: 'sw-visibility',
context: 'sw-visibility',
attributes: { title: 'View components' },
},{
id: 'preview',
className: 'fa fa-eye',
command: 'preview',
context: 'preview',
attributes: { title: 'Preview' },
},{
id: 'fullscreen',
className: 'fa fa-arrows-alt',
command: 'fullscreen',
context: 'fullscreen',
attributes: { title: 'Fullscreen' },
},{
id: 'export-template',
className: 'fa fa-code',
command: 'export-template',
attributes: { title: 'View code' },
}],
});
editor.render(); editor.render();
</script> </script>
</body> </body>

17
src/panels/view/PanelsView.js
View File

@ -7,8 +7,8 @@ module.exports = Backbone.View.extend({
this.opt = o || {}; this.opt = o || {};
this.config = this.opt.config || {}; this.config = this.opt.config || {};
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
this.listenTo( this.collection, 'add', this.addTo ); this.listenTo(this.collection, 'add', this.addTo );
this.listenTo( this.collection, 'reset', this.render ); this.listenTo(this.collection, 'reset', this.render );
this.className = this.pfx + 'panels'; this.className = this.pfx + 'panels';
}, },
@ -41,10 +41,17 @@ module.exports = Backbone.View.extend({
config: this.config, config: this.config,
}); });
var rendered = view.render().el; var rendered = view.render().el;
var appendTo = model.get('appendTo');
if(fragment){ if (appendTo) {
var appendEl = document.querySelector(appendTo);
appendEl.appendChild(rendered);
return rendered;
}
if (fragment) {
fragment.appendChild(rendered); fragment.appendChild(rendered);
}else{ } else {
this.$el.append(rendered); this.$el.append(rendered);
} }
@ -60,7 +67,7 @@ module.exports = Backbone.View.extend({
}, this); }, this);
this.$el.append(fragment); this.$el.append(fragment);
this.$el.attr('class', _.result(this, 'className')); this.$el.attr('class', this.className);
return this; return this;
} }
}); });

Write Preview
Loading…
Cancel
Save