documize/gui/app/templates/components/document/content-linker.hbs

<div id={{concat "content-linker-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Insert Link</div>
			<div class="modal-body">
				<ul class="tabnav-control text-center">
					{{#if hasSections}}
						<li class="tab {{if tab1Selected "selected"}}" {{action "onTabSelect" 1}} role="button" tabindex="0">Section</li>
					{{/if}}
					{{#if hasAttachments}}
						<li class="tab {{if tab2Selected "selected"}}" {{action "onTabSelect" 2}} role="button" tabindex="0">Attachment</li>
					{{/if}}
					<li class="tab {{if tab3Selected "selected"}}" {{action "onTabSelect" 3}} role="button" tabindex="0">Search</li>
					<li class="tab {{if tab4Selected "selected"}}" {{action "onTabSelect" 4}} role="button" tabindex="0">Network</li>
				</ul>

				{{#if showSections}}
					<div class="content-linker-modal-container">
						<p>Link to content within this document</p>
						{{ui/ui-list-picker items=candidates.pages nameField="title" singleSelect=true onSelect=(action "setSelection")}}
					</div>
				{{/if}}

				{{#if showAttachments}}
					<div class="content-linker-modal-container">
						<p>Link to an attachment within this document</p>
						<div class="widget-list-picker">
							<ul class="options">
								{{#each candidates.attachments as |item|}}
									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
										<div class="text text-truncate">
											<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
											{{item.title}}
										</div>
										{{#if item.selected}}
											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
										{{/if}}
									</li>
								{{/each}}
							</ul>
						</div>
					</div>
				{{/if}}

				{{#if showSearch}}
					<div class="content-linker-modal-container">
						<div class="form-group">
							<label>Search</label>
							{{focus-input id="content-linker-search" type="input" class="form-control" value=keywords placeholder="keyword search" autocomplete="off" key-up=(action "onSearch")}}
							<small class="form-text text-muted">Document name, content, attachment name</small>
						</div>
						{{#unless hasMatches}}
							<p class="nothing">Nothing found.</p>
						{{/unless}}
						<div class="widget-list-picker">
							<ul class="options">
								{{#each matches.documents as |item|}}
									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
										<div class="text text-truncate">
											{{item.title}}<br>{{item.context}}
										</div>
										{{#if item.selected}}
											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
										{{/if}}
									</li>
								{{/each}}
								{{#each matches.pages as |item|}}
									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
										<div class="text text-truncate">
											{{item.title}}<br>{{item.context}}
										</div>
										{{#if item.selected}}
											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
										{{/if}}
									</li>
								{{/each}}
								{{#each matches.attachments as |item|}}
									<li class="option {{if item.selected "selected"}}" {{action "setSelection" item}} role="button" tabindex="0">
										<div class="text text-truncate">
											<img class="icon" src="/assets/img/attachments/{{document/file-icon item.context}}">
											{{item.title}}
										</div>
										{{#if item.selected}}
											<i class="dicon {{constants.Icon.Tick}}" aria-selected="true" />
										{{/if}}
									</li>
								{{/each}}
							</ul>
						</div>
					</div>
				{{/if}}

				{{#if showNetwork}}
					<div class="content-linker-modal-container">
						<p>Specify network drive/share/folder location</p>
						<div class="form-group">
							{{focus-input id="content-linker-networklocation" type="input" class="form-control" value=networkLocation placeholder="e.g. //share/folder" autocomplete="off"}}
							<small class="form-text text-muted"></small>
						</div>
					</div>
				{{/if}}
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Insert onClick=(action "onInsertLink")}}
			</div>
		</div>
	</div>
</div>