Skip to content

Commit

Permalink
file handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@JPMoresmau
JPMoresmau committed Jun 21, 2016
1 parent 76c8c73 commit bba21d7
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 58 deletions.
4 changes: 3 additions & 1 deletion reload/web/bower.json
View file
Expand Up @@ -25,7 +25,9 @@
"paper-dialog": "PolymerElements/paper-dialog#^1.0.4",
"paper-input": "PolymerElements/paper-input#^1.1.11",
"juicy-ace-editor": "^1.1.2",
"paper-card": "PolymerElements/paper-card#^1.1.1"
"paper-card": "PolymerElements/paper-card#^1.1.1",
"paper-menu-button": "PolymerElements/paper-menu-button#^1.1.1",
"paper-menu": "PolymerElements/paper-menu#^1.2.2"
},
"devDependencies": {
"web-component-tester": "^4.0.0"
Expand Down
Binary file added reload/web/images/add_obj.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 55 additions & 27 deletions reload/web/src/file-actions.html
View file
Expand Up @@ -7,37 +7,51 @@
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">


<dom-module id="file-actions">
<style>
paper-dialog {
width: 200%;
overflow: auto;
app-toolbar {
color: var(--app-primary-color);
}

paper-icon-button.file-button {
--paper-icon-button: {
height: 32px;
width: 32px;
}
}
paper-dialog {
width: 200%;
overflow: auto;
}

paper-icon-button {
--paper-icon-button: {
height: 32px;
width: 32px;
}

}

</style>

<template>
<iron-ajax id="creationAjax" handle-as="json" on-response="handleCreation" method="PUT"></iron-ajax>
<iron-ajax id="deletionAjax" handle-as="json" on-response="handleDeletion" method="DELETE"></iron-ajax>
<app-toolbar>
<paper-icon-button id="new_folder" src="/images/folder_new.png" alt="New Folder" on-tap="newFolder" class="file-button"></paper-icon-button>
<paper-tooltip for="new_folder" offset="0">New Folder</paper-tooltip>
<paper-icon-button id="new_file" src="/images/file_new.png" alt="New File" on-tap="newFile" class="file-button"></paper-icon-button>
<paper-tooltip for="new_file" offset="0">New File</paper-tooltip>
<paper-icon-button id="delete" src="/images/remove.png" alt="Delete" on-tap="deleteFolder" disabled class="file-button"></paper-icon-button>
<paper-tooltip for="delete" offset="0">Delete Folder</paper-tooltip>
<paper-menu-button>
<paper-icon-button id="new_obj" icon="create" alt="New..." class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-icon-item on-tap="newFolder"><iron-icon src="/images/folder_new.png" alt="New Folder..." item-icon></iron-icon>New Folder...</paper-icon-item>
<paper-icon-item on-tap="newFile"><iron-icon src="/images/file_new.png" alt="New File..." item-icon></iron-icon>New File...</paper-icon-item>
</paper-menu>
</paper-menu-button>
<paper-tooltip for="new_obj" offset="0">New...</paper-tooltip>
<paper-icon-button id="delete" icon="delete" alt="Delete" on-tap="deletePath" disabled></paper-icon-button>
<paper-tooltip for="delete" offset="0">Delete...</paper-tooltip>
</app-toolbar>

<paper-dialog id="new_folder_dialog" on-iron-overlay-closed="folderClosed">
<h2>New Folder</h2>
<h2><iron-icon src="/images/folder_new.png" alt="New Folder..."></iron-icon>New Folder</h2>
<paper-input id="new_folder_dialog_path" label="Path"></paper-input>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
Expand All @@ -46,17 +60,17 @@ <h2>New Folder</h2>
</paper-dialog>

<paper-dialog id="new_file_dialog" on-iron-overlay-closed="fileClosed">
<h2>New File</h2>
<h2><iron-icon src="/images/file_new.png" alt="New File..." class="file-button"></iron-icon>New File</h2>
<paper-input id="new_file_dialog_path" label="Path"></paper-input>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>

<paper-dialog id="delete_folder_dialog" on-iron-overlay-closed="folderDeleteClosed">
<h2>Delete folder</h2>
<paper-dialog-scrollable id="delete_folder_text">
<paper-dialog id="delete_dialog" on-iron-overlay-closed="deleteClosed">
<h2>Delete</h2>
<paper-dialog-scrollable id="delete_text">
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
Expand Down Expand Up @@ -90,10 +104,19 @@ <h2>Delete folder</h2>
if (!this.selectedPath){
return "";
} else {
var path=this.selectedPath.parentNode.path;
if (add){
return this.selectedPath.parentNode.path+"/";
if (this.selectedPath.parentNode.type==="file"){
var ix=path.lastIndexOf("/");
if (ix>-1){
path=path.substring(0,ix);
} else {
path="";
}
}
return path+"/";
}
return this.selectedPath.parentNode.path;
return path;
}
},
newFile: function(){
Expand All @@ -104,9 +127,9 @@ <h2>Delete folder</h2>
this.$.new_folder_dialog_path.value=this.selectedPathName(true);
this.$.new_folder_dialog.open();
},
deleteFolder: function(){
Polymer.dom(this.$.delete_folder_text).innerHTML="Are you sure you want to delete "+this.selectedPathName(false)+"?";
this.$.delete_folder_dialog.open();
deletePath: function(){
Polymer.dom(this.$.delete_text).innerHTML="Are you sure you want to delete <b>"+this.selectedPathName(false)+"</b>?";
this.$.delete_dialog.open();
},
fileClosed: function(e){
if (e.detail.confirmed){
Expand All @@ -127,11 +150,16 @@ <h2>Delete folder</h2>
this.lastCreated=p;
}
},
folderDeleteClosed: function(e){
deleteClosed: function(e){
if (e.detail.confirmed){
var aj=this.$.deletionAjax;
var p=this.selectedPathName(false);
aj.url="/files/"+p;
if (this.selectedPath.parentNode.type==="file"){
aj.url="/file/"+p;
} else {
aj.url="/files/"+p;
}

aj.generateRequest();
this.lastDeleted=p;
}
Expand Down
4 changes: 2 additions & 2 deletions reload/web/src/file-browser.html
View file
Expand Up @@ -12,7 +12,7 @@
padding: 0 10px;
display: block;
text-decoration: none;
color: var(--app-secondary-color);
color: var(--app-primary-color);
cursor: pointer;
font-size: small;
}
Expand Down Expand Up @@ -61,8 +61,8 @@
tgt=tgt.parentNode;
}
var a=tgt.parentNode;
this.fire("path-selected",tgt);
if (a.type==="dir"){
this.fire("path-selected",tgt);

var d=Polymer.dom(a);
if (!a.expanded){
Expand Down
28 changes: 26 additions & 2 deletions reload/web/src/file-editor.html
View file
Expand Up @@ -36,6 +36,7 @@

<template>
<iron-ajax id="ajax" url="/file/{{path}}" handle-as="text" on-response="handleResponse"></iron-ajax>
<iron-ajax id="ajaxPut" url="/file/{{path}}" handle-as="text" method="PUT"></iron-ajax>
<div class="card">
<juicy-ace-editor id="editor" mode$="{{mode}}" softtabs="true" tabsize="2" on-change="textChange">
</juicy-ace-editor>
Expand All @@ -60,15 +61,25 @@
this.unlisten(this.$.editor, 'change', 'textChange');
this.$.editor.onChange=function(e){};
this.$.editor.value="";
this.$.ajax.generateRequest();
this.$.editor.style.display='block';
if (this.path){
this.$.ajax.generateRequest();
this.$.editor.style.display='block';
} else {
this.$.editor.style.display='none';
}

},
mimeChanged: function(){
this.mode="ace/mode/text";
var mode=this.mime;
if (mode.indexOf("haskell")>-1){
mode="ace/mode/haskell";
} else if (mode.indexOf("yaml")>-1){
mode="ace/mode/yaml";
} else if (mode.indexOf("json")>-1){
mode="ace/mode/json";
} else if (this.path && this.path.endsWith(".md")>-1){
mode="ace/mode/markdown";
}
this.mode=mode;
},
Expand All @@ -82,6 +93,19 @@
},
textChange: function(e){
console.log(e.detail);
var ed=this.$.editor;
this.$.ajaxPut.body=ed.value;
this.$.ajaxPut.generateRequest();
},
fileOpened: function(e){
if (e && e.detail){
this.path=e.detail.path;
this.mime=e.detail.mime;
} else {
this.path=null;
this.mime="text/plain";
}

}
});
</script>
Expand Down
91 changes: 65 additions & 26 deletions reload/web/src/my-app.html
View file
Expand Up @@ -19,6 +19,9 @@
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="file-browser.html">
<link rel="import" href="file-actions.html">
Expand All @@ -35,7 +38,6 @@
--app-primary-color: #453a62;
--app-secondary-color: black;
}

