@matdata/yasqe 4.6.1

package/src/prefixFold.ts

@@ -0,0 +1,93 @@
+import { default as Yasqe, Position } from "./";
+import CodeMirror from "codemirror";
+import * as TokenUtils from "./tokenUtils";
+const PREFIX_KEYWORD = "PREFIX ";
+
+export function findFirstPrefixLine(yasqe: Yasqe) {
+  var lastLine = yasqe.getDoc().lastLine();
+  for (var i = 0; i <= lastLine; ++i) {
+    const firstPrefix = findFirstPrefix(yasqe, i);
+    if (firstPrefix != null && firstPrefix >= 0) {
+      return i;
+    }
+  }
+}
+
+export function findFirstPrefix(yasqe: Yasqe, line: number, startFromCharIndex = 0, lineText?: string) {
+  if (!lineText) lineText = yasqe.getDoc().getLine(line);
+  lineText = lineText.toUpperCase();
+  const charIndex = lineText.indexOf(PREFIX_KEYWORD, startFromCharIndex);
+  if (charIndex >= 0) {
+    const tokenType = yasqe.getTokenTypeAt(CodeMirror.Pos(line, charIndex + 1));
+    if (tokenType === "keyword") {
+      return charIndex;
+    }
+  }
+}
+export default function (yasqe: Yasqe, start: Position) {
+  var line = start.line,
+    lineText = yasqe.getDoc().getLine(line);
+
+  // var startCh, tokenType;
+
+  function hasPreviousPrefix() {
+    var hasPreviousPrefix = false;
+    for (var i = line - 1; i >= 0; i--) {
+      if (yasqe.getDoc().getLine(i).toUpperCase().indexOf(PREFIX_KEYWORD) >= 0) {
+        hasPreviousPrefix = true;
+        break;
+      }
+    }
+    return hasPreviousPrefix;
+  }
+
+  var getLastPrefixPos = function (line: number, ch: number) {
+    var prefixKeywordToken = yasqe.getTokenAt(CodeMirror.Pos(line, ch + 1));
+    if (!prefixKeywordToken || prefixKeywordToken.type != "keyword") return -1;
+    var prefixShortname = TokenUtils.getNextNonWsToken(yasqe, line, prefixKeywordToken.end + 1);
+    if (!prefixShortname || prefixShortname.type != "string-2") return -1; //missing prefix keyword shortname
+    var prefixUri = TokenUtils.getNextNonWsToken(yasqe, line, prefixShortname.end + 1);
+    if (!prefixUri || prefixUri.type != "variable-3") return -1; //missing prefix uri
+    return prefixUri.end;
+  };
+
+  //only use opening prefix declaration
+  if (hasPreviousPrefix()) return;
+  var prefixStart = findFirstPrefix(yasqe, line, start.ch, lineText);
+
+  if (prefixStart == null) return;
+  var stopAt = "{"; //if this char is there, we won't have a chance of finding more prefixes
+  var stopAtNextLine = false;
+  var lastLine = yasqe.getDoc().lastLine(),
+    endCh;
+  var prefixEndChar = getLastPrefixPos(line, prefixStart);
+  var prefixEndLine = line;
+
+  // outer:
+  for (var i = line; i <= lastLine; ++i) {
+    if (stopAtNextLine) break;
+    var text = yasqe.getDoc().getLine(i),
+      pos = i == line ? prefixStart + 1 : 0;
+
+    for (;;) {
+      if (!stopAtNextLine && text.indexOf(stopAt) >= 0) stopAtNextLine = true;
+
+      var nextPrefixDeclaration = text.toUpperCase().indexOf(PREFIX_KEYWORD, pos);
+
+      if (nextPrefixDeclaration >= 0) {
+        if ((endCh = getLastPrefixPos(i, nextPrefixDeclaration)) > 0) {
+          prefixEndChar = endCh;
+          prefixEndLine = i;
+          pos = prefixEndChar;
+        }
+        pos++;
+      } else {
+        break;
+      }
+    }
+  }
+  return {
+    from: CodeMirror.Pos(line, prefixStart + PREFIX_KEYWORD.length),
+    to: CodeMirror.Pos(prefixEndLine, prefixEndChar),
+  };
+}

package/src/prefixUtils.ts

