pageflow 0.0.1

data/app/assets/javascripts/pageflow/editor/templates/file_meta_data_item.jst.ejs

@@ -0,0 +1,2 @@
+<th></th>
+<td></td>

data/app/assets/javascripts/pageflow/editor/templates/file_stage_item.jst.ejs

@@ -0,0 +1,3 @@
+<p class="percent"></p>
+<p class="description"></p>
+<p class="error_message"></p>

data/app/assets/javascripts/pageflow/editor/templates/file_thumbnail.jst.ejs

@@ -0,0 +1 @@
+<div class="pictogram"></div>

data/app/assets/javascripts/pageflow/editor/templates/files.jst.ejs

@@ -0,0 +1 @@
+<a class="back">Zurück</a>

data/app/assets/javascripts/pageflow/editor/templates/files_blank_slate.jst.ejs

@@ -0,0 +1 @@
+<li class="blank_slate">Es wurden noch keine Dateien dieses Typs hochgeladen.<li>

data/app/assets/javascripts/pageflow/editor/templates/files_explorer.jst.ejs

@@ -0,0 +1,14 @@
+<div class="box">
+  <h2>Dateien Wiederverwenden</h2>
+
+  <ul class="entries_panel">
+  </ul>
+
+  <div class="files_panel">
+  </div>
+
+  <div class="footer">
+    <button class="ok">OK</button>
+    <button class="close">Abbrechen</button>
+  </div>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/files_explorer_blank_slate.jst.ejs

@@ -0,0 +1 @@
+<li class="blank_slate">Bitte w&auml;hlen Sie einen Beitrag aus.<li>

data/app/assets/javascripts/pageflow/editor/templates/files_gallery_blank_slate.jst.ejs

@@ -0,0 +1 @@
+<li class="blank_slate">In diesem Beitrag gibt es keine Dateien dieses Typs.<li>

data/app/assets/javascripts/pageflow/editor/templates/help.jst.ejs.erb

