/*! LazyLoad and ViewPort Checker */
(function(root, factory) {
// AMD
if (typeof define === 'function' && define.amd) {
define(function() {
return factory(root);
});
} else if (typeof exports === 'object') {
// Node.js or CommonJS
module.exports = factory;
} else {
// Browser globals
root.emergence = factory(root);
}
})(this, function(root) {
'use strict';
var emergence = {};
var poll, container, throttle, handheld, elemCushion, offsetTop, offsetRight, offsetBottom, offsetLeft;
var callback = function() {};
// Browser feature test to include any browser APIs required for >= IE8
// @return {bool} true if supported, otherwise false
var cutsTheMustard = function() {
return 'querySelectorAll' in document ? true : false;
};
// Checks if user is on a handheld
// @return {bool} true if it's a handheld, otherwise false
var isHandheld = function() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|playbook|silk/i.test(
navigator.userAgent
);
};
// Get the offset of a DOM Element
// @param {DOMElement} elem the container or element
// @return {int} the top, left, width and height values in pixels
var getElemOffset = function(elem) {
// Width and height of container or element
var w = elem.offsetWidth;
var h = elem.offsetHeight;
// Default top and left position of container or element
var topPos = 0;
var leftPos = 0;
// Get total distance of container or element to document's top and left origin
do {
if (!isNaN(elem.offsetTop)) {
topPos += elem.offsetTop;
}
if (!isNaN(elem.offsetLeft)) {
leftPos += elem.offsetLeft;
}
} while ((elem = elem.offsetParent) !== null);
// Return dimensions and position
return {
width: w,
height: h,
top: topPos,
left: leftPos
};
};
// Get the custom container size if provided, otherwise the documents
// @return {int} the width and height in pixels
var getContainerSize = function(container) {
var w, h;
// If custom container is provided in options
// Else use window or document
if (container !== window) {
w = container.clientWidth;
h = container.clientHeight;
} else {
w = window.innerWidth || document.documentElement.clientWidth;
h = window.innerHeight || document.documentElement.clientHeight;
}
return {
width: w,
height: h
};
};
// Get the X and Y scroll positions
// @return {int} the X and Y values in pixels
var getContainerScroll = function(container) {
// If custom container is provided in options
// Else use window or document
if (container !== window) {
return {
x: container.scrollLeft + getElemOffset(container).left,
y: container.scrollTop + getElemOffset(container).top
};
} else {
return {
x: window.pageXOffset || document.documentElement.scrollLeft,
y: window.pageYOffset || document.documentElement.scrollTop
};
}
};
// Check if element's closest parent is hidden (display: none)
// @param {DOMElement} elem the element
// @return {bool} true if hidden, false otherwise
var isHidden = function(elem) {
return elem.offsetParent === null;
};
// Check if element is visible
// @param {DOMElement} elem the element
var isVisible = function(elem) {
// Discontinue if element's closest parent is hidden
if (isHidden(elem)) {
return false;
}
// Get information from element and container
var elemOffset = getElemOffset(elem);
var containerSize = getContainerSize(container);
var containerScroll = getContainerScroll(container);
// Determine element size
var elemWidth = elemOffset.width;
var elemHeight = elemOffset.height;
// Determine element position from rect points
var elemTop = elemOffset.top;
var elemLeft = elemOffset.left;
var elemBottom = elemTop + elemHeight;
var elemRight = elemLeft + elemWidth;
// Determine boundaries of container and element
// @return {bool} true if element is found within boundaries, otherwise false
var checkBoundaries = function() {
// Determine element boundaries including custom cushion
var eTop = elemTop + elemHeight * elemCushion;
//var eRight = elemRight - elemWidth * elemCushion;
var eBottom = elemBottom - elemHeight * elemCushion;
//var eLeft = elemLeft + elemWidth * elemCushion;
// Determine container boundaries including custom offset
var cTop = containerScroll.y + offsetTop;
//var cRight = containerScroll.x - offsetRight + containerSize.width;
var cBottom = containerScroll.y - offsetBottom + containerSize.height;
//var cLeft = containerScroll.x + offsetLeft;
// return (eTop < cBottom && eBottom > cTop && eLeft < cRight && eRight > cLeft);
return (eTop < cBottom && eBottom > cTop );
};
return checkBoundaries();
};
// Engage emergence through a throttling method for performance
var emergenceThrottle = function() {
if (!!poll) {
return;
}
clearTimeout(poll);
poll = setTimeout(function() {
emergence.engage();
poll = null;
}, throttle);
};
// Initialize emergence with options, do feature test and create event listeners
// @param {Object} options Custom settings
emergence.init = function(options) {
options = options || {};
// Function to return an integer
var optionInt = function(option, fallback) {
return parseInt(option || fallback, 10);
};
// Function to return a floating point number
var optionFloat = function(option, fallback) {
return parseFloat(option || fallback);
};
// Default options
container = options.container || window; // window or document by default
handheld = typeof options.handheld !== 'undefined' ? options.handheld : true; // true by default
throttle = optionInt(options.throttle, 250); // 250 by default
elemCushion = optionFloat(options.elemCushion, 0.1); // 0.15 by default
offsetTop = optionInt(options.offsetTop, 0); // 0 by default
offsetRight = optionInt(options.offsetRight, 0); // 0 by default
offsetBottom = optionInt(options.offsetBottom, 0); // 0 by default
offsetLeft = optionInt(options.offsetLeft, 0); // 0 by default
callback = options.callback || callback;
// If browser doesn't pass feature test
if (!cutsTheMustard()) {
// Provide message in console.log
console.log('Emergence.js is not supported in this browser.');
}
// If this is handheld device AND handheld option is true
// OR not a handheld device
else if ((isHandheld() && handheld) || !isHandheld()) {
// Add '.emergence' class to document for conditional CSS
// document.documentElement.className += ' emergence'; // No usage for this now // TieLabs
// If browser supports addEventListener
// Else use attachEvent
if (window.addEventListener) {
// Add event listeners for load, scroll and resize events
window.addEventListener('load', emergenceThrottle, false);
container.addEventListener('scroll', emergenceThrottle, false);
container.addEventListener('resize', emergenceThrottle, false);
} else {
// Attach events for legacy load method, scroll and resize events
document.attachEvent('onreadystatechange', function() {
if (document.readyState === 'complete') { emergenceThrottle(); }
});
container.attachEvent('onscroll', emergenceThrottle);
container.attachEvent('onresize', emergenceThrottle);
}
}
};
// Engage emergence
emergence.engage = function() {
if( tie.lazyload ){ // to be added
// Images ------
if ('loading' in HTMLImageElement.prototype) {
//console.log( 'Native LazyLoad' );
}
else {
var nodes = document.querySelectorAll('[data-src]');
var length = nodes.length;
var elem;
// Loop through objects with data-emergence attribute
for (var i = 0; i < length; i++) {
elem = nodes[i];
// If element is visible
if (isVisible(elem)) {
elem.setAttribute('src', elem.getAttribute('data-src') );
elem.removeAttribute('data-src');
// Hack to repaint attribute in IE8
//elem.className += ' lazy-done';
// Callback for when element is visible
callback(elem, 'tie_img_visible');
if( jQuery.fn.masonry ){
jQuery( '#masonry-grid' ).masonry( 'layout' );
}
}
}
}
// BG ------
var nodes = document.querySelectorAll('[data-lazy-bg]');
var bgLength = nodes.length;
var elem;
// Loop through objects with data-emergence attribute
for (var i = 0; i < bgLength; i++) {
elem = nodes[i];
// If element is visible
if (isVisible(elem)) {
var currentStyles = '';
if( elem.getAttribute( 'style' ) !== null ){
currentStyles = elem.getAttribute( 'style' );
}
elem.setAttribute( 'style', currentStyles + 'background-image:url(' + elem.getAttribute('data-lazy-bg') + ')' );
elem.removeAttribute('data-lazy-bg');
// Hack to repaint attribute in IE8
//elem.className = elem.className;
// Callback for when element is visible
callback(elem, 'tie_bg_visible');
}
}
}
// Lets check if Taqyeem plugin is active
if( tie.is_taqyeem_active ){
// Pie
var nodes = document.querySelectorAll('[data-lazy-pie]');
var piLength = nodes.length;
var elem;
// Loop through objects with data-emergence attribute
for (var i = 0; i < piLength; i++) {
elem = nodes[i];
// If element is visible
if (isVisible(elem)) {
var pctVal = parseInt( elem.getAttribute('data-pct') ),
$circle = elem.getElementsByClassName('circle_bar')[0],
pctNew = ((100-pctVal)/100) * Math.PI*(19*2); // 19 == $circle.getAttribute('r')
$circle.setAttribute('style', 'stroke-dashoffset:'+ pctNew +'px' );
elem.removeAttribute('data-lazy-pie');
// Hack to repaint attribute in IE8
//elem.className = elem.className;
// Callback for when element is visible
callback(elem, 'tie_pie_visible');
}
}
// Star
var nodes = document.querySelectorAll('[data-lazy-percent]');
var starLength = nodes.length;
var elem;
// Loop through objects with data-emergence attribute
for (var i = 0; i < starLength; i++) {
elem = nodes[i];
// If element is visible
if (isVisible(elem)) {
elem.setAttribute('style', 'width:'+ elem.getAttribute('data-rate-val') );
elem.removeAttribute('data-lazy-percent');
// Hack to repaint attribute in IE8
//elem.className = elem.className;
// Callback for when element is visible
callback(elem, 'tie_rate_visible');
}
}
} // Taqyeem check
// If no data-emergence attributes are found
// Disengage emergence
if ( ! length && ! piLength && ! starLength && ! bgLength ) {
emergence.disengage();
}
};
// Disengage emergence
emergence.disengage = function() {
// If browser supports removeEventListener
// Else use detachEvent
if (window.removeEventListener) {
// Remove event listeners scroll and resize events
container.removeEventListener('scroll', emergenceThrottle, false);
container.removeEventListener('resize', emergenceThrottle, false);
} else {
// Detach scroll and resize events
container.detachEvent('onscroll', emergenceThrottle);
container.detachEvent('onresize', emergenceThrottle);
}
// Clear timeout from throttle
clearTimeout(poll);
};
return emergence;
});
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال