Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update jquery.custom-highlight.js #4

Merged
merged 1 commit into from
Nov 28, 2024
Merged

Update jquery.custom-highlight.js #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
356 changes: 147 additions & 209 deletions jquery.custom-highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,209 +1,147 @@
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
;(function ( $, window, document, undefined ) {

"use strict";

// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.

// window and document are passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).

// Create the defaults once
var pluginName = "customHighlight",
defaults = {
actions: [{"test_action":"Test action"}],
position: "left",
textcolor: "on",
backgroundcolor: "off"

};

// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}

// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
init: function () {
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.settings
// you can add more functions like the one below and
// call them like so: this.yourOtherFunction(this.element, this.settings).
// retrieve the mouse coordinates if needed
var mouseX;
var mouseY;

jQuery(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY - 10;
});

var self = this;

$(this.element).mouseup(function (e) {
if (self.getSelectedText() != "") {
var curr_span_id = self.add_cs_class(self.getSelectedText());
var curr_span_id_for_use = '#' + curr_span_id;

//Check settings and apply colors if needed.
if (self.settings.textcolor == "on")
{
var r_color = '#' + Math.random().toString(16).slice(2, 8);
$("#" + curr_span_id).css('color', r_color);
}

if (self.settings.backgroundcolor == "on")
{
var b_color = '#' + Math.random().toString(16).slice(2, 8);

if (r_color != b_color)
{
//Add classes to element for checking

$( "#" + curr_span_id ).add( ".light" ).css( "color", "#3A393C" );
$( "#" + curr_span_id ).add( ".dark" ).css( "color", "#FBFBFB" );

//Assign the element a background color

$("#" + curr_span_id).css('background-color', b_color);

// Target your element

$("#" + curr_span_id).colourBrightness();
}
else {
var b_color = '#' + Math.random().toString(16).slice(2, 8);

//Add classes to element for checking

$( "#" + curr_span_id ).add( ".light" ).css( "color", "#3A393C" );
$( "#" + curr_span_id ).add( ".dark" ).css( "color", "#FBFBFB" );

//Assign the element a background color

$("#" + curr_span_id).css('background-color', b_color);

// Target your element

$("#" + curr_span_id).colourBrightness();
}
}

//Check number of objects within json array. If more than one then remove the default and proceed to iterate through the actions to create the relevant buttons.
var num_of_objects = self.settings.actions.length;

var all_actions = self.settings.actions;

var first;
for (var key in all_actions[0]) {
//Get first object
first = key;

}

if (first == "test_action")
{
//Set the buttons
var all_buttons = "<button type='button' class='btn' onclick=test_action('" + curr_span_id_for_use + "')>Test Action</button>";
}
else
{

var arr = [];

for(var x in all_actions){

arr.push(all_actions[x]);

var buttons = '';

for (var i in arr) {
var but_array = arr[i];
var the_ch_function_name = Object.keys(but_array)[0];
var the_ch_value_name = but_array[the_ch_function_name];

buttons = buttons + "<button type='button' class='btn' onclick="+ the_ch_function_name + "('" + curr_span_id_for_use + "')>" + the_ch_value_name + "</button>" + " ";

}

//Set the buttons
var all_buttons = buttons;
}

}

$("#" + curr_span_id).tooltipster({
content: all_buttons,
multiple: true,
position: self.settings.position,
delay: 100,
maxWidth: 500,
speed: 300,
interactive: true,
animation: 'grow',
trigger: 'hover',
contentAsHTML: true
});
}
});


},
getSelectedText: function () {
// some logic
var t = (document.all) ? document.selection.createRange().text : document.getSelection();
return t;
},
add_cs_class: function (s_text) {
// some logic
var selection = s_text;
var selection_text = selection.toString();

// Add a span around the selected text, along with a class and an ID

var span = document.createElement('SPAN');
span.textContent = " + " + selection_text + " + ";
span.classList.add("cs-editing");
span.classList.add("tooltip");

var range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(span);

var custom_hash_1 = Math.random().toString(36).slice(2);
span.id = "cs-editing-" + custom_hash_1;

return span.id;
},
test_action: function () {
alert("Here's a Test Action!");
}
});

// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function ( options ) {
return this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
};

})( jQuery, window, document );
;(function ($, window, document, undefined) {

"use strict";

const pluginName = "customHighlight",
defaults = {
actions: [{"test_action": "Test action"}],
position: "left",
textcolor: "on",
backgroundcolor: "off"
};

class Plugin {
constructor(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}

init() {
let mouseX;
let mouseY;

$(document).mousemove(e => {
mouseX = e.pageX;
mouseY = e.pageY - 10;
});

$(this.element).mouseup(e => this.handleMouseUp(e));
}

handleMouseUp(e) {
const selectedText = this.getSelectedText();

if (selectedText != "") {
const curr_span_id = this.add_cs_class(selectedText);
const $currSpanElement = $("#" + curr_span_id);

this.applyTextcolor($currSpanElement);
this.applyBackgroundcolor($currSpanElement, $currSpanElement.css('color'));

this.applyActionsToElement($currSpanElement);
}
}

getSelectedText() {
return (document.all) ? document.selection.createRange().text : document.getSelection();
}

applyTextcolor($element) {
if (this.settings.textcolor == "on") {
const r_color = '#' + Math.random().toString(16).slice(2, 8);
$element.css('color', r_color);
}
}

applyBackgroundcolor($element, r_color) {
if (this.settings.backgroundcolor == "on") {
let b_color = '#' + Math.random().toString(16).slice(2, 8);

if (r_color == b_color) {
b_color = '#' + Math.random().toString(16).slice(2, 8);
}

$element.addClass(".light").css("color", "#3A393C");
$element.addClass(".dark").css("color", "#FBFBFB");

$element.css('background-color', b_color);

$element.colourBrightness();
}
}

applyActionsToElement($element) {
const all_actions = this.settings.actions;
let all_buttons = "";

if (all_actions.length > 0) {
all_buttons = this.getButtonsFromActions(all_actions);
}

$element.tooltipster({
content: all_buttons,
multiple: true,
position: this.settings.position,
delay: 100,
maxWidth: 500,
speed: 300,
interactive: true,
animation: 'grow',
trigger: 'hover',
contentAsHTML: true
});
}

getButtonsFromActions(actions) {
const first = Object.keys(actions[0])[0];
let buttons = "";

if (first == "test_action") {
buttons = "<button type='button' class='btn' onclick=test_action('" + curr_span_id_for_use + "')>Test Action</button>";
} else {
for (let action of actions) {
for (let key in action) {
buttons += "<button type='button' class='btn' onclick=" + key + "('" + curr_span_id_for_use + "')>" + action[key] + "</button> ";
}
}
}

return buttons;
}

add_cs_class(s_text) {
const selection = s_text;
const selection_text = selection.toString();
const span = document.createElement('SPAN');

span.textContent = " + " + selection_text + " + ";
span.classList.add("cs-editing");
span.classList.add("tooltip");

const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(span);

const custom_hash_1 = Math.random().toString(36).slice(2);
span.id = "cs-editing-" + custom_hash_1;

return span.id;
}

test_action() {
alert("Here's a Test Action!");
}
}

$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};

})(jQuery, window, document);