app-header {
background-color: var(--app-primary-color);
color: #fff;
Expand Down Expand Up @@ -71,7 +73,21 @@
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div title id="title">Reload Haskell IDE</div>
<paper-menu-button>
<paper-icon-button icon="expand-more" class="dropdown-trigger"></paper-icon-button>
<paper-menu id="openedList" class="dropdown-content" on-iron-select="openedItemSelected">
<template is="dom-repeat" items="[[openedItems]]">
<paper-item path="[[item.path]]" type="[[item.type]]" mime="[[item.mime]]"><img border="0" src="[[showIcon(item)]]" alt="[[item.mime]]" on-error="iconError"></img><span>[[item.path]]</span></paper-item>
</template>
</paper-menu>
</paper-menu-button>
<div title id="title">[[appTitle]]</div>
<paper-menu-button id="openedFileActions" disabled horizontal-align="right">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-icon-item on-tap="closeCurrent"><iron-icon icon="close" alt="Close" item-icon></iron-icon>Close</paper-icon-item>
</paper-menu>
</paper-menu-button>
</app-toolbar>
</app-header>

Expand All @@ -91,26 +107,6 @@

properties: {

page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},

},

observers: [
'_routePageChanged(routeData.page)'
],

_routePageChanged: function(page) {
this.page = page || 'view1';
},