@@ -0,0 +1,65 @@
+import { default as Yasqe, Token } from "./";
+export type Prefixes = { [prefixLabel: string]: string };
+export function addPrefixes(yasqe: Yasqe, prefixes: string | Prefixes) {
+  var existingPrefixes = yasqe.getPrefixesFromQuery();
+  //for backwards compatability, we stil support prefixes value as string (e.g. 'rdf: <http://fbfgfgf>'
+  if (typeof prefixes == "string") {
+    addPrefixAsString(yasqe, prefixes);
+  } else {
+    for (var pref in prefixes) {
+      if (!(pref in existingPrefixes)) addPrefixAsString(yasqe, pref + ": <" + prefixes[pref] + ">");
+    }
+  }
+  yasqe.collapsePrefixes(false);
+}
+
+export function addPrefixAsString(yasqe: Yasqe, prefixString: string) {
+  yasqe.getDoc().replaceRange("PREFIX " + prefixString + "\n", {
+    line: 0,
+    ch: 0,
+  });
+
+  yasqe.collapsePrefixes(false);
+}
+export function removePrefixes(yasqe: Yasqe, prefixes: Prefixes) {
+  var escapeRegex = function (string: string) {
+    //taken from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript/3561711#3561711
+    return string.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+  };
+  for (var pref in prefixes) {
+    yasqe.setValue(
+      yasqe
+        .getValue()
+        .replace(new RegExp("PREFIX\\s*" + pref + ":\\s*" + escapeRegex("<" + prefixes[pref] + ">") + "\\s*", "ig"), "")
+    );
+  }
+  yasqe.collapsePrefixes(false);
+}
+
+/**
+ * Get defined prefixes from query as array, in format {"prefix:" "uri"}
+ *
+ * @param cm
+ * @returns {Array}
+ */
+export function getPrefixesFromQuery(yasqe: Yasqe): Token["state"]["prefixes"] {
+  //Use precise here. We want to be sure we use the most up to date state. If we're
+  //not, we might get outdated prefixes from the current query (creating loops such
+  //as https://github.com/TriplyDB/YASGUI/issues/84)
+  return yasqe.getTokenAt(
+    { line: yasqe.getDoc().lastLine(), ch: yasqe.getDoc().getLine(yasqe.getDoc().lastLine()).length },
+    true
+  ).state.prefixes;
+}
+
+export function getIndentFromLine(yasqe: Yasqe, line: number, charNumber: number = 1): string {
+  var token = yasqe.getTokenAt({
+    line: line,
+    ch: charNumber,
+  });
+  if (token == null || token == undefined || token.type != "ws") {
+    return "";
+  } else {
+    return token.string + getIndentFromLine(yasqe, line, token.end + 1);
+  }
+}

package/src/scss/buttons.scss

