From 48b0f35fee23e0316d2a3ef735bc4e18de1699ec Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Wed, 4 Jul 2018 17:24:32 +0200
Subject: [PATCH] Move template plugin HTML and CSS into a separate file
---
Resources/Plugins/templates/browser.js | 120 +++----------
Resources/Plugins/templates/modal.html | 227 +++++++++++++++++++++++++
TweetDuck.csproj | 3 +-
3 files changed, 248 insertions(+), 102 deletions(-)
create mode 100644 Resources/Plugins/templates/modal.html
diff --git a/Resources/Plugins/templates/browser.js b/Resources/Plugins/templates/browser.js
index c4e9c5ae..ade7016c 100644
--- a/Resources/Plugins/templates/browser.js
+++ b/Resources/Plugins/templates/browser.js
@@ -32,6 +32,16 @@ enabled(){
});
};
+ // setup
+
+ this.htmlModal = null;
+
+ $TDP.readFileRoot(this.$token, "modal.html").then(contents => {
+ this.htmlModal = contents;
+ }).catch(err => {
+ $TD.alert("error", "Problem loading data for the template plugin: "+err.message);
+ });
+
// button
var buttonHTML = '<button class="manage-templates-btn needsclick btn btn-on-blue full-width txt-left margin-b--12 padding-v--6 padding-h--12"><i class="icon icon-bookmark"></i><span class="label padding-ls">Manage templates</span></button>';
@@ -45,46 +55,6 @@ enabled(){
dockedComposePanel.find(".js-tweet-type-button").first().before(buttonHTML);
}
- // css
-
- this.css = window.TDPF_createCustomStyle(this);
- this.css.insert(".manage-templates-btn.active { color: #fff; box-shadow: 0 0 2px 3px #50a5e6; outline: 0; }");
-
- this.css.insert("#templates-modal-wrap { width: 100%; height: 100%; padding: 49px; position: absolute; z-index: 999; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.5); }");
- this.css.insert("#templates-modal { width: 100%; height: 100%; min-width: 500px; background-color: #fff; display: flex; }");
- this.css.insert("#templates-modal > div { display: flex; flex-direction: column; }");
-
- this.css.insert(".templates-modal-bottom { flex: 0 0 auto; padding: 16px; }");
- this.css.insert("#template-list .templates-modal-bottom { display: flex; justify-content: space-between; }");
- this.css.insert("#template-editor .templates-modal-bottom { text-align: right; }");
-
- this.css.insert("#template-list { height: 100%; flex: 1 1 auto; }");
- this.css.insert("#template-list ul { list-style-type: none; font-size: 24px; color: #222; flex: 1 1 auto; padding: 12px; overflow-y: auto; }");
- this.css.insert("#template-list li { display: block; width: 100%; padding: 4px 8px; box-sizing: border-box; }");
- this.css.insert("#template-list li[data-template] { cursor: pointer; }");
- this.css.insert("#template-list li[data-template]:hover { background-color: #d8d8d8; }");
- this.css.insert("#template-list li span { white-space: nowrap; }");
- this.css.insert("#template-list li .icon { opacity: 0.6; margin-left: 4px; padding: 3px; }");
- this.css.insert("#template-list li .icon:hover { opacity: 1; }");
- this.css.insert("#template-list li .template-actions { float: right; }");
-
- this.css.insert("#template-editor { height: 100%; flex: 0 0 auto; width: 25vw; min-width: 225px; max-width: 400px; background-color: #485865; }");
- this.css.insert(".template-editor-form { flex: 1 1 auto; padding: 12px 16px; font-size: 14px; overflow-y: auto; }");
- this.css.insert(".template-editor-form .compose-text-title { margin: 24px 0 9px; }");
- this.css.insert(".template-editor-form .compose-text-title:first-child { margin-top: 0; }");
- this.css.insert(".template-editor-form input, .template-editor-form textarea { color: #111; background-color: #fff; border: none; border-radius: 0; }");
- this.css.insert(".template-editor-form input:focus, .template-editor-form textarea:focus { box-shadow: inset 0 1px 3px rgba(17, 17, 17, 0.1), 0 0 8px rgba(80, 165, 230, 0.6); }");
- this.css.insert(".template-editor-form textarea { height: 146px; font-size: 14px; padding: 10px; resize: none; }");
- this.css.insert(".template-editor-form .template-editor-tips-button { cursor: pointer; }");
- this.css.insert(".template-editor-form .template-editor-tips-button .icon { font-size: 12px; vertical-align: -5%; margin-left: 4px; }");
- this.css.insert(".template-editor-form .template-editor-tips { display: none; }");
- this.css.insert(".template-editor-form .template-editor-tips p { margin: 10px 0; }");
- this.css.insert(".template-editor-form .template-editor-tips p:first-child { margin-top: 0; }");
- this.css.insert(".template-editor-form .template-editor-tips li:nth-child(2n+1) { margin-top: 5px; padding-left: 6px; font-family: monospace; }");
- this.css.insert(".template-editor-form .template-editor-tips li:nth-child(2n) { margin-top: 1px; padding-left: 14px; opacity: 0.66; }");
-
- this.css.insert(".invisible { display: none !important; }");
-
// template implementation
var readTemplateTokens = (contents, tokenData) => {
@@ -258,67 +228,18 @@ enabled(){
this.editingTemplate = null;
var showTemplateModal = () => {
- $(".manage-templates-btn").addClass("active");
+ $(".js-app-content").prepend(this.htmlModal);
- let html = `
-<div id="templates-modal-wrap" class="scroll-v scroll-styled-v">
- <div id="templates-modal">
- <div id="template-list">
- <ul></ul>
-
- <div class="templates-modal-bottom">
- <button data-action="close" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Close</span></button>
- <button data-action="new-template" class="Button--primary"><i class="icon icon-plus icon-small padding-rs"></i><span class="label">New Template</span></button>
- </div>
- </div>
-
- <div id="template-editor" class="invisible">
- <div class="template-editor-form">
- <div class="compose-text-title">Template Name</div>
- <input name="template-name" type="text">
-
- <div class="compose-text-title">Contents</div>
- <textarea name="template-contents" class="compose-text scroll-v scroll-styled-v scroll-styled-h scroll-alt"></textarea>
-
- <div class="compose-text-title template-editor-tips-button">Advanced <i class="icon icon-arrow-d"></i></div>
- <div class="template-editor-tips">
- <p>You can use the following tokens. All tokens except for <span style="font-family: monospace">{ajax}</span> can only be used once.</p>
- <ul>
- <li>{cursor}</li>
- <li>Location where the cursor is placed</li>
- <li>{cursor#<selectionlength>}</li>
- <li>Places cursor and selects a set amount of characters</li>
- <li>{ajax#<url>}</li>
- <li>Replaced with the result of a cross-origin ajax request</li>
- <li>{ajax#<eval>#<url>}</li>
- <li>Allows parsing the ajax request using <span style="font-family: monospace">$</span> as the placeholder for the result<br>Example: <span style="font-family: monospace">$.substring(0,5)</span></li>
- </ul>
- <p>To use special characters in the tweet text, escape them with a backslash:
- <br><span style="font-family: monospace"> \\{ \\} \\# \\\\</span>
- </p>
- </div>
- </div>
-
- <div class="templates-modal-bottom">
- <button data-action="editor-cancel" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Cancel</span></button>
- <button data-action="editor-confirm" class="Button--primary" style="margin-left:4px"><i class="icon icon-check icon-small padding-rs"></i><span class="label">Confirm</span></button>
- </div>
- </div>
- </div>
-</div>`;
+ /* TODO possibly implement this later
-/* TODO possibly implement this later
-
-<li>{paste}</li>
-<li>Paste text or an image from clipboard</li>
-<li>{paste#text}</li>
-<li>Paste only if clipboard has text</li>
-<li>{paste#image}</li>
-<li>Paste only if clipboard has an image</li>
-
-*/
+ <li>{paste}</li>
+ <li>Paste text or an image from clipboard</li>
+ <li>{paste#text}</li>
+ <li>Paste only if clipboard has text</li>
+ <li>{paste#image}</li>
+ <li>Paste only if clipboard has an image</li>
- $(".js-app-content").prepend(html);
+ */
let ele = $("#templates-modal-wrap").first();
@@ -409,7 +330,6 @@ enabled(){
var hideTemplateModal = function(){
$("#templates-modal-wrap").remove();
- $(".manage-templates-btn").removeClass("active");
};
var toggleEditor = function(){
@@ -468,8 +388,6 @@ ready(){
}
disabled(){
- this.css.remove();
-
$(".manage-templates-btn").remove();
$("#templates-modal-wrap").remove();
diff --git a/Resources/Plugins/templates/modal.html b/Resources/Plugins/templates/modal.html
new file mode 100644
index 00000000..ca4c31d5
--- /dev/null
+++ b/Resources/Plugins/templates/modal.html
@@ -0,0 +1,227 @@
+<div id="templates-modal-wrap" class="scroll-v scroll-styled-v">
+ <div id="templates-modal">
+ <div id="template-list">
+ <ul></ul>
+
+ <div class="templates-modal-bottom">
+ <button data-action="close" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Close</span></button>
+ <button data-action="new-template" class="Button--primary"><i class="icon icon-plus icon-small padding-rs"></i><span class="label">New Template</span></button>
+ </div>
+ </div>
+
+ <div id="template-editor" class="invisible">
+ <div class="template-editor-form">
+ <div class="compose-text-title">Template Name</div>
+ <input name="template-name" type="text">
+
+ <div class="compose-text-title">Contents</div>
+ <textarea name="template-contents" class="compose-text scroll-v scroll-styled-v scroll-styled-h scroll-alt"></textarea>
+
+ <div class="compose-text-title template-editor-tips-button">Advanced <i class="icon icon-arrow-d"></i></div>
+ <div class="template-editor-tips">
+ <p>You can use the following tokens. All tokens except for <span style="font-family: monospace">{ajax}</span> can only be used once.</p>
+ <ul>
+ <li>{cursor}</li>
+ <li>Location where the cursor is placed</li>
+ <li>{cursor#<selectionlength>}</li>
+ <li>Places cursor and selects a set amount of characters</li>
+ <li>{ajax#<url>}</li>
+ <li>Replaced with the result of a cross-origin ajax request</li>
+ <li>{ajax#<eval>#<url>}</li>
+ <li>Allows parsing the ajax request using <span style="font-family: monospace">$</span> as the placeholder for the result<br>Example: <span style="font-family: monospace">$.substring(0,5)</span></li>
+ </ul>
+ <p>To use special characters in the tweet text, escape them with a backslash:
+ <br><span style="font-family: monospace"> \{ \} \# \\</span>
+ </p>
+ </div>
+ </div>
+
+ <div class="templates-modal-bottom">
+ <button data-action="editor-cancel" class="Button--secondary"><i class="icon icon-close icon-small padding-rs"></i><span class="label">Cancel</span></button>
+ <button data-action="editor-confirm" class="Button--primary" style="margin-left:4px"><i class="icon icon-check icon-small padding-rs"></i><span class="label">Confirm</span></button>
+ </div>
+ </div>
+ </div>
+
+ <style type="text/css">
+
+ /* General */
+
+ #templates-modal-wrap {
+ width: 100%;
+ height: 100%;
+ padding: 49px;
+ position: absolute;
+ z-index: 999;
+ box-sizing: border-box;
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ #templates-modal {
+ width: 100%;
+ height: 100%;
+ min-width: 500px;
+ background-color: #fff;
+ display: flex;
+ }
+
+ #templates-modal > div {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .templates-modal-bottom {
+ flex: 0 0 auto;
+ padding: 16px;
+ }
+
+ #template-list .templates-modal-bottom {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ #template-editor .templates-modal-bottom {
+ text-align: right;
+ }
+
+ .manage-templates-btn {
+ /* modifies the Manage Templates button while open */
+ color: #fff;
+ box-shadow: 0 0 2px 3px #50a5e6;
+ outline: 0;
+ }
+
+ /* Template list */
+
+ #template-list {
+ height: 100%;
+ flex: 1 1 auto;
+ }
+
+ #template-list ul {
+ list-style-type: none;
+ font-size: 24px;
+ color: #222;
+ flex: 1 1 auto;
+ padding: 12px;
+ overflow-y: auto;
+ }
+
+ #template-list li {
+ display: block;
+ width: 100%;
+ padding: 4px 8px;
+ box-sizing: border-box;
+ }
+
+ #template-list li[data-template] {
+ cursor: pointer;
+ }
+
+ #template-list li[data-template]:hover {
+ background-color: #d8d8d8;
+ }
+
+ #template-list li span {
+ white-space: nowrap;
+ }
+
+ #template-list li .icon {
+ opacity: 0.6;
+ margin-left: 4px;
+ padding: 3px;
+ }
+
+ #template-list li .icon:hover {
+ opacity: 1;
+ }
+
+ #template-list li .template-actions {
+ float: right;
+ }
+
+ /* Template editor */
+
+ #template-editor {
+ height: 100%;
+ flex: 0 0 auto;
+ width: 25vw;
+ min-width: 225px;
+ max-width: 400px;
+ background-color: #485865;
+ }
+
+ #template-editor.invisible {
+ display: none;
+ }
+
+ .template-editor-form {
+ flex: 1 1 auto;
+ padding: 12px 16px;
+ font-size: 14px;
+ overflow-y: auto;
+ }
+
+ .template-editor-form .compose-text-title {
+ margin: 24px 0 9px;
+ }
+
+ .template-editor-form .compose-text-title:first-child {
+ margin-top: 0;
+ }
+
+ .template-editor-form input, .template-editor-form textarea {
+ color: #111;
+ background-color: #fff;
+ border: none;
+ border-radius: 0;
+ }
+
+ .template-editor-form input:focus, .template-editor-form textarea:focus {
+ box-shadow: inset 0 1px 3px rgba(17, 17, 17, 0.1), 0 0 8px rgba(80, 165, 230, 0.6);
+ }
+
+ .template-editor-form textarea {
+ height: 146px;
+ font-size: 14px;
+ padding: 10px;
+ resize: none;
+ }
+
+ /* Template tips */
+
+ .template-editor-form .template-editor-tips-button {
+ cursor: pointer;
+ }
+
+ .template-editor-form .template-editor-tips-button .icon {
+ font-size: 12px;
+ vertical-align: -5%;
+ margin-left: 4px;
+ }
+
+ .template-editor-form .template-editor-tips {
+ display: none;
+ }
+
+ .template-editor-form .template-editor-tips p {
+ margin: 10px 0;
+ }
+
+ .template-editor-form .template-editor-tips p:first-child {
+ margin-top: 0;
+ }
+
+ .template-editor-form .template-editor-tips li:nth-child(2n+1) {
+ margin-top: 5px;
+ padding-left: 6px;
+ font-family: monospace;
+ }
+
+ .template-editor-form .template-editor-tips li:nth-child(2n) {
+ margin-top: 1px;
+ padding-left: 14px;
+ opacity: 0.66;
+ }
+ </style>
+</div>
diff --git a/TweetDuck.csproj b/TweetDuck.csproj
index 8c21a886..9ab4a5b9 100644
--- a/TweetDuck.csproj
+++ b/TweetDuck.csproj
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Import Project="packages\CefSharp.WinForms.66.0.0-CI2629\build\CefSharp.WinForms.props" Condition="Exists('packages\CefSharp.WinForms.66.0.0-CI2629\build\CefSharp.WinForms.props')" />
<Import Project="packages\CefSharp.Common.66.0.0-CI2629\build\CefSharp.Common.props" Condition="Exists('packages\CefSharp.Common.66.0.0-CI2629\build\CefSharp.Common.props')" />
@@ -361,6 +361,7 @@
<None Include="Resources\Plugins\reply-account\configuration.default.js" />
<None Include="Resources\Plugins\templates\.meta" />
<None Include="Resources\Plugins\templates\browser.js" />
+ <None Include="Resources\Plugins\templates\modal.html" />
<None Include="Resources\Plugins\timeline-polls\.meta" />
<None Include="Resources\Plugins\timeline-polls\browser.js" />
<None Include="Resources\Scripts\code.js" />