benotman's blog

MDN 6/24/2015

Today I started with the last task I described in my previous blog which is hiding svg elements. I ended up doing another task which I postponed for a while. I was working on id assignment to svg files and svg elements. MDN includes diagrams in svg format and connects svg elements in a diagram to other svg elements in other diagrams as well as content nodes. SVG files (diagrams) included in the site and their elements should have a fixed id assigned when a diagram is first uploaded into the site. These ids will be used in connection records. The coding I did today focused on this requirement.

MDN 6/23/2015

I was working on the issue I described in my 6/18 post. The issue is about using ajax in Drupal to load a node data or a list of links to nodes. Previously I used to show data retrieved using ajax in another block created by my module. I place this block in the content region. I tried to use some code from another guy to send the dynamically retrieved data to the content region but it did not work. Finally I modified my code to do that myself which is displaying the ajax data in the content region instead of my additional block. It worked :). The exception is when I show a list of links to nodes; when a user clicks on those links the node is not loaded using ajax and I think that is fine.

The second thing I did is cleaning an svg containing a huge diagram that I want to use. I removed grouping elements and some additional rectangles. It took about two hours to do that.

I started working on another task which is hiding SVG elements when loading some SVGs. Sometimes a user would like to draw svg elements on top of an image that contains an interesting diagram or info-graphics. I need to hide those elements when loading the page and show them when I need to.

MDN 6/21

I was able to get the ajax and json to work in Drupal after some struggle due to conflicting documentations. I use ajax in hover event to retrieve connections of the current element from the database. I get the result in json and iterate to highlight elements in other diagrams. hover functionality is almost done (at least the hard part is done). Now I am thinking of what to to do next, I have some tasks and I need to prioritize.

MDN 6/20/2015

I was working on two things today. I used the Drupal theme function to theme a list of links. I took longer than anticipated but I am done with this. The second thing is the hover functionality which highlights related elements in other diagrams when a user hover the mouse pointer on an element in a diagram. I am still working on this.

MDN 6/18/2015

I finished loading connections and nodes from the database. Now when a user clicks a diagram element (shape) I get the diagram (svg) id and the element (shape) id and send that to my module in the backend. I query the database to retrieve relevant connections that indicate the nodes related to the clicked element in the diagram. If it is one node I load it in the result block. If multiple nodes are retrieved I display a list of links in the result block. I call this operation diagram-to-content query where a user click/select diagram element to retrieve related nodes.

The second thing I was investigating is how to show the result (a node or a list of nodes). As I described, currently I have a result block. I use ajax to send some parameters to a hook_menu code which returns the result in the result block. The result block is located in the content region. The problem is that the main_content_block is also located in the content region which is confusing (having stuff in the main_content_block and stuff in my result block). The main_content_block cannot be removed from the content region. I tried using the regular (without ajax) to call the hook_menu; using this approach the result is displayed in the main_content_block instead of the result block. However, this approach is slower and in each page load I loose any highlighting the user has made in the diagrams (in each page/node load the diagrams are re-rendered).

MDN 6/17/2015

I am still learning and working on the database part which includes retrieving and processing nodes and connections. I read/reviewed a bit about databases, ajax, and json in Drupal. I changed some code to be generic by including current SVG id and current element id; previously I had some snippets that included hard coded numbers for testing and exploring the system. In general I was working here and there without finishing a specific task.

MDN 6/16/2015

Today I switched from frontend to backend; I was working on retrieving connections from the Drupal database. Connections define a relationship between a diagram element and another diagram element or between diagram element and a Drupal node. I had to decide whether to use node or entity references. I decided not to use them since diagram elements are not content (not defined as content types). I am using my own table to store connections. I am using connections currently to know which nodes to retrieve when a user clicks on a diagram element. I think I will be done with that soon.

MDN 6/14/2015

Not much done today, I was busy with other things. The only thing I did is thinking about the next iteration of development. In the last two weeks I was mostly trying to get things to work in Drupal. Now it is time to refine and clean the code as I have a clearer picture of how MDN would look like in few weeks.

MDN 6/13/2015

I think I am done with the subtheme for now. I can change it when I need to since I know its structure now. I am working on changing the size of SVGs (diagrams). It seems CSS alone cannot do the job. I have to work with SVG viewport and viewbox properties.

MDN 6/12/2015

I understood the structure of bartik theme and its css files (specially the layout css). Currently I am working with the css to have an appropriate layout for displaying MDN. Also I discussed with an experienced colleague about displaying (navigating to) nodes and how he does that in a different way. The way I am doing this is using ajax which is good but it does not reflect navigation in browsing history. This means when a user clicks on a diagram and navigate to a node and repeat the process several times, he cannot use the back button to go back. I had to find a workaround and I found out that I can play with browser history object to do that.

I will probably have a good layout by tomorrow. I will load two diagrams and work on finishing the three different browsing styles which are: - diagram to content: allows users to click on a diagram element (shape) to load related nodes. - diagram to diagram: allows users to hover the mouse on a diagram element to see related elements in other diagram(s) in a highlighted style. - content to diagram: allows the user to see some highlighted elements in the diagrams that are related to the current node(page) or recently visited nodes.

Syndicate content