New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

blacklight-frontend

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

blacklight-frontend - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 7.0.0-alpha.1

92

app/assets/javascripts/blacklight/blacklight.js

@@ -34,3 +34,3 @@ Blacklight = function () {

// turbolinks triggers page:load events on page transition
// If app isn't using turbolinks, this event will never be triggered, no prob.
// If app isn't using turbolinks, this event will never be triggered, no prob.
$(document).on(Blacklight.listeners(), function () {

@@ -40,2 +40,3 @@ Blacklight.activate();

$('.no-js').removeClass('no-js').addClass('js');
/*global Bloodhound */

@@ -255,5 +256,5 @@

/*
/*
The blacklight modal plugin can display some interactions inside a Bootstrap
modal window, including some multi-page interactions.
modal window, including some multi-page interactions.

@@ -264,3 +265,3 @@ It supports unobtrusive Javascript, where a link or form that would have caused

on the page with id #blacklight-modal to use as the modal -- the standard Blacklight
layout provides this.
layout provides this.

@@ -280,3 +281,3 @@ To make a link or form have their results display inside a modal, add

of the container will be placed inside the modal, the rest of the
page will be ignored.
page will be ignored.

@@ -287,3 +288,3 @@ If you'd like to have a link or button that closes the modal,

an href on this link for non-JS contexts, we'll make sure
inside the modal it closes the modal and the link is NOT followed.
inside the modal it closes the modal and the link is NOT followed.

@@ -293,3 +294,3 @@ Link or forms inside the modal will ordinarily cause page loads

to stay within the modal, just add `data-blacklight-modal="preserve"`
to the link or form.
to the link or form.

@@ -303,3 +304,3 @@ Here's an example of what might be returned, demonstrating most of the devices available:

</div>
<div class="modal-body">

@@ -320,3 +321,3 @@ <p>Some message</p>

to be closed. And if this element includes a node with class "flash_messages",
the flash-messages node will be added to the main page inside #main-flahses.
the flash-messages node will be added to the main page inside #main-flahses.

@@ -327,12 +328,12 @@ == Events

dialog as the target, right after content is loaded into the modal but before
it is shown (if not already a shown modal). In an event handler, you can
it is shown (if not already a shown modal). In an event handler, you can
inspect loaded content by looking inside $(this). If you call event.preventDefault(),
we won't 'show' the dialog (although it may already have been shown, you may want to
$(this).modal("hide") if you want to ensure hidden/closed.
$(this).modal("hide") if you want to ensure hidden/closed.
The data-blacklight-modal=close behavior is implemented with this event, see for example.
The data-blacklight-modal=close behavior is implemented with this event, see for example.
*/
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
if (Blacklight.modal === undefined) {

@@ -366,3 +367,3 @@ Blacklight.modal = {};

// to show to user in modal. Right now called only for extreme
// network errors.
// network errors.
Blacklight.modal.onFailure = function (data) {

@@ -374,27 +375,20 @@ var contents = "<div class='modal-header'>" + "<div class='modal-title'>Network Error</div>" + '<button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="Close">' + ' <span aria-hidden="true">&times;</span>' + '</button>';

Blacklight.modal.receiveAjax = function (data) {
if (data.readyState == 0) {
// Network error, could not contact server.
Blacklight.modal.onFailure(data);
} else {
var contents = data.responseText;
Blacklight.modal.receiveAjax = function (contents) {
// does it have a data- selector for container?
// important we don't execute script tags, we shouldn't.
// code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/master/src/ajax/load.js?source=c#L62
var container = $("<div>").append(jQuery.parseHTML(contents)).find(Blacklight.modal.containerSelector).first();
if (container.length !== 0) {
contents = container.html();
}
// does it have a data- selector for container?
// important we don't execute script tags, we shouldn't.
// code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/master/src/ajax/load.js?source=c#L62
var container = $("<div>").append(jQuery.parseHTML(contents)).find(Blacklight.modal.containerSelector).first();
if (container.size() !== 0) {
contents = container.html();
}
$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
// send custom event with the modal dialog div as the target
var e = $.Event('loaded.blacklight.blacklight-modal');
$(Blacklight.modal.modalSelector).trigger(e);
// if they did preventDefault, don't show the dialog
if (e.isDefaultPrevented()) return;
// send custom event with the modal dialog div as the target
var e = $.Event('loaded.blacklight.blacklight-modal');
$(Blacklight.modal.modalSelector).trigger(e);
// if they did preventDefault, don't show the dialog
if (e.isDefaultPrevented()) return;
$(Blacklight.modal.modalSelector).modal('show');
}
$(Blacklight.modal.modalSelector).modal('show');
};

@@ -405,8 +399,5 @@

var jqxhr = $.ajax({
url: $(this).attr('href'),
dataType: 'script'
});
jqxhr.always(Blacklight.modal.receiveAjax);
$.ajax({
url: $(this).attr('href')
}).fail(Blacklight.modal.onFailure).done(Blacklight.modal.receiveAjax);
};

@@ -417,10 +408,7 @@

var jqxhr = $.ajax({
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method'), //POST',
dataType: 'script'
});
jqxhr.always(Blacklight.modal.receiveAjax);
type: $(this).attr('method') // POST
}).fail(Blacklight.modal.onFailure).done(Blacklight.modal.receiveAjax);
};

@@ -431,3 +419,3 @@

// you can catch it and call e.preventDefault() to abort
// setup.
// setup.
var e = $.Event('setup.blacklight.blacklight-modal');

@@ -439,3 +427,3 @@ $("body").trigger(e);

// into one selector with a comma, so if something matches BOTH selectors, it
// still only gets the event handler called once.
// still only gets the event handler called once.
$("body").on("click", Blacklight.modal.triggerLinkSelector + ", " + Blacklight.modal.preserveLinkSelector, Blacklight.modal.modalAjaxLinkClick);

@@ -449,3 +437,3 @@ $("body").on("submit", Blacklight.modal.triggerFormSelector + ", " + Blacklight.modal.preserveFormSelector, Blacklight.modal.modalAjaxFormSubmit);

// use, we need to suppress following the a's href that's there for
// non-JS contexts.
// non-JS contexts.
$("body ").on("click", Blacklight.modal.modalSelector + " a[data-dismiss~=modal]", function (e) {

@@ -452,0 +440,0 @@ e.preventDefault();

110

app/javascript/blacklight/modal.js
//= require blacklight/core
/*
/*
The blacklight modal plugin can display some interactions inside a Bootstrap
modal window, including some multi-page interactions.
modal window, including some multi-page interactions.

@@ -11,3 +11,3 @@ It supports unobtrusive Javascript, where a link or form that would have caused

on the page with id #blacklight-modal to use as the modal -- the standard Blacklight
layout provides this.
layout provides this.

@@ -27,3 +27,3 @@ To make a link or form have their results display inside a modal, add

of the container will be placed inside the modal, the rest of the
page will be ignored.
page will be ignored.

@@ -34,3 +34,3 @@ If you'd like to have a link or button that closes the modal,

an href on this link for non-JS contexts, we'll make sure
inside the modal it closes the modal and the link is NOT followed.
inside the modal it closes the modal and the link is NOT followed.

@@ -40,3 +40,3 @@ Link or forms inside the modal will ordinarily cause page loads

to stay within the modal, just add `data-blacklight-modal="preserve"`
to the link or form.
to the link or form.

@@ -50,3 +50,3 @@ Here's an example of what might be returned, demonstrating most of the devices available:

</div>
<div class="modal-body">

@@ -67,3 +67,3 @@ <p>Some message</p>

to be closed. And if this element includes a node with class "flash_messages",
the flash-messages node will be added to the main page inside #main-flahses.
the flash-messages node will be added to the main page inside #main-flahses.

@@ -74,12 +74,12 @@ == Events

dialog as the target, right after content is loaded into the modal but before
it is shown (if not already a shown modal). In an event handler, you can
it is shown (if not already a shown modal). In an event handler, you can
inspect loaded content by looking inside $(this). If you call event.preventDefault(),
we won't 'show' the dialog (although it may already have been shown, you may want to
$(this).modal("hide") if you want to ensure hidden/closed.
$(this).modal("hide") if you want to ensure hidden/closed.
The data-blacklight-modal=close behavior is implemented with this event, see for example.
The data-blacklight-modal=close behavior is implemented with this event, see for example.
*/
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
// We keep all our data in Blacklight.modal object.
// Create lazily if someone else created first.
if (Blacklight.modal === undefined) {

@@ -113,3 +113,3 @@ Blacklight.modal = {};

// to show to user in modal. Right now called only for extreme
// network errors.
// network errors.
Blacklight.modal.onFailure = function(data) {

@@ -122,32 +122,24 @@ var contents = "<div class='modal-header'>" +

$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
$(Blacklight.modal.modalSelector).modal('show');
$(Blacklight.modal.modalSelector).modal('show');
}
Blacklight.modal.receiveAjax = function (data) {
if (data.readyState == 0) {
// Network error, could not contact server.
Blacklight.modal.onFailure(data)
}
else {
var contents = data.responseText;
// does it have a data- selector for container?
// important we don't execute script tags, we shouldn't.
// code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/master/src/ajax/load.js?source=c#L62
var container = $("<div>").
append( jQuery.parseHTML(contents) ).find( Blacklight.modal.containerSelector ).first();
if (container.size() !== 0) {
contents = container.html();
}
Blacklight.modal.receiveAjax = function (contents) {
// does it have a data- selector for container?
// important we don't execute script tags, we shouldn't.
// code modelled off of JQuery ajax.load. https://github.com/jquery/jquery/blob/master/src/ajax/load.js?source=c#L62
var container = $("<div>").
append( jQuery.parseHTML(contents) ).find( Blacklight.modal.containerSelector ).first();
if (container.length !== 0) {
contents = container.html();
}
$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
$(Blacklight.modal.modalSelector).find('.modal-content').html(contents);
// send custom event with the modal dialog div as the target
var e = $.Event('loaded.blacklight.blacklight-modal')
$(Blacklight.modal.modalSelector).trigger(e);
// if they did preventDefault, don't show the dialog
if (e.isDefaultPrevented()) return;
// send custom event with the modal dialog div as the target
var e = $.Event('loaded.blacklight.blacklight-modal')
$(Blacklight.modal.modalSelector).trigger(e);
// if they did preventDefault, don't show the dialog
if (e.isDefaultPrevented()) return;
$(Blacklight.modal.modalSelector).modal('show');
}
$(Blacklight.modal.modalSelector).modal('show');
};

@@ -159,21 +151,19 @@

var jqxhr = $.ajax({
url: $(this).attr('href'),
dataType: 'script'
});
jqxhr.always( Blacklight.modal.receiveAjax );
$.ajax({
url: $(this).attr('href')
})
.fail(Blacklight.modal.onFailure)
.done(Blacklight.modal.receiveAjax)
};
Blacklight.modal.modalAjaxFormSubmit = function(e) {
e.preventDefault();
e.preventDefault();
var jqxhr = $.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method'), //POST',
dataType: 'script'
});
jqxhr.always(Blacklight.modal.receiveAjax);
$.ajax({
url: $(this).attr('action'),
data: $(this).serialize(),
type: $(this).attr('method') // POST
})
.fail(Blacklight.modal.onFailure)
.done(Blacklight.modal.receiveAjax)
}

@@ -186,3 +176,3 @@

// you can catch it and call e.preventDefault() to abort
// setup.
// setup.
var e = $.Event('setup.blacklight.blacklight-modal');

@@ -194,3 +184,3 @@ $("body").trigger(e);

// into one selector with a comma, so if something matches BOTH selectors, it
// still only gets the event handler called once.
// still only gets the event handler called once.
$("body").on("click", Blacklight.modal.triggerLinkSelector + ", " + Blacklight.modal.preserveLinkSelector,

@@ -206,3 +196,3 @@ Blacklight.modal.modalAjaxLinkClick);

// use, we need to suppress following the a's href that's there for
// non-JS contexts.
// non-JS contexts.
$("body ").on("click", Blacklight.modal.modalSelector + " a[data-dismiss~=modal]", function (e) {

@@ -215,3 +205,3 @@ e.preventDefault();

// to catch contained data-blacklight-modal=closed directions
Blacklight.modal.check_close_modal = function(event) {
Blacklight.modal.check_close_modal = function(event) {
if ($(event.target).find(Blacklight.modal.modalCloseSelector).length) {

@@ -225,8 +215,8 @@ modal_flashes = $(this).find('.flash_messages');

main_flashes.append(modal_flashes);
modal_flashes.fadeIn(500);
modal_flashes.fadeIn(500);
}
}
Blacklight.onLoad(function() {
Blacklight.onLoad(function() {
Blacklight.modal.setup_modal();
});

6

package.json
{
"name": "blacklight-frontend",
"version": "1.0.0-alpha.3",
"version": "7.0.0-alpha.1",
"description": "[![Build Status](https://travis-ci.org/projectblacklight/blacklight.png?branch=master)](https://travis-ci.org/projectblacklight/blacklight) [![Gem Version](https://badge.fury.io/rb/blacklight.png)](http://badge.fury.io/rb/blacklight) [![Coverage Status](https://coveralls.io/repos/github/projectblacklight/blacklight/badge.svg?branch=master)](https://coveralls.io/github/projectblacklight/blacklight?branch=master)",

@@ -14,3 +14,3 @@ "main": "app/assets/javascripts/blacklight",

"author": "",
"license": "APACHE 2",
"license": "Apache-2.0",
"bugs": {

@@ -25,3 +25,3 @@ "url": "https://github.com/projectblacklight/blacklight/issues"

"dependencies": {
"bootstrap": "4.0.0-beta",
"bootstrap": "4.0.0",
"jquery": "^3.2.1",

@@ -28,0 +28,0 @@ "typeahead.js": "^0.11.1"

68

README.md

@@ -39,3 +39,3 @@ # Blacklight

* Bundler
* Rails 4.2+
* Rails 5.0+

@@ -54,1 +54,67 @@ ## Configuring Apache Solr

1. run `npm run-script js-compile-bundle` to build the bundle
1. run `npm publish` to push the javascript package to https://npmjs.org/package/blacklight-frontend
## Using the javascript
Install Webpacker
Add blacklight-frontend as a dependency by doing:
```
yarn add blacklight-frontend
```
Then add these lines to `config/webpack/environment.js` as per https://getbootstrap.com/docs/4.0/getting-started/webpack/
and https://github.com/rails/webpacker/blob/master/docs/webpack.md#plugins
```js
const webpack = require('webpack')
environment.plugins.set(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
)
module.exports = environment
```
In you pack file (`app/javascript/packs/application.js`), require blacklight:
```
require('blacklight-frontend/app/assets/javascripts/blacklight/blacklight')
```
Then remove these requires from `app/assets/javascripts/application.js`:
```
//= require jquery
//= require popper
//= require twitter/typeahead
//= require bootstrap
```
Add the following to the app/views/layouts/blacklight/base.html.erb (maybe this can be simpler)
```
<%= javascript_pack_tag 'application' %>
```
You can probably remove the `<%= javascript_include_tag %>`
### Using sprockets (not webpacker)
If you want to use sprockets rather than webpacker, you must ensure these dependencies are in your Gemfile (done automatically by the install generator):
```
gem 'bootstrap', '~> 4.0'
gem 'popper_js'
gem 'twitter-typeahead-rails'
```
Then insure these requires are in `app/assets/javascripts/application.js` (done automatically by the install generator):
```
//= require jquery
//= require popper
//= require twitter/typeahead
//= require bootstrap
```
app/javascript/blacklight/index.js
app/assets/stylesheets/blacklight/_bootstrap_overrides.scss

Sorry, the diff of this file is not supported yet

app/assets/stylesheets/blacklight/_constraints.scss

Sorry, the diff of this file is not supported yet

app/assets/stylesheets/blacklight/_header.scss

Sorry, the diff of this file is not supported yet

app/assets/stylesheets/blacklight/_twitter_typeahead.scss

Sorry, the diff of this file is not supported yet

Gemfile.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc