overleaf/services/web/app/views/project/editor.jade

extends ../layout

block vars
	- var suppressNavbar = true
	- var suppressFooter = true
	- var suppressDefaultJs = true

block scripts
	//- Only use the native bootstrap on the editor page,
	//- since we use the Angular-based bootstrap elsewhere.
	script(src=jsPath+'libs/bootstrap-3.1.1.js')
	script(src=jsPath+'libs/jquery-layout.js')
	script(src=jsPath+'libs/jquery.storage.js')

block content

	.editor(ng-controller="IdeController")

		.loading-screen(ng-show="state.loading")
			.container
				h3 Loading...
				.progress
					.progress-bar(ng-style="{'width': state.load_progress + '%'}")

		header.toolbar.toolbar-header(ng-cloak, ng-hide="state.loading")
			a.btn.btn-full-height(href='#', tooltip="Menu", tooltip-placement="bottom")
				i.fa.fa-bars

			span.name {{ project.name }}

			a(href='#', data-toggle="tooltip", title="Rename")
				i.fa.fa-pencil

			.toolbar-right
				a.btn.btn-full-height(href='#', tooltip="Share", tooltip-placement="bottom")
					i.fa.fa-group
				a.btn.btn-full-height(href='#', tooltip="Recent Changes", tooltip-placement="bottom")
					i.fa.fa-history
				a.btn.btn-full-height(href='#', tooltip="Chat", tooltip-placement="bottom")
					i.fa.fa-comment

		#editor-content(ng-cloak, layout="main", ng-hide="state.loading")
			aside#file-tree.ui-layout-west(ng-controller="FileTreeController")
				.toolbar.toolbar-small
					a(
						href,
						ng-click="openNewDocModal()",
						tooltip-html-unsafe="New<br>File",
						tooltip-placement="bottom"
					)
						i.fa.fa-file
					a(
						href,
						ng-click="openNewFolderModal()",
						tooltip="New Folder",
						tooltip-placement="bottom"
					)
						i.fa.fa-folder
					a(href, tooltip="Upload File", tooltip-placement="bottom")
						i.fa.fa-upload

					.toolbar-right
						a(href, tooltip="Rename", tooltip-placement="bottom")
							i.fa.fa-pencil
						a(href, tooltip="Delete", tooltip-placement="bottom", tooltip-append-to-body="true")
							i.fa.fa-trash-o

				ul.list-unstyled.file-tree-list
					file-entity(
						entity="entity",
						ng-repeat="entity in rootFolder.children | orderBy:[orderByFoldersFirst, 'name']"
					)
			.ui-layout-center

	script(type='text/ng-template', id='entityListItemTemplate')
		li(
			ng-class="{ 'selected': entity.selected }",
			ng-controller="FileTreeEntityController"
		)
			.entity(ng-if="entity.type == 'doc'")
				.entity-name(ng-click="select()")
					//- Just a spacer to align with folders
					i.fa.fa-fw.toggle
					i.fa.fa-fw.fa-file
					|  {{ entity.name }}

			.entity(ng-if="entity.type == 'file'")
				.entity-name(ng-click="select()")
					i.fa.fa-fw.toggle
					i.fa.fa-fw.fa-image
					|  {{ entity.name }}

			.entity(ng-if="entity.type == 'folder'", ng-controller="FileTreeFolderController")
				.entity-name
					i.fa.fa-fw.toggle(
						ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}"
						ng-click="toggleExpanded()"
					)
				
					i.fa.fa-fw(
						ng-class="{\
							'fa-folder': !expanded, \
							'fa-folder-open': expanded \
						}"
						ng-click="select()"
					)
					span(ng-click="select()")  {{ entity.name }}

				ul.list-unstyled(ng-show="expanded")
					file-entity(entity="child", ng-repeat="child in entity.children | orderBy:[orderByFoldersFirst, 'name']")

	script(type='text/ng-template', id='newDocModalTemplate')
		.modal-header
			h3 New File
		.modal-body
			form(novalidate, name="newDocForm")
				input.form-control(
					type="text",
					placeholder="File Name",
					required,
					ng-model="inputs.name",
					ng-enter="create()",
					focus-on="open"
				)
		.modal-footer
			button.btn.btn-default(
				ng-disabled="state.inflight"
				ng-click="cancel()"
			) Cancel
			button.btn.btn-primary(
				ng-disabled="newDocForm.$invalid || state.inflight"
				ng-click="create()"
			)
				span(ng-hide="state.inflight") Create
				span(ng-show="state.inflight") Creating...

	script(type='text/ng-template', id='newFolderModalTemplate')
		.modal-header
			h3 New File
		.modal-body
			form(novalidate, name="newFolderForm")
				input.form-control(
					type="text",
					placeholder="Folder Name",
					required,
					ng-model="inputs.name",
					ng-enter="create()",
					focus-on="open"
				)
		.modal-footer
			button.btn.btn-default(
				ng-disabled="state.inflight"
				ng-click="cancel()"
			) Cancel
			button.btn.btn-primary(
				ng-disabled="newFolderForm.$invalid || state.inflight"
				ng-click="create()"
			)
				span(ng-hide="state.inflight") Create
				span(ng-show="state.inflight") Creating...

	//- #loadingScreen
	//- 	h3 Loading...
	//- 	p#loadingMessage Loading editor

	//- #errorMessages
	//- 	#connectionLostMessage(style="display: none;")
	//- 		| Lost connection. 
	//- 		span#trying-reconnect
	//- 			| Reconnecting in 
	//- 			span#reconnection-countdown ? 
	//- 			|  seconds. 
	//- 			a(href='#')#try-reconnect-now Try now.
	//- 		span#reconnecting
	//- 			| Reconnecting...

	//- 	#savingProblems(style="display: none")
	//- 		| Saving...
	
	//- div#toolbar.sidebar-navigation
	//- 	ul#tabs
	//- 	#toolbar-footer

	//- #tab-content.tab-content

	//- include ../templates
	//- include ../templates/dropbox

	script(src='/socket.io/socket.io.js')

	script(type='text/javascript').
		window.project_id = "!{project_id}"
		window.sharelatex = !{sharelatexObject};
		window.userSettings = !{userSettingsObject};
		window.user = !{userObject};
		window.csrfToken = "!{csrfToken}";
		window.requirejs = {
			"paths" : {
				"underscore": "libs/underscore-1.3.3",
				"mathjax": "https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML",
				"moment": "libs/moment-2.4.0"
			},
			"urlArgs" : "fingerprint=#{fingerprint(jsPath + 'ide.js')}",
			"waitSeconds": 0,
			"shim": {
				"libs/backbone": {
					deps: ["libs/underscore-1.3.3"]
				},
				"libs/pdfListView/PdfListView": {
					deps: ["libs/pdf"]
				},
				"libs/pdf": {
					deps: ["libs/compatibility"]
				}
			}
		};

	script(type='text/javascript').
		ga('send', 'event', 'editor-interaction', 'editor-opened')

	- locals.suppressDefaultJs = true

	- var fingerprintedPath = fingerprint(jsPath+'libs/pdf.worker.js')
	- var pdfJsWorkerPath = jsPath+'libs/pdf.worker.js?fingerprint='+fingerprintedPath
	script(type='text/javascript').
		window.sharelatex.pdfJsWorkerPath = "#{pdfJsWorkerPath}"

	script(
		data-main=jsPath+'app/ide.js',
		baseurl=jsPath,
		data-ace-base=jsPath+'ace',
		src=jsPath+'libs/require.js?fingerprint='+fingerprint(jsPath + 'libs/require.js')
	)

	- if (!anonymous)
		script(type="text/javascript").
			var chatReq = require.config({
				context: "chat",
				baseUrl: "#{chatUrl}/chat"
			});
			chatReq(["require", "chat"], function(require, Chat) {
				new Chat({
					room: {
						project_id: window.userSettings.project_id
					},
					url: "#{chatUrl}"
				})
			});