@@ -0,0 +1,160 @@
+<div class="box">
+  <h2>Hilfe</h2>
+
+  <ul>
+    <li data-section="intro"><a href="">Übersicht</a></li>
+    <li data-section="outline"><a href="">Kapitel und Seiten verwalten</a></li>
+    <li data-section="page"><a href="">Seiten konfigierieren</a></li>
+    <li data-section="files"><a href="">Dateien hochladen und verwalten</a></li>
+    <li data-section="reusing_files"><a href="">Dateien wiederverwenden</a></li>
+    <li data-section="options"><a href="">Weitere Optionen</a></li>
+    <li data-section="publish"><a href="">Reportage veröffentlichen</a></li>
+  </ul>
+
+  <section data-name="intro">
+    <h3>Übersicht</h3>
+    <p>
+      Dies ist der Editor zum Bearbeiten einer Reportage. In der
+      Leiste auf der rechten Seite können Seiten und Kapitel
+      hinzugefügt und bearbeitet werden. Außerdem gibt es die
+      Möglichkeit, Bilder, Videos und Audiodateien zur Verwendung in
+      der Reportage hochzuladen. Auf der linken Seite befindet sich eine
+      Vorschau der Reportage, die sich bei Änderungen automatisch
+      aktualisiert.
+    </p>
+    <%= image_tag('pageflow/editor/help/hide_sidebar.png', :width => 150, :height => 150) %>
+    <p>
+      Die Seitenleiste kann durch einen Klick auf den Anfasser zur
+      Größenänderung ein- und ausgeblendet werden.
+    </p>
+    <p>
+      Sollte eine Reportage bereits veröffentlicht sein, bleiben
+      Änderungen solange öffentlich unsichtbar, bis die Reportage
+      erneut veröffentlicht wird. Eine Reportage kann stets nur von
+      einem Redakteur zur gleichen Zeit bearbeitet werden.
+    </p>
+  </section>
+
+  <section data-name="outline">
+    <h3>Kapitel und Seiten verwalten</h3>
+    <%= image_tag('pageflow/editor/help/moving_pages.png', :height => 130) %>
+    <p>
+      In der <em>Gliederung</em> werden die Kapitel und Seiten der
+      Reportage angezeigt. Mit den Schaltflächen <em>Neues
+      Kapitel</em> und <em>Neue Seite</em> können weitere Einträge
+      hinzugefügt werden.
+    </p>
+    <p>
+      Ein Klick auf einen der Gliederungseinträge führt zu den
+      Einstellungen des Kapitels bzw. der Seite. Dort gibt es auch
+      eine <em>Löschen</em>-Schaltfläche, mit der Einträge entfernt
+      werden können.
+    </p>
+    <p>
+      Reihenfolgeänderungen innerhalb der Gliederungen sind
+      per <em>Drag and Drop</em> möglich.
+    </p>
+  </section>
+
+  <section data-name="page">
+    <h3>Seiten konfigierieren</h3>
+
+    <p>
+      Wählen Sie zunächst einen Seitentyp.
+      <em>Hintergrundbild:</em> Statische Seite mit Text und einem
+      Hintegrundbild.
+      <em>Video:</em> Auf der Seite wird ein Video angezeigt, das
+      durch Steuerelemente gestartet und gestoppt werden kann.
+      <em>Hintergrund-Video:</em> Ähnlich der Hintergrundbild-Seite. Im
+      Hintergrund läuft allerdings ein Video-Loop.
+      <em>Audio:</em> Auf der Seite wird ein Player zur Wiedergabe
+      einer Audiodatei angezeigt.
+    </p>
+
+    <p>
+      Je nach Seitentyp stehen verschiedene Einstellungen zur
+      Verfügung. Im Reiter <em>Allgemein</em> können Texte für die
+      Seite festgelegt werden. Im Reiter <em>Dateien</em> wählt man
+      Bild- und Tonmateral aus. Unter <em>Optionen</em> kann
+      z.B. festgelegt werden, ob die Seite in der Navigationsleiste
+      erscheint und welche Animation für Seitenwechsel verwendet
+      werden soll.
+    </p>
+  </section>
+
+  <section data-name="files">
+    <h3>Dateien hochladen und verwalten</h3>
+
+    <p>
+      Von der Gliederung führt der Menüpunkt <em>Dateien
+        verwalten</em> zur Liste der bereits hochgeladenen
+      Dateien. Über die Schaltfläche <em>Hinzufügen > Hochladen</em> fügt man
+      weitere Dateien hinzu.
+    </p>
+    <p>
+      Nach dem Hochladen werden die Dateien zunächst auf dem Server
+      verarbeitet. Dies kann bei längeren Videos einige Minuten in
+      Anspruch nehmen. Klicken Sie auf das Thumbnail einer Datei, um
+      den aktuellen Verarbeitungsstatus einzublenden.
+    </p>
+    <p>
+      Dateien können bereits in Seiten verwendet werden, auch wenn die
+      Verarbeitung noch nicht abgeschlossen sein sollte.
+    </p>
+  </section>
+
+  <section data-name="reusing_files">
+    <h3>Dateien wiederverwenden</h3>
+
+    <p>
+      Dateien wie Videos, Audios und Bilder können in mehr als einem
+      Beitrag verwendet werden. So müssen z.B. Videos nicht mehrfach
+      verarbeitet werden.
+    </p>
+    <p>
+      Klicken Sie unter <em>Dateien verwalten</em> auf <em>Hinzufügen
+      > Wiederverwenden</em>, um andere Beiträge nach Dateien zu
+      durchsuchen und sie in den bearbeiteten Beitrag zu übernehmen.
+    </p>
+    <p>
+      Bitte beachten Sie, dass Änderungen an
+      der <em>Rechte</em>-Eigenschaft einer Datei sich auch auf alle
+      Beiträge auswirken, in denen die Datei verwendet wird.
+    </p>
+  </section>
+
+  <section data-name="options">
+    <h3>Titel und Optionen</h3>
+
+    <p>
+      Von der Gliederung aus können unter dem Menüpunkt <em>Titel und
+      Optionen</em> Texte festgelegt werden, die beim Teilen des
+      Beitrags über Social Media Dienste angezeigt werden sollen.
+    </p>
+    <p>
+      Außerdem kann eingestellt werden, dass beim Öffnen der Reportage
+      ein Hinweis eingeblendet wird, der dem Besucher das
+      Bedienkonzept erläutert.
+    </p>
+  </section>
+
+  <section data-name="publish">
+    <h3>Reportage veröffentlichen</h3>
+
+    <p>
+      Klicken Sie in der Gliederung auf die
+      Schaltfläche <em>Veröffentlichen</em>. Eine Reportage kann
+      entweder unbegrenzt oder bis zu einem bestimmten Stichtag
+      veröffentlicht werden.
+    </p>
+    <p>
+      Bei der Veröffentlichung wird ein Schnappschuss des aktuellen
+      Stands der Reportage online gestellt. Weitere Änderungen werden
+      erst durch das erneute Veröffentlichen der Reportage sichtbar.
+    </p>
+  </section>
+
+  <div class="footer">
+    <a class="close" href="#">Schließen</a>
+  </div>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/help_button.jst.ejs

