1. Store
1.1. Ý tưởng: Mình sẽ lưu các state vào store, sau đó lưu lại các function subscribekhi một state nào đó thay đổi Khi một state thay đổi: cập nhật giá trị vào state, trigger đến toàn bộ hàm đang subscribe state này
1.2. Các functions
1.2.1. setValue(key: string, value: any): undefined
1.2.1.1. Hàm để set value mới cho một state
1.2.2. getValue(key: string): any | undefined
1.2.2.1. Hàm để lấy giá trị một state
1.2.3. onChange(key: string, func: (value: any) => void): undefined
1.2.3.1. Hàm để subscribe một save thay đổi
1.3. Cơ chế hoạt động
1.3.1. Khi khởi tạo trương trình
1.3.1.1. Đọc toàn bộ state trong các modules
1.3.1.2. Assign toàn bộ state thành một kho lưu trữ các state
1.3.1.3. Khởi tạo vùng lưu chữ các function dựa trên các state
1.3.2. Khi onChange được gọi
1.3.2.1. Lưu function truyền vào vào kho lưu chữ tương ứng với state mong muốn lắng nghe
1.3.3. Khi getValue được gọi
1.3.3.1. Đơn giản là tìm đến state đó và emit giá trị ra
1.3.4. Khi setValue được gọi
1.3.4.1. Lưu giá trị vào state hiện tại
1.3.4.2. Tìm ra toàn bộ function đang subsribe và loop toàn bộ cũng như khởi tạo các function này với value mới
2. Luồng hoạt động
2.1. Quá trình khởi tạo
2.1.1. Render khung của editor
2.1.1.1. Loading
2.1.1.2. Header + topbar
2.1.1.3. Sidebar
2.1.2. Lấy dữ liệu
2.1.2.1. Lấy dữ liệu của shop hiện tại
2.1.2.1.1. Nếu không có shop thì chuyển hướng đến trang login
2.1.2.2. Lấy dữ liệu của page hiện tại đang edit
2.1.2.2.1. Nếu không có page thì chuyển hướng sang 404. - Có thể vào nhầm link - Có thể page đã bị xóa
2.1.2.3. Lấy dữ liệu snippets
2.1.2.3.1. Snippet base (dành cho tất cả khách hàng)
2.1.2.3.2. Snippet được cá nhân hóa theo từng khách - Khách có thể vào library để add thêm loại snippet này hoặc xóa đi
2.1.3. Gắn dữ liệu đã lấy được vào khung
2.1.3.1. Tên page
2.1.3.2. Link back về dashboard
2.1.3.3. Loại page
2.1.3.4. Link preview
2.1.3.5. Link view live
2.1.3.6. ....
2.1.4. Đợi page, shop load thành công. Dùng store để lắng nghe
2.1.5. Khởi tạo iframe
2.1.5.1. Load được element bên left sidebar
2.1.5.1.1. Tìm đến Row, Element, Module và khởi tạo
2.1.5.2. Kiểm tra xem nếu là trang product, collection... thì tự động thêm dữ liệu init nếu trang đang rỗng
2.1.6. Kiểm tra xem khách hàng có password không
2.1.7. Khởi tạo sidebar
2.1.7.1. Xem thêm mục bên dưới để hiểu rõ hơn
2.1.8. Khởi tạo library, onboarding, right click iframe, history....
2.1.9. Apply event vào các khu vực: Save, Publish, View live, On change drag
2.2. Quá trình bên left side bar
2.2.1. Kiểm tra màn hình để set kích thước là 260 hoặc 280
2.2.2. hàm: loadSnippets sẽ được gọi khi init
2.2.3. Đọc dữ liệu từ store nếu có thì tiếp tục. Nếu store chưa có giá trị thì đợi
2.2.4. Bắt đầu render snippet
2.2.4.1. Check các status
2.2.4.1.1. hide
2.2.4.1.2. beta
2.2.4.1.3. new
2.2.4.1.4. test
2.2.4.2. Render thành khối HTML hiển thị
2.2.4.3. Apply events cho các snippet
2.2.4.3.1. Khởi tạo sự kiện drag and drop
2.2.4.3.2. Bind một số events khác
2.3. Quá trình kẻo thả để thêm mới một snippet vào iframe
2.3.1. Khi render left side bar đã được apply events drag & drop
2.3.2. Drag không thể kéo những snippet có status là test
2.3.3. Gọi đến thư viện gfDraggable
2.3.3.1. Xem thêm hàm này bên dưới để hiêu rõ hơn
2.3.4. Stop drag
2.3.4.1. Kiểm tra xem snippet này có sử dụng thư viện gì không?
2.3.4.1.1. Nếu có sử dụng thư viện thì khởi tạo thư viện ấy
2.3.4.2. Gọi hàm hởi tạo Row, Element, Module dùng chung: HELPER.initMERfromSnippet
2.3.4.2.1. Row
2.3.4.2.2. Element
2.3.4.2.3. Module
2.3.4.2.4. Nếu kéo và List thì cần trigger cho List render lại -HELPER.flagListItemChange -HELPER.detectContentChange
2.3.4.2.5. Add vào history ( action: "add" )
2.3.4.2.6. refreshFrame
2.4. Quá trình render các thành phần: Row, Element, Module...
2.4.1. Row
2.4.1.1. Lấy toàn bộ dữ liệu của snippet: initWithSnippet()
2.4.1.1.1. Tạo vùng backup: HELPER.addContentBk()
2.4.1.2. Gọi hàm refresh()
2.4.1.2.1. Khởi tạo events applyEvents()
2.4.1.2.2. Khởi tạo css cho snippet runStyle()
2.4.1.2.3. Tìm các thành phần Row, Element, Module bên trong snippet này để khởi tạo
2.4.1.2.4. Append div: block-placeholder
2.4.2. Element
2.4.2.1. Lấy toàn bộ dữ liệu của snippet: initWithSnippet()
2.4.2.1.1. Tạo vùng backup: HELPER.addContentBk()
2.4.2.2. Gọi hàm refresh()
2.4.2.2.1. giống với Row
2.4.3. Module
2.4.3.1. Lấy toàn bộ dữ liệu của snippet: initWithSnippet()
2.4.3.1.1. Thêm id tất cả row, collums trong HTML
2.4.3.1.2. Tạo vùng backup: HELPER.addContentBk()
2.4.3.2. Gọi hàm refresh()
2.4.3.2.1. Phần chia kiểu render khác nhau
2.4.3.2.2. Product, Thành phần List, Collection, Article
2.4.3.2.3. Module bình thường
2.4.3.2.4. Nếu là dynamic thì set trạng thái Dynamic
2.5. Thư viện gfDraggable hoạt động như nào
2.5.1. Khi bắt đầu việc kéo thả thì sự kiện: drag-active được thực hiện
2.5.1.1. Quá trình này sẽ cập nhật toàn bộ div: block-placeholders trong chương trình updatePlaceHolders()
2.5.1.1.1. Hàm này giúp cache lại toàn bộ vùng có thể thả trong iframe. Việc này giúp tăng tốc độ tìm kiếm cũng như giúp quá trình giả lập vị trí tốt hơn
2.5.1.2. Đóng công việc right click hiện tại gfcontextmenu
2.5.1.3. Trigger ra các hàm gọi nó là start() drag
2.5.1.4. Add vào history (action: "move", events: "cut")
2.5.1.5. Khởi tạo thành phần drag với từng loại Row, Element, Module initHelper()
2.5.1.5.1. Helper là thành phần đang được di chuyển liên tục
2.5.1.6. Khởi tạo vùng thả giả lập bên trên lớp overlay iframe initDragHidden()
2.5.1.7. Bật lớp phủ overlay bên trên iframe showVisualFrame()
2.5.1.8. Gắn cờ vào gryffeditor là đang drag
2.5.1.9. Bắt đầu lắng nghe sự kiện
2.5.1.9.1. $gfLeftSideBar
2.5.1.9.2. $gryffBody
2.5.1.9.3. jQuery('body')
2.5.1.10. Nếu đang di chuyển chưa thả. Mousemove
2.5.1.10.1. Liên tục cập nhật Helper theo vị trí hiện tại của chuột updateHelper()
2.5.1.10.2. Tìm ra vị trí có thể thả gần nhất findNearXY()
2.5.1.11. Khi thả ra. Mouseup
2.5.1.11.1. Clear cờ đang drag
2.5.1.11.2. Trigger đã stop drag với vị trí tìm được
2.5.1.12. Các công việc ở hàm manageStop()
2.5.1.12.1. Append thành phần kéo thả vào bên dưới vị trí tìm ra
2.5.1.12.2. Refesh một số module cần refesh
2.5.1.12.3. Kiểm tra kẻo thả ra vào List
2.6. Quá trình Open Settings: openRowSettings() openElementSettings() openModuleSettings()
2.6.1. Tổng quan
2.6.1.1. Đếm số lượng nếu trên 3 lần gọi hàm cùng 1 đối tượng thì hightlight leftsidebar
2.6.1.2. Render các fields trong settings $settingsPanel.gfFormRender()
2.6.1.3. Khởi tạo đối tượng gfTabs bên leftsidebar
2.6.1.3.1. Có 2 sự kiên quan trọng bên dưới
2.6.1.3.2. onSettingsChanged()
2.6.1.3.3. onTabClick()
2.6.1.4. Tự động bật tab 1: là tab settings
2.6.2. Row
2.6.2.1. onSettingsChanged, saveSettings
2.6.2.1.1. Đọc dữ liệu từ các control hiện tại thông quá id đến được ánh xạ bằng name ở trong settings.
2.6.2.1.2. Tìm ra class cần xóa, class cần thêm
2.6.2.1.3. Gắn cờ nếu nằm trong List
2.6.2.2. onTabClick
2.6.2.2.1. Set value vào các control theo name trong settings
2.6.3. Element
2.6.3.1. onSettingsChanged, saveSettings
2.6.3.1.1. Lấy style hiện tại của element
2.6.3.1.2. Đọc dữ liệu từ các control hiện tại thông quá id đến được ánh xạ bằng name ở trong settings.
2.6.3.1.3. Thay đổi giá trị Style
2.6.3.1.4. Gắn cờ nếu nằm trong List
2.6.3.2. onTabClick
2.6.3.2.1. Lấy value trong style ra
2.6.3.2.2. Set value vào các control theo name trong settings
2.6.4. Module
2.6.4.1. onSettingsChanged, saveSettings
2.6.4.1.1. save dữ liệu data vào divBkContent
2.6.4.1.2. Gọi hàm writeStyle()
2.6.4.1.3. Gắn cờ nếu nằm trong List
2.6.4.2. onTabClick
2.6.4.2.1. gọi hàm readStyle()
2.7. Quá trình thay đổi value một snippet
2.7.1. Control
2.7.1.1. Với mỗi một control thì đều cần có các sự kiện
2.7.1.1.1. on("value-change")
2.7.1.1.2. trigger("input-change")
2.7.1.1.3. trigger("history-change")
2.7.2. History
2.7.2.1. khi nhận được sự kiện history-change
2.7.2.1.1. gọi đến hàm addHistory() với type: setting hoặc design-option
2.7.2.1.2. Lấy bản dữ liệu đã được capture ra và lưu vào history
2.7.2.1.3. captrue bản setting hiện tại
2.7.3. System
2.7.3.1. Khi nhận sự kiện input-change
2.7.3.1.1. Nếu là tab design thì render lại CSS
2.7.3.1.2. Row
2.7.3.1.3. Element
2.7.3.1.4. Module
2.8. Quá trình edit code HTML, CSS, JAVASCRIPT
2.8.1. Khi right click gọi editor code
2.8.2. Gọi đến hàm tương ứng elementTemplate() moduleTemplate() rowCSS()
2.8.2.1. Row
2.8.2.1.1. CSS
2.8.2.2. Element
2.8.2.2.1. HTML
2.8.2.2.2. CSS
2.8.2.3. Module
2.8.2.3.1. HTML / CSS / Script
2.9. Quá trình publish
2.9.1. Hàm savePage() được gọi
2.9.2. Khóa các nút
2.9.3. Get metafields
2.9.4. Get content trong Editor getEditorContent() data = { html, bkHtml, style, script, libs, fonts }
2.9.4.1. Loop toàn bộ element để exportMe() theo tùy loại MER
2.9.4.2. Fix một số case đặc biệt
2.9.4.3. Tạo lib fonts bằng việc tìm tất cả font-family trong CSS
2.9.4.4. Format src image với lazyload
2.9.4.5. Cập nhật schema với Article và Product
2.9.5. Kiểm tra chia nhỏ content thành các module để server chia file trên shopify (fix: 256kb)
2.9.6. Kiểm tra có sử dụng lazyload
2.9.7. Gửi dữ liệu lên server
2.9.7.1. Nếu mất session thì tự động tạo lại
2.9.7.2. Nếu hoàn thành thì bỏ lock và hiển thị modal view live
2.9.8. Cập nhật đếm khách hàng sử dụng snippet