Skip to content
Snippets Groups Projects
Commit 8c10b9e8 authored by Franco Pariani's avatar Franco Pariani
Browse files

New way to show external function definitions

parent 450d595c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/src/app/layout/archivos/archivos.component.ts
+ 0
− 23
View file @ 8c10b9e8
...@@ -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);
}
}
} }
Frontend Angular 4/src/app/layout/matefun/matefun.component.html
+ 29
− 3
View file @ 8c10b9e8
...@@ -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>
......
Frontend Angular 4/src/app/layout/matefun/matefun.component.ts
+ 54
− 31
View file @ 8c10b9e8
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() == ""){
......
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