199 lines
8.4 KiB
Plaintext
199 lines
8.4 KiB
Plaintext
//- 畫作的命名、敘述面板
|
||
mixin namingPanel(name, description)
|
||
.panel.panel-default
|
||
.panel-body
|
||
.input-group
|
||
.input-group-addon 畫作名稱
|
||
input#txtName.form-control(name="txtName", type="text", value= name, placeholder="至少1字、至多64字", required)
|
||
.form-group
|
||
label(for="txtDescription")
|
||
textarea#txtDescription.form-control(rows="5", placeholder="敘述至少1字、至多300字", required)= description
|
||
//- 設定提示訊息
|
||
mixin setAlertMessage(isLocked, isFinished, activity)
|
||
if isLocked
|
||
.alert.alert-danger.text-center 此畫作已被鎖定，無法再更改任何資料。
|
||
else
|
||
if isFinished
|
||
.alert.alert-warning.text-center 此作品已經完成，無法在對畫作內容有任何的更改。
|
||
if activity
|
||
.alert.alert-warning.text-center 此畫作已參加公開的活動，因此「訪問權限」鎖定在「公開」的權限之下，無法變更。
|
||
//- 畫作相關設定、資訊版面
|
||
mixin settingsDiv(painting, userTags, isAutoSave)
|
||
.panel.panel-default
|
||
.panel-body
|
||
.col-xs-12
|
||
label 標籤:
|
||
#tagPanel.panel.panel-default
|
||
+setTags(userTags, painting.tags)
|
||
.col-xs-3.view-authority
|
||
label 訪問權限:
|
||
+paintingAuthorityPanel(painting.viewAuthority)
|
||
.col-xs-5
|
||
label 資訊:
|
||
+paintingInfoPanel(painting.createdTime, painting.lastModified, painting.activity, painting.isFinished, painting.isLocked)
|
||
.col-xs-4
|
||
label 動作:
|
||
+paintingActionPanel(painting.isFinished, painting.isLocked, isAutoSave)
|
||
//- 設置畫作標籤
|
||
mixin setTags(userTags, paintingTags)
|
||
- for (var i = 0; i < userTags.length; i++)
|
||
.labelTag(class= (paintingTags.indexOf(userTags[i]) > -1 ? "active" : "")) #{userTags[i]}
|
||
//- 畫作的瀏覽權限面板
|
||
mixin paintingAuthorityPanel(authority)
|
||
.panel.panel-default
|
||
.panel-body
|
||
.btn-group(data-toggle="buttons")
|
||
label#rdoPrivate.btn.btn-danger(class= (authority==2) ? "active" : "")
|
||
input(type="radio", autocomplete="off", checked= (authority==2))
|
||
| 私人
|
||
label#rdoHalfPublic.btn.btn-warning(class= (authority==1) ? "active" : "")
|
||
input(type="radio", autocomplete="off", checked= (authority==1))
|
||
| 半公開
|
||
label#rdoPublic.btn.btn-success(class= (authority==0) ? "active" : "")
|
||
input(type="radio", autocomplete="off", checked= (authority==0))
|
||
| 公開
|
||
//- 畫作資訊面板
|
||
mixin paintingInfoPanel(createdTime, lastModified, activity, isFinished, isLocked)
|
||
.panel.panel-default
|
||
.panel-body
|
||
table.table
|
||
tbody
|
||
tr
|
||
th(scope="row") 建立日期:
|
||
td#tdCreatedTime #{createdTime instanceof Date ? createdTime.toLocaleString() : createdTime}
|
||
tr
|
||
th(scope="row") 最後修改:
|
||
td#tdLastModified #{lastModified instanceof Date ? lastModified.toLocaleString() : lastModified}
|
||
tr
|
||
th(scope="row") 參與主題:
|
||
if activity
|
||
td= "參與了第" + activity.nthSeason + "季的主題: " + activity.themeName
|
||
else
|
||
td 未參與任何活動、主題
|
||
tr
|
||
th(scope="row") 畫作狀態:
|
||
if isFinished
|
||
td 已完成
|
||
else if isLocked
|
||
td 鎖定
|
||
else
|
||
td 未完成
|
||
//- 畫作的動作面板
|
||
mixin paintingActionPanel(isFinished, isLocked, isAutoSave)
|
||
.panel.panel-default
|
||
.panel-body
|
||
button#btnSavePainting.btn.btn-default.mr-20(type="button") 儲存畫作
|
||
label.checkbox-inline
|
||
input#chkAutoSave(type="checkbox", checked= isAutoSave, data-toggle="toggle", data-size="normal")
|
||
| 自動儲存
|
||
br
|
||
button#btnFinish.btn.btn-success.mt-10(type="button", disabled= (isFinished || isLocked)) 完成畫作
|
||
buttin#btnPreDelete.btn.btn-danger.mt-10.ml-10(type="button", disabled= !painting.id) 刪除畫作
|
||
//- 提醒訪客註冊或登入的屏障訊息
|
||
mixin guestBarrier(hasLogin)
|
||
if !hasLogin
|
||
.barrierPanel
|
||
.container.mt-20
|
||
.panel.panel-default
|
||
.panel-heading.text-largetext.text-center 請登入或註冊
|
||
.panel-body.text-normal.text-center
|
||
h2.mtb-10 加入我們吧!
|
||
| 我們提供使你放鬆的網站、能揮灑創意的繪圖板，還有與其他繪友一起討論的空間，你還在等什麼呢，登入JMuseum或來註冊加入我們吧!!
|
||
.panel-footer.text-center
|
||
a.btn.btn-primary(href="/signup") 註冊
|
||
|
|
||
a.btn.btn-primary(href="/login") 登入
|
||
//- 主頁面 -//
|
||
doctype html
|
||
html
|
||
head
|
||
include layout/head.pug
|
||
link(rel="stylesheet", href="/css/bootstrap-toggle.min.css")
|
||
script(src="/js/p5/p5.min.js")
|
||
body
|
||
include layout/navbar.pug
|
||
- let painting = datas.painting;
|
||
.container-fluid.relative
|
||
//- Page Title
|
||
.container-fluid.container-table.text-shadow.color-white.layout-title
|
||
.row.text-center.align-items-center.vertical-center-row
|
||
.col
|
||
h1.text-bigtitle.pb-20 繪圖創作
|
||
//- Drawing Board
|
||
.container
|
||
//- Naming
|
||
.row
|
||
+namingPanel(painting.paintingName, painting.description)
|
||
//- Drawing Area
|
||
.row
|
||
.panel.panel-default.whiteTransparent
|
||
.row
|
||
#divAlert
|
||
.col-xs-10.col-xs-push-1
|
||
.panel.panel-default.tool-bars
|
||
input#resetCanvas.myBtn(type="button", value="重置")
|
||
|
|
||
.main-color-picker 填充色
|
||
input#mainColorPicker.color-btn.vertical-center-row(type="color")
|
||
|
|
||
.sub-color-picker 筆刷色
|
||
input#subColorPicker.color-btn.vertical-center-row(type="color")
|
||
|
|
||
.size-group
|
||
input#sizeDown10(type="button", value="-")
|
||
input#sizeDown(type="button", value="-")
|
||
label#sizeGroupText 填色大小 16
|
||
input#sizeUp(type="button", value="+")
|
||
input#sizeUp10(type="button", value="+")
|
||
|
|
||
.size-group
|
||
input#strokeSizeDown10(type="button", value="-")
|
||
input#strokeSizeDown(type="button", value="-")
|
||
label#strokeSizeGroupText 筆刷粗細 1
|
||
input#strokeSizeUp(type="button", value="+")
|
||
input#strokeSizeUp10(type="button", value="+")
|
||
|
|
||
.brush-group
|
||
.brush-caption 筆刷模式
|
||
input#normalBrush.active(type="button", value="筆刷")
|
||
input#slideBrush(type="button", value="滑筆")
|
||
input#featherBrush(type="button", value="燕筆")
|
||
input#furBrush(type="button", value="刺筆")
|
||
input#stampBrush(type="button", value="印筆")
|
||
#canvasContainer.panel-body.text-center
|
||
canvas#cvsCanvas(width="800", height="450")
|
||
| 您的瀏覽器並不支援<canvas>標籤。
|
||
//- Message Alert
|
||
#divMessage.row
|
||
+setAlertMessage(painting.isLocked, painting.isFinished, painting.activity)
|
||
//- Settings
|
||
.row
|
||
+settingsDiv(painting, datas.userTags, datas.isAutoSave)
|
||
//- Message Dialog
|
||
#msgDialog.modal.fade(role="dialog")
|
||
.modal-dialog
|
||
.modal-content
|
||
.modal-header
|
||
button.close(type="button", data-dismiss="modal") ×
|
||
h4#msgDialog_title.modal-title 訊息
|
||
.modal-body
|
||
p#msgDialog_message Message
|
||
.modal-footer
|
||
button#btnDelete.btn.btn-danger(type="button", data-dismiss="modal") 刪除
|
||
button#btnClose.btn.btn-default(type="button", data-dismiss="modal") 關閉
|
||
+guestBarrier(hasLogin)
|
||
//- Footer
|
||
include layout/footer.pug
|
||
//- Javascript
|
||
script(src="/js/bootstrap-toggle.js")
|
||
if hasLogin
|
||
script
|
||
| let autoSaveEnable = #{datas.isAutoSave};
|
||
| let isFinished = #{painting.isFinished};
|
||
| let paintingId =
|
||
if painting.id
|
||
| "#{painting.id}";
|
||
else
|
||
| null;
|
||
script(src="/js/drawing_tools.js")
|
||
script(src="/js/drawing_page.js") |