@@ -0,0 +1 @@
+Hilfe anzeigen

data/app/assets/javascripts/pageflow/editor/templates/image_positioning.jst.ejs

@@ -0,0 +1,26 @@
+<div class="box">
+  <h2>Bildauschnitt anpassen</h2>
+
+  <label>Seitenverhältnis</label>
+  <ul class="screens">
+  </ul>
+
+  <div class="wrapper">
+    <div class="container">
+      <div class="mask top"></div>
+      <div class="mask left"></div>
+      <div class="mask bottom"></div>
+      <div class="mask right"></div>
+
+      <div class="slider horizontal">
+      </div>
+      <div class="slider vertical">
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <a href="" class="save">Speichern</a>
+    <a href="" class="close">Abbrechen</a>
+  </div>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/inputs/check_box.jst.ejs

@@ -0,0 +1,5 @@
+<input type="checkbox" />
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>

data/app/assets/javascripts/pageflow/editor/templates/inputs/file_input.jst.ejs

@@ -0,0 +1,9 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<div class="file_thumbnail"></div>
+<div class="file_name"></div>
+<a href="" class="edit_positioning" title="Bildausschnitt anpassen"></a>
+<a href="" class="unset" title="Zurücksetzen"></a>
+<a href="" class="choose" title="Ändern"></a>

data/app/assets/javascripts/pageflow/editor/templates/inputs/page_reference.jst.ejs

@@ -0,0 +1,6 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<p>Ziehen Sie Seiten per Drag &amp; Drop in die Seite um Verweise zu erstellen.</p>
+<ul class="chapters outline"></ul>

data/app/assets/javascripts/pageflow/editor/templates/inputs/select_input.jst.ejs

@@ -0,0 +1,5 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<select></select>

data/app/assets/javascripts/pageflow/editor/templates/inputs/slider_input.jst.ejs

@@ -0,0 +1,6 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<div class="value"></div>
+<div class="slider"></div>

data/app/assets/javascripts/pageflow/editor/templates/inputs/text_area_input.jst.ejs

@@ -0,0 +1,23 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+
+<!-- inline style for wysihtml5 to pick up -->
+<textarea style="width: 100%;"></textarea>
+
+<div class="toolbar">
+  <a data-wysihtml5-command="bold" title="Fett">bold</a>
+  <a data-wysihtml5-command="italic" title="Kursiv">italic</a>
+  <a data-wysihtml5-command="underline" title="Unterstrichen">underline</a>
+  <a data-wysihtml5-command="createLink" title="Link einfügen"></a>
+
+  <div data-wysihtml5-dialog="createLink" class="dialog" style="display: none;">
+    <label>
+      URL:
+      <input data-wysihtml5-dialog-field="href" value="http://">
+    </label>
+    <a data-wysihtml5-dialog-action="save">OK</a>
+    <a data-wysihtml5-dialog-action="cancel">Abbrechen</a>
+  </div>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/inputs/text_input.jst.ejs

@@ -0,0 +1,5 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<input type="text" />

data/app/assets/javascripts/pageflow/editor/templates/inputs/url_input.jst.ejs

@@ -0,0 +1,6 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<input type="text" />
+<div class="validation"></div>

data/app/assets/javascripts/pageflow/editor/templates/loading.jst.ejs

@@ -0,0 +1 @@
+<li class="loading">Daten werden geladen.</li>

data/app/assets/javascripts/pageflow/editor/templates/locked.jst.ejs

@@ -0,0 +1,13 @@
+<div class="checking notice">
+  <p>Der Beitrag wird zur Bearbeitung geöffnet. Bitte warten...</p>
+
+  <a class="close" href="#">Editor schließen</a>
+</div>
+
+<div class="error notice">
+  <div class="message"></div>
+
+  <a class="close" href="#">Editor schließen</a>
+  <a class="break" href="#">Stattdessen hier öffnen</a>
+</div>
+

data/app/assets/javascripts/pageflow/editor/templates/notifications.jst.ejs

@@ -0,0 +1,4 @@
+<li class="uploading"><span class="count">0</span> Dateien werden gerade hochgeladen.</li>
+<li class="failed"><span class="count">0</span> Datensätze konnten nicht gespeichert werden. <a class="retry">Erneut versuchen</a></li>
+<li class="saving">Änderungen werden gespeichert...</li>
+<li class="saved">Alle Änderungen wurden gespeichert.</li>