_pageChanged: function(page) {
// load page import on demand.
this.importHref(
this.resolveUrl('my-' + page + '.html'), null, null, true);
},

pathSelected : function (e){
Expand All @@ -120,11 +116,54 @@
this.$.fileBrowser.fileSystemChanged(e);
},
fileOpened: function(e){
this.$.editor.path=e.detail.path;
this.$.editor.mime=e.detail.mime;
Polymer.dom(this.$.title).innerHTML=e.detail.path;
this.$.editor.fileOpened(e);
var item=e.detail;
Polymer.dom(this.$.title).innerHTML=item.path;
if (!this.openedPaths[item.path]){
this.openedPaths[item.path]=this.openedItems.length+1;
this.push('openedItems',item);
}
this.currentPath=item.path;
this.$.openedFileActions.disabled=false;
},
openedItemSelected: function(){
var item=this.$.openedList.selectedItem;
this.$.editor.fileOpened({detail:item});
Polymer.dom(this.$.title).innerHTML=item.path;
this.currentPath=item.path;
},
ready: function() {
this.openedItems = [];
this.openedPaths = {};
this.currentPath = null;
this.appTitle='Reload Haskell IDE';
},
showIcon: function(item){
if (item.mime){
return "/images/"+item.mime+".png";
}
return "/images/text/plain.png";
},
iconError:function(e){
e.target.src="/images/text/plain.png";
},
closeCurrent:function(e){
if (this.currentPath){
var idx=this.openedPaths[this.currentPath]-1
delete this.openedPaths[this.currentPath];
this.splice('openedItems',idx,1);
if (this.openedItems.length>0){
var item=this.openedItems[0];
this.currentPath=item.path;
this.$.editor.fileOpened({detail:item});
Polymer.dom(this.$.title).innerHTML=item.path;
} else {
this.currentPath=null;
this.$.editor.fileOpened(null);
Polymer.dom(this.$.title).innerHTML=this.appTitle;
}
}
}

});

</script>
Expand Down

0 comments on commit bba21d7

Please sign in to comment.