Commit 8c10b9e8 authored by Franco Pariani's avatar Franco Pariani
Browse files

New way to show external function definitions

parent 450d595c
...@@ -31,8 +31,6 @@ import 'codemirror/mode/markdown/markdown'; ...@@ -31,8 +31,6 @@ import 'codemirror/mode/markdown/markdown';
}) })
export class ArchivosComponent { export class ArchivosComponent {
file_loaded = null;
function_to_find = null;
translateService : any; translateService : any;
titlecasePipe: any; titlecasePipe: any;
archivos : Archivo[] = []; archivos : Archivo[] = [];
...@@ -48,7 +46,6 @@ export class ArchivosComponent { ...@@ -48,7 +46,6 @@ export class ArchivosComponent {
preview: string = ''; preview: string = '';
directorioActual:any; directorioActual:any;
sortFunction:any; sortFunction:any;
checked: boolean;
configCodeMirror = JSON.parse(sessionStorage.getItem('codeMirrorConfig')) ; configCodeMirror = JSON.parse(sessionStorage.getItem('codeMirrorConfig')) ;
constructor( constructor(
...@@ -72,13 +69,6 @@ export class ArchivosComponent { ...@@ -72,13 +69,6 @@ export class ArchivosComponent {
@ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent; @ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent;
ngOnInit(){ ngOnInit(){
this.checked = false;
this.route.queryParams.subscribe(params => {
this.file_loaded = params['file'] || null;
this.function_to_find = params['word'] || null;
});
this.sortFunction = 'tipo' this.sortFunction = 'tipo'
let cedula = this.authService.getUser().cedula; let cedula = this.authService.getUser().cedula;
this.loading = true; this.loading = true;
...@@ -88,12 +78,6 @@ export class ArchivosComponent { ...@@ -88,12 +78,6 @@ export class ArchivosComponent {
this.archivos = archivos; this.archivos = archivos;
this.loading = false; this.loading = false;
this.buildTreeFromList(); this.buildTreeFromList();
if (this.file_loaded !== null){
var file_id = this.file_loaded;
var found_file = this.archivos.filter(a => a.id == parseInt(file_id))[0];
this.seleccionarArchivo(found_file);
}
}, },
error => console.log(error) error => console.log(error)
); );
...@@ -560,11 +544,4 @@ export class ArchivosComponent { ...@@ -560,11 +544,4 @@ export class ArchivosComponent {
} }
}); });
} }
ngAfterViewChecked(){
if(this.codemirror !== undefined && this.codemirror.instance.doc.getValue() !== "" && this.function_to_find !== null && !this.checked){
this.checked = true;
this.codemirror.instance.jumpToDefinitionByWord(this.codemirror.instance.doc, this.function_to_find);
}
}
} }
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
</div> </div>
<button <button
style="margin-left: 5px; float: right;" style="margin-left: 5px; float: right;"
(click)="reiniciarInterprete()" (click)="mostrandoDefinicion = false; reiniciarInterprete()"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)' ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)'
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</button> </button>
<button <button
style="margin-left: 5px; float: right;" style="margin-left: 5px; float: right;"
(click)="runCode()" (click)="mostrandoDefinicion = false; runCode()"
class="btn btn-sm btn-secondary" class="btn btn-sm btn-secondary"
ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)' ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)'
triggers="mouseenter:mouseleave" triggers="mouseenter:mouseleave"
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6" [hidden]="mostrandoDefinicion">
<!-- <!--
<ngb-tabset [destroyOnHide]=false> <ngb-tabset [destroyOnHide]=false>
<ngb-tab title="Programa"> <ngb-tab title="Programa">
...@@ -201,6 +201,32 @@ ...@@ -201,6 +201,32 @@
</div> --> </div> -->
</div> </div>
<div class="col-md-6" [hidden]="!mostrandoDefinicion" style="top: 42px">
<div class="card">
<div class="card-header" style="height: 52.22px">
<form>
<div class="pull-left" *ngIf="archivoDefinicion">
{{ "i18n.object.name" | translate | titleCase }}:
{{archivoDefinicion?.nombre}}
&nbsp;-&nbsp;
{{ "i18n.action.created" | translate | titleCase }}:
{{archivoDefinicion?.fechaCreacion | date}}
</div>
<button style="float: right;" (click)="mostrandoDefinicion = !mostrandoDefinicion">
<i class="fa fa-times"></i>
</button>
</form>
</div>
<codemirror
#codemirror_def
class="codemirrorPrograma"
[(ngModel)]="archivoDefinicion.contenido"
[config]="configCodeMirrorDefinicion"
[ngStyle]="{'font-size': configCodeMirrorDefinicion.fontSize+'px'}">
</codemirror>
</div>
</div>
</div> </div>
<span class="version">v{{version}}</span> <span class="version">v{{version}}</span>
</div> </div>
......
import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef } from '@angular/core'; import { Component, NgModule, ViewChild, HostListener, ElementRef, ComponentRef, TemplateRef, QueryList, ViewChildren } from '@angular/core';
import { CanvasModule} from '../canvas/canvas.module'; import { CanvasModule} from '../canvas/canvas.module';
import { CanvasComponent } from '../canvas/canvas.component'; import { CanvasComponent } from '../canvas/canvas.component';
import { Http, JsonpModule } from '@angular/http'; import { Http, JsonpModule } from '@angular/http';
...@@ -87,6 +87,10 @@ export class MateFunComponent { ...@@ -87,6 +87,10 @@ export class MateFunComponent {
archivosTree :any; archivosTree :any;
idRecorridos: any; idRecorridos: any;
code: string =''; code: string ='';
mostrandoDefinicion = false;
archivoDefinicion = "";
jump = false;
jump_word = "";
configCodeMirror = { configCodeMirror = {
readOnly: false, readOnly: false,
lineNumbers: true, lineNumbers: true,
...@@ -107,6 +111,7 @@ export class MateFunComponent { ...@@ -107,6 +111,7 @@ export class MateFunComponent {
}, },
files: null files: null
}; };
configCodeMirrorDefinicion: any;
themes = ['3024-day', '3024-night', 'abcdef', 'ambiance-mobile', 'ambiance', 'base16-dark', 'base16-light', 'bespin', 'blackboard', 'cobalt', 'colorforth', 'dracula', 'duotone-dark', 'duotone-light', 'eclipse', 'elegant', 'erlang-dark', 'hopscotch', 'icecoder', 'isotope', 'lesser-dark', 'liquibyte', 'material', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'panda-syntax', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'railscasts', 'rubyblue', 'seti', 'solarized', 'the-matrix', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'ttcn', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light', 'yeti', 'zenburn'] themes = ['3024-day', '3024-night', 'abcdef', 'ambiance-mobile', 'ambiance', 'base16-dark', 'base16-light', 'bespin', 'blackboard', 'cobalt', 'colorforth', 'dracula', 'duotone-dark', 'duotone-light', 'eclipse', 'elegant', 'erlang-dark', 'hopscotch', 'icecoder', 'isotope', 'lesser-dark', 'liquibyte', 'material', 'mbo', 'mdn-like', 'midnight', 'monokai', 'neat', 'neo', 'night', 'panda-syntax', 'paraiso-dark', 'paraiso-light', 'pastel-on-dark', 'railscasts', 'rubyblue', 'seti', 'solarized', 'the-matrix', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'ttcn', 'twilight', 'vibrant-ink', 'xq-dark', 'xq-light', 'yeti', 'zenburn']
version: string = npm.version; version: string = npm.version;
...@@ -149,16 +154,18 @@ export class MateFunComponent { ...@@ -149,16 +154,18 @@ export class MateFunComponent {
this.code = "my code"; this.code = "my code";
let svg : string = ''; let svg : string = '';
this.configCodeMirrorDefinicion = this.configCodeMirror;
this.configCodeMirrorDefinicion.readOnly = true;
} }
@ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent; @ViewChildren(CodemirrorComponent) codemirror: QueryList<CodemirrorComponent>;
// @ViewChild(NgbPopover) popover: NgbPopover; // @ViewChild(NgbPopover) popover: NgbPopover;
@ViewChild('popover') popover: NgbPopover; @ViewChild('popover') popover: NgbPopover;
updateConfig(theme){ updateConfig(theme){
this.configCodeMirror.theme = theme; this.configCodeMirror.theme = theme;
this.codemirror.instance.setOption('theme', theme); this.codemirror.first.instance.setOption('theme', theme);
sessionStorage.setItem('codeMirrorConfig',JSON.stringify(this.configCodeMirror)); sessionStorage.setItem('codeMirrorConfig',JSON.stringify(this.configCodeMirror));
} }
...@@ -189,7 +196,7 @@ export class MateFunComponent { ...@@ -189,7 +196,7 @@ export class MateFunComponent {
node.id = "cursorpos-panel"; node.id = "cursorpos-panel";
node.className = "panel bottom"; node.className = "panel bottom";
this.cursorPanelLabel = node.appendChild(document.createElement("span")); this.cursorPanelLabel = node.appendChild(document.createElement("span"));
var cm = this.codemirror.instance; var cm = this.codemirror.first.instance;
var x = cm.getCursor().line; var x = cm.getCursor().line;
var y = cm.getCursor().ch; var y = cm.getCursor().ch;
x = (Number(x) + 1).toString(); x = (Number(x) + 1).toString();
...@@ -198,10 +205,10 @@ export class MateFunComponent { ...@@ -198,10 +205,10 @@ export class MateFunComponent {
this.cursorPanelLabel.textContent = cursorPositionTranslate + ": (" + x + "," + y + ")"; this.cursorPanelLabel.textContent = cursorPositionTranslate + ": (" + x + "," + y + ")";
this.cursorPanel = this.codemirror.instance.addPanel(node, {position: "bottom", stable: true}); this.cursorPanel = this.codemirror.first.instance.addPanel(node, {position: "bottom", stable: true});
var that = this; var that = this;
//agregamos el evento que setea la posición //agregamos el evento que setea la posición
this.codemirror.instance.on("cursorActivity",function(cm){ this.codemirror.first.instance.on("cursorActivity",function(cm){
var x = cm.getCursor().line; var x = cm.getCursor().line;
var y = cm.getCursor().ch; var y = cm.getCursor().ch;
x = (Number(x) + 1).toString(); x = (Number(x) + 1).toString();
...@@ -209,7 +216,7 @@ export class MateFunComponent { ...@@ -209,7 +216,7 @@ export class MateFunComponent {
that.cursorPanel.node.innerText = cursorPositionTranslate + ": (" + x + "," + y + ")"; that.cursorPanel.node.innerText = cursorPositionTranslate + ": (" + x + "," + y + ")";
}); });
this.codemirror.instance.on("keyHandled",function(cm,name,evt){ this.codemirror.first.instance.on("keyHandled",function(cm,name,evt){
if(name.code==="Digit1" && name.ctrlKey && name.shiftKey){ if(name.code==="Digit1" && name.ctrlKey && name.shiftKey){
that.seleccionarDirectorio(); that.seleccionarDirectorio();
} else if(name.code==="Digit2" && name.ctrlKey && name.shiftKey){ } else if(name.code==="Digit2" && name.ctrlKey && name.shiftKey){
...@@ -217,10 +224,10 @@ export class MateFunComponent { ...@@ -217,10 +224,10 @@ export class MateFunComponent {
} }
}); });
this.codemirror.instance.on("keypress",function(cm,name,evt){ this.codemirror.first.instance.on("keypress",function(cm,name,evt){
if(!that.editDialogFired && JSON.parse(sessionStorage.currentUser).tipo === "docente" && cm.options.readOnly){ if(!that.editDialogFired && JSON.parse(sessionStorage.currentUser).tipo === "docente" && cm.options.readOnly){
codeMirrorRef = that.codemirror.instance; codeMirrorRef = that.codemirror.first.instance;
componentRef = that; componentRef = that;
that.showConfirm(); that.showConfirm();
} }
...@@ -332,9 +339,9 @@ export class MateFunComponent { ...@@ -332,9 +339,9 @@ export class MateFunComponent {
document.getElementById("ProgramBtn").click(); document.getElementById("ProgramBtn").click();
var that = componentRef; var that = componentRef;
setTimeout(function() { setTimeout(function() {
that.codemirror.instance.focus(); that.codemirror.first.instance.focus();
},250); },250);
componentRef.codemirror.instance.focus(); componentRef.codemirror.first.instance.focus();
focus ="program"; focus ="program";
return false; return false;
} else if(evtobj.ctrlKey && evtobj.altKey && evtobj.key.toLowerCase() ==="c"){ } else if(evtobj.ctrlKey && evtobj.altKey && evtobj.key.toLowerCase() ==="c"){
...@@ -363,16 +370,20 @@ export class MateFunComponent { ...@@ -363,16 +370,20 @@ export class MateFunComponent {
} }
ngAfterViewInit() { ngAfterViewInit() {
this.codemirror.last.instance.on('change', () => {
this.makeAJump();
});
componentRef = this; componentRef = this;
if(this.codemirror.instance!=null && !this.cursorLabelInit){ if(this.codemirror.first.instance!=null && !this.cursorLabelInit){
this.cursorLabelInit = true; this.cursorLabelInit = true;
this.codemirror.instance.setOption('theme', this.configCodeMirror.theme); this.codemirror.first.instance.setOption('theme', this.configCodeMirror.theme);
this.makePanel(); this.makePanel();
} }
if(!this.editableLoaded && this.codemirror.instance!=null &&(this.sessionService.archivo.editable!==undefined)){ if(!this.editableLoaded && this.codemirror.first.instance!=null &&(this.sessionService.archivo.editable!==undefined)){
try{ try{
var editable = this.sessionService.archivo.editable && (this.sessionService.archivo.estado == 'Edicion' || this.sessionService.archivo.estado == 'Devuelto'); var editable = this.sessionService.archivo.editable && (this.sessionService.archivo.estado == 'Edicion' || this.sessionService.archivo.estado == 'Devuelto');
this.codemirror.instance.options.readOnly = !editable; this.codemirror.first.instance.options.readOnly = !editable;
this.editableLoaded = true; this.editableLoaded = true;
...@@ -384,6 +395,13 @@ export class MateFunComponent { ...@@ -384,6 +395,13 @@ export class MateFunComponent {
} }
makeAJump(){
if (this.jump){
this.jump = false;
this.jumpExternalFile(this.jump_word);
}
}
htmlEncode(value:string){ htmlEncode(value:string){
return value return value
.replace('Prelude> ','') .replace('Prelude> ','')
...@@ -452,16 +470,30 @@ export class MateFunComponent { ...@@ -452,16 +470,30 @@ export class MateFunComponent {
archivoModificado(event){ archivoModificado(event){
if (this.hintsCheck && !event.ctrlKey && !event.altKey){ if (this.hintsCheck && !event.ctrlKey && !event.altKey){
if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter'){ if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter'){
this.codemirror.instance.options.files = this.archivosTree; this.codemirror.first.instance.options.files = this.archivosTree;
this.codemirror.instance.showHint(event); this.codemirror.first.instance.showHint(event);
} }
if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){ if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){
this.modificado = true; this.modificado = true;
}else{ }else{
this.modificado = false; this.modificado = false;
} }
}else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.instance.toggleComment(); }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.first.instance.toggleComment();
else if (event.altKey && event.key == '.') this.codemirror.instance.jumpToDefinition(this.archivosTree, this.codemirror.instance.doc, event); else if (event.altKey && event.key == '.') this.codemirror.first.instance.jumpToDefinition(this.archivosTree, this.codemirror.first.instance.doc, event);
}
goToFilesPreview(file_found, word){
this.mostrandoDefinicion = true;
this.configCodeMirrorDefinicion = this.configCodeMirror;
this.configCodeMirrorDefinicion.readOnly = true;
this.archivoDefinicion = this.archivosTree.archivos.filter(a => a.id == parseInt(file_found.id))[0];
this.jump = true;
this.jump_word = word;
this.jumpExternalFile(word);
}
jumpExternalFile(word){
this.codemirror.last.instance.jumpToDefinitionByWord(this.codemirror.last.instance.doc, word);
} }
clickEnEditor(event){ clickEnEditor(event){
...@@ -469,18 +501,10 @@ export class MateFunComponent { ...@@ -469,18 +501,10 @@ export class MateFunComponent {
let currentSession = sessionStorage.getItem("currentUser"); let currentSession = sessionStorage.getItem("currentUser");
let langCode = currentSession ? JSON.parse(currentSession).language : 'es'; let langCode = currentSession ? JSON.parse(currentSession).language : 'es';
if (langCode == 'en') if (langCode == 'en')
this.codemirror.instance.functionDefinitionEN(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.instance.doc, event); this.codemirror.first.instance.functionDefinitionEN(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
else if (langCode == 'es') else if (langCode == 'es')
this.codemirror.instance.functionDefinitionES(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.instance.doc, event); this.codemirror.first.instance.functionDefinitionES(this.archivo.nombre, this.archivosTree.archivos, this.codemirror.first.instance.doc, event);
}
} }
goToFilesPreview(file_found, word){
let navigationExtras: NavigationExtras = {
queryParams: { file: file_found.id, word: word },
skipLocationChange: true
};
this.router.navigate(['/archivos'], navigationExtras);
} }
guardarArchivo(){ guardarArchivo(){
...@@ -517,8 +541,7 @@ export class MateFunComponent { ...@@ -517,8 +541,7 @@ export class MateFunComponent {
} }
} }
runCode(){ runCode(){
this.ghciService.setCodemirrorRef(this.codemirror.first.instance);
this.ghciService.setCodemirrorRef(this.codemirror.instance);
this.ghciService.resetGutters(); this.ghciService.resetGutters();
var regex = /^[A-Z]/ var regex = /^[A-Z]/
if(this.archivo.nombre.trim() == ""){ if(this.archivo.nombre.trim() == ""){
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment