/*! 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;
});
في زمنٍ لم تعد فيه الأزرار تُضغط
فقط بالأصابع، بل بالأفكار والبيانات، وُلدت تحكم.
لسنا مجرد مجلة تقنية… نحن مرآة لعصر تغيّرت فيه موازين السيطرة.
نرصد كيف أصبحت التكنولوجيا شريكًا في القرار، لاعبًا في الاقتصاد، ومرشدًا للإنسان — وأحيانًا سيدًا عليه.
“تحكم” تسأل الأسئلة التي يتجنبها الآخرون:
هل لا زلنا نمسك بزمام التكنولوجيا؟
أم أن الخوارزميات صارت تمسك بنا، وتوجّه اختياراتنا، مشاعرنا، وحتى وعينا؟
في صفحاتنا، لا نُجامل الثورة الرقمية… بل نفكّكها، نُحللها، ونطرحها على طاولة النقاش.
من الذكاء الاصطناعي إلى السيادة الرقمية، من الخصوصية إلى تحوّل الإنسان نفسه…
“تحكم” تقف على الخط الفاصل بين الإنسان والآلة، وتُنيره.
نحن لا نُخبرك فقط بما يحدث، بل لماذا يحدث، ولمن، وعلى حساب من.
تحكم… لأنّ من يملك المعلومة، يملك السيطرة.
رسالة المجلة:
نسعى في تحكم إلى تقديم محتوى تقني معمّق، تحليلي ونقدي، يُعنى بكشف الأبعاد الخفية للثورة الرقمية وتأثيراتها على الإنسان والمجتمع. نرصد تحوّلات السيطرة في عصر البيانات، ونُسلّط الضوء على تداخل التكنولوجيا بالقرار والسيادة والمعرفة، من دون تزييف أو انبهار أعمى. هدفنا هو تمكين القارئ من الفهم الواعي، والاختيار المستقل، في زمن أصبحت فيه الخوارزميات طرفًا خفيًا في المعادلة.
رؤية المجلة:
أن تكون تحكم المرجع العربي الأول في تحليل وتفكيك العلاقة بين الإنسان والتكنولوجيا، والمنصة التي تصنع الوعي الرقمي الحر، وتقود النقاشات الجريئة حول مستقبلنا المشترك مع الذكاء الاصطناعي والتحوّلات الرقمية. نطمح إلى بناء جيل يُمسك بزمام التقنية… لا العكس.
الأقسام:
قسم تفاعل..يركز على تأثير التكنولوجيا على الحياة الاجتماعية و التقنيات الحديثة.
يهتم بدراسة كيف غيرت التقنيات الحديثة أساليب التواصل، وأنماط العمل، و اشكال المدن ، وحتى في ميادين القتال.
قسم خدمة..في مجال التكنولوجيا يركز على تطوير البرمجيات والخدمات الرقمية التي تُستخدم لتسهيل حياة الأفراد وتحسين أداء الأعمال.
قسم معرفة..تركز في مجال التكنولوجيا لتحسين الخدمات الصحية وتطوير العملية التعليمية. في الصحة، يشمل ذلك تطبيقات التشخيص عن بُعد، والذكاء الاصطناعي في التشخيص والعلاج. أما في التعليم، فيركز على التعلم الإلكتروني، الواقع الافتراضي، وأنظمة إدارة التعلم التي تسهم في تحسين تجربة الطالب والمعلم على حد سواء.
قسم خطوة..في مجال التكنولوجيا يهتم بدراسة تأثير التكنولوجيا على الاقتصاد، وتوظيفها في إنشاء وتطوير المشاريع الناشئة والصغيرة. يُركز هذا القسم على استخدام الأدوات الرقمية لتحسين العمليات الاقتصادية، مثل التجارة الإلكترونية، والتحول الرقمي في الأعمال.
قسم الميديا..خاص بعرض التقارير المصورة و الحوارات الخاصة بالتكنولوجيا.
نحن فريق من طلاب كلية الإعلام، نكتب ونصمّم ونحلّل لنقدّم محتوى أصيلًا، ذكيًا، وواقعيًا. نختار موضوعاتنا بعناية، ونحرص على أن يكون كل ملف نطرحه مساحة للفهم والتساؤل، لا التكرار والإبهار الزائف.
فريق التحرير:
د.أمل منير رئيس التحرير
د.أمنية خالد نائب رئيس التحرير
المحررين:
إيريني أنطون
شروق عارف
مريم سمير
ميرنا اشرف
فرح سمير