diff --git a/CHANGES.md b/CHANGES.md index ab6d96a9e..0cbbc4e90 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ Features ~~~~~~~~ +- Add configurable scrolling behavior to pat-inject. - Add ``webpack-visualizer-plugin`` for analyzation of generated bundles. - Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode. A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons. diff --git a/src/pat/inject/_inject.scss b/src/pat/inject/_inject.scss index 18a0357ab..4ac341ad4 100644 --- a/src/pat/inject/_inject.scss +++ b/src/pat/inject/_inject.scss @@ -1,32 +1,32 @@ .blue { - background-color: blue; - color: white; + background-color: blue; + color: white; } .red { - background-color: red; - color: white; + background-color: red; + color: white; } form.pat-inject, fieldset.pat-inject { - &.executing { - [type="submit"] { - -ms-pointer-events: none; - -moz-pointer-events: none; - -webkit-pointer-events: none; - pointer-events: none; - opacity: 0.5; - } - } + &.executing { + [type="submit"] { + -ms-pointer-events: none; + -moz-pointer-events: none; + -webkit-pointer-events: none; + pointer-events: none; + opacity: 0.5; + } + } } a.pat-inject { - &.executing { - -ms-pointer-events: none; - -moz-pointer-events: none; - -webkit-pointer-events: none; - pointer-events: none; - opacity: 0.5; - } -} \ No newline at end of file + &.executing { + -ms-pointer-events: none; + -moz-pointer-events: none; + -webkit-pointer-events: none; + pointer-events: none; + opacity: 0.5; + } +} diff --git a/src/pat/inject/_injection.scss b/src/pat/inject/_injection.scss index 58ce60827..7c5e56f8e 100644 --- a/src/pat/inject/_injection.scss +++ b/src/pat/inject/_injection.scss @@ -21,6 +21,7 @@ -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; - animation: spin 2s infinite linear;} + animation: spin 2s infinite linear; +} -/* @end */ \ No newline at end of file +/* @end */ diff --git a/src/pat/inject/documentation.md b/src/pat/inject/documentation.md index f79d980b3..d4941979e 100644 --- a/src/pat/inject/documentation.md +++ b/src/pat/inject/documentation.md @@ -30,7 +30,7 @@ The possibilities don't stop here. Other applications of injection include injec The most simple form of injection is a link which loads content when clicked: Demo the frobber - +
…
@@ -41,7 +41,7 @@ In another situation you may not want to replace content but add new content. Yo Tell me more - +
…
@@ -103,7 +103,7 @@ In case one source element is to be used for both targets, it can be specified a source: #src; target: #tgt2"> One source element for two targets. - + @@ -259,10 +259,10 @@ A `autoload` may be delayed, by providing a `delay` argument in `data-pat-inject Autoloads as soon as initialised - + Autoloads as soon as visible - + Autoloads 2 seconds after the page is initialised. @@ -317,12 +317,12 @@ It corresponds and is shorthand notation for: After injection was triggered: - + - + ### Options reference diff --git a/src/pat/inject/history-inject-source.html b/src/pat/inject/history-inject-source.html index 7fb7a54d8..2523086cf 100644 --- a/src/pat/inject/history-inject-source.html +++ b/src/pat/inject/history-inject-source.html @@ -1,15 +1,17 @@ - - - Gilgamesh Epos - - -
-

Tablet 1

-

- of him who knew the most of all men know;
+ + + Gilgamesh Epos + + + + +

+

Tablet 1

+

+of him who knew the most of all men know;
who made the journey; heartbroken; reconciled;

who knew the way things were before the Flood,
@@ -20,15 +22,15 @@

Tablet 1


He built Uruk. He built the keeping place
of Anu and Ishtar. The outer wall
-
+
shines in the sun like brightest copper; the inner
wall is beyond the imagining of kings.
+

+

+ — Gilgamesh +

+
+ + -

-

- — Gilgamesh -

-
- - diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html index 974f18a4f..8465231f5 100644 --- a/src/pat/inject/index.html +++ b/src/pat/inject/index.html @@ -1,291 +1,293 @@ - - - - Injection pattern - - - - - -
-

- In this example, a Single HTML source is used for various injections. -

- -
- - -
-
-

- ? -

-
-
-

- ? -

-
-
-

- ? -

-
-
- -
- -
- -
-
-

- ? -

-
-
- -
-
-

- ? -

-
-
- -
- -
- -
-

Inject history example

-

Inject some text and record the history

- -

here goes the injection

-
- -
-

Inject autosubmit with form using GET and POST

- -
- - -
- -

- here goes the injection -

