Skip to content
This repository has been archived by the owner on Mar 10, 2021. It is now read-only.

Commit

Permalink
WIP: Add page tray
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamonholmgren
jamonholmgren committed Jul 22, 2016
1 parent ce3bbcb commit ddaf263
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 48 deletions.
7 changes: 2 additions & 5 deletions lib/thesis/stores/ecto_store.ex
View file
Expand Up @@ -33,15 +33,12 @@ defmodule Thesis.EctoStore do

def update(%{"slug" => slug} = page_params, contents_params) do
page = page(slug) || %Page{slug: slug}
IO.inspect(page_params)
page_changeset = Ecto.Changeset.cast(page, page_params, [], ~w(title description redirect_url) )
page_changeset = Ecto.Changeset.cast(page, page_params, [], ~w(slug title description redirect_url template) )

repo.insert_or_update!(page_changeset)

preloaded_contents = page_contents(page)

contents_params
|> Enum.map(fn(x) -> content_changeset(x, page, preloaded_contents) end)
|> Enum.map(fn(x) -> content_changeset(x, page, page_contents(page)) end)
|> Enum.map(fn(x) -> repo.insert_or_update!(x) end)

:ok
Expand Down
4 changes: 3 additions & 1 deletion lib/thesis/view.ex
View file
Expand Up @@ -109,9 +109,11 @@ defmodule Thesis.View do
if editable?(conn) do
page = conn.assigns[:thesis_page]
redirect_url = page && page.redirect_url
template = page && page.template
editor = content_tag(:div, "", id: "thesis-container",
data_ospry_public_key: ospry_public_key,
data_redirect_url: redirect_url)
data_redirect_url: redirect_url,
data_template: template)
safe_concat([thesis_style, editor, thesis_js])
else
raw ""
Expand Down
4 changes: 2 additions & 2 deletions priv/static/thesis-editor.js
View file

Large diffs are not rendered by default.

