Merge pull request #31 from LighthouseBlog/feature/github-gist-conver…

…sion-plugin Feature/GitHub gist conversion plugin
LighthouseBlog · Sep 30, 2017 · 79e235d · 79e235d
2 parents 576d474 + 1eb9d24
commit 79e235d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/src/app/_plugins/gist.plugin.ts b/src/app/_plugins/gist.plugin.ts
@@ -3,13 +3,14 @@ import { EditorService } from '../_services/editor.service';
 declare var $: any;
 
 function initializePlugin(editorService: EditorService) {
+
   $.extend($.FroalaEditor.POPUP_TEMPLATES, {
     'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
   });
 
   // Define popup buttons.
   $.extend($.FroalaEditor.DEFAULTS, {
-    popupButtons: ['popupClose', '|', 'popupButton1'],
+    popupButtons: ['popupClose', '|'],
   });
 
   // The custom popup is defined inside a plugin (new or existing).
@@ -31,7 +32,15 @@ function initializePlugin(editorService: EditorService) {
         buttons: popup_buttons,
         custom_layer: `
         <div>
-            <input id="git-url" placeholder="Url or Gist Id" value="">
+          <div class="fr-link-insert-layer fr-layer fr-active" id="fr-link-insert-layer-1">
+            <div class="fr-input-line">
+              <input id="fr-link-insert-layer-url-1" name="href" type="text" class="fr-link-attr" placeholder="URL" tabindex="1" dir="auto">
+              <label for="fr-link-insert-layer-url-1">URL</label>
+            </div>
+            <div class="fr-action-buttons">
+              <button class="fr-command" role="button" data-cmd="popupButton1" href="#" tabindex="2" type="button">Convert</button>
+            </div>
+          </div>
         </div>`
       };
 
@@ -42,7 +51,7 @@ function initializePlugin(editorService: EditorService) {
     }
 
     function convertUrl() {
-      const url = $('#git-url').val();
+      const url = $('#fr-link-insert-layer-url-1').val();
       return editorService.convertToHtml(url);
     }
 
@@ -79,6 +88,7 @@ function initializePlugin(editorService: EditorService) {
 
     // Hide the custom popup.
     function hidePopup () {
+      $('#fr-link-insert-layer-url-1').val('');
       editor.popups.hide('customPlugin.popup');
     }
 
@@ -95,8 +105,10 @@ function initializePlugin(editorService: EditorService) {
   $.FroalaEditor.RegisterCommand('github', {
     title: 'Convert Url to GISTlike code',
     icon: 'github',
-    undo: false,
+    undo: true,
     focus: false,
+    showOnMobile: true,
+    refreshAfterCallback: true,
     plugin: 'customPlugin',
     callback: function () {
       this.customPlugin.showPopup();
@@ -117,7 +129,7 @@ function initializePlugin(editorService: EditorService) {
   // Define custom popup 1.
   $.FroalaEditor.DefineIcon('popupButton1', { NAME: 'github' });
   $.FroalaEditor.RegisterCommand('popupButton1', {
-    title: 'convert',
+    title: 'Convert',
     undo: false,
     focus: false,
     callback: function () {
@@ -126,7 +138,6 @@ function initializePlugin(editorService: EditorService) {
           this.html.insert(result.html);
           this.customPlugin.hidePopup();
         }, error => {
-          this.customPlugin.hidePopup();
           alert(error);
         });
     }

diff --git a/src/app/_services/editor.service.ts b/src/app/_services/editor.service.ts
@@ -4,6 +4,7 @@ import { Http, Response, RequestOptions, Headers } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/throw';
 
 import { AuthenticationService } from '../_services/authentication.service';
 import { Gist } from '../_models/Gist';

diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts
@@ -20,11 +20,18 @@ declare var $: any;
 })
 export class EditorComponent implements OnInit {
 
+  private tb = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough',
+  'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle',
+  'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent',
+  'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile',
+  'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll',
+  'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo', 'github']
   private options: Object = {
     heightMin: 400,
     placeholderText: 'Edit Content Here',
     charCounterCount: true,
     htmlRemoveTags: [],
+    toolbarInline: false,
     events: {
       'froalaEditor.contentChanged': (e, editor) => {
         this.updateContent(editor);
@@ -37,13 +44,10 @@ export class EditorComponent implements OnInit {
           })
       }
     },
-    toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough',
-    'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle',
-    'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent',
-    'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile',
-    'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll',
-    'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo', 'github'],
-    pluginsEnabled: ['customPlugin']
+    toolbarButtons: this.tb,
+    toolbarButtonsMD: this.tb,
+    toolbarButtonsSM: this.tb,
+    toolbarButtonsXS: this.tb,
   };
   private content: string;