Yellow theme minor adds
This commit is contained in:
sosguns2002
parent
a939088c1e
commit
5254c0146f
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -0,0 +1,214 @@
|
|||
/**
|
||||
* Copyright Marc J. Schmidt. See the LICENSE file at the top-level
|
||||
* directory of this distribution and at
|
||||
* https://github.com/marcj/css-element-queries/blob/master/LICENSE.
|
||||
*/
|
||||
;
|
||||
(function (root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(factory);
|
||||
} else if (typeof exports === "object") {
|
||||
module.exports = factory();
|
||||
} else {
|
||||
root.ResizeSensor = factory();
|
||||
}
|
||||
}(typeof window !== 'undefined' ? window : this, function () {
|
||||
|
||||
// Make sure it does not throw in a SSR (Server Side Rendering) situation
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
// Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
|
||||
// In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
|
||||
// would generate too many unnecessary events.
|
||||
var requestAnimationFrame = window.requestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
function (fn) {
|
||||
return window.setTimeout(fn, 20);
|
||||
};
|
||||
|
||||
/**
|
||||
* Iterate over each of the provided element(s).
|
||||
*
|
||||
* @param {HTMLElement|HTMLElement[]} elements
|
||||
* @param {Function} callback
|
||||
*/
|
||||
function forEachElement(elements, callback){
|
||||
var elementsType = Object.prototype.toString.call(elements);
|
||||
var isCollectionTyped = ('[object Array]' === elementsType
|
||||
|| ('[object NodeList]' === elementsType)
|
||||
|| ('[object HTMLCollection]' === elementsType)
|
||||
|| ('[object Object]' === elementsType)
|
||||
|| ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
|
||||
|| ('undefined' !== typeof Elements && elements instanceof Elements) //mootools
|
||||
);
|
||||
var i = 0, j = elements.length;
|
||||
if (isCollectionTyped) {
|
||||
for (; i < j; i++) {
|
||||
callback(elements[i]);
|
||||
}
|
||||
} else {
|
||||
callback(elements);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Class for dimension change detection.
|
||||
*
|
||||
* @param {Element|Element[]|Elements|jQuery} element
|
||||
* @param {Function} callback
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
var ResizeSensor = function(element, callback) {
|
||||
/**
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function EventQueue() {
|
||||
var q = [];
|
||||
this.add = function(ev) {
|
||||
q.push(ev);
|
||||
};
|
||||
|
||||
var i, j;
|
||||
this.call = function() {
|
||||
for (i = 0, j = q.length; i < j; i++) {
|
||||
q[i].call();
|
||||
}
|
||||
};
|
||||
|
||||
this.remove = function(ev) {
|
||||
var newQueue = [];
|
||||
for(i = 0, j = q.length; i < j; i++) {
|
||||
if(q[i] !== ev) newQueue.push(q[i]);
|
||||
}
|
||||
q = newQueue;
|
||||
}
|
||||
|
||||
this.length = function() {
|
||||
return q.length;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {Function} resized
|
||||
*/
|
||||
function attachResizeEvent(element, resized) {
|
||||
if (!element) return;
|
||||
if (element.resizedAttached) {
|
||||
element.resizedAttached.add(resized);
|
||||
return;
|
||||
}
|
||||
|
||||
element.resizedAttached = new EventQueue();
|
||||
element.resizedAttached.add(resized);
|
||||
|
||||
element.resizeSensor = document.createElement('div');
|
||||
element.resizeSensor.className = 'resize-sensor';
|
||||
var style = 'position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;';
|
||||
var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
|
||||
|
||||
element.resizeSensor.style.cssText = style;
|
||||
element.resizeSensor.innerHTML =
|
||||
'<div class="resize-sensor-expand" style="' + style + '">' +
|
||||
'<div style="' + styleChild + '"></div>' +
|
||||
'</div>' +
|
||||
'<div class="resize-sensor-shrink" style="' + style + '">' +
|
||||
'<div style="' + styleChild + ' width: 200%; height: 200%"></div>' +
|
||||
'</div>';
|
||||
element.appendChild(element.resizeSensor);
|
||||
|
||||
if (element.resizeSensor.offsetParent !== element) {
|
||||
element.style.position = 'relative';
|
||||
}
|
||||
|
||||
var expand = element.resizeSensor.childNodes[0];
|
||||
var expandChild = expand.childNodes[0];
|
||||
var shrink = element.resizeSensor.childNodes[1];
|
||||
var dirty, rafId, newWidth, newHeight;
|
||||
var lastWidth = element.offsetWidth;
|
||||
var lastHeight = element.offsetHeight;
|
||||
|
||||
var reset = function() {
|
||||
expandChild.style.width = '100000px';
|
||||
expandChild.style.height = '100000px';
|
||||
|
||||
expand.scrollLeft = 100000;
|
||||
expand.scrollTop = 100000;
|
||||
|
||||
shrink.scrollLeft = 100000;
|
||||
shrink.scrollTop = 100000;
|
||||
};
|
||||
|
||||
reset();
|
||||
|
||||
var onResized = function() {
|
||||
rafId = 0;
|
||||
|
||||
if (!dirty) return;
|
||||
|
||||
lastWidth = newWidth;
|
||||
lastHeight = newHeight;
|
||||
|
||||
if (element.resizedAttached) {
|
||||
element.resizedAttached.call();
|
||||
}
|
||||
};
|
||||
|
||||
var onScroll = function() {
|
||||
newWidth = element.offsetWidth;
|
||||
newHeight = element.offsetHeight;
|
||||
dirty = newWidth != lastWidth || newHeight != lastHeight;
|
||||
|
||||
if (dirty && !rafId) {
|
||||
rafId = requestAnimationFrame(onResized);
|
||||
}
|
||||
|
||||
reset();
|
||||
};
|
||||
|
||||
var addEvent = function(el, name, cb) {
|
||||
if (el.attachEvent) {
|
||||
el.attachEvent('on' + name, cb);
|
||||
} else {
|
||||
el.addEventListener(name, cb);
|
||||
}
|
||||
};
|
||||
|
||||
addEvent(expand, 'scroll', onScroll);
|
||||
addEvent(shrink, 'scroll', onScroll);
|
||||
}
|
||||
|
||||
forEachElement(element, function(elem){
|
||||
attachResizeEvent(elem, callback);
|
||||
});
|
||||
|
||||
this.detach = function(ev) {
|
||||
ResizeSensor.detach(element, ev);
|
||||
};
|
||||
};
|
||||
|
||||
ResizeSensor.detach = function(element, ev) {
|
||||
forEachElement(element, function(elem){
|
||||
if (!elem) return
|
||||
if(elem.resizedAttached && typeof ev == "function"){
|
||||
elem.resizedAttached.remove(ev);
|
||||
if(elem.resizedAttached.length()) return;
|
||||
}
|
||||
if (elem.resizeSensor) {
|
||||
if (elem.contains(elem.resizeSensor)) {
|
||||
elem.removeChild(elem.resizeSensor);
|
||||
}
|
||||
delete elem.resizeSensor;
|
||||
delete elem.resizedAttached;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return ResizeSensor;
|
||||
|
||||
}));
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
(function(){
|
||||
|
||||
function getCookie(name) {
|
||||
var value = "; " + document.cookie;
|
||||
var parts = value.split("; " + name + "=");
|
||||
if (parts.length == 2) return parts.pop().split(";").shift();
|
||||
}
|
||||
|
||||
////////// UPLOAD FUNCTIONS
|
||||
|
||||
$( '.inputfile' ).each( function() {
|
||||
var $input = $( this ),
|
||||
$label = $input.next( 'label' ),
|
||||
labelVal = $label.html();
|
||||
|
||||
$input.on( 'change', function( e )
|
||||
{
|
||||
var fileName = '';
|
||||
|
||||
if( this.files && this.files.length > 1 )
|
||||
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
|
||||
else if( e.target.value )
|
||||
fileName = e.target.value.split( '\\' ).pop();
|
||||
|
||||
if( fileName )
|
||||
$label.find( 'span' ).html( fileName );
|
||||
else
|
||||
$label.html( labelVal );
|
||||
});
|
||||
|
||||
// Firefox bug fix
|
||||
$input
|
||||
.on( 'focus', function(){ $input.addClass( 'has-focus' ); })
|
||||
.on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
|
||||
});
|
||||
|
||||
//generates a unique id
|
||||
var generateId = function(is_pos){
|
||||
if (is_pos) {
|
||||
return "positive-" + +new Date() + Math.random().toFixed(5).substring(2);
|
||||
} else {
|
||||
return "negative-" + +new Date() + Math.random().toFixed(5).substring(2);
|
||||
}
|
||||
}
|
||||
|
||||
var handleFileUploadButton = function() {
|
||||
$("form#profile-input-form").on('change', function(){
|
||||
if ($('#profile-file-input')[0].value === "") {
|
||||
window.alert("You must specify a data file to import.");
|
||||
return false;
|
||||
}
|
||||
var formData = new FormData($(this)[0]);
|
||||
$.ajax({
|
||||
url: "/",
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
async: false,
|
||||
success: function (data) {
|
||||
obj = JSON && JSON.parse(data) || $.parseJSON(data);
|
||||
console.log(obj);
|
||||
// reset localStorage and store the uploaded profiles data
|
||||
localStorage.clear();
|
||||
// set poswords
|
||||
var poswords = [];
|
||||
if (obj.hasOwnProperty("poswords")) {
|
||||
poswords = obj["poswords"];
|
||||
for (var word in poswords) {
|
||||
var obj2 = {};
|
||||
obj2["phrase"] = word;
|
||||
obj2["weight"] = poswords[word];
|
||||
localStorage.setItem(generateId(1), JSON.stringify(obj2));
|
||||
}
|
||||
}
|
||||
// set poswords
|
||||
var negwords = [];
|
||||
if (obj.hasOwnProperty("negwords")) {
|
||||
negwords = obj["negwords"];
|
||||
for (var word in negwords) {
|
||||
var obj2 = {};
|
||||
obj2["phrase"] = word;
|
||||
obj2["weight"] = negwords[word];
|
||||
localStorage.setItem(generateId(0), JSON.stringify(obj2));
|
||||
}
|
||||
}
|
||||
if (obj.hasOwnProperty("contextprev")) {
|
||||
localStorage.setItem("contextprev", String(obj["contextprev"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("contextmiddle")) {
|
||||
localStorage.setItem("contextmiddle", String(obj["contextmiddle"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("contextnext")) {
|
||||
localStorage.setItem("contextnext", String(obj["contextnext"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("lettercase")) {
|
||||
localStorage.setItem("lettercase", String(obj["lettercase"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("wordssplitnum")) {
|
||||
localStorage.setItem("wordssplitnum", String(obj["wordssplitnum"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("stopwords")) {
|
||||
localStorage.setItem("stopwords", String(obj["stopwords"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("punctuation")) {
|
||||
localStorage.setItem("punctuation", String(obj["punctuation"]));
|
||||
}
|
||||
// set easy mode option to custom
|
||||
localStorage.setItem("matchlevel", "#c-level");
|
||||
window.location="upload-codes";
|
||||
},
|
||||
error: function (xhr, ajaxOptions, thrownError) {
|
||||
UIkit.notification({
|
||||
message: xhr.responseText,
|
||||
status: 'danger',
|
||||
pos: 'top-center',
|
||||
timeout: 0
|
||||
});
|
||||
},
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false
|
||||
});
|
||||
$("#profile-file-input")[0].value = "";
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
var handleExampleLoadButton = function() {
|
||||
$("#example-load-btn").on('click', function(){
|
||||
var formData = new FormData();
|
||||
formData.append("example", "1");
|
||||
$.ajax({
|
||||
url: "/",
|
||||
type: 'POST',
|
||||
data: formData,
|
||||
async: false,
|
||||
success: function (data) {
|
||||
obj = JSON && JSON.parse(data) || $.parseJSON(data);
|
||||
console.log(obj);
|
||||
// reset localStorage and store the uploaded profiles data
|
||||
localStorage.clear();
|
||||
// set poswords
|
||||
var poswords = [];
|
||||
if (obj.hasOwnProperty("poswords")) {
|
||||
poswords = obj["poswords"];
|
||||
for (var word in poswords) {
|
||||
var obj2 = {};
|
||||
obj2["phrase"] = word;
|
||||
obj2["weight"] = poswords[word];
|
||||
localStorage.setItem(generateId(1), JSON.stringify(obj2));
|
||||
}
|
||||
}
|
||||
// set poswords
|
||||
var negwords = [];
|
||||
if (obj.hasOwnProperty("negwords")) {
|
||||
negwords = obj["negwords"];
|
||||
for (var word in negwords) {
|
||||
var obj2 = {};
|
||||
obj2["phrase"] = word;
|
||||
obj2["weight"] = negwords[word];
|
||||
localStorage.setItem(generateId(0), JSON.stringify(obj2));
|
||||
}
|
||||
}
|
||||
if (obj.hasOwnProperty("contextprev")) {
|
||||
localStorage.setItem("contextprev", String(obj["contextprev"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("contextmiddle")) {
|
||||
localStorage.setItem("contextmiddle", String(obj["contextmiddle"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("contextnext")) {
|
||||
localStorage.setItem("contextnext", String(obj["contextnext"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("lettercase")) {
|
||||
localStorage.setItem("lettercase", String(obj["lettercase"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("wordssplitnum")) {
|
||||
localStorage.setItem("wordssplitnum", String(obj["wordssplitnum"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("stopwords")) {
|
||||
localStorage.setItem("stopwords", String(obj["stopwords"]));
|
||||
}
|
||||
if (obj.hasOwnProperty("punctuation")) {
|
||||
localStorage.setItem("punctuation", String(obj["punctuation"]));
|
||||
}
|
||||
// set easy mode option to custom
|
||||
localStorage.setItem("matchlevel", "#c-level");
|
||||
window.location="upload-codes";
|
||||
},
|
||||
error: function (xhr, ajaxOptions, thrownError) {
|
||||
UIkit.notification({
|
||||
message: xhr.responseText,
|
||||
status: 'danger',
|
||||
pos: 'top-center',
|
||||
timeout: 0
|
||||
});
|
||||
},
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var init = function(){
|
||||
handleFileUploadButton();
|
||||
handleExampleLoadButton();
|
||||
};
|
||||
|
||||
//start all
|
||||
init();
|
||||
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
var displayNotification = function(message, status, timeout) {
|
||||
UIkit.notification({
|
||||
message: message,
|
||||
status: status,
|
||||
pos: 'top',
|
||||
timeout: timeout
|
||||
});
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,745 @@
|
|||
/**
|
||||
* Sticky Sidebar JavaScript Plugin.
|
||||
* @version 3.3.0
|
||||
* @author Ahmed Bouhuolia <a.bouhuolia@gmail.com>
|
||||
* @license The MIT License (MIT)
|
||||
*/
|
||||
const StickySidebar = (() => {
|
||||
|
||||
// ---------------------------------
|
||||
// # Define Constants
|
||||
// ---------------------------------
|
||||
//
|
||||
const EVENT_KEY = '.stickySidebar';
|
||||
const VERSION = '3.2.0';
|
||||
|
||||
const DEFAULTS = {
|
||||
|
||||
/**
|
||||
* Additional top spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
topSpacing: 0,
|
||||
|
||||
/**
|
||||
* Additional bottom spacing of the element when it becomes sticky.
|
||||
* @type {Numeric|Function}
|
||||
*/
|
||||
bottomSpacing: 0,
|
||||
|
||||
/**
|
||||
* Container sidebar selector to know what the beginning and end of sticky element.
|
||||
* @type {String|False}
|
||||
*/
|
||||
containerSelector: false,
|
||||
|
||||
/**
|
||||
* Inner wrapper selector.
|
||||
* @type {String}
|
||||
*/
|
||||
innerWrapperSelector: '.inner-wrapper-sticky',
|
||||
|
||||
/**
|
||||
* The name of CSS class to apply to elements when they have become stuck.
|
||||
* @type {String|False}
|
||||
*/
|
||||
stickyClass: 'is-affixed',
|
||||
|
||||
/**
|
||||
* Detect when sidebar and its container change height so re-calculate their dimensions.
|
||||
* @type {Boolean}
|
||||
*/
|
||||
resizeSensor: true,
|
||||
|
||||
/**
|
||||
* The sidebar returns to its normal position if its width below this value.
|
||||
* @type {Numeric}
|
||||
*/
|
||||
minWidth: false
|
||||
};
|
||||
|
||||
// ---------------------------------
|
||||
// # Class Definition
|
||||
// ---------------------------------
|
||||
//
|
||||
/**
|
||||
* Sticky Sidebar Class.
|
||||
* @public
|
||||
*/
|
||||
class StickySidebar{
|
||||
|
||||
/**
|
||||
* Sticky Sidebar Constructor.
|
||||
* @constructor
|
||||
* @param {HTMLElement|String} sidebar - The sidebar element or sidebar selector.
|
||||
* @param {Object} options - The options of sticky sidebar.
|
||||
*/
|
||||
constructor(sidebar, options = {}){
|
||||
this.options = StickySidebar.extend(DEFAULTS, options);
|
||||
|
||||
// Sidebar element query if there's no one, throw error.
|
||||
this.sidebar = ('string' === typeof sidebar ) ? document.querySelector(sidebar) : sidebar;
|
||||
if( 'undefined' === typeof this.sidebar )
|
||||
throw new Error("There is no specific sidebar element.");
|
||||
|
||||
this.sidebarInner = false;
|
||||
this.container = this.sidebar.parentElement;
|
||||
|
||||
// Current Affix Type of sidebar element.
|
||||
this.affixedType = 'STATIC';
|
||||
this.direction = 'down';
|
||||
this.support = {
|
||||
transform: false,
|
||||
transform3d: false
|
||||
};
|
||||
|
||||
this._initialized = false;
|
||||
this._reStyle = false;
|
||||
this._breakpoint = false;
|
||||
this._resizeListeners = [];
|
||||
|
||||
// Dimensions of sidebar, container and screen viewport.
|
||||
this.dimensions = {
|
||||
translateY: 0,
|
||||
topSpacing: 0,
|
||||
lastTopSpacing: 0,
|
||||
bottomSpacing: 0,
|
||||
lastBottomSpacing: 0,
|
||||
sidebarHeight: 0,
|
||||
sidebarWidth: 0,
|
||||
containerTop: 0,
|
||||
containerHeight: 0,
|
||||
viewportHeight: 0,
|
||||
viewportTop: 0,
|
||||
lastViewportTop: 0,
|
||||
};
|
||||
|
||||
// Bind event handlers for referencability.
|
||||
['handleEvent'].forEach( (method) => {
|
||||
this[method] = this[method].bind(this);
|
||||
});
|
||||
|
||||
// Initialize sticky sidebar for first time.
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the sticky sidebar by adding inner wrapper, define its container,
|
||||
* min-width breakpoint, calculating dimensions, adding helper classes and inline style.
|
||||
* @private
|
||||
*/
|
||||
initialize(){
|
||||
this._setSupportFeatures();
|
||||
|
||||
// Get sticky sidebar inner wrapper, if not found, will create one.
|
||||
if( this.options.innerWrapperSelector ){
|
||||
this.sidebarInner = this.sidebar.querySelector(this.options.innerWrapperSelector);
|
||||
|
||||
if( null === this.sidebarInner )
|
||||
this.sidebarInner = false;
|
||||
}
|
||||
|
||||
if( ! this.sidebarInner ){
|
||||
let wrapper = document.createElement('div');
|
||||
wrapper.setAttribute('class', 'inner-wrapper-sticky');
|
||||
this.sidebar.appendChild(wrapper);
|
||||
|
||||
while( this.sidebar.firstChild != wrapper )
|
||||
wrapper.appendChild(this.sidebar.firstChild);
|
||||
|
||||
this.sidebarInner = this.sidebar.querySelector('.inner-wrapper-sticky');
|
||||
}
|
||||
|
||||
// Container wrapper of the sidebar.
|
||||
if( this.options.containerSelector ){
|
||||
let containers = document.querySelectorAll(this.options.containerSelector);
|
||||
containers = Array.prototype.slice.call(containers);
|
||||
|
||||
containers.forEach((container, item) => {
|
||||
if( ! container.contains(this.sidebar) ) return;
|
||||
this.container = container;
|
||||
});
|
||||
|
||||
if( ! containers.length )
|
||||
throw new Error("The container does not contains on the sidebar.");
|
||||
}
|
||||
|
||||
// If top/bottom spacing is not function parse value to integer.
|
||||
if( 'function' !== typeof this.options.topSpacing )
|
||||
this.options.topSpacing = parseInt(this.options.topSpacing) || 0;
|
||||
|
||||
if( 'function' !== typeof this.options.bottomSpacing )
|
||||
this.options.bottomSpacing = parseInt(this.options.bottomSpacing) || 0;
|
||||
|
||||
// Breakdown sticky sidebar if screen width below `options.minWidth`.
|
||||
this._widthBreakpoint();
|
||||
|
||||
// Calculate dimensions of sidebar, container and viewport.
|
||||
this.calcDimensions();
|
||||
|
||||
// Affix sidebar in proper position.
|
||||
this.stickyPosition();
|
||||
|
||||
// Bind all events.
|
||||
this.bindEvents();
|
||||
|
||||
// Inform other properties the sticky sidebar is initialized.
|
||||
this._initialized = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind all events of sticky sidebar plugin.
|
||||
* @protected
|
||||
*/
|
||||
bindEvents(){
|
||||
window.addEventListener('resize', this, {passive: true});
|
||||
window.addEventListener('scroll', this, {passive: true});
|
||||
|
||||
this.sidebar.addEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
if( this.options.resizeSensor && 'undefined' !== typeof ResizeSensor ){
|
||||
new ResizeSensor(this.sidebarInner, this.handleEvent);
|
||||
new ResizeSensor(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles all events of the plugin.
|
||||
* @param {Object} event - Event object passed from listener.
|
||||
*/
|
||||
handleEvent(event){
|
||||
this.updateSticky(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates dimensions of sidebar, container and screen viewpoint
|
||||
* @public
|
||||
*/
|
||||
calcDimensions(){
|
||||
if( this._breakpoint ) return;
|
||||
var dims = this.dimensions;
|
||||
|
||||
// Container of sticky sidebar dimensions.
|
||||
dims.containerTop = StickySidebar.offsetRelative(this.container).top;
|
||||
dims.containerHeight = this.container.clientHeight;
|
||||
dims.containerBottom = dims.containerTop + dims.containerHeight;
|
||||
|
||||
// Sidebar dimensions.
|
||||
dims.sidebarHeight = this.sidebarInner.offsetHeight;
|
||||
dims.sidebarWidth = this.sidebar.offsetWidth;
|
||||
|
||||
// Screen viewport dimensions.
|
||||
dims.viewportHeight = window.innerHeight;
|
||||
|
||||
this._calcDimensionsWithScroll();
|
||||
}
|
||||
|
||||
/**
|
||||
* Some dimensions values need to be up-to-date when scrolling the page.
|
||||
* @private
|
||||
*/
|
||||
_calcDimensionsWithScroll(){
|
||||
var dims = this.dimensions;
|
||||
|
||||
dims.sidebarLeft = StickySidebar.offsetRelative(this.sidebar).left;
|
||||
|
||||
dims.viewportTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
dims.viewportBottom = dims.viewportTop + dims.viewportHeight;
|
||||
dims.viewportLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
||||
|
||||
dims.topSpacing = this.options.topSpacing;
|
||||
dims.bottomSpacing = this.options.bottomSpacing;
|
||||
|
||||
if( 'function' === typeof dims.topSpacing )
|
||||
dims.topSpacing = parseInt(dims.topSpacing(this.sidebar)) || 0;
|
||||
|
||||
if( 'function' === typeof dims.bottomSpacing )
|
||||
dims.bottomSpacing = parseInt(dims.bottomSpacing(this.sidebar)) || 0;
|
||||
|
||||
if( 'VIEWPORT-TOP' === this.affixedType ){
|
||||
// Adjust translate Y in the case decrease top spacing value.
|
||||
if( dims.topSpacing < dims.lastTopSpacing ){
|
||||
dims.translateY += dims.lastTopSpacing - dims.topSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
|
||||
} else if( 'VIEWPORT-BOTTOM' === this.affixedType ){
|
||||
// Adjust translate Y in the case decrease bottom spacing value.
|
||||
if( dims.bottomSpacing < dims.lastBottomSpacing ){
|
||||
dims.translateY += dims.lastBottomSpacing - dims.bottomSpacing;
|
||||
this._reStyle = true;
|
||||
}
|
||||
}
|
||||
|
||||
dims.lastTopSpacing = dims.topSpacing;
|
||||
dims.lastBottomSpacing = dims.bottomSpacing;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the sidebar is bigger than viewport.
|
||||
* @public
|
||||
* @return {Boolean}
|
||||
*/
|
||||
isSidebarFitsViewport(){
|
||||
return this.dimensions.sidebarHeight < this.dimensions.viewportHeight;
|
||||
}
|
||||
|
||||
/**
|
||||
* Observe browser scrolling direction top and down.
|
||||
*/
|
||||
observeScrollDir(){
|
||||
var dims = this.dimensions;
|
||||
if( dims.lastViewportTop === dims.viewportTop ) return;
|
||||
|
||||
var furthest = 'down' === this.direction ? Math.min : Math.max;
|
||||
|
||||
// If the browser is scrolling not in the same direction.
|
||||
if( dims.viewportTop === furthest(dims.viewportTop, dims.lastViewportTop) )
|
||||
this.direction = 'down' === this.direction ? 'up' : 'down';
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets affix type of sidebar according to current scrollTop and scrollLeft.
|
||||
* Holds all logical affix of the sidebar when scrolling up and down and when sidebar
|
||||
* is bigger than viewport and vice versa.
|
||||
* @public
|
||||
* @return {String|False} - Proper affix type.
|
||||
*/
|
||||
getAffixType(){
|
||||
var dims = this.dimensions, affixType = false;
|
||||
|
||||
this._calcDimensionsWithScroll();
|
||||
|
||||
var sidebarBottom = dims.sidebarHeight + dims.containerTop;
|
||||
var colliderTop = dims.viewportTop + dims.topSpacing;
|
||||
var colliderBottom = dims.viewportBottom - dims.bottomSpacing;
|
||||
|
||||
// When browser is scrolling top.
|
||||
if( 'up' === this.direction ){
|
||||
if( colliderTop <= dims.containerTop ){
|
||||
dims.translateY = 0;
|
||||
affixType = 'STATIC';
|
||||
|
||||
} else if( colliderTop <= dims.translateY + dims.containerTop ){
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
|
||||
} else if( ! this.isSidebarFitsViewport() && dims.containerTop <= colliderTop ){
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
// When browser is scrolling up.
|
||||
} else {
|
||||
// When sidebar element is not bigger than screen viewport.
|
||||
if( this.isSidebarFitsViewport() ){
|
||||
|
||||
if( dims.sidebarHeight + colliderTop >= dims.containerBottom ){
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
|
||||
} else if( colliderTop >= dims.containerTop ){
|
||||
dims.translateY = colliderTop - dims.containerTop;
|
||||
affixType = 'VIEWPORT-TOP';
|
||||
}
|
||||
// When sidebar element is bigger than screen viewport.
|
||||
} else {
|
||||
|
||||
if( dims.containerBottom <= colliderBottom ){
|
||||
dims.translateY = dims.containerBottom - sidebarBottom;
|
||||
affixType = 'CONTAINER-BOTTOM';
|
||||
|
||||
} else if( sidebarBottom + dims.translateY <= colliderBottom ){
|
||||
dims.translateY = colliderBottom - sidebarBottom;
|
||||
affixType = 'VIEWPORT-BOTTOM';
|
||||
|
||||
} else if( dims.containerTop + dims.translateY <= colliderTop ){
|
||||
affixType = 'VIEWPORT-UNBOTTOM';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make sure the translate Y is not bigger than container height.
|
||||
dims.translateY = Math.max(0, dims.translateY);
|
||||
dims.translateY = Math.min(dims.containerHeight, dims.translateY);
|
||||
|
||||
dims.lastViewportTop = dims.viewportTop;
|
||||
return affixType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets inline style of sticky sidebar wrapper and inner wrapper according
|
||||
* to its affix type.
|
||||
* @private
|
||||
* @param {String} affixType - Affix type of sticky sidebar.
|
||||
* @return {Object}
|
||||
*/
|
||||
_getStyle(affixType){
|
||||
if( 'undefined' === typeof affixType ) return;
|
||||
|
||||
var style = {inner: {}, outer: {}};
|
||||
var dims = this.dimensions;
|
||||
|
||||
switch( affixType ){
|
||||
case 'VIEWPORT-TOP':
|
||||
style.inner = {position: 'fixed', top: dims.topSpacing,
|
||||
left: dims.sidebarLeft - dims.viewportLeft, width: dims.sidebarWidth};
|
||||
break;
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
style.inner = {position: 'fixed', top: 'auto', left: dims.sidebarLeft,
|
||||
bottom: dims.bottomSpacing, width: dims.sidebarWidth};
|
||||
break;
|
||||
case 'CONTAINER-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
let translate = this._getTranslate(0, dims.translateY + 'px');
|
||||
|
||||
if( translate )
|
||||
style.inner = {transform: translate};
|
||||
else
|
||||
style.inner = {position: 'absolute', top: dims.translateY, width: dims.sidebarWidth};
|
||||
break;
|
||||
}
|
||||
|
||||
switch( affixType ){
|
||||
case 'VIEWPORT-TOP':
|
||||
case 'VIEWPORT-BOTTOM':
|
||||
case 'VIEWPORT-UNBOTTOM':
|
||||
case 'CONTAINER-BOTTOM':
|
||||
style.outer = {height: dims.sidebarHeight, position: 'relative'};
|
||||
break;
|
||||
}
|
||||
|
||||
style.outer = StickySidebar.extend({height: '', position: ''}, style.outer);
|
||||
style.inner = StickySidebar.extend({position: 'relative', top: '', left: '',
|
||||
bottom: '', width: '', transform: this._getTranslate()}, style.inner);
|
||||
|
||||
return style;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cause the sidebar to be sticky according to affix type by adding inline
|
||||
* style, adding helper class and trigger events.
|
||||
* @function
|
||||
* @protected
|
||||
* @param {string} force - Update sticky sidebar position by force.
|
||||
*/
|
||||
stickyPosition(force){
|
||||
if( this._breakpoint ) return;
|
||||
|
||||
force = this._reStyle || force || false;
|
||||
|
||||
var offsetTop = this.options.topSpacing;
|
||||
var offsetBottom = this.options.bottomSpacing;
|
||||
|
||||
var affixType = this.getAffixType();
|
||||
var style = this._getStyle(affixType);
|
||||
|
||||
if( (this.affixedType != affixType || force) && affixType ){
|
||||
let affixEvent = 'affix.' + affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixEvent);
|
||||
|
||||
if( 'STATIC' === affixType )
|
||||
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
|
||||
else
|
||||
StickySidebar.addClass(this.sidebar, this.options.stickyClass);
|
||||
|
||||
for( let key in style.outer ){
|
||||
let _unit = ('number' === typeof style.outer[key]) ? 'px' : '';
|
||||
this.sidebar.style[key] = style.outer[key];
|
||||
}
|
||||
|
||||
for( let key in style.inner ){
|
||||
let _unit = ('number' === typeof style.inner[key]) ? 'px' : '';
|
||||
this.sidebarInner.style[key] = style.inner[key] + _unit;
|
||||
}
|
||||
|
||||
let affixedEvent = 'affixed.'+ affixType.toLowerCase().replace('viewport-', '') + EVENT_KEY;
|
||||
StickySidebar.eventTrigger(this.sidebar, affixedEvent);
|
||||
} else {
|
||||
if( this._initialized ) this.sidebarInner.style.left = style.inner.left;
|
||||
}
|
||||
|
||||
this.affixedType = affixType;
|
||||
}
|
||||
|
||||
/**
|
||||
* Breakdown sticky sidebar when window width is below `options.minWidth` value.
|
||||
* @protected
|
||||
*/
|
||||
_widthBreakpoint(){
|
||||
|
||||
if( window.innerWidth <= this.options.minWidth ){
|
||||
this._breakpoint = true;
|
||||
this.affixedType = 'STATIC';
|
||||
|
||||
this.sidebar.removeAttribute('style');
|
||||
StickySidebar.removeClass(this.sidebar, this.options.stickyClass);
|
||||
this.sidebarInner.removeAttribute('style');
|
||||
} else {
|
||||
this._breakpoint = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Switches between functions stack for each event type, if there's no
|
||||
* event, it will re-initialize sticky sidebar.
|
||||
* @public
|
||||
*/
|
||||
updateSticky(event = {}){
|
||||
if( this._running ) return;
|
||||
this._running = true;
|
||||
|
||||
((eventType) => {
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
switch( eventType ){
|
||||
// When browser is scrolling and re-calculate just dimensions
|
||||
// within scroll.
|
||||
case 'scroll':
|
||||
this._calcDimensionsWithScroll();
|
||||
this.observeScrollDir();
|
||||
this.stickyPosition();
|
||||
break;
|
||||
|
||||
// When browser is resizing or there's no event, observe width
|
||||
// breakpoint and re-calculate dimensions.
|
||||
case 'resize':
|
||||
default:
|
||||
this._widthBreakpoint();
|
||||
this.calcDimensions();
|
||||
this.stickyPosition(true);
|
||||
break;
|
||||
}
|
||||
this._running = false;
|
||||
});
|
||||
})(event.type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set browser support features to the public property.
|
||||
* @private
|
||||
*/
|
||||
_setSupportFeatures(){
|
||||
var support = this.support;
|
||||
|
||||
support.transform = StickySidebar.supportTransform();
|
||||
support.transform3d = StickySidebar.supportTransform(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get translate value, if the browser supports transfrom3d, it will adopt it.
|
||||
* and the same with translate. if browser doesn't support both return false.
|
||||
* @param {Number} y - Value of Y-axis.
|
||||
* @param {Number} x - Value of X-axis.
|
||||
* @param {Number} z - Value of Z-axis.
|
||||
* @return {String|False}
|
||||
*/
|
||||
_getTranslate(y = 0, x = 0, z = 0){
|
||||
if( this.support.transform3d ) return 'translate3d(' + y +', '+ x +', '+ z +')';
|
||||
else if( this.support.translate ) return 'translate('+ y +', '+ x +')';
|
||||
else return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy sticky sidebar plugin.
|
||||
* @public
|
||||
*/
|
||||
destroy(){
|
||||
window.removeEventListener('resize', this);
|
||||
window.removeEventListener('scroll', this);
|
||||
|
||||
this.sidebar.classList.remove(this.options.stickyClass);
|
||||
this.sidebar.style.minHeight = '';
|
||||
|
||||
this.sidebar.removeEventListener('update' + EVENT_KEY, this);
|
||||
|
||||
var styleReset = {inner: {}, outer: {}};
|
||||
|
||||
styleReset.inner = {position: '', top: '', left: '', bottom: '', width: '', transform: ''};
|
||||
styleReset.outer = {height: '', position: ''};
|
||||
|
||||
for( let key in styleReset.outer )
|
||||
this.sidebar.style[key] = styleReset.outer[key];
|
||||
|
||||
for( let key in styleReset.inner )
|
||||
this.sidebarInner.style[key] = styleReset.inner[key];
|
||||
|
||||
if( this.options.resizeSensor && 'undefined' !== typeof ResizeSensor ){
|
||||
ResizeSensor.detach(this.sidebarInner, this.handleEvent);
|
||||
ResizeSensor.detach(this.container, this.handleEvent);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine if the browser supports CSS transform feature.
|
||||
* @function
|
||||
* @static
|
||||
* @param {Boolean} transform3d - Detect transform with translate3d.
|
||||
* @return {String}
|
||||
*/
|
||||
static supportTransform(transform3d){
|
||||
var result = false,
|
||||
property = (transform3d) ? 'perspective' : 'transform',
|
||||
upper = property.charAt(0).toUpperCase() + property.slice(1),
|
||||
prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
support = document.createElement('support'),
|
||||
style = support.style;
|
||||
|
||||
(property + ' ' + prefixes.join(upper + ' ') + upper).split(' ').forEach(function(property, i) {
|
||||
if (style[property] !== undefined) {
|
||||
result = property;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Trigger custom event.
|
||||
* @static
|
||||
* @param {DOMObject} element - Target element on the DOM.
|
||||
* @param {String} eventName - Event name.
|
||||
* @param {Object} data -
|
||||
*/
|
||||
static eventTrigger(element, eventName, data){
|
||||
try{
|
||||
var event = new CustomEvent(eventName, {detail: data});
|
||||
} catch(e){
|
||||
var event = document.createEvent('CustomEvent');
|
||||
event.initCustomEvent(eventName, true, true, data);
|
||||
}
|
||||
element.dispatchEvent(event);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extend options object with defaults.
|
||||
* @function
|
||||
* @static
|
||||
*/
|
||||
static extend(defaults, options){
|
||||
var results = {};
|
||||
for( let key in defaults ){
|
||||
if( 'undefined' !== typeof options[key] ) results[key] = options[key];
|
||||
else results[key] = defaults[key];
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current coordinates left and top of specific element.
|
||||
* @static
|
||||
*/
|
||||
static offsetRelative(element){
|
||||
var result = {left: 0, top: 0};
|
||||
|
||||
do{
|
||||
let offsetTop = element.offsetTop;
|
||||
let offsetLeft = element.offsetLeft;
|
||||
|
||||
if( ! isNaN(offsetTop) )
|
||||
result.top += offsetTop;
|
||||
|
||||
if( ! isNaN(offsetLeft) )
|
||||
result.left += offsetLeft;
|
||||
|
||||
element = ( 'BODY' === element.tagName ) ?
|
||||
element.parentElement : element.offsetParent;
|
||||
} while(element)
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add specific class name to specific element.
|
||||
* @static
|
||||
* @param {ObjectDOM} element
|
||||
* @param {String} className
|
||||
*/
|
||||
static addClass(element, className){
|
||||
if( ! StickySidebar.hasClass(element, className) ){
|
||||
if (element.classList)
|
||||
element.classList.add(className);
|
||||
else
|
||||
element.className += ' ' + className;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove specific class name to specific element
|
||||
* @static
|
||||
* @param {ObjectDOM} element
|
||||
* @param {String} className
|
||||
*/
|
||||
static removeClass(element, className){
|
||||
if( StickySidebar.hasClass(element, className) ){
|
||||
if (element.classList)
|
||||
element.classList.remove(className);
|
||||
else
|
||||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine weather the element has specific class name.
|
||||
* @static
|
||||
* @param {ObjectDOM} element
|
||||
* @param {String} className
|
||||
*/
|
||||
static hasClass(element, className){
|
||||
if (element.classList)
|
||||
return element.classList.contains(className);
|
||||
else
|
||||
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||||
}
|
||||
}
|
||||
|
||||
return StickySidebar;
|
||||
})();
|
||||
|
||||
|
||||
// Global
|
||||
// -------------------------
|
||||
window.StickySidebar = StickySidebar;
|
||||
|
||||
(() => {
|
||||
if( 'undefined' === typeof window ) return;
|
||||
|
||||
const plugin = window.$ || window.jQuery || window.Zepto;
|
||||
const DATA_NAMESPACE = 'stickySidebar';
|
||||
|
||||
// Make sure the site has jquery or zepto plugin.
|
||||
if( plugin ){
|
||||
/**
|
||||
* Sticky Sidebar Plugin Defintion.
|
||||
* @param {Object|String} - config
|
||||
*/
|
||||
function _jQueryPlugin(config){
|
||||
return this.each(function(){
|
||||
var $this = plugin(this),
|
||||
data = plugin(this).data(DATA_NAMESPACE);
|
||||
|
||||
if( ! data ){
|
||||
data = new StickySidebar(this, typeof config == 'object' && config);
|
||||
$this.data(DATA_NAMESPACE, data);
|
||||
}
|
||||
|
||||
if( 'string' === typeof config){
|
||||
if (data[config] === undefined && ['destroy', 'updateSticky'].indexOf(config) === -1)
|
||||
throw new Error('No method named "'+ config +'"');
|
||||
|
||||
data[config]();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
plugin.fn.stickySidebar = _jQueryPlugin;
|
||||
plugin.fn.stickySidebar.Constructor = StickySidebar;
|
||||
|
||||
const old = plugin.fn.stickySidebar;
|
||||
|
||||
/**
|
||||
* Sticky Sidebar No Conflict.
|
||||
*/
|
||||
plugin.fn.stickySidebar.noConflict = function(){
|
||||
plugin.fn.stickySidebar = old;
|
||||
return this;
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
|
@ -0,0 +1,308 @@
|
|||
{% extends "base_v2.html" %}
|
||||
{% block configure_profile %} class="current" {% end %}
|
||||
{% block content %}
|
||||
<title>Configure profile</title>
|
||||
<link rel="stylesheet" href="/static/animations.css"/>
|
||||
|
||||
<div class="uk-flex-inline cm-nav-container">
|
||||
<div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
|
||||
<div class="cm-navigation cm-nav-toolbar">
|
||||
<ul class="uk-subnav uk-subnav-line">
|
||||
<li class="cm-nav-li">
|
||||
<a class="cm-nav-a" href="upload-codes">
|
||||
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
|
||||
<span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cm-nav-li cm-nav-active">
|
||||
<a class="cm-nav-a">
|
||||
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
|
||||
<span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="cm-nav-li cm-nav-disabled">
|
||||
<a class="cm-nav-a" id="save-profile-option">
|
||||
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
|
||||
<span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="parent">
|
||||
<div id="child1" class="cm-config-settings-section">
|
||||
<div id="child1-inner" >
|
||||
<div class="cm-easy-config-section">
|
||||
<h4>Preconfigured rules <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
|
||||
<div class="cm-config-options-container">
|
||||
<div class="cm-config-options-connect-line"></div>
|
||||
<div class="uk-child-width-expand@s uk-text-center" uk-grid uk-switcher="animation: uk-animation-fade">
|
||||
<div>
|
||||
<a class="cm-config-option cm-config-light" id="1-level">
|
||||
<div class="cm-outer-circle-button">
|
||||
<div class="cm-circle-button">
|
||||
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Loose</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="cm-config-option cm-config-medium" id="2-level">
|
||||
<div class="cm-outer-circle-button">
|
||||
<div class="cm-circle-button">
|
||||
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Medium</span>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a class="cm-config-option cm-config-hard" id="3-level">
|
||||
<div class="cm-outer-circle-button">
|
||||
<div class="cm-circle-button">
|
||||
<div class="cm-circle-button-fill"><span uk-icon="icon: check" class="cm-config-option-check"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<span>Tight</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<a class="cm-config-option cm-config-advance" id="c-level">
|
||||
<div class="cm-circle-button">
|
||||
<div class="cm-circle-button-fill"></div>
|
||||
</div>
|
||||
<span>Advanced</span>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<ul class="uk-switcher uk-margin-small-top uk-text-small">
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
|
||||
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
|
||||
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="cm-advanced-tools-section">
|
||||
<label class="uk-form-label cm-advaned-tools-label" for="advaned-tools-label"><input id="advaned-tools-label" class="uk-checkbox" type="checkbox"> Customized rules <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
<div id="advaned-tools" style="display: none; margin-top: 20px;">
|
||||
<ul uk-accordion="multiple: true">
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Positive phrases</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<div class="cm-phrases-container">
|
||||
<header>
|
||||
<form id="word-form-pos" class="uk-grid-collapse uk-child-width-expand@s uk-text-center" uk-grid>
|
||||
<!-- <div class="cm-number-space uk-width-1-5@m">#</div> -->
|
||||
<input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-pos" placeholder="Phrase"/>
|
||||
<input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-pos" placeholder="Weight"/>
|
||||
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add"/>
|
||||
</form>
|
||||
<div class="scroll_holder">
|
||||
<div class="scroller"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="position: relative;"><!--
|
||||
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #fafafa; border-right: 1px solid #e8e8e8;"></div> -->
|
||||
<ul id="word-pos" class="uk-list uk-list-striped">
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="positive">
|
||||
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
|
||||
<div>
|
||||
<span class="count uk-text-middle" id="count-pos">0</span>
|
||||
<span class="uk-text-middle"> positive word(s)</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="cm-white-button cm-phrases-button uk-float-right uk-button uk-button-default" disabled id="clear-all-pos">Delete All</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Negative phrases</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<div class="word-container">
|
||||
<div class="cm-phrases-container">
|
||||
<header>
|
||||
<form class="uk-grid-collapse uk-child-width-expand@s uk-text-center" id="word-form-neg" uk-grid>
|
||||
<!-- <div class="cm-number-space uk-width-1-5@m">#</div> -->
|
||||
<input class="uk-width-expand uk-text-left cm-text-input cm-text-input-phrase" type="text" id="text-neg" placeholder="Phrase"/>
|
||||
<input class="uk-width-1-5@m uk-text-left cm-text-input cm-text-input-weight" type="number" name="weight" min="0" max="100" id="weight-neg" placeholder="Weight"/>
|
||||
<input type="submit" class="btn uk-width-1-4@m cm-main-button cm-phrases-button" value="Add"/>
|
||||
</form>
|
||||
<div class="scroll_holder">
|
||||
<div class="scroller"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div style="position: relative;">
|
||||
<!-- <div style="position: absolute; left: 0; top: 0; height: 100%; width: 40px; background-color: #fafafa; border-right: 1px solid #e8e8e8;"></div> -->
|
||||
<ul id="word-neg" class="uk-list uk-list-striped">
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="negative">
|
||||
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
|
||||
<div>
|
||||
<span class="count uk-text-middle" id="count-neg">0</span>
|
||||
<span class="uk-text-middle"> negative word(s)</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="cm-white-button cm-phrases-button uk-float-right uk-button uk-button-default" disabled id="clear-all-neg">Delete All</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Acknowledgement statement proccess</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<form class="uk-form-horizontal">
|
||||
<div>
|
||||
<label class="uk-form-label" for="word-split">Length of N-grams <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" type="number" name="word-split" min="0" max="10" id="word-split" placeholder="Word pairs" value="2"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Matching area size</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<form class="uk-form-horizontal">
|
||||
<div class="cm-match-area left">
|
||||
<label class="uk-form-label" for="context-prev-words">Words left of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" type="number" name="context-prev-words" min="0" max="20" id="context-prev-words" placeholder="Prev words number" value="10"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-match-area right">
|
||||
<label class="uk-form-label" for="context-next-words">Words right of the match <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" type="number" name="context-next-words" min="0" max="20" id="context-next-words" placeholder="Next words number" value="5"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Text proccess</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<form class="uk-form-stacked">
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="stop-words-filter"><input id="stop-words-filter" class="uk-checkbox" type="checkbox"> Remove stop words <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="punctuation-filter"><input id="punctuation-filter" class="uk-checkbox" type="checkbox"> Remove punctuation <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="uk-accordion-title">Letter case</h6>
|
||||
<div class="uk-accordion-content">
|
||||
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<div class="uk-form-controls" id="letter-case-radio">
|
||||
<label><input class="uk-radio none" type="radio" name="letter-case" value="none" checked="checked"> As it is</label><br>
|
||||
<label><input class="uk-radio uppercase" type="radio" name="letter-case" value="uppercase"> UPPERCASE</label><br>
|
||||
<label><input class="uk-radio lowercase" type="radio" name="letter-case" value="lowercase"> lowercase</label>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="uk-flex uk-flex-center@m uk-flex-right@l uk-margin-top uk-margin-right cm-save-profile-step">
|
||||
<span class="uk-text-primary uk-text-middle uk-text-middle">Satisfied with the results?</span>
|
||||
<button id="next-button" class="uk-button uk-button-primary uk-margin-left">Save your profile</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="child2">
|
||||
<div class="cm-results-section">
|
||||
<header id="cm-results-section-header" class="uk-container uk-container-expand">
|
||||
<div class="cm-results-controls">
|
||||
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
|
||||
<div>
|
||||
<h4>Matching results <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
|
||||
</div>
|
||||
<div id="documents-section" class="uk-inline">
|
||||
<div id="documents-change-btn" class="uk-float-right" style="padding: 0;">
|
||||
<span id="docs-number" class="uk-text">0 documents uploaded</span>
|
||||
<span id="docs-more-btn" class="uk-margin-small-left" uk-icon="icon: more" style="display: none;"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button id="run-mining-btn" class="uk-button uk-button-primary" disabled>Apply rules</button>
|
||||
</div>
|
||||
<div class="cm-results-count-section">
|
||||
<div id="results-count">
|
||||
<span id="results-number" class="uk-text-primary uk-margin-right"></span>
|
||||
<span id="results-number-previous" class="cm-text-muted"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-header-hide-pannel"></div>
|
||||
</header>
|
||||
<div id="initial-docs-upload-form" class="cm-docs-selection-form uk-container uk-container-small">
|
||||
<h4>Load test documents <span class="cm-tooltip" uk-icon="icon: info" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom"></span></h4>
|
||||
<div class="uk-container uk-container-small uk-margin-medium-top">
|
||||
<div class="uk-text-center">
|
||||
<button id="egi-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test1 documents</button>
|
||||
<button id="rcuk-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test2 documents</button>
|
||||
<button id="arxiv-sample" class="uk-button uk-width-extend cm-main-button uk-margin-small">test3 documents</button>
|
||||
</div>
|
||||
<div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
|
||||
<div class="js-upload uk-placeholder cm-file-drop-area">
|
||||
<div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
|
||||
<div>
|
||||
<div class="cm-coloured-text">
|
||||
<span uk-icon="icon: cloud-upload"></span>
|
||||
<span class="uk-text-middle">Upload your documents</span>
|
||||
<span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="cm-label">JSON</span><span class="cm-label">PDF</span><span class="cm-label">TXT</span>
|
||||
<span class="uk-text uk-text-small">file types, maximum 10MB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div uk-form-custom>
|
||||
<input type="file" name="upload" id="docs-file-input" class="inputfile">
|
||||
<button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1" style="margin-left: 20px;">Choose file</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
|
||||
</div>
|
||||
</div>
|
||||
<div id="results-section" class="cm-results-rows" style="display: none;">
|
||||
<ul id="docs-results" uk-accordion="multiple: true">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cm-results-hide-pannel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
|
||||
<div id="wait-spinner-modal-center" class="uk-flex-top" esc-close="false" bg-close="false" uk-modal>
|
||||
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
|
||||
<p class="uk-text-center uk-text-middle uk-text-large">Working on it, please wait... <span uk-spinner></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/configure-profile.js" type="text/javascript"></script>
|
||||
{% end %}
|
||||
Loading…
Reference in New Issue