From 11cfd5f33bbde18280d73e5e93af47b71a204aeb Mon Sep 17 00:00:00 2001 From: "Jens W. Klein" Date: Thu, 9 Mar 2017 07:39:24 +0100 Subject: [PATCH] add pattern pat-highlighsearchterms, see plone/Products.CMFPlone#1811 --- bower.json | 1 + mockup/js/config.js | 2 + .../patterns/highlightsearchterms/pattern.js | 65 +++++++++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 mockup/patterns/highlightsearchterms/pattern.js diff --git a/bower.json b/bower.json index ea2c528df..035295641 100644 --- a/bower.json +++ b/bower.json @@ -16,6 +16,7 @@ "jquery.recurrenceinput.js": "v1.5.2", "logging": "", "marked": "0.3.5", + "mark.js": "8.8.3", "moment": "2.10.6", "patternslib": "2.0.13", "pickadate": "3.5.6", diff --git a/mockup/js/config.js b/mockup/js/config.js index 6280d58c2..7880150eb 100644 --- a/mockup/js/config.js +++ b/mockup/js/config.js @@ -47,6 +47,7 @@ 'jquery.tmpl': 'bower_components/jquery.recurrenceinput.js/lib/jquery.tmpl', 'translate': 'js/i18n-wrapper', 'marked': 'bower_components/marked/lib/marked', + 'markjs': 'bower_components/mark.js/dist', 'mockup-bundles-docs': 'js/bundles/docs', 'mockup-bundles-filemanager': 'js/bundles/filemanager', 'mockup-bundles-plone': 'js/bundles/plone', @@ -71,6 +72,7 @@ 'mockup-patterns-filemanager-url': 'patterns/filemanager', 'mockup-patterns-formautofocus': 'patterns/formautofocus/pattern', 'mockup-patterns-formunloadalert': 'patterns/formunloadalert/pattern', + 'mockup-patterns-highlightsearchterms': 'patterns/highlightsearchterms/pattern', 'mockup-patterns-inlinevalidation': 'patterns/inlinevalidation/pattern', 'mockup-patterns-markspeciallinks': 'patterns/markspeciallinks/pattern', 'mockup-patterns-modal': 'patterns/modal/pattern', diff --git a/mockup/patterns/highlightsearchterms/pattern.js b/mockup/patterns/highlightsearchterms/pattern.js new file mode 100644 index 000000000..522e00b7b --- /dev/null +++ b/mockup/patterns/highlightsearchterms/pattern.js @@ -0,0 +1,65 @@ +/* Highlight search terms pattern + * + * utilizes mark.js (by julmot). Available as mark.js at bower or julmot/mark.js at npm, see https://markjs.io/ + * + * Options: + * element(string): HTML element to wrap matches, e.g. span + * className(string): A class name that will be appended to element + * exclude(array[ ]): An array with exclusion selectors. Matches inside these elements will be ignored. Example: "filter": ["h1", ".ignore"] + * separateWordSearch(boolean): Whether to search for each word separated by a blank instead of the complete term + * accuracy(string or object): accuracy is Either one of the following string values: "partially": When searching for "lor" only "lor" inside "lorem" will be marked; "complementary": When searching for "lor" the whole word "lorem" will be marked; "exactly": When searching for "lor" only those exact words with a word boundary will be marked. In this example nothing inside "lorem". This value is equivalent to the previous option wordBoundary + * diacritics(boolean): If diacritic characters should be matched. For example "piękny" would also match "piekny" and "doner" would also match "döner" + * synonyms(object): An object with synonyms. The key will be a synonym for the value and the value for the key. Example: "synonyms": {"one": "1"} will add the synonym "1" for "one" and vice versa + * iframes(oolean): default: Whether to search also inside iframes. If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. If you don't want to search inside specific iframes (e.g. facebook share), you can pass an exclude selector that matches these iframes + * iframesTimeout(number): The maximum ms to wait for a load event before skipping an iframe. Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired + * acrossElements(boolean): Whether to search for matches across elements + * caseSensitive(oolean): Whether to search case sensitive + * ignoreJoiners(oolean): Whether to also find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner. They're used to indicate a point for a line break where there isn't enough space to show the full word + * each(function): A callback for each marked element. Receives the marked DOM element as a parameter + * filter(function): A callback to filter or limit matches. It will be called for each match and receives the following parameters: The text node which includes the match; The term that has been found; A counter indicating the total number of all marks at the time of the function call; A counter indicating the number of marks for the term. The function must return false if the mark should be stopped, otherwise true + * noMatch function A callback function that will be called when there are no matches. Receives the not found term as a parameter + * done function A callback function after all marks are done. Receives the total number of marks as a parameter + * debug boolean false Set this option to true if you want to log messages + * log object console Log messages to a specific object (only if debug is true) + + * Documentation: + * + * TODO: write me + * + */ + +define([ + 'jquery', + 'pat-base' +], function($, Base, Mark) { + 'use strict'; + var HighlightSearchterms = Base.extend({ + name: 'highlightsearchterms', + trigger: '.pat-highlightsearchterms', + parser: 'mockup', + defaults: { + element: 'span', + className: 'highlightedSearchTerm' + // exclude: null, + // separateWordSearch: null, + // accuracy: null, + // diacritics: null, + // synonyms: null, + // iframes: null, + // iframesTimeout: null, + // acrossElements: null, + // caseSensitive: null, + // ignoreJoiners: null, + // each: null, + // filter: null, + // noMatch: null, + // done: null, + // debug: null, + // log: null + }, + init: function() { + var mark = Mark(this.$el, this.options) + } + }); + return HighlightSearchterms; +});