Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-01-01 05:06:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

update(examples): Update examples to use new ExtensionRegistry api

Browse source 
- Remove deprecated use of DraftStoreExtension and DraftStore.register
This commit is contained in:
Juan Tejada 2015-12-04 22:09:25 -08:00
parent 8a3633d509
commit 92365294a3
7 changed files with 181 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/N1-Composer-Templates/lib/main.es6
View file

@ -1,29 +1,27 @@
import {PreferencesUIStore, ComponentRegistry, DraftStore} from 'nylas-exports';
import {PreferencesUIStore, ComponentRegistry, ExtensionRegistry} from 'nylas-exports';
import TemplatePicker from './template-picker';
import TemplateStatusBar from './template-status-bar';
import Extension from './template-draft-extension';
import TemplateComposerExtension from './template-composer-extension';
module.exports = {
item: null, // The DOM item the main React component renders into
activate(state = {}) {
this.state = state;
this.preferencesTab = new PreferencesUIStore.TabItem({
tabId: "Quick Replies",
displayName: "Quick Replies",
component: require("./preferences-templates"),
tabId: 'Quick Replies',
displayName: 'Quick Replies',
component: require('./preferences-templates'),
});
ComponentRegistry.register(TemplatePicker, {role: 'Composer:ActionButton'});
ComponentRegistry.register(TemplateStatusBar, {role: 'Composer:Footer'});
PreferencesUIStore.registerPreferencesTab(this.preferencesTab);
return DraftStore.registerExtension(Extension);
ExtensionRegistry.Composer.register(TemplateComposerExtension);
},
deactivate() {
ComponentRegistry.unregister(TemplatePicker);
ComponentRegistry.unregister(TemplateStatusBar);
PreferencesUIStore.unregisterPreferencesTab(this.preferencesTab.sectionId);
return DraftStore.unregisterExtension(Extension);
ExtensionRegistry.Composer.unregister(TemplateComposerExtension);
},
serialize() { return this.state; },

4
examples/N1-Composer-Templates/lib/preferences-templates.cjsx
View file

@ -1,13 +1,13 @@
_ = require 'underscore'
{Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
{AccountStore, Utils, React} = require 'nylas-exports'
TemplateStore = require './template-store';
TemplateStore = require './template-store'
class PreferencesTemplates extends React.Component
@displayName: 'PreferencesTemplates'
constructor: (@props) ->
TemplateStore.init();
TemplateStore.init()
@_templateSaveQueue = {}
@state =

23
examples/N1-Composer-Templates/lib/template-draft-extension.es6 → examples/N1-Composer-Templates/lib/template-composer-extension.es6
View file

@ -1,6 +1,6 @@
import {DraftStoreExtension} from 'nylas-exports';
import {DOMUtils, ComposerExtension} from 'nylas-exports';
class TemplatesDraftStoreExtension extends DraftStoreExtension {
class TemplatesComposerExtension extends ComposerExtension {
static warningsForSending(draft) {
const warnings = [];
@ -18,7 +18,7 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
}
}
static onMouseUp(editableNode, range) {
static onClick(editableNode, range) {
const ref = range.startContainer;
let parent = (ref != null) ? ref.parentNode : undefined;
let parentCodeNode = null;
@ -42,11 +42,14 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
}
}
static onTabDown(editableNode, range, event) {
if (event.shiftKey) {
return this.onTabSelectNextVar(editableNode, range, event, -1);
static onTabDown(editableNode, selection, event) {
if (event.key === 'Tab') {
const range = DOMUtils.getRangeInScope(editableNode);
if (event.shiftKey) {
this.onTabSelectNextVar(editableNode, range, event, -1);
}
this.onTabSelectNextVar(editableNode, range, event, 1);
}
return this.onTabSelectNextVar(editableNode, range, event, 1);
}
static onTabSelectNextVar(editableNode, range, event, delta) {
@ -96,9 +99,7 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
}
}
static onInput(editableNode) {
const selection = document.getSelection();
static onContentChanged(editableNode, selection) {
const isWithinNode = (node)=> {
let test = selection.baseNode;
while (test !== editableNode) {
@ -125,4 +126,4 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
}
module.exports = TemplatesDraftStoreExtension;
module.exports = TemplatesComposerExtension;

52
examples/N1-Quick-Schedule/docs/availability-draft-extension.html → examples/N1-Quick-Schedule/docs/availability-composer-extension.html
View file

@ -10,7 +10,7 @@
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To &hellip;</a>
@ -18,67 +18,67 @@
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="availability-draft-extension.html">
availability-draft-extension.coffee
</a>
<a class="source" href="calendar-button.html">
calendar-button.coffee
</a>
<a class="source" href="main.html">
main.coffee
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>availability-draft-extension.coffee</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
{DraftStoreExtension} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>
{ComposerExtension} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>
request = <span class="hljs-built_in">require</span> <span class="hljs-string">'request'</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AvailabilityDraftExtension</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">DraftStoreExtension</span></span></pre></div></div>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AvailabilityDraftExtension</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ComposerExtension</span></span></pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>When subclassing the DraftStoreExtension, you can add your own custom logic
<p>When subclassing the ComposerExtension, you can add your own custom logic
to execute before a draft is sent in the @finalizeSessionBeforeSending
method. Here, we’re registering the events before we send the draft.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@finalizeSessionBeforeSending</span>: <span class="hljs-function"><span class="hljs-params">(session)</span> -&gt;</span>
body = session.draft().body
participants = session.draft().participants()
@ -97,9 +97,9 @@ method. Here, we’re registering the events before we send the draft.</p>
<span class="hljs-built_in">module</span>.exports = AvailabilityDraftExtension</pre></div></div>
</li>
</ul>
</div>
</body>

248
examples/N1-Quick-Schedule/docs/main.html
View file

@ -10,7 +10,7 @@
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To &hellip;</a>
@ -18,34 +18,34 @@
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="availability-draft-extension.html">
availability-draft-extension.coffee
</a>
<a class="source" href="calendar-button.html">
calendar-button.coffee
</a>
<a class="source" href="main.html">
main.coffee
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
@ -55,7 +55,7 @@ to email. Whoever receives your email with your availabilities can click on
your availabilities to schedule an appointment with you.</p>
</div>
<div class="content"><div class='highlight'><pre>
{ComponentRegistry,
DatabaseStore,
@ -70,20 +70,20 @@ AvailabilityDraftExtension = <span class="hljs-built_in">require</span> <span cl
path = <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">"electron-safe-ipc/host"</span>)
ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remote'</span>).<span class="hljs-built_in">require</span>(path)</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<p>A simple class for building HTML in code</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HtmlNode</span></span>
<span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(name)</span> -&gt;</span>
<span class="hljs-property">@name</span> = name
@ -123,26 +123,26 @@ ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remo
<span class="hljs-built_in">module</span>.exports =</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<h2 id="package-methods">Package Methods</h2>
</div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
@ -150,15 +150,15 @@ ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remo
saved state using <code>serialize</code> it is provided.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">activate</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@state</span>)</span> -&gt;</span></pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">&#182;</a>
</div>
@ -168,33 +168,33 @@ application, to sit along with the other React components already inside
<code>&#39;Composer:ActionButton&#39;</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> ComponentRegistry.register CalendarButton,
<span class="hljs-attribute">role</span>: <span class="hljs-string">'Composer:ActionButton'</span></pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">&#182;</a>
</div>
<p>You can add your own extensions to the N1 Composer view and the original
DraftStore by invoking <code>DraftStore.registerExtension</code> with a subclass of
<code>DraftStoreExtension</code>.</p>
Composer by invoking <code>ExtensionRegistry.Composer.register</code> with a subclass of
<code>ComposerExtension</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> DraftStore.registerExtension AvailabilityDraftExtension</pre></div></div>
<div class="content"><div class='highlight'><pre> ExtensionRegistry.Composer.register AvailabilityDraftExtension</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">&#182;</a>
</div>
@ -202,15 +202,15 @@ DraftStore by invoking <code>DraftStore.registerExtension</code> with a subclass
elsewhere in the package.</p>
</div>
<div class="content"><div class='highlight'><pre> ipc.<span class="hljs-literal">on</span> <span class="hljs-string">"fromRenderer"</span>, <span class="hljs-function"><span class="hljs-params">(args...)</span> =&gt;</span> <span class="hljs-property">@_onCalendarEvent</span>(args...)</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">&#182;</a>
</div>
@ -219,15 +219,15 @@ You can return a state object that will be passed back to your package
when it is re-activated.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">serialize</span>: <span class="hljs-function">-&gt;</span></pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">&#182;</a>
</div>
@ -237,24 +237,24 @@ watching any files, holding external resources, providing commands or
subscribing to events, release them here.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">deactivate</span>: <span class="hljs-function">-&gt;</span>
ComponentRegistry.unregister CalendarButton
DraftStore.unregister AvailabilityDraftExtension</pre></div></div>
ExtensionRegistry.Composer.unregister AvailabilityDraftExtension</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">&#182;</a>
</div>
<h2 id="internal-methods">Internal Methods</h2>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-attribute">_onCalendarEvent</span>: <span class="hljs-function"><span class="hljs-params">(event,data)</span> -&gt;</span>
<span class="hljs-keyword">switch</span> event
@ -268,95 +268,95 @@ subscribing to events, release them here.</p>
<span class="hljs-keyword">when</span> <span class="hljs-string">"available_times"</span>
{draftClientId,eventData,events} = data
<span class="hljs-property">@_addBlockToDraft</span>(events,draftClientId,eventData);</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">&#182;</a>
</div>
<p>Sends a message to the calendar window</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_sendToCalendar</span>: <span class="hljs-function"><span class="hljs-params">(event,data)</span> -&gt;</span>
ipc.send(<span class="hljs-string">"fromMain"</span>, event, JSON.stringify(data))</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">&#182;</a>
</div>
<p>Grabs the current draft text, appends the quick-schedule HTML block to it, and saves</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_addBlockToDraft</span>: <span class="hljs-function"><span class="hljs-params">(events,draftClientId,eventData)</span> -&gt;</span></pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">&#182;</a>
</div>
<p>Obtain the session for the current draft.</p>
</div>
<div class="content"><div class='highlight'><pre> DraftStore.sessionForClientId(draftClientId).<span class="hljs-keyword">then</span> (session) =&gt;
draftHtml = session.draft().body
text = QuotedHTMLParser.removeQuotedHTML(draftHtml)</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">&#182;</a>
</div>
<p>add the block</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-built_in">console</span>.log(<span class="hljs-property">@_createBlock</span>(events,eventData));
text += <span class="hljs-string">"&lt;br/&gt;"</span>+<span class="hljs-property">@_createBlock</span>(events,eventData)+<span class="hljs-string">"&lt;br/&gt;"</span>;
newDraftHtml = QuotedHTMLParser.appendQuotedHTML(text, draftHtml)</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">&#182;</a>
</div>
<p>update the draft</p>
</div>
<div class="content"><div class='highlight'><pre> session.changes.add(<span class="hljs-attribute">body</span>: newDraftHtml)
session.changes.commit()</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">&#182;</a>
</div>
@ -364,49 +364,49 @@ subscribing to events, release them here.</p>
that can be inserted into an email message</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_createBlock</span>: <span class="hljs-function"><span class="hljs-params">(events,eventData)</span> -&gt;</span></pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">&#182;</a>
</div>
<p>Group the events by their <code>date</code>, to give one box per day</p>
</div>
<div class="content"><div class='highlight'><pre> byDay = {}
<span class="hljs-keyword">for</span> event <span class="hljs-keyword">in</span> events
(byDay[event.date] ?= []).push(event)</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">&#182;</a>
</div>
<p>Create an HtmlNode and write its attributes and child nodes</p>
</div>
<div class="content"><div class='highlight'><pre> block = <span class="hljs-keyword">new</span> HtmlNode(<span class="hljs-string">"div"</span>)
.attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"quick-schedule"</span>)
.attr(<span class="hljs-string">"data-quick-schedule"</span>,JSON.stringify({</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">&#182;</a>
</div>
@ -414,7 +414,7 @@ that can be inserted into an email message</p>
elsewhere (e.g. right before sending the draft, etc)</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">event</span>: eventData
<span class="hljs-attribute">times</span>: ({start,end,serverKey} = e <span class="hljs-keyword">for</span> e <span class="hljs-keyword">in</span> events)
}), <span class="hljs-literal">true</span>)
@ -448,20 +448,20 @@ elsewhere (e.g. right before sending the draft, etc)</p>
.style(<span class="hljs-string">"display"</span>,<span class="hljs-string">"flex"</span>)
.style(<span class="hljs-string">"flex-wrap"</span>,<span class="hljs-string">"wrap"</span>)
.style(<span class="hljs-string">"padding"</span>,<span class="hljs-string">"10px 0"</span>)</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">&#182;</a>
</div>
<p>Create one div per day, and write each time slot in as a line</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> dayText,dayEvents <span class="hljs-keyword">of</span> byDay
dayBlock = daysContainer.appendNode(<span class="hljs-string">"div"</span>)
.attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"day-container"</span>)
@ -482,35 +482,35 @@ elsewhere (e.g. right before sending the draft, etc)</p>
times = dayBlock.appendNode(<span class="hljs-string">"div"</span>)
.attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"day-times"</span>)
.style(<span class="hljs-string">"padding"</span>,<span class="hljs-string">"5px"</span>)</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">&#182;</a>
</div>
<p>One line per time slot</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> e <span class="hljs-keyword">in</span> dayEvents</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">&#182;</a>
</div>
<p>The URL points to the event page with this time slot selected</p>
</div>
<div class="content"><div class='highlight'><pre> eventUrl = url.format({
<span class="hljs-attribute">protocol</span>: <span class="hljs-string">"http"</span>
<span class="hljs-attribute">host</span>: <span class="hljs-string">"localhost:8888"</span>
@ -527,9 +527,9 @@ elsewhere (e.g. right before sending the draft, etc)</p>
.appendText(e.time)
<span class="hljs-keyword">return</span> block.toString()</pre></div></div>
</li>
</ul>
</div>
</body>

9
examples/N1-Quick-Schedule/lib/availability-draft-extension.cjsx → examples/N1-Quick-Schedule/lib/availability-composer-extension.cjsx
View file

@ -1,10 +1,9 @@
{DraftStoreExtension} = require 'nylas-exports'
{ComposerExtension} = require 'nylas-exports'
request = require 'request'
class AvailabilityDraftExtension extends DraftStoreExtension
class AvailabilityComposerExtension extends ComposerExtension
# When subclassing the DraftStoreExtension, you can add your own custom logic
# When subclassing the ComposerExtension, you can add your own custom logic
# to execute before a draft is sent in the @finalizeSessionBeforeSending
# method. Here, we're registering the events before we send the draft.
@finalizeSessionBeforeSending: (session) ->
@ -24,4 +23,4 @@ class AvailabilityDraftExtension extends DraftStoreExtension
console.log(error,resp,data)
module.exports = AvailabilityDraftExtension
module.exports = AvailabilityComposerExtension

11
examples/N1-Quick-Schedule/lib/main.cjsx
View file

@ -8,13 +8,14 @@
DatabaseStore,
DraftStore,
QuotedHTMLParser,
ExtensionRegistry,
Event} = require 'nylas-exports'
url = require('url')
qs = require("querystring")
CalendarButton = require './calendar-button'
AvailabilityDraftExtension = require './availability-draft-extension'
AvailabilityComposerExtension = require './availability-composer-extension'
protocol = require('remote').require('protocol')
@ -73,9 +74,9 @@ module.exports =
role: 'Composer:ActionButton'
# You can add your own extensions to the N1 Composer view and the original
# DraftStore by invoking `DraftStore.registerExtension` with a subclass of
# `DraftStoreExtension`.
DraftStore.registerExtension AvailabilityDraftExtension
# Composer by invoking `ExtensionRegistry.Composer.register` with a subclass of
# `ComposerExtension`.
ExtensionRegistry.Composer.register AvailabilityComposerExtension
# Register a protocol that allows the calendar window to pass data back to the plugin
# with web requests
@ -106,7 +107,7 @@ module.exports =
#
deactivate: ->
ComponentRegistry.unregister CalendarButton
DraftStore.unregisterExtension AvailabilityDraftExtension
ExtensionRegistry.Composer.unregister AvailabilityComposerExtension
if NylasEnv.isMainWindow()
protocol.unregisterProtocol('quick-schedule')