38 changes: 33 additions & 5 deletions web/static/js/components/settings_tray.js
View file
Expand Up @@ -9,18 +9,26 @@ class SettingsTray extends React.Component {
constructor (props) {
super(props)
this.state = {
title: this.props.pageTitle,
description: this.props.pageDescription,
redirectURL: this.props.redirectURL,
path: this.props.page.path,
title: this.props.page.title,
description: this.props.page.description,
redirectURL: this.props.page.redirectURL,
template: this.props.page.template,
isValid: true
}

this.titleChange = this.titleChange.bind(this)
this.descriptionChange = this.descriptionChange.bind(this)
this.redirectURLChange = this.redirectURLChange.bind(this)
this.pathChange = this.pathChange.bind(this)
this.templateChange = this.templateChange.bind(this)
this.onSave = this.onSave.bind(this)
}

trayTitle () {
(this.props.newPage) ? "Add Page" : "Page Settings"
}

titleChange (event) {
this.setState({title: event.target.value})
}
Expand All @@ -33,21 +41,40 @@ class SettingsTray extends React.Component {
this.setState({redirectURL: event.target.value})
}

pathChange (event) {
this.setState({path: event.target.value})
}

templateChange (event) {
this.setState({template: event.target.value})
}

onSave () {
this.props.onSubmit(this.state)
}

renderTemplates () {
return (
<div className="thesis-field-row">
<label>
<span>Template</span>
<input type="text" value={this.state.template} onChange={this.templateChange} />
</label>
</div>
)
}

render () {
return (
<div className="tray-container">
<div className="tray-wrap">
<div className="tray-title">
Page Settings
{this.trayTitle()}
</div>
<div className="thesis-field-row">
<label>
<span>Page Path</span>
<input type="text" value={this.props.path} disabled />
<input type="text" value={this.state.path} disabled={!this.props.newPage} onChange={this.pathChange} />
</label>
</div>
<div className="thesis-field-row">
Expand All @@ -56,6 +83,7 @@ class SettingsTray extends React.Component {
<input type="text" value={this.state.redirectURL} onChange={this.redirectURLChange} />
</label>
</div>
{this.props.newPage ? this.renderTemplates() : null}
<div className="thesis-field-row">
<label>
<span>Page Title</span>
Expand Down
98 changes: 63 additions & 35 deletions web/static/js/thesis-editor.js
View file
Expand Up @@ -16,12 +16,21 @@ import RawHtmlEditor from './content_types/raw_html_editor'
import ImageEditor from './content_types/image_editor'
import TextEditor from './content_types/text_editor'

const thesisContainer = document.querySelector('#thesis-container')

class ThesisEditor extends React.Component {

constructor (props) {
super(props)
this.state = {
editing: false,
page: {
path: this.pathname(),
title: this.pageTitle(),
description: this.pageDescription(),
template: this.pageTemplate(),
redirectURL: this.pageRedirectURL(),
},
pageModified: false,
pageToolsHidden: true,
trayOpen: false,
Expand All @@ -32,15 +41,15 @@ class ThesisEditor extends React.Component {
this.imageEditor = new ImageEditor(this, {ospryPublicKey: this.ospryPublicKey()})
this.textEditor = new TextEditor(this)

this.warnURLRedirect(this.redirectURL())
this.warnURLRedirect(this.state.page.redirectURL)

// Rebind context
this.trayCanceled = this.trayCanceled.bind(this)
this.settingsTraySubmitted = this.settingsTraySubmitted.bind(this)
this.cancelPressed = this.cancelPressed.bind(this)
this.savePressed = this.savePressed.bind(this)
this.editPressed = this.editPressed.bind(this)
// this.addPagePressed = this.addPagePressed.bind(this)
this.addPagePressed = this.addPagePressed.bind(this)
this.pageSettingsPressed = this.pageSettingsPressed.bind(this)
}

Expand All @@ -52,8 +61,7 @@ class ThesisEditor extends React.Component {
}

ospryPublicKey () {
return document.querySelector('#thesis-container')
.getAttribute('data-ospry-public-key')
return thesisContainer.getAttribute('data-ospry-public-key')
}

pathname () {
Expand All @@ -65,16 +73,19 @@ class ThesisEditor extends React.Component {
}

pageDescription () {
const desc = this.descriptionMetaTag()
const desc = this.pageDescriptionMetaTag()
return desc ? desc.content : null
}

redirectURL () {
return document.querySelector('#thesis-container')
.getAttribute('data-redirect-url')
pageRedirectURL () {
return thesisContainer.getAttribute('data-redirect-url')
}

pageTemplate () {
return thesisContainer.getAttribute('data-template')
}

descriptionMetaTag () {
pageDescriptionMetaTag () {
return document.querySelectorAll('meta[name=description]')[0]
}

Expand All @@ -83,16 +94,19 @@ class ThesisEditor extends React.Component {
}

settingsTraySubmitted (page) {
console.log(page)
document.title = page.title

const desc = this.descriptionMetaTag()
if (desc) { desc.content = page.description }

const container = document.querySelector('#thesis-container')
container.setAttribute('data-redirect-url', page.redirectURL)
this.setState({
trayOpen: false,
pageModified: true,
page: {
title: page.title,
description: page.description,
redirectURL: page.redirectURL
}
})
}

this.setState({trayOpen: false, pageModified: true})
addPagePressed () {
this.setState({trayOpen: true, trayType: 'add-page'})
}

editPressed () {
Expand All @@ -109,11 +123,15 @@ class ThesisEditor extends React.Component {
}

savePressed () {
const page = {slug: this.pathname(), title: this.pageTitle(), description: this.pageDescription(), redirect_url: this.redirectURL()}
const page = {
slug: this.state.page.path,
title: this.state.page.title,
description: this.state.page.description,
redirect_url: this.state.page.redirectURL,
template: this.state.page.template
}
const contents = this.contentEditorContents()
this.postToServer(page, contents)
this.setState({editing: false, pageModified: false, trayOpen: false})
setTimeout(() => this.setState({pageToolsHidden: true}), 800)
}

cancelPressed () {
Expand All @@ -123,10 +141,6 @@ class ThesisEditor extends React.Component {
}
}

// addPagePressed () {
// this.setState({trayOpen: !this.state.trayOpen, trayType: 'add-page'})
// }

pageSettingsPressed () {
if (this.state.trayOpen && this.state.trayType !== 'page-settings') {
this.setState({trayType: 'page-settings'})
Expand All @@ -137,11 +151,10 @@ class ThesisEditor extends React.Component {

postToServer (page, contents) {
Net.put('/thesis/update', {page, contents}).then((resp) => {
console.log('SUCCESS')
console.log(resp)
this.setState({editing: false, pageModified: false, trayOpen: false})
this.setState({pageToolsHidden: true})
}).catch((err) => {
console.log('ERROR')
console.log(err)
alert(err)
})
}

Expand Down Expand Up @@ -221,6 +234,10 @@ class ThesisEditor extends React.Component {
} else {
el.classList.remove('thesis-tray-open')
}

document.title = this.state.page.title
this.pageDescriptionMetaTag().content = this.state.page.description
thesisContainer.setAttribute('data-redirect-url', this.state.page.redirectURL)
}

renderEditorClass () {
Expand All @@ -245,11 +262,22 @@ class ThesisEditor extends React.Component {
renderTray () {
if (this.state.trayType == 'page-settings') {
return <SettingsTray
path={this.pathname()}
hasErrors={false}
pageTitle={this.pageTitle()}
pageDescription={this.pageDescription()}
redirectURL={this.redirectURL()}
newPage={false}
page={this.state.page}
onCancel={this.trayCanceled}
onSubmit={this.settingsTraySubmitted} />
} else if (this.state.trayType == 'add-page') {
return <SettingsTray
hasErrors={false}
newPage={true}
page={{
path: `${this.pathname().replace(/\/+$/, "")}/newpage`,
title: "",
description: "",
template: "",
redirectURL: ""
}}
onCancel={this.trayCanceled}
onSubmit={this.settingsTraySubmitted} />
} else if (this.state.trayType == "image-url") {
Expand All @@ -266,8 +294,8 @@ class ThesisEditor extends React.Component {
<SaveButton onPress={this.savePressed} />
<SettingsButton onPress={this.pageSettingsPressed} />
<CancelButton onPress={this.cancelPressed} />
{/*this.state.pageToolsHidden ? <AddButton onPress={this.addPagePressed} /> : null*/}
{/*this.state.pageToolsHidden ? <DeleteButton /> : null*/}
<AddButton onPress={this.addPagePressed} />
{this.state.page.template ? <DeleteButton /> : null}
<EditButton onPress={this.editPressed} text={this.renderEditButtonText()} />
</div>
<div id='thesis-fader' className={this.renderFaderClass()}></div>
Expand Down

0 comments on commit ddaf263

Please sign in to comment.