diff --git a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts index 30b8bc9b78ddbe514a6e3b0a1aa4e51baf901b52..4a4c1e801ac3f8f9082fae82682204a34a57e5b5 100755 --- a/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts +++ b/Frontend Angular 4/src/app/layout/archivos/archivos.component.ts @@ -31,8 +31,6 @@ import 'codemirror/mode/markdown/markdown'; }) export class ArchivosComponent { - file_loaded = null; - function_to_find = null; translateService : any; titlecasePipe: any; archivos : Archivo[] = []; @@ -48,7 +46,6 @@ export class ArchivosComponent { preview: string = ''; directorioActual:any; sortFunction:any; - checked: boolean; configCodeMirror = JSON.parse(sessionStorage.getItem('codeMirrorConfig')) ; constructor( @@ -72,13 +69,6 @@ export class ArchivosComponent { @ViewChild(CodemirrorComponent) codemirror: CodemirrorComponent; 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' let cedula = this.authService.getUser().cedula; this.loading = true; @@ -88,12 +78,6 @@ export class ArchivosComponent { this.archivos = archivos; this.loading = false; 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) ); @@ -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); - } - } } diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html index d23c8e87535908e79154d1206be7cd4179be394e..f605a748b96efe61be7134c2f2f9e6d21ca6274e 100755 --- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html +++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html @@ -56,7 +56,7 @@ </div> <button style="margin-left: 5px; float: right;" - (click)="reiniciarInterprete()" + (click)="mostrandoDefinicion = false; reiniciarInterprete()" class="btn btn-sm btn-secondary" ngbPopover='{{ "i18n.action.restart" | translate | titleCase }} {{ "i18n.object.interpreter" | translate | titleCase }} (Ctrl+R)' triggers="mouseenter:mouseleave" @@ -65,7 +65,7 @@ </button> <button style="margin-left: 5px; float: right;" - (click)="runCode()" + (click)="mostrandoDefinicion = false; runCode()" class="btn btn-sm btn-secondary" ngbPopover='{{ "i18n.action.load" | translate | titleCase }} {{ "i18n.object.program" | translate | titleCase }} (Ctrl+P)' triggers="mouseenter:mouseleave" @@ -167,7 +167,7 @@ </div> - <div class="col-md-6"> + <div class="col-md-6" [hidden]="mostrandoDefinicion"> <!-- <ngb-tabset [destroyOnHide]=false> <ngb-tab title="Programa"> @@ -201,6 +201,32 @@ </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}} + - + {{ "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> <span class="version">v{{version}}</span> </div> diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts index 758b50b781cc82971663dbcf563560f3f22085da..d7c190bba129d1bd37f603b95a7cee3acc9c0344 100755 --- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts +++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.ts @@ -1,4 +1,4 @@ -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 { CanvasComponent } from '../canvas/canvas.component'; import { Http, JsonpModule } from '@angular/http'; @@ -87,6 +87,10 @@ export class MateFunComponent { archivosTree :any; idRecorridos: any; code: string =''; + mostrandoDefinicion = false; + archivoDefinicion = ""; + jump = false; + jump_word = ""; configCodeMirror = { readOnly: false, lineNumbers: true, @@ -107,6 +111,7 @@ export class MateFunComponent { }, 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'] version: string = npm.version; @@ -149,16 +154,18 @@ export class MateFunComponent { this.code = "my code"; 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('popover') popover: NgbPopover; updateConfig(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)); } @@ -189,7 +196,7 @@ export class MateFunComponent { node.id = "cursorpos-panel"; node.className = "panel bottom"; this.cursorPanelLabel = node.appendChild(document.createElement("span")); - var cm = this.codemirror.instance; + var cm = this.codemirror.first.instance; var x = cm.getCursor().line; var y = cm.getCursor().ch; x = (Number(x) + 1).toString(); @@ -198,10 +205,10 @@ export class MateFunComponent { 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; //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 y = cm.getCursor().ch; x = (Number(x) + 1).toString(); @@ -209,7 +216,7 @@ export class MateFunComponent { 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){ that.seleccionarDirectorio(); } else if(name.code==="Digit2" && name.ctrlKey && name.shiftKey){ @@ -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){ - codeMirrorRef = that.codemirror.instance; + codeMirrorRef = that.codemirror.first.instance; componentRef = that; that.showConfirm(); } @@ -332,9 +339,9 @@ export class MateFunComponent { document.getElementById("ProgramBtn").click(); var that = componentRef; setTimeout(function() { - that.codemirror.instance.focus(); + that.codemirror.first.instance.focus(); },250); - componentRef.codemirror.instance.focus(); + componentRef.codemirror.first.instance.focus(); focus ="program"; return false; } else if(evtobj.ctrlKey && evtobj.altKey && evtobj.key.toLowerCase() ==="c"){ @@ -363,16 +370,20 @@ export class MateFunComponent { } ngAfterViewInit() { + this.codemirror.last.instance.on('change', () => { + this.makeAJump(); + }); + componentRef = this; - if(this.codemirror.instance!=null && !this.cursorLabelInit){ + if(this.codemirror.first.instance!=null && !this.cursorLabelInit){ this.cursorLabelInit = true; - this.codemirror.instance.setOption('theme', this.configCodeMirror.theme); + this.codemirror.first.instance.setOption('theme', this.configCodeMirror.theme); 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{ 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; @@ -384,6 +395,13 @@ export class MateFunComponent { } + makeAJump(){ + if (this.jump){ + this.jump = false; + this.jumpExternalFile(this.jump_word); + } + } + htmlEncode(value:string){ return value .replace('Prelude> ','') @@ -452,16 +470,30 @@ export class MateFunComponent { archivoModificado(event){ if (this.hintsCheck && !event.ctrlKey && !event.altKey){ if (/^[\w\_\d]$/.test(event.key) || event.key == 'Enter'){ - this.codemirror.instance.options.files = this.archivosTree; - this.codemirror.instance.showHint(event); + this.codemirror.first.instance.options.files = this.archivosTree; + this.codemirror.first.instance.showHint(event); } if(this.copiaNombreArchivo!=this.archivo.nombre || this.copiaContenidoArchivo != this.archivo.contenido){ this.modificado = true; }else{ this.modificado = false; } - }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.instance.toggleComment(); - else if (event.altKey && event.key == '.') this.codemirror.instance.jumpToDefinition(this.archivosTree, this.codemirror.instance.doc, event); + }else if (event.ctrlKey && event.shiftKey && event.key == 'K') this.codemirror.first.instance.toggleComment(); + 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){ @@ -469,18 +501,10 @@ export class MateFunComponent { let currentSession = sessionStorage.getItem("currentUser"); let langCode = currentSession ? JSON.parse(currentSession).language : 'es'; 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') - 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(){ @@ -517,8 +541,7 @@ export class MateFunComponent { } } runCode(){ - - this.ghciService.setCodemirrorRef(this.codemirror.instance); + this.ghciService.setCodemirrorRef(this.codemirror.first.instance); this.ghciService.resetGutters(); var regex = /^[A-Z]/ if(this.archivo.nombre.trim() == ""){