প্রাক বা পোস্ট প্রসেসিং ছাড়াই সিএসএসে ব্রেকপয়েন্টস.আইএমএল ফাইলে সংজ্ঞায়িত ব্রেকপয়েন্টগুলি ব্যবহার করার কোনও উপায় নেই। যেহেতু আমরা মূল স্টাইলিংয়ের জন্য প্রসেসর ব্যবহার করি না, তাই ব্রেকপয়েন্টগুলি এখনও সিএসএস ফাইলগুলিতে হার্ড কোডড। একটি কাস্টম থিমে আপনি গুলপ বা গ্রান্টের মতো সরঞ্জামগুলি ব্যবহার করতে মুক্ত এবং আপনার সিএসএস প্রজন্মের জন্য ব্রেকপয়েন্টস.আইএমএল ইনপুটটি তাত্ত্বিকভাবে ব্যবহার করা সম্ভব।
বর্তমানে ব্রেকপয়েন্টস.আইএমএল মূলত জাভাস্ক্রিপ্ট (জেএস) এর জন্য আকর্ষণীয়। উদাহরণস্বরূপ কোরটিতে টুলবার মডিউলটি দেখুন। ব্রেকআপপয়েন্ট তথ্যটি 'src / এলিমেন্ট / টুলবার.এফপি' তে 'ড্রপলসেটিংস' জেএস অবজেক্টে যুক্ত করা হয়েছে:
$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
$media_queries = array();
foreach ($breakpoints as $id => $breakpoint) {
$media_queries[$id] = $breakpoint->getMediaQuery();
}
$element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}
তারপরে জেএসে উপরের সংজ্ঞায়িত হিসাবে রান-টাইম সেটিংস পড়তে হবে।
var options = $.extend(
{
breakpoints: {
'toolbar.narrow': '',
'toolbar.standard': '',
'toolbar.wide': ''
}
},
drupalSettings.toolbar
);
পরে ব্রেক ইভেন্ট পয়েন্টে ইভেন্ট শ্রোতার যোগ করা হয় যাতে স্ক্রিনের আকার পরিবর্তিত হলে 'কিছু' করা যায়।
for (var label in options.breakpoints) {
if (options.breakpoints.hasOwnProperty(label)) {
var mq = options.breakpoints[label];
var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
}
}
পরিবর্তন ঘটলে ব্রেকআপপয়েন্টে বিভিন্ন পদক্ষেপ গ্রহণ করা যেতে পারে।
Drupal.toolbar = {
mediaQueryChangeHandler: function (model, label, mql) {
switch (label) {
case 'toolbar.narrow':
model.set({
isOriented: mql.matches,
isTrayToggleVisible: false
});
break;
case 'toolbar.standard':
// Logic
break;
case 'toolbar.wide':
// Logic
break;
default:
break;
}
}
};
দ্রষ্টব্য : কোড উদাহরণগুলি দ্রুপাল সরঞ্জামদণ্ড মডিউল থেকে নেওয়া হয়েছে এবং তা সরানো হয়েছে। অনুপ্রেরণা হিসাবে ব্যবহার করুন, কার্যকরী কোড হিসাবে নয়।
জেএস মিডিয়াকিউয়ার্সগুলি সাধারণভাবে ব্যবহার সম্পর্কে একটি ভাল ব্যাখ্যা এখানে পাওয়া যাবে: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/ টেস্টিং_মিডিয়া_কোয়ারী