@@ -0,0 +1,275 @@
+.yasqe {
+  $queryButtonWidth: 40px;
+  $queryButtonHeight: 40px;
+
+  .yasqe_btn {
+    color: #333;
+    border: 1px solid transparent;
+    background-color: #fff;
+    border-color: #ccc;
+    border-width: 1px;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    white-space: nowrap;
+    padding: 6px 12px;
+    border-radius: 2px;
+    user-select: none;
+    overflow: visible;
+    box-sizing: border-box;
+
+    &.btn_icon {
+      padding: 4px 8px;
+    }
+
+    &[disabled],
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+      filter: alpha(opacity=50);
+      box-shadow: none;
+    }
+
+    &:hover {
+      outline: 0;
+      background-color: #ebebeb;
+      border-color: #adadad;
+    }
+
+    &:focus,
+    &.selected {
+      color: #fff;
+      outline: 0;
+      background-color: #337ab7;
+      border-color: #337ab7;
+    }
+
+    &.btn_icon:focus {
+      color: #333;
+      border: 1px solid transparent;
+      background-color: #fff;
+      border-color: #ccc;
+    }
+
+    &.yasqe_btn-sm {
+      padding: 1px 5px;
+      font-size: 12px;
+      line-height: 1.5;
+      border-radius: 3px;
+    }
+  }
+
+  .yasqe_buttons {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+
+    svg {
+      fill: #505050;
+    }
+
+    z-index: 5;
+
+    .yasqe_share {
+      cursor: pointer;
+      margin-top: 3px;
+      display: inline-block;
+      border: none;
+      background: none;
+      svg {
+        height: 25px;
+        width: 25px;
+      }
+    }
+
+    button {
+      vertical-align: top;
+      margin-left: 5px;
+    }
+    .yasqe_sharePopup {
+      position: absolute;
+      padding: 4px;
+      margin-left: 0px;
+      background-color: #fff;
+      border: 1px solid #e3e3e3;
+      border-radius: 2px;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+      width: 600px;
+      height: auto;
+      display: flex;
+
+      .inputWrapper {
+        flex-grow: 100;
+      }
+
+      input {
+        float: left;
+        width: 100%;
+        border: 0px;
+        -ms-box-sizing: border-box;
+        /* ie8 */
+        -khtml-box-sizing: border-box;
+        /* konqueror */
+        -webkit-box-sizing: border-box;
+        /* Safari/Chrome, other WebKit */
+        -moz-box-sizing: border-box;
+        /* Firefox, other Gecko */
+        box-sizing: border-box;
+        /* Opera/IE 8+ */
+        box-sizing: border-box;
+        /* css3 rec */
+      }
+
+      button {
+        float: right;
+        margin-left: 5px;
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+    .yasqe_queryButton {
+      display: inline-block;
+      position: relative;
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      width: $queryButtonWidth;
+      height: $queryButtonHeight;
+
+      .queryIcon {
+        display: block;
+        svg {
+          width: $queryButtonWidth;
+          height: $queryButtonHeight;
+        }
+      }
+      .svgImg {
+        position: absolute;
+        height: inherit;
+        top: 0;
+      }
+
+      &.busy {
+        svg {
+          #loadingIcon {
+            stroke-dasharray: 100;
+            animation: dash 1.5s linear infinite;
+            stroke-width: 8px;
+            stroke: white;
+          }
+        }
+      }
+
+      @keyframes dash {
+        to {
+          stroke-dashoffset: 200;
+        }
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .warningIcon {
+        display: none;
+      }
+
+      &.query_error {
+        .warningIcon {
+          display: block;
+          top: 5px;
+          right: 0px;
+
+          svg {
+            width: 15px;
+            height: 15px;
+
+            g {
+              fill: red;
+            }
+          }
+        }
+      }
+
+      &.query_disabled {
+        cursor: not-allowed;
+        .queryIcon {
+          opacity: 0.5;
+          filter: alpha(opacity=50);
+        }
+      }
+
+      @-webkit-keyframes spin {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }
+
+    .yasqe_fullscreenButton {
+      display: inline-block;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0;
+      margin-left: 5px;
+
+      svg {
+        height: 25px;
+        width: 25px;
+      }
+
+      .fullscreenExitIcon {
+        display: none;
+      }
+
+      &:hover {
+        svg {
+          fill: #337ab7;
+        }
+      }
+    }
+  }
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9998;
+    background: white;
+    margin: 0;
+    padding-top: 100px;
+
+    .CodeMirror-wrap {
+      padding-top: 10px;
+    }
+
+    .yasqe_buttons {
+      position: fixed;
+      top: 110px;
+      right: 20px;
+      z-index: 10000;
+    }
+
+    .yasqe_fullscreenButton {
+      .fullscreenIcon {
+        display: none;
+      }
+      .fullscreenExitIcon {
+        display: block;
+      }
+    }
+
+    .CodeMirror {
+      height: calc(100vh - 150px) !important;
+    }
+  }
+}

package/src/scss/codemirrorMods.scss

@@ -0,0 +1,36 @@
+.yasqe {
+  .CodeMirror {
+    line-height: 1.5em;
+    font-size: 14px;
+    border: 1px solid #d1d1d1;
+  }
+
+  span.cm-error {
+    border-bottom: 2px dotted red;
+  }
+  .gutterErrorBar {
+    width: 4px;
+  }
+
+  .CodeMirror-foldmarker {
+    color: #6e2500;
+    text-shadow: #ff935e 1px 1px 2px, #ff935e -1px -1px 2px, #ff935e 1px -1px 2px, #ff935e -1px 1px 2px;
+    font-size: 19px;
+  }
+  .cm-matchhighlight {
+    background-color: #dbdeed;
+  }
+}
+// Put these outside of yasqe as the root element can be changed
+.CodeMirror-hints.default {
+  max-width: 1000px;
+}
+.CodeMirror-hints.default li {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+@media only screen and (max-width: 1000px) {
+  .CodeMirror-hints.default {
+    max-width: 800px;
+  }
+}

package/src/scss/yasqe.scss

@@ -0,0 +1,89 @@
+.yasqe {
+  .CodeMirror {
+    min-height: 60px;
+  }
+  .svgImg {
+    display: inline-block;
+  }
+  span.shortlinkErr {
+    font-size: small;
+    color: red;
+    font-weight: bold;
+    float: left;
+  }
+  .CodeMirror-hint {
+    max-width: 30em;
+  }
+  .notificationContainer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    bottom: 0;
+  }
+  .notification {
+    z-index: 4;
+    padding: 0 5px;
+    max-height: 0px;
+    color: #999;
+    background-color: #eee;
+    font-size: 90%;
+    text-align: center;
+    transition: max-height 0.2s ease-in;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .notification.active {
+    max-height: 3rem;
+  }
+
+  .parseErrorIcon {
+    width: 13px;
+    height: 13px;
+    margin-top: 2px;
+    margin-left: 2px;
+    svg {
+      g {
+        fill: red;
+      }
+    }
+  }
+
+  .yasqe_tooltip {
+    background: #333;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 5px;
+    color: #fff;
+    padding: 5px 15px;
+    width: 220px;
+    white-space: pre-wrap;
+    white-space: normal;
+    margin-top: 5px;
+  }
+  .notificationLoader {
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+  }
+  .resizeWrapper {
+    width: 100%;
+    height: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: row-resize;
+  }
+  .resizeChip {
+    width: 20%;
+    height: 4px;
+    background-color: #d1d1d1;
+    visibility: hidden;
+    border-radius: 2px;
+  }
+  // Show resizeChip when yasqe is hovered
+  &:hover {
+    .resizeChip {
+      visibility: visible;
+    }
+  }
+}