[JS App] Домашно Advanced OOP - 4 Задача


5
4.Create a favorite sites bar
­The favorite sites bar should keep a set of urls and set of folders
­Folders have a title and set of urls
­Urls have a title and a url
­The favorite sites bar should have a functionality to display urls and folders
­If an url is clicked, it should be open in new tab in the browser
­Use Classical OOP with Class.create()

 

Имам обекти Url, Folder i FavoriteSiteBar. Във Folder-а подавам масив от Url-и, а във FavoriteSiteBar-а  масив от Url-и и един от  Folder-и. Тои после от своя страна ги прикача към дом дървото-Url-ите като линкове с текст title-то им и лин полето им за url, а папките като <p> елементи с текст техния title. Папките докато не се кликнат изглеждат просто като картинка(която е сложена като бекграунд посредством CSS) и име. При клик се добавят и линковете.

Задачка.




Отговори



2

И моето решение на задачата ЦЪК

Направих го да изглежда наистина като лента в браузъра, която съдържа отделни линкове и папки с линкове.

Сайтбара има функция за визуализиране на самостоятелните линкове, и самата папка трябва да има такава функция => папката наследява сайтбара и може да извиква функцията displayUrls() като й подава своите линкове. Тази функция събира всички линкове в един documentFragment и го връща като резултат.

Сайтбарът се визуализира в браузъра след извикване на функцията display() - която обхожда всички линкове и папки. Приема един параметър - елемента, в който искаме да се разположи сайтбара.

Самото разпъване и свиване на папките съм го направила с CSS

SOURCE


от pdrenovska (2196 точки)


0
Да ти върна услугата, като се цъкне на цък не се случва нищо само един сив фон със синя лента и празни елементи от Dom дървото.

от AsenVal (3487 точки)

0
Благодаря ти много :), не бях го преглеждала в другите браузъри. Проблемът идваше от функцията innerText(), която FireFox не поддържа. Замених я с textContent() и сега трябва да е ОК навсякъде. В IE не ми работи hover-a, та и там ще подлежи на ремонт :)

от pdrenovska (2196 точки)


2

Взел съм идеята с параграф и от колегата tankovski за папките, иначе нищо съществено като задача (дано да съм я изпълнил докрай де). Проверявам къде се е случило събитието(върху кои елемент), както сме правили, като сложим да се следи за събитие върху родителя и съответно давам block или inline-block;

https://github.com/Polichronov/AdvancedOOPJavascript/blob/master/SiteBar.js


от Al.polichronov (1567 точки)


3

И моето решение:

Demo

Ползвам requirejs за дефиниране на модули. Най-важният модул е oop.js, в който са дефинирани функциите са създаване на класове и обекти. Функциите ми се различават от тези от лекциите. Имам класове Bar, Folder, UrlFolder и Url наследяват ItemItem наследява от Base, а Barи Folder имплементират hasChildren.


от dsbonev (1234 точки)


3

Ето и моето решени: HTML и JS.

Имам 3 класа - Url, Folder и FavouriteSitesBar. Лентата си има публичен метод render(), който приема къде да се рендира съдържанието ѝ. Този метод вътрешно извиква частните методи за рендиране на папките и линкчетата. При hover папките се разгръщат и показват какви линкчета пазят в себе си.

Ако имате препоръки и съвети, моля споделете. :)


от vlad_karamfilov (4595 точки)