-
- - - - - +
  • + Trigger an inject that fails. (Puts an error message in a data attribute on the body tag) + <a href="page-that-doesnt-exist" class="pat-inject"> +
    • +
  • + Place "Wilde in column 2 when + +
    • + + + + +
    +
    +

    + ? +

    +
    +
    +

    + ? +

    +
    +
    +

    + ? +

    +
    +
    + +
    +

    Inject and scroll demos

    + +
    + +
    +
    +

    + ? +

    +
    +
    + +
    +
    +

    + ? +

    +
    +
    + +
    + +
    + +
    +

    Inject history example

    +

    Inject some text and record the history

    + +

    here goes the injection

    +
    + +
    +

    Inject autosubmit with form using GET and POST

    + +
    + + +
    + +

    + here goes the injection +

    +
    + + + + + diff --git a/src/pat/inject/inject-form.html b/src/pat/inject/inject-form.html index 4f512f928..e53f757d9 100644 --- a/src/pat/inject/inject-form.html +++ b/src/pat/inject/inject-form.html @@ -1,10 +1,10 @@ - +

    Here is the text that shows if it worked…

    - \ No newline at end of file + diff --git a/src/pat/inject/inject-sources.html b/src/pat/inject/inject-sources.html index f30b292e2..b932b5e1a 100644 --- a/src/pat/inject/inject-sources.html +++ b/src/pat/inject/inject-sources.html @@ -1,61 +1,62 @@ - - - Demo page - - -
    -
    - -
    -

    Immer wieder

    -

    - Immer wieder, ob wir der Liebe Landschaft auch kennen
    und den kleinen Kirchhof mit seinen klagenden Namen
    - und die furchtbar verschweigende Schlucht, in welcher die anderen
    - enden: immer wieder gehn wir zu zweien hinaus
    unter die alten Bäume, lagern uns immer wieder
    - zwischen die Blumen, gegenüber dem Himmel. -

    -

    - — Rainer Maria Rilke -

    -
    -
    -
    - -
    -

    A vision

    -

    - Two crowned Kings, and One that stood alone
    With no green weight of laurels round his head,
    But with sad eyes as one uncomforted,
    And wearied with man's never-ceasing moan
    For sins no bleating victim can atone,
    And sweet long lips with tears and kisses fed.
    Girt was he in a garment black and red,
    And at his feet I marked a broken stone
    Which sent up lilies, dove-like, to his knees.
    Now at their sight, my heart being lit with flame,
    I cried to Beatrice, 'Who are these? '
    And she made answer, knowing well each name,
    'AEschylos first, the second Sophokles,
    And last (wide stream of tears!) Euripides.' - -

    -

    - — Oscar Wilde -

    -
    -
    -
    - -
    -

    Le dieu nu

    -

    - Il allait en silence au milieu des risées –
    - Il feignait d’être sourd à l’unanime affront –
    - Il souriait avec des lèvres défrisées –
    - Un bandeau noir ceignait les boucles de son front – -

    -

    - Et je lui demandai : « Jeune homme aux membres frêles
    - Es-tu l’amour ? » -- Alors il me répondit : Non !
    - Je marche en me cachant à l’ombre de ses ailes,
    - Et je suis le dieu nu qui ne dit pas son nom. -

    -

    - — Jean Cocteau -

    -
    + + + Demo page + + + +
    +
    + +
    +

    Immer wieder

    +

    + Immer wieder, ob wir der Liebe Landschaft auch kennen
    und den kleinen Kirchhof mit seinen klagenden Namen
    + und die furchtbar verschweigende Schlucht, in welcher die anderen
    + enden: immer wieder gehn wir zu zweien hinaus
    unter die alten Bäume, lagern uns immer wieder
    + zwischen die Blumen, gegenüber dem Himmel. +

    +

    + — Rainer Maria Rilke +

    +
    +
    +
    + +
    +

    A vision

    +

    + Two crowned Kings, and One that stood alone
    With no green weight of laurels round his head,
    But with sad eyes as one uncomforted,
    And wearied with man's never-ceasing moan
    For sins no bleating victim can atone,
    And sweet long lips with tears and kisses fed.
    Girt was he in a garment black and red,
    And at his feet I marked a broken stone
    Which sent up lilies, dove-like, to his knees.
    Now at their sight, my heart being lit with flame,
    I cried to Beatrice, 'Who are these? '
    And she made answer, knowing well each name,
    'AEschylos first, the second Sophokles,
    And last (wide stream of tears!) Euripides.' +

    +

    + — Oscar Wilde +

    +
    +
    +
    + +
    +

    Le dieu nu

    +

    + Il allait en silence au milieu des risées –
    + Il feignait d’être sourd à l’unanime affront –
    + Il souriait avec des lèvres défrisées –
    + Un bandeau noir ceignait les boucles de son front – +

    +

    + Et je lui demandai : « Jeune homme aux membres frêles
    + Es-tu l’amour ? » -- Alors il me répondit : Non !
    + Je marche en me cachant à l’ombre de ses ailes,
    + Et je suis le dieu nu qui ne dit pas son nom. +

    +

    + — Jean Cocteau +

    +
    + + This autoload has been cancelled manually. + - This autoload has been cancelled manually. - diff --git a/src/pat/inject/inject-text.html b/src/pat/inject/inject-text.html index 99255003b..b32ff17a2 100644 --- a/src/pat/inject/inject-text.html +++ b/src/pat/inject/inject-text.html @@ -1,45 +1,48 @@ - - - Demo page - - -
    -

    Immer wieder

    -

    - Immer wieder, ob wir der Liebe Landschaft auch kennen
    und den kleinen Kirchhof mit seinen klagenden Namen
    - und die furchtbar verschweigende Schlucht, in welcher die anderen
    - enden: immer wieder gehn wir zu zweien hinaus
    unter die alten Bäume, lagern uns immer wieder
    - zwischen die Blumen, gegenüber dem Himmel. -

    -

    - — Rainer Maria Rilke -

    -

    A vision

    -

    - Two crowned Kings, and One that stood alone
    With no green weight of laurels round his head,
    But with sad eyes as one uncomforted,
    And wearied with man's never-ceasing moan
    For sins no bleating victim can atone,
    And sweet long lips with tears and kisses fed.
    Girt was he in a garment black and red,
    And at his feet I marked a broken stone
    Which sent up lilies, dove-like, to his knees.
    Now at their sight, my heart being lit with flame,
    I cried to Beatrice, 'Who are these? '
    And she made answer, knowing well each name,
    'AEschylos first, the second Sophokles,
    And last (wide stream of tears!) Euripides.' - -

    -

    - — Oscar Wilde -

    -

    Le dieu nu

    -

    - Il allait en silence au milieu des risées –
    - Il feignait d’être sourd à l’unanime affront –
    - Il souriait avec des lèvres défrisées –
    - Un bandeau noir ceignait les boucles de son front – -

    -

    - Et je lui demandai : « Jeune homme aux membres frêles
    - Es-tu l’amour ? » -- Alors il me répondit : Non !
    - Je marche en me cachant à l’ombre de ses ailes,
    - Et je suis le dieu nu qui ne dit pas son nom. -

    -

    - — Jean Cocteau -

    -
    - + + + + Demo page + + + +
    +

    Immer wieder

    +

    + Immer wieder, ob wir der Liebe Landschaft auch kennen
    und den kleinen Kirchhof mit seinen klagenden Namen
    + und die furchtbar verschweigende Schlucht, in welcher die anderen
    + enden: immer wieder gehn wir zu zweien hinaus
    unter die alten Bäume, lagern uns immer wieder
    + zwischen die Blumen, gegenüber dem Himmel. +

    +

    + — Rainer Maria Rilke +

    +

    A vision which is #scroll-target

    +

    + Two crowned Kings, and One that stood alone
    With no green weight of laurels round his head,
    But with sad eyes as one uncomforted,
    And wearied with man's never-ceasing moan
    For sins no bleating victim can atone,
    And sweet long lips with tears and kisses fed.
    Girt was he in a garment black and red,
    And at his feet I marked a broken stone
    Which sent up lilies, dove-like, to his knees.
    Now at their sight, my heart being lit with flame,
    I cried to Beatrice, 'Who are these? '
    And she made answer, knowing well each name,
    'AEschylos first, the second Sophokles,
    And last (wide stream of tears!) Euripides.' + +

    +

    + — Oscar Wilde +

    +

    Le dieu nu

    +

    + Il allait en silence au milieu des risées –
    + Il feignait d’être sourd à l’unanime affront –
    + Il souriait avec des lèvres défrisées –
    + Un bandeau noir ceignait les boucles de son front – +

    +

    + Et je lui demandai : « Jeune homme aux membres frêles
    + Es-tu l’amour ? » -- Alors il me répondit : Non !
    + Je marche en me cachant à l’ombre de ses ailes,
    + Et je suis le dieu nu qui ne dit pas son nom. +

    +

    + — Jean Cocteau +

    +
    + + diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js index e016cc1dc..757686a3e 100644 --- a/src/pat/inject/inject.js +++ b/src/pat/inject/inject.js @@ -31,10 +31,10 @@ define([ parser.addArgument("class"); // Add a class to the injected content. parser.addArgument("history"); parser.addArgument("push-marker"); + parser.addArgument("scroll"); // XXX: this should not be here but the parser would bail on // unknown parameters and expand/collapsible need to pass the url // to us - parser.addArgument("scroll"); parser.addArgument("url"); var inject = { @@ -168,8 +168,11 @@ define([ */ var cfgs = $(this).data("pat-inject"), $el = $(this); - if ($el.is("form")) - $(cfgs).each(function(i, v) {v.params = $.param($el.serializeArray());}); + if ($el.is("form")) { + $(cfgs).each(function(i, v) { + v.params = $.param($el.serializeArray()); + }); + } ev && ev.preventDefault(); $el.trigger("patterns-inject-triggered"); inject.execute(cfgs, $el); @@ -214,18 +217,17 @@ define([ var cfgs = parser.parse($el, opts, true); cfgs.forEach(function inject_extractConfig_each(cfg) { - var urlparts, defaultSelector; // opts and cfg have priority, fallback to href/action cfg.url = opts.url || cfg.url || $el.attr("href") || $el.attr("action") || $el.parents("form").attr("action") || ""; // separate selector from url - urlparts = cfg.url.split("#"); + var urlparts = cfg.url.split("#"); cfg.url = urlparts[0]; // if no selector, check for selector as part of original url - defaultSelector = urlparts[1] && "#" + urlparts[1] || "body"; + var defaultSelector = urlparts[1] && "#" + urlparts[1] || "body"; if (urlparts.length > 2) { log.warn("Ignoring additional source ids:", urlparts.slice(2)); @@ -445,10 +447,10 @@ define([ // Now the injection actually happens. if (inject._inject(trigger, $src, $target, cfg)) { inject._afterInjection($el, $injected, cfg); } // History support. if subform is submitted, append form params - var glue = '?'; + var glue = '?'; if ((cfg.history === "record") && ("pushState" in history)) { if (cfg.params) { - if (cfg.url.indexOf('?') > -1) + if (cfg.url.indexOf('?') > -1) glue = '&'; history.pushState({'url': cfg.url + glue + cfg.params}, "", cfg.url + glue + cfg.params); } else { @@ -484,18 +486,21 @@ define([ } }); } - if (cfg.scroll) { - if (cfg['scroll'] == 'top') { - $(cfg['target'])[0].scrollTop = 0; - } else if (cfg['scroll'] == 'target') { - /* scrollable: target Target indicates the target in the URL fragment the URL - that's in the href or action in the case of a form. After injection, the - page or scroll container will scroll to bring the element with that ID into view. */ - /*$(cfg['target'])[0].scrollTop = $(cfg['selector'])[0].offsetTop;*/ + + + if (cfg.scroll && cfg.scroll !== 'none') { + var $target = $(cfg.target); + var scroll_container = $target.parents().addBack().filter(':scrollable'); + scroll_container = scroll_container.length ? scroll_container : $(window); + if (cfg.scroll === 'top') { + scroll_container[0].scrollTo(0, 0); + } else if (cfg.scroll === 'target') { + $target[0].scrollIntoView(); } else { - $(cfg['target'])[0].scrollTop = $(cfg['scroll'])[0].offsetTop; + $(cfg.scroll)[0].scrollIntoView(); } } + $el.trigger("pat-inject-success"); }, @@ -514,12 +519,12 @@ define([ /* pick the title source for dedicated handling later Title - if present - is always appended at the end. */ var title; - if (sources$ && + if (sources$ && sources$[sources$.length-1] && - sources$[sources$.length-1][0] && + sources$[sources$.length-1][0] && sources$[sources$.length-1][0].nodeName == "TITLE") { title = sources$[sources$.length-1]; - } + } cfgs.forEach(function(cfg, idx) { function perform_inject() { cfg.$target.each(function() { diff --git a/src/pat/inject/injection-modal.svg b/src/pat/inject/injection-modal.svg index 3d49fc85e..fa3fb1e0a 100644 --- a/src/pat/inject/injection-modal.svg +++ b/src/pat/inject/injection-modal.svg @@ -1,76 +1,78 @@ - - - - - - - - - - - - - - - - - -Content A - - -#content - - - - - -Content A - - -#content - - -Before - - -After -A -A - - - - - -Content B - -B -#content -Pat-inject extracts content from -the remote page and injects it into -the current page, displayed as a modalpanel - - - - - -Content B - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + Content A + + + #content + + + + + + Content A + + + #content + + + Before + + + After + A + A + + + + + + Content B + + B + #content + Pat-inject extracts content from + the remote page and injects it into + + the current page, displayed as a modal + panel + + + + + + + Content B + + + + + + + + + + + + + + diff --git a/src/pat/inject/injection-multiple.svg b/src/pat/inject/injection-multiple.svg index b92808813..fb5248dae 100644 --- a/src/pat/inject/injection-multiple.svg +++ b/src/pat/inject/injection-multiple.svg @@ -1,86 +1,89 @@ - - - - - - - - - -Main content B - -B - -#intro - - - - - -Main content A - -A - -#main - - -Before - -After - - - - - - - - - -Pat-inject extracts content from various regions of the remote page and injects it into the current page, without refresing the browser. - -Introduction A - -#intro - -Introduction B - -#content - - - - - - -A - -#main - -Introduction B - -#intro - - - - - - - - - - - - - - - - - - - -Main content B - + + + + + + + + + + Main content B + + B + + #intro + + + + + + Main content A + + A + + #main + + + Before + + After + + + + + + + + + + + Pat-inject extracts content from various + regions of the remote page and injects + it into the current page, without + refresing the browser. + + + Introduction A + + #intro + + Introduction B + + #content + + + + + + + A + + #main + + Introduction B + + #intro + + + + + + + + + + + + + + + + + + + + Main content B + diff --git a/src/pat/inject/injection-single.svg b/src/pat/inject/injection-single.svg index ac15aeced..2f12c0189 100644 --- a/src/pat/inject/injection-single.svg +++ b/src/pat/inject/injection-single.svg @@ -1,71 +1,69 @@ - - - - - - - - - -Content B - -B - -#content - - - - - -Content A - -A - -#content - - - - - -Content B - -A - -#content - - -Before - -After - - - - - - - - - -Pat-inject extracts content from -the remote page and injects it into -the current page, without refresing -the browser. - - - - - - - - - - - - - - + + + + + + + + + + Content B + + B + + #content + + + + + + Content A + + A + + #content + + + + + + Content B + + A + + #content + + + Before + + After + + + + + + + + + + Pat-inject extracts content from + the remote page and injects it into + the current page, without refresing + the browser. + + + + + + + + + + + + + + diff --git a/src/pat/inject/pattern-test-response.html b/src/pat/inject/pattern-test-response.html index db55eac6c..cdbe4c107 100644 --- a/src/pat/inject/pattern-test-response.html +++ b/src/pat/inject/pattern-test-response.html @@ -1,120 +1,125 @@ - - - Insert title here - - - - -

    And nothing here, again!

    - -
    -

    Hello from pattern-test-response.html!

    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna augue. Nulla facilisi. Aliquam erat volutpat. Cras pharetra ante vel metus pulvinar vestibulum. Praesent mollis dapibus nisl, id condimentum quam lacinia ut. Fusce luctus felis ac mi lacinia porttitor. Vivamus sed nunc turpis. Phasellus quis dui sed mauris sollicitudin consequat at ut nisi. Mauris egestas enim ac nisi ultrices facilisis. Praesent at metus risus, vitae congue nulla. Integer dapibus orci eu tellus consectetur eu posuere nibh tincidunt. Proin lacinia, arcu quis ultrices porttitor, nisi libero convallis velit, sit amet vehicula nisi neque a justo. Suspendisse vitae sem quis diam pulvinar fermentum a vel augue. Vestibulum id sagittis dolor.

    - -

    - More ... -

    -
    - -
    -

    Hello from pattern-test-response.html!

    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna augue. Nulla facilisi. Aliquam erat volutpat. Cras pharetra ante vel metus pulvinar vestibulum. Praesent mollis dapibus nisl, id condimentum quam lacinia ut. Fusce luctus felis ac mi lacinia porttitor. Vivamus sed nunc turpis. Phasellus quis dui sed mauris sollicitudin consequat at ut nisi. Mauris egestas enim ac nisi ultrices facilisis. Praesent at metus risus, vitae congue nulla. Integer dapibus orci eu tellus consectetur eu posuere nibh tincidunt. Proin lacinia, arcu quis ultrices porttitor, nisi libero convallis velit, sit amet vehicula nisi neque a justo. Suspendisse vitae sem quis diam pulvinar fermentum a vel augue. Vestibulum id sagittis dolor.

    - -

    Proin gravida volutpat velit, sit amet pulvinar metus varius porttitor. Nulla dictum vulputate diam, nec placerat enim tempus at. Sed sodales sollicitudin nibh, a cursus leo pretium a. Morbi nisl magna, interdum ut interdum ut, volutpat nec enim. Integer enim nisl, consequat et elementum at, lobortis sit amet lectus. Aliquam egestas nisl condimentum diam hendrerit non congue augue facilisis. Suspendisse potenti.

    - -

    Sed ultricies luctus molestie. Donec facilisis adipiscing molestie. Suspendisse in nunc sed felis bibendum pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis purus odio, non elementum elit. Nullam sed nisl sapien. Vestibulum rhoncus, risus ac suscipit eleifend, urna quam accumsan turpis, eget ullamcorper nunc risus ut dolor. Curabitur eget quam erat. Aenean in dolor id ipsum lobortis feugiat. Morbi porta fringilla venenatis. Pellentesque vitae est neque, hendrerit eleifend erat. Donec fermentum augue id arcu pretium eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    - - -
    - - - - -

    - More… -

    - - -

    - More… -

    - - -

    -

    - - -
    - -
    - -
    - -
    - -
    - -
    - -
    -

    Channel 1

    -

    I'm a description for channel 1

    -
    - -
    -

    Channel 2

    -

    I'm a description for channel 2

    -
    - - -
    -

    Channel 3

    -

    I'm a description for channel 3

    -
    - - + + + + Insert title here + + + + + +
    +

    And nothing here, again!

    +
    + +
    +

    Hello from pattern-test-response.html!

    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna augue. Nulla facilisi. Aliquam erat volutpat. Cras pharetra ante vel metus pulvinar vestibulum. Praesent mollis dapibus nisl, id condimentum quam lacinia ut. Fusce luctus felis ac mi lacinia porttitor. Vivamus sed nunc turpis. Phasellus quis dui sed mauris sollicitudin consequat at ut nisi. Mauris egestas enim ac nisi ultrices facilisis. Praesent at metus risus, vitae congue nulla. Integer dapibus orci eu tellus consectetur eu posuere nibh tincidunt. Proin lacinia, arcu quis ultrices porttitor, nisi libero convallis velit, sit amet vehicula nisi neque a justo. Suspendisse vitae sem quis diam pulvinar fermentum a vel augue. Vestibulum id sagittis dolor.

    + +

    + More ... +

    +
    + +
    +

    Hello from pattern-test-response.html!

    + +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed urna augue. Nulla facilisi. Aliquam erat volutpat. Cras pharetra ante vel metus pulvinar vestibulum. Praesent mollis dapibus nisl, id condimentum quam lacinia ut. Fusce luctus felis ac mi lacinia porttitor. Vivamus sed nunc turpis. Phasellus quis dui sed mauris sollicitudin consequat at ut nisi. Mauris egestas enim ac nisi ultrices facilisis. Praesent at metus risus, vitae congue nulla. Integer dapibus orci eu tellus consectetur eu posuere nibh tincidunt. Proin lacinia, arcu quis ultrices porttitor, nisi libero convallis velit, sit amet vehicula nisi neque a justo. Suspendisse vitae sem quis diam pulvinar fermentum a vel augue. Vestibulum id sagittis dolor.

    + +

    Proin gravida volutpat velit, sit amet pulvinar metus varius porttitor. Nulla dictum vulputate diam, nec placerat enim tempus at. Sed sodales sollicitudin nibh, a cursus leo pretium a. Morbi nisl magna, interdum ut interdum ut, volutpat nec enim. Integer enim nisl, consequat et elementum at, lobortis sit amet lectus. Aliquam egestas nisl condimentum diam hendrerit non congue augue facilisis. Suspendisse potenti.

    + +

    Sed ultricies luctus molestie. Donec facilisis adipiscing molestie. Suspendisse in nunc sed felis bibendum pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis purus odio, non elementum elit. Nullam sed nisl sapien. Vestibulum rhoncus, risus ac suscipit eleifend, urna quam accumsan turpis, eget ullamcorper nunc risus ut dolor. Curabitur eget quam erat. Aenean in dolor id ipsum lobortis feugiat. Morbi porta fringilla venenatis. Pellentesque vitae est neque, hendrerit eleifend erat. Donec fermentum augue id arcu pretium eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    +
    + + +
    + +
    + + + + +

    + More… +

    + + +

    + More… +

    + + +

    +

    + + +
    + +
    + +
    + +
    + +
    + +
    + +
    +

    Channel 1

    +

    I'm a description for channel 1

    +
    + +
    +

    Channel 2

    +

    I'm a description for channel 2

    +
    + + +
    +

    Channel 3

    +

    I'm a description for channel 3

    +
    + + + diff --git a/src/pat/inject/test-self-inject.html b/src/pat/inject/test-self-inject.html index baf1f1042..94dcd1020 100644 --- a/src/pat/inject/test-self-inject.html +++ b/src/pat/inject/test-self-inject.html @@ -1,13 +1,16 @@ - - Demo page - - - - - - Documentation - Global navigation - + + + Demo page + + + + + + + Documentation + Global navigation + + diff --git a/src/pat/inject/tests.js b/src/pat/inject/tests.js index 38bf8ba00..118999fba 100644 --- a/src/pat/inject/tests.js +++ b/src/pat/inject/tests.js @@ -1,7 +1,5 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { - describe("pat-inject", function() { - var deferred; var answer = function(html) { @@ -10,7 +8,7 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { beforeEach(function() { deferred = new $.Deferred(); - $("
    ", {id: "lab"}).appendTo(document.body); + $("
    ", { id: "lab" }).appendTo(document.body); }); afterEach(function() { @@ -22,34 +20,43 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { $("#lab").empty(); }); - it("allows you to specify the href to be applied to the clicked element after injection", function () { - var $a = $("link"); - var $div = $("
    "); - $("#lab").append($a).append($div); + it("allows you to specify the href to be applied to the clicked element after injection", function() { + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .append($a) + .append($div); var dummy_event = { - 'jqxhr': {'responseText': 'foo'}, - 'isPropagationStopped': function () { return true; } + jqxhr: { responseText: "foo" }, + isPropagationStopped: function() { + return true; + } }; var cfgs = pattern.extractConfig($a, {}); pattern.verifyConfig(cfgs, $a); pattern._onInjectSuccess($a, cfgs, dummy_event); - expect(cfgs[0].nextHref).toBe('http://patternslib.com'); - expect($a.attr("href")).toBe('http://patternslib.com'); + expect(cfgs[0].nextHref).toBe("http://patternslib.com"); + expect($a.attr("href")).toBe("http://patternslib.com"); }); - }); describe("The loading-class argument", function() { - afterEach(function() { $("#lab").empty(); }); it("has a default value of 'injecting' and gets added to the target while content is still loading'", function() { spyOn($, "ajax").and.returnValue(deferred); - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); var callback = jasmine.createSpy("patterns-injected"); $(document).on("patterns-injected", callback); @@ -58,47 +65,61 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { $a.trigger("click"); var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].loadingClass).toBe('injecting'); + expect(cfgs[0].loadingClass).toBe("injecting"); expect($div.hasClass("injecting")).toBeTruthy(); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($div.hasClass("injecting")).toBeFalsy(); expect(callback).toHaveBeenCalled(); }); it("can be set to another string value which then gets added to the target while content is still loading'", function() { spyOn($, "ajax").and.returnValue(deferred); - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); pattern.init($a); $a.trigger("click"); var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].loadingClass).toBe('other-class'); + expect(cfgs[0].loadingClass).toBe("other-class"); expect($div.hasClass("other-class")).toBeTruthy(); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($div.hasClass("other-class")).toBeFalsy(); }); it("can be set to an empty string value so that nothing gets added to the target while content is still loading'", function() { spyOn($, "ajax"); - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); pattern.init($a); $a.trigger("click"); var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].loadingClass).toBe(''); - expect($div[0].className).toBe(''); + expect(cfgs[0].loadingClass).toBe(""); + expect($div[0].className).toBe(""); }); }); @@ -108,36 +129,53 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("is by default set to 'class', which means it asks for confirmation based on a class on the target", function() { - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); spyOn(pattern, "onTrigger").and.callThrough(); - var spy_confirm = spyOn(window, 'confirm').and.returnValue(false); + var spy_confirm = spyOn(window, "confirm").and.returnValue( + false + ); // Test default value for parser argument var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].confirm).toBe('class'); + expect(cfgs[0].confirm).toBe("class"); // Test that confirm doesn't get called pattern.init($a); $a.trigger("click"); expect(spy_confirm).not.toHaveBeenCalled(); - $div.addClass('is-dirty'); + $div.addClass("is-dirty"); $a.trigger("click"); expect(spy_confirm).toHaveBeenCalled(); }); it("can be set to 'never' to never ask for confirmation", function() { - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); - var spy_onTrigger = spyOn(pattern, "onTrigger").and.callThrough(); - var spy_confirm = spyOn(window, 'confirm').and.returnValue(false); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); + var spy_onTrigger = spyOn( + pattern, + "onTrigger" + ).and.callThrough(); + var spy_confirm = spyOn(window, "confirm").and.returnValue( + false + ); // Test default value for parser argument var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].confirm).toBe('never'); + expect(cfgs[0].confirm).toBe("never"); // Test that confirm doesn't get called pattern.init($a); @@ -147,15 +185,25 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("can be set to 'always' to always ask for confirmation before injecting", function() { - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); - var spy_onTrigger = spyOn(pattern, "onTrigger").and.callThrough(); - var spy_confirm = spyOn(window, 'confirm').and.returnValue(true); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); + var spy_onTrigger = spyOn( + pattern, + "onTrigger" + ).and.callThrough(); + var spy_confirm = spyOn(window, "confirm").and.returnValue( + true + ); // Test default value for parser argument var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].confirm).toBe('always'); + expect(cfgs[0].confirm).toBe("always"); // Test that confirm does get called pattern.init($a); @@ -165,24 +213,36 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("can be set to 'form-data' to ask for confirmation before injecting over form fields changed by the user", function() { - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); - var spy_onTrigger = spyOn(pattern, "onTrigger").and.callThrough(); - var spy_confirm = spyOn(window, 'confirm').and.returnValue(true); + var $a = $( + 'link' + ); + var $div = $( + '
    ' + ); + $("#lab") + .empty() + .append($a) + .append($div); + var spy_onTrigger = spyOn( + pattern, + "onTrigger" + ).and.callThrough(); + var spy_confirm = spyOn(window, "confirm").and.returnValue( + true + ); // Test default value for parser argument var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].confirm).toBe('form-data'); + expect(cfgs[0].confirm).toBe("form-data"); - $('[name="name"]').val('hello world'); + $('[name="name"]').val("hello world"); // Test that confirm does get called pattern.init($a); $a.trigger("click"); expect(spy_confirm).toHaveBeenCalled(); - $('[name="name"]').val(''); + $('[name="name"]').val(""); $a.trigger("click"); expect(window.confirm.calls.count()).toBe(1); expect(spy_onTrigger).toHaveBeenCalled(); @@ -194,21 +254,28 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("can be used to provide a custom confirmation prompt message", function() { - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); spyOn(pattern, "onTrigger").and.callThrough(); - var spy_confirm = spyOn(window, 'confirm').and.returnValue(false); + var spy_confirm = spyOn(window, "confirm").and.returnValue( + false + ); // Test default value for parser argument var cfgs = pattern.extractConfig($a, {}); - expect(cfgs[0].confirm).toBe('always'); + expect(cfgs[0].confirm).toBe("always"); // Test that confirm doesn't get called pattern.init($a); $a.trigger("click"); expect(spy_confirm).toHaveBeenCalled(); - expect(spy_confirm).toHaveBeenCalledWith('Hello world'); + expect(spy_confirm).toHaveBeenCalledWith("Hello world"); }); }); }); @@ -216,88 +283,119 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { describe("rebaseHTML", function() { it("Basic markup with DOCTYPE", function() { expect( - pattern._rebaseHTML("base", "\n

    This is a simple test

    ")) - .toBe("

    This is a simple test

    "); + pattern._rebaseHTML( + "base", + "\n

    This is a simple test

    " + ) + ).toBe("

    This is a simple test

    "); }); it("Basic markup", function() { expect( - pattern._rebaseHTML("base", "

    This is a simple test

    ")) - .toBe("

    This is a simple test

    "); + pattern._rebaseHTML( + "base", + "

    This is a simple test

    " + ) + ).toBe("

    This is a simple test

    "); }); it("Recover from unclosed tags", function() { expect( - pattern._rebaseHTML("base", "

    This is a simple test

    ")) - .toBe("

    This is a simple test

    "); + pattern._rebaseHTML( + "base", + "

    This is a simple test

    " + ) + ).toBe("

    This is a simple test

    "); }); it("Element without link attribute", function() { var spy_rebaseURL = spyOn(utils, "rebaseURL"); expect( - pattern._rebaseHTML("base", "This is a test")) - .toBe("This is a test"); + pattern._rebaseHTML("base", "This is a test") + ).toBe("This is a test"); expect(spy_rebaseURL).not.toHaveBeenCalled(); }); it("Element with link attribute", function() { - var spy_rebaseURL = spyOn(utils, "rebaseURL").and.returnValue("REBASED"); + var spy_rebaseURL = spyOn(utils, "rebaseURL").and.returnValue( + "REBASED" + ); expect( - pattern._rebaseHTML("base", "This is a test")) - .toBe("This is a test"); - expect(spy_rebaseURL).toHaveBeenCalledWith("base", "example.com"); + pattern._rebaseHTML( + "base", + 'This is a test' + ) + ).toBe('This is a test'); + expect(spy_rebaseURL).toHaveBeenCalledWith( + "base", + "example.com" + ); }); it("Automatically fix casing of attribute", function() { spyOn(utils, "rebaseURL").and.returnValue("REBASED"); expect( - pattern._rebaseHTML("base", "This is a test")) - .toBe("This is a test"); + pattern._rebaseHTML( + "base", + 'This is a test' + ) + ).toBe('This is a test'); }); it("Check if image is rebased correctly", function() { spyOn(utils, "rebaseURL").and.returnValue("REBASED"); expect( - pattern._rebaseHTML("base", "")) - .toBe(""); + pattern._rebaseHTML("base", '') + ).toBe(''); }); it("Leave non attribute occurences of src intact", function() { spyOn(utils, "rebaseURL").and.returnValue("REBASED"); expect( - pattern._rebaseHTML("base", "

    This string has src = \"foo\" , src= bar , and SrC='foo'

    ")) - .toBe("

    This string has src = \"foo\" , src= bar , and SrC='foo'

    "); + pattern._rebaseHTML( + "base", + "

    This string has src = \"foo\" , src= bar , and SrC='foo'

    " + ) + ).toBe( + "

    This string has src = \"foo\" , src= bar , and SrC='foo'

    " + ); }); }); describe("parseRawHtml", function() { it("Roundtrip attributes with double quotes", function() { - var value = "{\"plugins\": \"paste\", \"content_css\": \"/_themes/Style/tiny-body.css\"}", + var value = + '{"plugins": "paste", "content_css": "/_themes/Style/tiny-body.css"}', input = "Test", $output = pattern._parseRawHtml(input, null); expect($output.find("a").attr("data-tinymce-json")).toBe(value); }); it("Roundtrip attributes with single quotes", function() { - var value = "{'plugins': 'paste', 'content_css': '/_themes/Style/tiny-body.css'}", - input = "Test", + var value = + "{'plugins': 'paste', 'content_css': '/_themes/Style/tiny-body.css'}", + input = 'Test', $output = pattern._parseRawHtml(input, null); expect($output.find("a").attr("data-tinymce-json")).toBe(value); }); - }); + }); describe("Functional tests", function() { describe("extract/verifyConfig", function() { var $a, $target; beforeEach(function() { - $a = $("link"); - $target = $("
    "); - - $("#lab").append($a).append($target); + $a = $( + 'link' + ); + $target = $('
    '); + + $("#lab") + .append($a) + .append($target); }); afterEach(function() { - $target.remove(); + $target.remove(); }); it("fall back to href id", function() { @@ -352,7 +450,10 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("parse autload delay argument", function() { - $a.attr("data-pat-inject", "trigger: autoload; delay: 1000;"); + $a.attr( + "data-pat-inject", + "trigger: autoload; delay: 1000;" + ); var cfgs = pattern.extractConfig($a); expect(pattern.verifyConfig(cfgs)).toBeTruthy(); expect(cfgs[0].trigger).toBe("autoload"); @@ -362,22 +463,28 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); describe("DOM tests", function() { - beforeEach(function() { - }); + beforeEach(function() {}); describe("The patterns-injected event", function() { it("gets triggered after injection has finished'", function() { spyOn($, "ajax").and.returnValue(deferred); - var $a = $("link"); - var $div = $("
    "); - $("#lab").empty().append($a).append($div); + var $a = $( + 'link' + ); + var $div = $('
    '); + $("#lab") + .empty() + .append($a) + .append($div); var callback = jasmine.createSpy("patterns-injected"); $(document).on("patterns-injected", callback); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect(callback).toHaveBeenCalled(); }); }); @@ -387,24 +494,31 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { beforeEach(function() { spyOn($, "ajax").and.returnValue(deferred); - $a = $("link"); - $div = $("
    "); - $("#lab").append($a).append($div); + $a = $( + 'link' + ); + $div = $('
    '); + $("#lab") + .append($a) + .append($div); }); - it("fetches url on click", function() { pattern.init($a); $a.trigger("click"); expect($.ajax).toHaveBeenCalled(); - expect($.ajax.calls.mostRecent().args[0].url).toBe("test.html"); + expect($.ajax.calls.mostRecent().args[0].url).toBe( + "test.html" + ); }); it("fetches url on autoload", function() { $a.attr("data-pat-inject", "autoload"); pattern.init($a); expect($.ajax).toHaveBeenCalled(); - expect($.ajax.calls.mostRecent().args[0].url).toBe("test.html"); + expect($.ajax.calls.mostRecent().args[0].url).toBe( + "test.html" + ); }); it("fetches url on autoload-delayed", function() { @@ -417,15 +531,19 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { it("fetches url on push_marker sent", function() { $a.attr("data-pat-inject", "push-marker: content-updated"); pattern.init($a); - $('body').trigger('push', ['content-updated']); + $("body").trigger("push", ["content-updated"]); expect($.ajax).toHaveBeenCalled(); - expect($.ajax.calls.mostRecent().args[0].url).toBe("test.html"); + expect($.ajax.calls.mostRecent().args[0].url).toBe( + "test.html" + ); }); it("injects into existing div", function() { pattern.init($a); $a.trigger("click"); - answer("
    replacement
    "); + answer( + '
    replacement
    ' + ); expect($div.html()).toBe("replacement"); }); @@ -433,7 +551,9 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { it("injects multiple times", function() { pattern.init($a); $a.trigger("click"); - answer("
    replacement
    "); + answer( + '
    replacement
    ' + ); expect($div.html()).toBe("replacement"); // Deferred objects are supposed to be resolved only once. @@ -441,25 +561,36 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { // It is only needed here, because this is the only test case that makes two ajax() calls. deferred = new $.Deferred(); $.ajax.calls.reset(); - $.ajax.and.returnValue(function() { return deferred; }()); + $.ajax.and.returnValue( + (function() { + return deferred; + })() + ); $a.trigger("click"); - answer("
    new replacement
    "); + answer( + '
    new replacement
    ' + ); expect($div.html()).toBe("new replacement"); }); it("takes multiple source-target pairs", function() { - $a.attr("data-pat-inject", "#someid1 #otherid1 && #someid2 #otherid2"); - var $target1 = $("
    "), - $target2 = $("
    "); + $a.attr( + "data-pat-inject", + "#someid1 #otherid1 && #someid2 #otherid2" + ); + var $target1 = $('
    '), + $target2 = $('
    '); $div.append($target1).append($target2); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl1
    " + - "
    repl2
    " + - ""); + answer( + "" + + '
    repl1
    ' + + '
    repl2
    ' + + "" + ); expect($target1.html()).toBe("repl1"); expect($target2.html()).toBe("repl2"); @@ -467,15 +598,17 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { it("acts on other selectors as well", function() { $a.attr("data-pat-inject", "target: #someid > .someclass"); - var $target1 = $("
    "), - $target2 = $("
    "); + var $target1 = $('
    '), + $target2 = $('
    '); $div.append($target1).append($target2); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($target1.html()).toBe("repl"); expect($target2.html()).toBe("repl"); @@ -486,83 +619,113 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($div.children().attr("id")).toBe("otherid"); expect($div.children().attr("class")).toBe("someclass"); }); it("replaces target if both selectors have ::element", function() { - $a.attr("data-pat-inject", "#someid::element #otherid::element"); - $div.append($("
    ")); + $a.attr( + "data-pat-inject", + "#someid::element #otherid::element" + ); + $div.append($('
    ')); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($div.children().attr("id")).toBe("someid"); expect($div.children().attr("class")).toBe("someclass"); }); it("allows ::before and ::after in target selector", function() { - $a.attr("data-pat-inject", "target: #target1::after && target: #target2::before"); - var $target1 = $("
    content
    "), - $target2 = $("
    content
    "); + $a.attr( + "data-pat-inject", + "target: #target1::after && target: #target2::before" + ); + var $target1 = $('
    content
    '), + $target2 = $('
    content
    '); $div.append($target1).append($target2); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($target1.html()).toBe("contentrepl"); expect($target2.html()).toBe("replcontent"); }); it("allows mixing ::element and ::after in target", function() { - $a.attr("data-pat-inject", "target: #otherid::element::after"); - $div.append($("
    ")); + $a.attr( + "data-pat-inject", + "target: #otherid::element::after" + ); + $div.append($('
    ')); pattern.init($a); $a.trigger("click"); - answer("" + - "
    repl
    " + - ""); - - expect($div.contents().last().text()).toBe("repl"); + answer( + "" + + '
    repl
    ' + + "" + ); + + expect( + $div + .contents() + .last() + .text() + ).toBe("repl"); }); }); - describe("inject on forms", function() { var $form, $div; beforeEach(function() { spyOn($, "ajax").and.returnValue(deferred); - $form = $("
    "); - $div = $("
    "); - $("#lab").append($form).append($div); + $form = $( + '' + ); + $div = $('
    '); + $("#lab") + .append($form) + .append($div); }); - it("trigger injection on submit", function() { pattern.init($form); $form.trigger("submit"); - answer("" + - "
    repl
    " + - ""); + answer( + "" + + '
    repl
    ' + + "" + ); expect($div.html()).toBe("repl"); }); it("pass get form parameters in ajax call as data", function() { $form.attr("method", "get"); - $form.append($("")); + $form.append( + $( + '' + ) + ); pattern.init($form); $form.trigger("submit"); @@ -574,7 +737,11 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { it("pass post form parameters in ajax call as data", function() { $form.attr("method", "post"); - $form.append($("")); + $form.append( + $( + '' + ) + ); pattern.init($form); $form.trigger("submit"); @@ -586,7 +753,9 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { //expect(ajaxargs.data.get('param')).toContain("somevalue"); }); it("pass submit button value in ajax call as data", function() { - var $submit = $(""); + var $submit = $( + '' + ); $form.attr("method", "post"); $form.append($submit); @@ -603,8 +772,12 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { describe("formaction attribute on submit buttons", function() { it("use submit button formaction value as action URL", function() { - var $submit1 = $(""), - $submit2 = $(""); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ); $submit2.attr("formaction", "other.html"); $form.append($submit1).append($submit2); @@ -619,8 +792,12 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("use an image submit with a formaction value as action URL", function() { - var $submit1 = $(""), - $submit2 = $(""); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ); $submit2.attr("formaction", "other.html"); $form.append($submit1).append($submit2); @@ -635,9 +812,13 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("use fragment in formaction value as source + target selector", function() { - var $submit1 = $(""), - $submit2 = $(""), - $target = $("
    "); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ), + $target = $('
    '); $submit2.attr("formaction", "other.html#otherid"); $form.append($submit1).append($submit2); @@ -645,9 +826,11 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { pattern.init($form); $submit2.trigger("click"); - answer("" + - "
    other
    " + - ""); + answer( + "" + + '
    other
    ' + + "" + ); var ajaxargs = $.ajax.calls.mostRecent().args[0]; expect($.ajax).toHaveBeenCalled(); @@ -657,9 +840,13 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("use fragment in formaction value as source selector, respect target", function() { - var $submit1 = $(""), - $submit2 = $(""), - $target = $("
    "); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ), + $target = $('
    '); $form.attr("data-pat-inject", "target: #othertarget"); $submit2.attr("formaction", "other.html#otherid"); @@ -668,9 +855,11 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { pattern.init($form); $submit2.trigger("click"); - answer("" + - "
    other
    " + - ""); + answer( + "" + + '
    other
    ' + + "" + ); var ajaxargs = $.ajax.calls.mostRecent().args[0]; expect($.ajax).toHaveBeenCalled(); @@ -680,21 +869,30 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("formaction works with multiple targets", function() { - var $submit1 = $(""), - $submit2 = $(""), - $target1 = $("
    "), - $target2 = $("
    "); - - $form.attr("data-pat-inject", "target: #target1 && target: #target2"); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ), + $target1 = $('
    '), + $target2 = $('
    '); + + $form.attr( + "data-pat-inject", + "target: #target1 && target: #target2" + ); $submit2.attr("formaction", "other.html#otherid"); $form.append($submit1).append($submit2); $div.append($target1).append($target2); pattern.init($form); $submit2.trigger("click"); - answer("" + - "
    other
    " + - ""); + answer( + "" + + '
    other
    ' + + "" + ); var ajaxargs = $.ajax.calls.mostRecent().args[0]; expect($.ajax).toHaveBeenCalled(); @@ -705,22 +903,31 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("formaction works with multiple sources", function() { - var $submit1 = $(""), - $submit2 = $(""), - $target1 = $("
    "), - $target2 = $("
    "); - - $form.attr("data-pat-inject", "#someid #target1 && #otherid #target2"); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ), + $target1 = $('
    '), + $target2 = $('
    '); + + $form.attr( + "data-pat-inject", + "#someid #target1 && #otherid #target2" + ); $submit2.attr("formaction", "other.html#otherid"); $form.append($submit1).append($submit2); $div.append($target1).append($target2); pattern.init($form); $submit2.trigger("click"); - answer("" + - "
    some
    " + - "
    other
    " + - ""); + answer( + "" + + '
    some
    ' + + '
    other
    ' + + "" + ); var ajaxargs = $.ajax.calls.mostRecent().args[0]; expect($.ajax).toHaveBeenCalled(); @@ -731,22 +938,31 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); it("formaction works source and target on the button", function() { - var $submit1 = $(""), - $submit2 = $(""), - $target1 = $("
    "), - $target2 = $("
    "); - - $submit2.attr("data-pat-inject", "#someid #target1 && #otherid #target2"); + var $submit1 = $( + '' + ), + $submit2 = $( + '' + ), + $target1 = $('
    '), + $target2 = $('
    '); + + $submit2.attr( + "data-pat-inject", + "#someid #target1 && #otherid #target2" + ); $submit2.attr("formaction", "other.html#otherid"); $form.append($submit1).append($submit2); $div.append($target1).append($target2); pattern.init($form); $submit2.trigger("click"); - answer("" + - "
    some
    " + - "
    other
    " + - ""); + answer( + "" + + '
    some
    ' + + '
    other
    ' + + "" + ); var ajaxargs = $.ajax.calls.mostRecent().args[0]; expect($.ajax).toHaveBeenCalled(); @@ -759,5 +975,4 @@ define(["pat-inject", "pat-utils"], function(pattern, utils) { }); }); }); - });