data/app/assets/javascripts/pageflow/editor/templates/other_entries_blank_slate.jst.ejs

@@ -0,0 +1 @@
+<li class="blank_slate">Keine anderen Beiträge verfügbar<li>

data/app/assets/javascripts/pageflow/editor/templates/other_entry_item.jst.ejs

@@ -0,0 +1,3 @@
+<a href="">
+  <span class="title"></span>
+</a>

data/app/assets/javascripts/pageflow/editor/templates/page_item.jst.ejs

@@ -0,0 +1,6 @@
+<a href="">
+  <span class="type_pictogram"></span>
+  <span class="page_thumbnail"></span>
+  <span class="title"></span>
+  <span class="failure_icon" title="Beim Speichern der Seite ist ein Fehler aufgetreten." />
+</a>

data/app/assets/javascripts/pageflow/editor/templates/publish_entry.jst.ejs

@@ -0,0 +1,41 @@
+<a class="back">Gliederung</a>
+
+<div class="files_pending notice">
+  <p>Bitte warten Sie bis alle Dateien des Beitrags verarbeitet wurden und überprüfen Sie das Ergebnis. Der Beitrag kann dann veröffentlicht werden.</p>
+  <p><a href="#files">Dateien anzeigen</a></p>
+</div>
+
+<div>
+  <div class="published notice">
+    <p>Eine Revision dieses Beitrags ist zur Zeit veröffentlicht.</p>
+    <p><a href="" target="_blank">Revisionen ansehen</a></p>
+  </div>
+
+  <div class="not_published notice">
+    Dieser Beitrag ist zur Zeit nicht veröffentlicht.
+  </div>
+
+  <h2>Akuellen Stand veröffentlichen</h2>
+
+  <div class="radio_input">
+    <input id="publish_entry_forever" type="radio" name="mode" value="publish_forever">
+    <label for="publish_entry_forever">Unbegrenzt</label>
+  </div>
+
+  <div class="radio_input">
+    <input id="publish_entry_until" type="radio" name="mode" value="publish_until">
+    <label for="publish_entry_until">Bis einschließlich</label>
+
+    <div class="publish_until_fields disabled">
+      <label>Datum
+        <input type="text" name="publish_until">
+      </label>
+
+      <label>Uhrzeit
+        <input type="text" name="publish_until_time" value="00:00">
+      </label>
+    </div>
+  </div>
+
+  <button class="save" disabled>Veröffentlichen</a>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/select_button.jst.ejs

@@ -0,0 +1,8 @@
+<button class="">
+  <span class="label">Ausw&auml;hlen</span>
+</button>
+
+<div class="dropdown">
+  <ul class="dropdown-menu" role="menu">
+  </ul>
+</div>

data/app/assets/javascripts/pageflow/editor/templates/tabs_view.jst.ejs

@@ -0,0 +1,2 @@
+<ul></ul>
+<div></div>

data/app/assets/javascripts/pageflow/editor/views/audio_file_item_view.js

@@ -0,0 +1,14 @@
+pageflow.AudioFileItemView = pageflow.FileItemView.extend({
+  metaDataViews: function() {
+    return [
+      new pageflow.FileMetaDataItemView({
+        model: this.model,
+        attribute: 'format'
+      }),
+      new pageflow.FileMetaDataItemView({
+        model: this.model,
+        attribute: 'duration'
+      })
+    ];
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/chapter_item_view.js

@@ -0,0 +1,31 @@
+pageflow.ChapterItemView = Backbone.Marionette.ItemView.extend({
+  tagName: 'li',
+  template: 'templates/chapter_item',
+
+  ui: {
+    title: '> a > .title',
+    number: '> a > .number',
+    pages: 'ul.pages'
+  },
+
+  modelEvents: {
+    change: 'update'
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.SortableCollectionView({
+      el: this.ui.pages,
+      collection: this.model.pages,
+      itemViewConstructor: this.options.pageItemView || pageflow.NavigatablePageItemView,
+      itemViewOptions: this.options.pageItemViewOptions,
+      connectWith: 'ul.pages'
+    }));
+
+    this.update();
+  },
+
+  update: function() {
+    this.ui.title.text(this.model.get('title') || '(Unbenannt)');
+    this.ui.number.text('Kapitel ' + (this.model.get('position') + 1));
+  }
+});