VB-P Shortcut-Erweiterung für Chrome/Firefox

    • Release
    • Open Source

    Es gibt 9 Antworten in diesem Thema. Der letzte Beitrag () ist von nikeee13.

      VB-P Shortcut-Erweiterung für Chrome/Firefox

      VB-P Shortcuts

      Beschreibung:
      Ermöglicht Tastenkombinationen bei allen Textareas auf VB-Paradise.de, um den Schreibfluss zu vereinfachen und effizienter posten zu können. Es handelt sich dabei um eine Chrome-Extension/ein Greasemonkey Script.

      Fork!
      Das Projekt ist Open Source. Der komplette Quelltext ist auf Codeplex verfügbar. Da ich Git verwende, seid Ihr herzlich zum Forken eingeladen! :) Das Publish-Skript zum automatischen Packen der Browserplugins funktioniert bestimmt nur bei mir, von daher müsst Ihr Euch wohl selber eins basteln oder es manuell machen.
      Theoretisch würde dieses Skript nicht nur auf VB-P funktionieren, sondern bei allen Foren, die Textareas verwenden. Die Umgebungsvariablen (siehe unten) sind aber auf ein Standard-WBB ausgelegt. Außerdem sorgen die includes (im publish.ps1-Skript definiert), dass das Skript nur auf VB-P inkludiert wird. Das könnt Ihr auch ändern (siehe unten Skript/Config ändern und die API).

      Screenshot:


      Die Standard-Shortcuts:
      • Strg+Q -> Expander
      • Strg+< -> Inline-Code
      • Strg+B -> Fettschrift
      • Strg+I -> Italic
      • Tab -> Zeile einrücken
      Bei Shortcuts, die BBCodes mit Öffnen- und Schließen-Tags einsetzen, werden die Tags um den selektierten Text gepackt. Wenn kein Text selektiert ist, werden die Tags um den Cursor gepackt.

      Da das Projekt objektorientiert ist, könnt Ihr Euch auch eigene Shortcuts machen. Das ist natürlich nicht auf BBCodes begrenzt. Es ist theoretisch alles möglich, was man mit JavaScript machen kann.

      Die default Config sieht momentan so aus (ja, sie ist eine Klasse):
      Default Config

      C-Quellcode

      1. "use strict";
      3. class Config
      4. {
      5. public static apply()
      6. {
      7. // be aware!
      8. // use the key codes of the KeyboardEvent.which-field!
      9. // the key codes are different for Chrome and Firefox. Don't ask why. I don't know either.
      11. // use like this:
      12. // new CustomHotkey.WrapSelection(Ctrl, Shift, Keycode, "left side", "right side")
      14. // use the tab key for indentation in textarea-elements
      15. Config.tabToIndet = true;
      17. if (API.Helpers.isChrome())
      18. {
      19. // these key codes only work in Chrome.
      20. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 226, "[tt]", "[/tt]"));
      21. }
      22. else if (API.Helpers.isFirefox())
      23. {
      24. // ...and these only work in Firefox.
      25. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 60, "[tt]", "[/tt]"));
      26. }
      27. else
      28. console.log("Warning: No browser-specific hotkeys set!");
      30. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 81, "[spoiler]", "[/spoiler]"));
      31. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 66, "[b]", "[/b]"));
      32. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 73, "[i]", "[/i]"));
      35. if(Config.tabToIndet)
      36. Config.earlyHotkeys.push(new CustomHotkey.InsertChar(false, false, 9, '\t', true)); // add indentation hotkey (at keydown-time)
      38. // new feature... text replacements:
      39. API.WrappingTextReplacement.wrappingChar = ":"; // set the wrapping char to ':'
      41. Config.textReplacements.push(new API.MultiKeywordTextReplacement(["zum Beispiel", "zum Beispiel", "zum Beispiel","zum Beispiel"], "zum Beispiel"));
      42. Config.textReplacements.push(new API.WrappingTextReplacement("vg", "viele Grüße,%newline%%username%"));
      43. Config.textReplacements.push(new API.WrappingTextReplacement("mfg", "Mit freundlichen Grüßen,%newline%%username%"));
      44. }
      46. public static hotkeys: API.Hotkey[] = [];
      47. public static earlyHotkeys: API.Hotkey[] = [];
      48. public static textReplacements: API.ITextReplacement[] = [];
      49. public static blockMultipleHotKeysAtOnce: bool = true;
      50. public static tabToIndet: bool = true;
      51. }


      Skript/Config ändern und die API

      Um die Config zu verändern, müsst Ihr entweder das Skript direkt editieren oder den Quelltext herunterladen, ändern und compilen (bevorzuge ich). Zum Kompilieren benötigt Ihr den TypeScript Compiler. Den kann man sich hier oder per Node Package Manager herunterladen.

      Innerhalb von Strings können Umgebungsvariablen wie %username% (das ist momentan noch die einzige) verwendet werden. Da sind keine geplant, Ihr dürft aber gerne selber ran oder Vorschläge machen.

      Es gibt eine API, die hilft, mit dem Dokument zu interagieren. Diese befindet sich im API-Module (und somit im Unterordner API). Da könnt Ihr zum Beispiel die Hotkey-Klasse einsehen, damit ihr wisst, welche Parameter Ihr übergeben müsst.
      Dort gibt es auch einen CallbackHotkey, den ich in der Standardkonfiguration nirgends benutze. Dieser callt einfach nur einen Callback, wenn er getriggert wird. Habe ich oft um Testen verwendet.

      Um Keycodes zu erhalten, könnt Ihr diese Seite verwenden (immer die which-Werte des keyUp-Events verwenden!).


      Verwendete Programmiersprache und IDE:
      TypeScript 0.8.3 in Visual Studio 2012 mit Git Source Control Provider und der Git Bash

      Systemanforderungen:
      Chrome oder Firefox mit Greasemonkey-Addon

      Installation:
      • Chrome:
        - Entpacken
        - Entwicklermodus auf der Seite der Erweiterungen einschalten.
        - *.crx-Datei in die gleiche Seite mit der Maus droppen. Fertig.
      • Firefox:
        - Entpacken
        - Wie ein normales Greasemonkey Skript installieren und glücklich sein


      Download:
      Extensions:
      vb-paradise.de/index.php/Attac…d5cfdae49f004ebf892bb2592 (3,05 kB)
      vb-paradise.de/index.php/Attac…d5cfdae49f004ebf892bb2592 (2,27 kB)
      Code:
      Sourcecode: vbpshortcuts.codeplex.com/SourceControl/BrowseLatest (meist aktueller als die Downloads hier im Thread)
      Git Clone-Url: git01.codeplex.com/vbpshortcuts (mit Git aufrufen)

      Lizenz/Weitergabe:
      OpenSource, GNU General Public License version 2 (GPLv2)
      Dateien
      Von meinem iPhone gesendet

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „nikeee13“ ()

      Strg + Q ist evtl nicht ganz super geeignet ;)

      Edit hab grad in die Config geguckt und es ändern können ^^
      Spoiler anzeigen
      Funktioniert auch wunderbar
      schade dass in der Situation die browsereignen Shortcuts trotzdem auslösen

      Ich wollte eigentlich Strg+E verwenden, aber leider springen da FF und Chrome immer in das Suchfeld/die Omnibox. Strg+Q hörte sich für mich wie Quit an, aber Chrome und FF haben bei mir beide nichts gemacht, deshalb hab ich das genommen.
      Gut, Q ist etwas nahe an W, aber naja.. :P
      Von meinem iPhone gesendet

      Ich bin halt noch halbwegs aktiv mit Ubuntu aufm Weg und AFAIK hat sich ein Alt+F4 Pendant auf Linux-basierenden etabliert: Strg + Q. Strg + F klappt ja bei OOo/LO ist hier halt Strg+B.
      Kannst du evtl. Links oder gleich ne Liste für KeyValues posten/beipacken? (oder hab ich die übersehen?)

      Mangafreak1995 schrieb:

      (oder hab ich die übersehen?)

      nikeee13 schrieb:

      Um Keycodes zu erhalten, könnt Ihr diese Seite verwenden (immer die which-Werte des keyUp-Events verwenden!).
      Denke ja. :P
      Mal schauen. Gibts denn was besseres als Strg+Q?
      Ich hindere dich nicht daran, einfach zu forken. ;)
      Von meinem iPhone gesendet

      Achja ... Expander ...
      Ich bin irgendwie nicht so vertraut mit solchen Systemen wie git oder svn. Ich hab noch ne Blockade im Kopf, dass ich alles Closed halten muss, und hab nur kostenlose Anbieter gefunden, wenn man alles öffentlich stellt. Das hat mich bis dato aufgehalten sowas zu nutzen.

      @Mangafreak1995: Git (s. a. Try Git) kann man auch ohne Anbieter nutzen, ist prinzipiell "nur" ein .git Ordner. Einfach nur ein git init und schon hat man ein Reposity zum rumspielen in dem Ordner. Um was an nikeee13s Projekt zu ändern machst du einfach nen git clone https://git01.codeplex.com/vbpshortcuts, machst deine Änderungen (immer brav comitten), dann ein git format-patch origin/master (sofern du origin nicht geändert hast) und schon hast du hübsche .patch Dateien die nikeee13 dann mergen kann^^ Ich bin mir aber sicher das Codeplex entsprechende Buttons im Webinterface hat, dafür brauchst du dann halt nen Codeplex Account und statt format-patch stellst du einen Pullrequest. Ist alles in allem nicht wirklich schwer, man muss es sich nur mal anschaun.
      BTW: Bei Bitbucket kannst du private Reposities erstellen, können dann halt nur max. 5 Leute dran arbeiten (und ich weiß nicht ob es unter einer bestimmten Lizenz stehen muss).

      Den Großteil der Befehle hättest du mir nicht erklären müssen. Ich wusste nur nicht, dass man das auch lokal machen kann. Das wäre schon wieder interessant.

      Ich habe gerade eine neuere Version auf Codeplex gepusht. Diese Version kann nun auch Inline-Text-Replacements.

      Die Default-Config sieht nun so aus:
      Spoiler anzeigen

      C-Quellcode

      1. /// <reference path="API/Hotkey.ts" />
      2. /// <reference path="API/Helpers.ts" />
      3. /// <reference path="API/TextReplacement.ts" />
      4. /// <reference path="CustomHotkey/WrapSelection.ts" />
      6. class Config
      7. {
      8. public static apply()
      9. {
      10. // be aware!
      11. // use the key codes of the KeyboardEvent.which-field!
      12. // the key codes are different for Chrome and Firefox. Don't ask why. I don't know either.
      14. // use like this:
      15. // new CustomHotkey.WrapSelection(Ctrl, Shift, Keycode, "left side", "right side")
      17. if (API.Helpers.isChrome())
      18. {
      19. // these key codes only work in Chrome.
      20. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 226, "[tt]", "[/tt]"));
      21. }
      22. else if (API.Helpers.isFirefox())
      23. {
      24. // ...and these only work in Firefox.
      25. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 60, "[tt]", "[/tt]"));
      26. }
      27. else
      28. console.log("Warning: No browser-specific hotkeys set!");
      30. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 81, "[expander]", "[/spoiler]"));
      31. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 66, "[b]", "[/b]"));
      32. Config.hotkeys.push(new CustomHotkey.WrapSelection(true, false, 73, "[i]", "[/i]"));
      34. // new feature... text replacements:
      35. API.WrappingTextReplacement.wrappingChar = ":"; // set the wrapping char to ':'
      37. Config.textReplacements.push(new API.MultiKeywordTextReplacement(["z.B.", "z.b.", "z. B.","z. b."], "zum Beispiel"));
      38. Config.textReplacements.push(new API.WrappingTextReplacement("vg", "viele Grüße,%newline%%username%"));
      39. Config.textReplacements.push(new API.WrappingTextReplacement("mfg", "Mit freundlichen Grüßen,%newline%%username%"));
      40. }
      41. public static hotkeys: API.Hotkey[] = [];
      42. public static textReplacements: API.ITextReplacement[] = [];
      43. public static blockMultipleHotKeysAtOnce: bool = true;
      44. }
      [/expander]

      Die WrappingTextReplacements nehmen das Schlüsselwort, und umschließen es mit dem wrappingChar, sodass z. B. :mfg: ein "Mit Freundlichen Grüßen" wird. Es gibt auch noch normale TextReplacements, die benutze ich da aber nicht. Die MultiKeywordTextReplacement-Klasse ersetzt in der Default Config alle Vorkommen von "z.B.", "z.b.", "z. B." und "z. b." durch "zum Beispiel".

      Nebenbei habe ich gerade neue Builds auf Codeplex geladen. Die Downloads hier im Thread werde ich bei Gelegenheit auch updaten.
      Von meinem iPhone gesendet

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „nikeee13“ ()

      Ich habe das Skript gerade mal wieder geupdated und Tab-Einrückungen eingefügt. Standardmäßig sind sie eingeschaltet. (können in der Config ausgeschaltet werden, siehe oben).
      Von meinem iPhone gesendet

    Facebook
    Telefonspende